@extends('admin.layout.app')

@section('main')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">Invoice</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Utility</a></li>
                                <li class="breadcrumb-item active">Invoice</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <div class="row">
                                <div class="col-12">
                                    <div class="invoice-title">
                                        <h4 class="float-end font-size-16"><strong>Order # {{ $order->id }}</strong></h4>
                                        <h3>
                                            <img src="https://www.tamstoa.co.tz/public/uploads/logo.png" alt="logo"
                                                height="24" />
                                        </h3>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-6">
                                            <address>
                                                <strong>Billed To:</strong><br>
                                                {{ $order->cname }}<br>
                                                {{ $order->address }}<br>
                                                {{ $order->phone }}<br>
                                                {{ $order->email }}
                                            </address>
                                        </div>
                                        <div class="col-6 text-end">
                                            {{-- <address>
                                                <strong>Shipped To:</strong><br>
                                                Kenny Rigdon<br>
                                                1234 Main<br>
                                                Apt. 4B<br>
                                                Springfield, ST 54321
                                            </address> --}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 mt-4">
                                            <address>
                                                <strong>Payment Methods:</strong><br>
                                                Mobile pay : {{ url('') }}/flutterwave/payment/{{ $order->ordernum }}
                                                <br>
                                                <br>
                                                Bank (NMB) <br>

                                                @if ($nbm_invoice)
                                                    Control Number : {{ $nbm_invoice->reference }}
                                                @else
                                                    <a class="btn btn-primary waves-effect waves-light ms-2"
                                                        data-id="{{ $order->ordernum }}" id="create_bank_invoice">Create
                                                        Bank Control Number</a>
                                                @endif

                                            </address>
                                        </div>
                                        <div class="col-6 mt-4 text-end">
                                            <address>
                                                <strong>Order Date:</strong><br>
                                                {{ $order->date_added }}<br><br>
                                            </address>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <div>
                                        <div class="p-2">
                                            <h3 class="font-size-16"><strong>Order summary</strong></h3>
                                        </div>
                                        <div class="">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <td><strong>Item</strong></td>
                                                            <td class="text-center"><strong>Price</strong></td>
                                                            <td class="text-center"><strong>Quantity</strong>
                                                            </td>
                                                            <td class="text-end"><strong>Totals</strong></td>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- foreach ($order->lineItems as $line) or some such thing here -->
                                                        <tr>
                                                            <td> {{ $order->stitle }}</td>
                                                            <td class="text-center">{{ $order->amount }} TSH</td>
                                                            <td class="text-center">1</td>
                                                            <td class="text-end">{{ $order->amount }} TSH</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="d-print-none">
                                                <div class="float-end">
                                                    <a href="javascript:window.print()"
                                                        class="btn btn-success waves-effect waves-light"><i
                                                            class="fa fa-print"></i></a>
                                                    <a href="#"
                                                        class="btn btn-primary waves-effect waves-light ms-2">Send</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div> <!-- end row -->

                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->

        </div> <!-- container-fluid -->
    </div>

    {{-- Script for render data on table --}}
    <script type="text/javascript">
        $(function() {
            $('.orders-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.all_orders') }}",
                columns: [{
                        data: 'SN',
                        name: 'SN'
                    },
                    {
                        data: 'ordernum',
                        name: 'ordernum'
                    },
                    {
                        data: 'cname',
                        name: 'cname'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });


            /*------------------------------------------
             --------------------------------------------
             information about trip id
             --------------------------------------------
             --------------------------------------------*/




            $('body').on('click', '#create_bank_invoice', function(event) {
                event.preventDefault(); // Prevent the default action (if any)

                var id = $(this).data('id');
                console.log(id);

                // Disable the button to prevent multiple clicks
                $(this).prop('disabled', true);

                fetch("/nmb/create/invoice/" + id, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json',
                        },
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data.number);

                        location.reload();
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        // Re-enable the button in case of an error
                        $(this).prop('disabled', false);
                    });
            });



        });
    </script>
@endsection