@extends('admin.layouts.master')
@section('title', $page_title)

@section('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">Invoices List</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('admin.category.index') }}">Invoices</a></li>
                            <li class="breadcrumb-item active">Invoices List</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Invoices List</h5>
                    </div>
                    <div class="card-body">
                        <table id="my-datatable" class="display table table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Packer</th>
                                    <th>Order Number</th>
                                    <th>Status</th>
                                    <th>Total Amount</th>
                                    <th>Grand Total</th>
                                    <th>View Invoice</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($invoices as $invoice)
                                    <tr>
                                        <td>{{ $invoice->order->user->name ?? NULL }}</td>
                                        <td>
                                            {{-- @if ($invoice->order->packer->name != null) --}}
                                                {{ $invoice->order->packer->name ?? 'Not assigned yet!' }}
                                            {{-- @else --}}
                                                {{-- Not assigned yet --}}
                                            {{-- @endif --}}
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.order.details', $invoice->order->id) }}">{{ $invoice->order->order_number }}</a>
                                        </td>
                                        <td>
                                            @if ($invoice->order->status == 'pending')
                                                <span class="badge bg-warning text-dark-warning">Pending</span>
                                            @elseif($invoice->order->status == 'approved')
                                                <span class="badge bg-success text-dark-success"> Approved </span>
                                            @elseif($invoice->order->status == 'decline')
                                                <span class="badge bg-danger text-dark-danger"> Decline </span>
                                            @elseif($invoice->order->status == 'packing')
                                                <span class="badge bg-info text-dark-info"> Packing </span>
                                            @elseif($invoice->order->status == 'performa_invoice')
                                                <span class="badge bg-info text-dark-info"> Performa Invoice </span>
                                            @elseif($invoice->order->status == 'invoice_review')
                                                <span class="badge bg-info text-dark-info"> Invoice Review </span>
                                            @elseif($invoice->order->status == 'delivered')
                                                <span class="badge bg-success text-dark-success"> Delivered </span>
                                            @elseif($invoice->order->status == 'cancelled')
                                                <span class="badge bg-danger text-dark-danger"> Cancelled </span>
                                            @elseif($invoice->order->status == 'shipping')
                                                <span class="badge bg-info text-dark-info"> Shipping </span>
                                            @elseif($invoice->order->status == 'invoiced')
                                                <span class="badge bg-info text-dark-info"> Invoiced </span>
                                            @elseif($invoice->order->status == 'packed')
                                                <span class="badge bg-info text-dark-info"> Packed </span>
                                            @elseif($invoice->order->status == 'shipped')
                                                <span class="badge bg-info text-dark-info"> Shipped </span>
                                            @endif
                                        </td>
                                        <td>{{ $invoice->order->total_amount }}</td>
                                        <td>{{ $invoice->order->grand_total }}</td>
                                        <td>
                                            {{-- <a href="{{ route('admin.order.invoice.create', $invoice->order->id) }}" class="btn btn-sm btn-info">View Invoice</a>
                                             --}}
                                             <a href="{{ route('admin.order.invoice.create', $invoice->order->id) }}" 
                                                class="btn btn-sm btn-info" 
                                                onclick="fetchInvoiceAndPrint(event, this.href)">View Invoice</a>
                                        </td>
                                    </tr>
                                @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <!-- Modal -->
        <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" id="deleteRecord-close" data-bs-dismiss="modal"
                            aria-label="Close" id="btn-close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mt-2 text-center">
                            <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                                colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                            <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                                <h4>Are you sure ?</h4>
                                <p class="text-muted mx-4 mb-0">Are you sure you want to remove this record ?</p>
                            </div>
                        </div>
                        <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                            <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn w-sm btn-danger" id="delete-record">Yes, Delete It!</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end modal -->

    </div>
    <!-- container-fluid -->
@endsection
@section('js')
<script>
    function fetchInvoiceAndPrint(event, url) {
        event.preventDefault(); // Prevent default behavior
    
        fetch(url)
            .then(response => response.text())
            .then(html => {
                let printWindow = window.open('', '_blank');
                printWindow.document.write(html);
                printWindow.document.close();
                printWindow.onload = function () {
                    printWindow.print();
                };
            });
    }
    </script>
    {{--  <script src="{{ asset('assets/admin/assets/js/pages/ecommerce-customer-list.init.js') }}"></script>  --}}
@endsection