@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

@section('content')

    <div class="mb-5">
        <h5>
            <a href="{{ route('completed_orders') }}" class="btn btn-icon bg-white me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
            View Completed Order
        </h5>
    </div>

    <div class="row align-items-start mb-3">
        <div class="col text-dark">
            <div class="mb-2">
                <h6 class="mb-0">User Name :
                    {{ trim(($order->customer->first_name ?? '') . ' ' . ($order->customer->last_name ?? 'N/A')) }}</h6>
                <h6>User ID : {{ $order->customer->customer_id ?? ('ID' . $order->user_id) }}</h6>
            </div>
        </div>
        <div class="col-auto">
            <span class="badge bg-success px-4 py-2 rounded-2 fs-6">
                Completed
            </span>
        </div>
    </div>

    <div class="card p-4" id="printableCard">

        <div class="card-body p-0">
            <div class="border rounded-2 p-2 mb-3">
                <div class="d-flex flex-column flex-lg-row justify-content-between">
                    <span class="text-dark">Order ID : {{ $order->order_id }}</span>
                    <span class="text-dark">Date :
                        {{ $order->created_at ? $order->created_at->format('d/m/Y') : 'N/A' }}</span>
                </div>
            </div>
        </div>

        <div class="row g-3">

            <div class="col-lg-4">

                <div class="card border mb-2">
                    <div class="card-body p-3">
                        <h6 class="fw-semibold mb-3">Restaurant Details</h6>
                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Name</div>
                                <div class="col-7 text-dark">: {{ $order->restaurant->name ?? 'N/A' }}</div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Restaurant ID</div>
                                <div class="col-7 text-dark">:
                                    {{ $order->restaurant->restaurant_id ?? ('ID' . $order->restaurant_id) }}</div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Phone</div>
                                <div class="col-7 text-dark">:
                                    {{ $order->restaurant->phno ?? ($order->restaurant->phone ?? 'N/A') }}</div>
                            </div>
                        </div>

                        <div class="small">
                            <div class="row">
                                <div class="col-5 text-secondary">Address</div>
                                <div class="col-7 text-dark">: {{ $order->restaurant->address ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border mb-2">
                    <div class="card-body p-3">
                        <h6 class="fw-semibold mb-3">User Details</h6>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Name</div>
                                <div class="col-7 text-dark">:
                                    {{ trim(($order->customer->first_name ?? '') . ' ' . ($order->customer->last_name ?? '')) ?: 'N/A' }}
                                </div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Customer ID</div>
                                <div class="col-7 text-dark">:
                                    {{ $order->customer->customer_id ?? ('ID' . $order->user_id) }}</div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Phone</div>
                                <div class="col-7 text-dark">: {{ $order->phone ?? ($order->customer->phno ?? 'N/A') }}
                                </div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Email Address</div>
                                <div class="col-7 text-dark">: {{ $order->customer->email ?? 'N/A' }}</div>
                            </div>
                        </div>

                        <div class="small">
                            <div class="row">
                                <div class="col-5 text-secondary">Address</div>
                                <div class="col-7 text-dark">: {{ $userAddress->address ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border mb-3">
                    <div class="card-body p-3">
                        <h6 class="fw-semibold mb-3">Delivery Address</h6>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Name</div>
                                <div class="col-7 text-dark">:
                                    {{ $deliveryAddress->name ?? trim(($order->customer->first_name ?? '') . ' ' . ($order->customer->last_name ?? '')) }}
                                </div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Phone</div>
                                <div class="col-7 text-dark">: {{ $deliveryAddress->phone ?? ($order->phone ?? 'N/A') }}
                                </div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Email Address</div>
                                <div class="col-7 text-dark">:
                                    {{ $deliveryAddress->email ?? ($order->customer->email ?? 'N/A') }}</div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Address</div>
                                <div class="col-7 text-dark">: {{ $deliveryAddress->address ?? 'N/A' }}
                                    {{ isset($deliveryAddress->pincode) ? '- ' . $deliveryAddress->pincode : '' }}</div>
                            </div>
                        </div>

                        <div class="small mb-2">
                            <div class="row">
                                <div class="col-5 text-secondary">Landmark</div>
                                <div class="col-7 text-dark">: {{ $deliveryAddress->landmark ?? 'N/A' }}</div>
                            </div>
                        </div>

                        <div class="small">
                            <div class="row">
                                <div class="col-5 text-secondary">Address Type</div>
                                <div class="col-7 text-dark">: {{ ucfirst($deliveryAddress->address_type ?? 'Home') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- <button type="button" class="btn btn-primary w-100 py-2" onclick="downloadAsImage()">
                    Download Bill <i class="ti tabler-download ms-1"></i>
                </button> --}}
                <a href="{{ route('download_bill', $order->id) }}" class="btn btn-primary w-100 py-2">
                    Download Bill <i class="ti tabler-download ms-1"></i>
                </a>

            </div>

            <div class="col-lg-8">

                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-primary text-white py-3">
                        <h5 class="mb-0 text-white">Product Details</h5>
                    </div>

                    <div class="table-responsive">
                        <table id="productDetailsTable" class="table">
                            <thead class="text-nowrap">
                                <tr>
                                    <th>SNO</th>
                                    <th>CATEGORY</th>
                                    <th>PRODUCT NAME</th>
                                    <th>OFFERS</th>
                                    <th>PRICE</th>
                                    <th>QTY</th>
                                    <th>TOTAL</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot>
                                <tr class="border-top bg-primary-subtle">
                                    <th class="py-3" colspan="7">
                                        <div class="d-flex justify-content-between px-2">
                                            <strong class="text-uppercase">Total</strong>
                                            <strong>₹{{ number_format($order->sub_total ?? 0, 2) }}</strong>
                                        </div>
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header py-3">
                        <h6 class="mb-0 fw-bold text-dark text-uppercase">Payment Details</h6>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <tbody>
                                <tr>
                                    <td class="py-3">Subtotal</td>
                                    <td class="text-end py-3">₹{{ number_format($order->sub_total ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="py-3">Discount</td>
                                    <td class="text-end py-3">₹{{ number_format($order->discount ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="py-3">Offer</td>
                                    <td class="text-end py-3">{{ $order->offer ?? 0 }}%</td>
                                </tr>
                                {{-- @if ($order->payment_type)
                                    <tr>
                                        <td class="py-3">Payment Type</td>
                                        <td class="text-end py-3">
                                            {{ str_replace('_', ' ', strtoupper($order->payment_type)) }}</td>
                                    </tr>
                                @endif
                                @if ($order->payment_status)
                                    <tr>
                                        <td class="py-3">Payment Status</td>
                                        <td class="text-end py-3">
                                            {{ ucfirst(str_replace('_', ' ', $order->payment_status)) }}</td>
                                    </tr>
                                @endif --}}
                            </tbody>
                            <tfoot>
                                <tr class="border-top bg-primary-subtle">
                                    <th class="py-3" colspan="2">
                                        <div class="d-flex justify-content-between">
                                            <strong class="text-uppercase">Grand Total</strong>
                                            <strong>₹{{ number_format($order->grand_total ?? 0, 2) }}</strong>
                                        </div>
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <script>
        $(document).ready(function() {

            const rawProducts = @json($orderItems ?? []);

            const productDetails = rawProducts.map((item, index) => {
                const price = parseFloat(item.price || 0);
                const qty = parseInt(item.quantity || 1);
                const total = price * qty;

                return {
                    sno: index + 1,
                    category: item.category_name ?? 'N/A',
                    product_name: item.product_name ?? 'N/A',
                    offers: item.offer ? item.offer + '%' : '0%',
                    price: '₹' + price.toFixed(2),
                    qty: qty,
                    total: '₹' + total.toFixed(2)
                };
            });

            $('#productDetailsTable').DataTable({
                data: productDetails,
                paging: false,
                searching: false,
                ordering: false,
                info: false,
                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap text-center'
                }],
                columns: [{
                        data: 'sno'
                    },
                    {
                        data: 'category'
                    },
                    {
                        data: 'product_name'
                    },
                    {
                        data: 'offers'
                    },
                    {
                        data: 'price'
                    },
                    {
                        data: 'qty'
                    },
                    {
                        data: 'total'
                    }
                ]
            });

        });

        function downloadAsImage() {
            const captureArea = document.getElementById('printableCard');

            html2canvas(captureArea, {
                scale: 2,
                useCORS: true,
                backgroundColor: '#ffffff'
            }).then(canvas => {
                const image = canvas.toDataURL("image/png");
                const link = document.createElement('a');
                link.href = image;
                link.download = 'Invoice-{{ $order->order_id }}.png';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
    </script>
@endsection