@extends('backend.layouts.app')
@section('main')
@section('title', 'Checkout')

    <!-- Main page content-->
    <div class="container-xl">
        <div class="card invoice">
            <div class="card-header p-4 p-md-5 border-bottom-0">
                <div class="row justify-content-between align-items-center">
                    <div class="col-12 col-lg-auto mb-5 mb-lg-0 text-center text-lg-start">
                        <img src="{{asset('assets/starbill/img/logo-black.png')}}" style="width:250px" class="dark-logo" alt="Logo-Dark" />
                        <img src="{{asset('assets/starbill/img/logo-white.png')}}"  style="width:250px" class="light-logo" alt="Logo-light" />
              
                    </div>
                    <div class="col-12 col-lg-auto text-center text-lg-end">
                        <!-- Invoice details-->
                        <div class="h4">ORDER LISENSI <br>#{{ auth()->user()->username }}</div>
                        {{ \Carbon\Carbon::now()->format('d/m/Y') }}
                    </div>
                </div>
            </div>
            <div class="card-body p-4 p-md-5">
                <!-- Invoice table-->
                <div class="table-responsive">
                    <table id="myTable" class="table table-borderless mb-0">
                        <thead class="border-bottom">
                            <tr class=" text-uppercase text-muted">
                                <th scope="col">Description</th>
                                <th class="text-end" scope="col">Qty</th>
                                <th class="text-end" scope="col">Price</th>
                                <th class="text-end" scope="col">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Invoice item 1-->
                            <tr class="border-bottom">
                                <td>
                                    <div class="fw-bold">Starbill {{ $license->name }} Monthly</div>
                                    <div class=" text-muted d-none d-md-block">Unlimited NAS /
                                        {{ number_format($license->limit_pppoe, 0, '.', '.') }} PPPoE Users /
                                        {{ number_format($license->limit_hs, 0, '.', '.') }} Hotspot Users</div>
                                </td>
                                <td class="text-end fw-bold">1</td>
                                <td class="text-end fw-bold">Rp{{ number_format($license->price, 0, '.', '.') }}</td>
                                <td class="text-end fw-bold">Rp{{ number_format($license->price, 0, '.', '.') }}</td>
                            </tr>
                            <!-- Invoice item 3-->
                            {{-- <tr class="border-bottom">
                                    <td>
                                        <div class="fw-bold">Setup Fee</div>
                                        <div class=" text-muted d-none d-md-block">A fully coded set of UI resources for creating a comprehensive web application</div>
                                    </td>
                                    <td class="text-end fw-bold">1</td>
                                    <td class="text-end fw-bold">0</td>
                                    <td class="text-end fw-bold">$500.00</td>
                                </tr>
                                <!-- Invoice subtotal--> --}}
                            <tr>
                                <td class="text-end pb-0" colspan="3">
                                    <div class="text-uppercase  fw-700 text-muted">Subtotal:</div>
                                </td>
                                <td class="text-end pb-0">
                                    <div class="h5 mb-0">Rp{{ number_format($license->price, 0, '.', '.') }}</div>
                                </td>
                            </tr>
                            <!-- Invoice tax column-->
                            <tr>
                                <td class="text-end pb-0" colspan="3">
                                    <div class="text-uppercase  fw-700 text-muted">PPN (0%):</div>
                                </td>
                                <td class="text-end pb-0">
                                    <div class="h5 mb-0">Rp0</div>
                                </td>
                            </tr>
                            <!-- Invoice total-->
                            <tr>
                                <td class="text-end pb-0" colspan="3">
                                    <div class="text-uppercase  fw-700 text-muted">Total:</div>
                                </td>
                                <td class="text-end pb-0">
                                    <div class="h5 mb-0 fw-700">Rp{{ number_format($license->price, 0, '.', '.') }}
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-end pb-0" colspan="3">
                                    <div class="text-uppercase  fw-700 text-muted"></div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <span class="float-end mt-4"><button data-id="{{ request()->segment(2) }}"
                        class="btn btn-primary" id="order"><b>CHECKOUT SEKARANG</b></button>
                    </span>

                </div>
            </div>
            <div class="card-footer p-4 p-lg-5 border-top-0">
                <div class="row">
                    <div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
                        <!-- Invoice - sent to info-->
                        <div class=" text-muted text-uppercase fw-700 mb-2">To</div>
                        <div class="h6 mb-1">{{ auth()->user()->name }}</div>
                        <div class="">{{ auth()->user()->username }}</div>
                        <div class="">{{ auth()->user()->email }}</div>
                        <div class="">{{ auth()->user()->whatsapp }}</div>
                    </div>
                    <div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
                        <!-- Invoice - sent from info-->
                        <div class=" text-muted text-uppercase fw-700 mb-2">From</div>
                        <div class="h6 mb-0">Starbill Radius</div>
                        <div class="">PT Mikrotiknesia Network Solution</div>
                        <div class="">hello@mikrotiknesia.com</div>
                        <div class="">085155112192</div>
                    </div>
                    <div class="col-lg-6">
                        <!-- Invoice - additional notes-->
                        <div class=" text-muted text-uppercase fw-700 mb-2">Note</div>
                        <div class=" mb-0">Payment is due 1 days after receipt of this invoice. Please make checks
                            or money orders out to your name, and include the invoice number in the memo. We appreciate
                            your business, and hope to be working with you again very soon!</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('scripts')
<script type="text/javascript">
    $('#order').on('click', function() {
        let license_id = $(this).data('id');
        $.ajax({
            url: `/order/${license_id}`,
            type: "GET",
            success: function(data) {
                Swal.fire({
                    title: "Konfirmasi Checkout",
                    icon: 'warning',
                    text: "Apakah Anda yakin ingin checkout license ini?",
                    showCancelButton: !0,
                    confirmButtonText: "Ya, Checkout",
                    cancelButtonText: "Batal",
                    reverseButtons: !0,
                }).then(function(result) {
                    if (result.isConfirmed) {
                        let id = license_id;
                        var data = {
                            'license_id': id,
                        }

                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $(
                                        'meta[name="csrf-token"]'
                                    )
                                    .attr('content')
                            }
                        });

                        // ajax proses
                        $.ajax({
                            url: `/user/order/${id}`,
                            type: "PUT",
                            cache: false,
                            data: data,
                            dataType: "json",

                            // tampilkan pesan Success

                            success: function(data) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: `${data.message}`,
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                                setTimeout(
                                    function() {
                                        window.location.href =
                                            `/order/${id}/pay`
                                    }, 1500);
                            },

                            error: function(err) {
                                $("#message").html(
                                    "Some Error Occurred!"
                                )
                            }

                        });
                    }
                });
            }
        });

    });
</script>
@endpush