@extends('backEnd.layouts.master')
@section('title', 'Invoice #' . $order->invoice_id)
@section('content')

    <!-- Google Fonts: Inter for Elegance & JetBrains Mono for Technical details -->
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap"
        rel="stylesheet">

    <style>
        :root {
            --primary: #000000;
            --accent: #f4f4f4;
            --text-muted: #999999;
        }

        .invoice-container {
            font-family: 'Inter', sans-serif;
            background: #fff;
            max-width: 950px;
            margin: 40px auto;
            padding: 70px;
            border: 1px solid var(--primary);
            position: relative;
            color: var(--primary);
        }

        /* Zero Radius Everywhere */
        * {
            border-radius: 0 !important;
            border-collapse: collapse;
        }

        /* Top Right Big Invoice Title */
        .big-invoice-label {
            position: absolute;
            top: 30px;
            right: 70px;
            font-size: 85px;
            font-weight: 900;
            line-height: 0.8;
            letter-spacing: -5px;
            text-transform: uppercase;
            opacity: 0.08;
            pointer-events: none;
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

        .brand-logo {
            width: 200px;
            max-height: 150px;
            filter: grayscale(1);
        }

        .header-meta {
            text-align: right;
            margin-top: 15px;
        }

        .header-meta h2 {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: var(--text-muted);
            margin-bottom: 5px;
        }

        .header-meta p {
            font-size: 24px;
            font-weight: 900;
            letter-spacing: -1px;
        }

        /* Info Grid */
        .info-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 50px;
            margin-bottom: 25px;
            border-top: 2px solid var(--primary);
            padding-top: 20px;
        }

        .info-box h4 {
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--text-muted);
            margin-bottom: 15px;
        }

        .info-box p {
            font-size: 13px;
            line-height: 1.6;
            font-weight: 500;
            margin: 0;
        }

        .info-box b {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 14px;
        }

        /* Table Design */
        .item-table {
            width: 100%;
            margin-bottom: 50px;
        }

        .item-table thead th {
            text-align: left;
            padding: 20px 10px;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            border-bottom: 2px solid var(--primary);
        }

        .item-table tbody td {
            padding: 25px 10px;
            border-bottom: 1px solid #eee;
            font-size: 13px;
            vertical-align: top;
        }

        .item-code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: #bbb;
        }

        .product-cell b {
            font-size: 16px;
            font-weight: 800;
            text-transform: uppercase;
            display: block;
            letter-spacing: -0.5px;
            margin-bottom: 4px;
        }

        .product-cell span {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--text-muted);
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* Summary Section */
        .summary-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 40px;
        }

        .calculation-box {
            width: 320px;
            border: 1px solid var(--primary);
            padding: 30px;
            background: #fbfbfb;
        }

        .calc-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            font-size: 12px;
            font-weight: 600;
        }

        .calc-row.total {
            margin-top: 15px;
            padding-top: 25px;
            border-top: 3px solid var(--primary);
            font-size: 26px;
            font-weight: 900;
            letter-spacing: -1px;
        }

        /* Footer Stamp */
        .invoice-footer {
            margin-top: 80px;
            padding-top: 30px;
            border-top: 1px solid #eee;
            text-align: center;
        }

        .footer-note {
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: #ccc;
        }

        /* Actions Bar */
        .btn-action-group {
            position: fixed;
            bottom: 30px;
            right: 30px;
            display: flex;
            gap: 12px;
            z-index: 1000;
            background: #fff;
            padding: 10px;
            border: 1px solid #000;
        }

        .btn-sharp {
            background: #000;
            color: #fff;
            padding: 14px 28px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }

        .btn-sharp:hover {
            background: #333;
            transform: translateY(-2px);
        }

        .btn-outline {
            background: #fff;
            color: #000;
            border: 1px solid #000;
        }

        @media print {
            .no-print {
                display: none !important;
            }

            .invoice-container {
                margin: 0;
                border: none;
                width: 100%;
                max-width: 100%;
                padding: 30px;
            }

            header,
            footer,
            .navbar,
            .left-side-menu {
                display: none !important;
            }

            .content-page {
                margin: 0 !important;
                padding: 0 !important;
            }

            body {
                background: #fff;
            }
        }
    </style>

    <div class="container">
        <!-- Action Bar -->
        <div class="btn-action-group no-print">
            <a href="{{ url('admin/order/all') }}" class="btn-sharp btn-outline">Dashboard</a>
            <button onclick="window.print()" class="btn-sharp">Print Invoice</button>
        </div>

        <div class="invoice-container">
            <!-- The Watermark Large Text in Top Right -->
            <div class="big-invoice-label">Invoice</div>

            <!-- Header -->
            <div class="invoice-header">
                <div class="brand-box">
                    <img src="{{ asset($generalsetting->white_logo) }}" class="brand-logo" alt="Brand Logo">
                    <div class="mt-4 info-box">
                        <p class="font-bold text-sm uppercase">{{ $generalsetting->name }}</p>
                        <p>{{ $contact->phone }}</p>
                        <p>{{ $contact->email }}</p>
                    </div>
                </div>
                <div class="header-meta">
                    <h2>Invoice Number</h2>
                    <p>#{{ $order->invoice_id }}</p>
                    <div class="mt-4">
                        <h2 style="letter-spacing: 2px;">Issue Date</h2>
                        <p style="font-size: 14px; font-weight: 700;">{{ $order->created_at->format('d M, Y') }}</p>
                    </div>
                </div>
            </div>

            <!-- Details Grid -->
            <div class="info-grid">
                <div class="info-box">
                    <h4>Billing Address</h4>
                    <p><b>{{ $order->shipping ? $order->shipping->name : 'N/A' }}</b></p>
                    <p>{{ $order->shipping ? $order->shipping->address : '' }}</p>
                    <p>{{ $order->shipping ? $order->shipping->area : '' }}</p>
                    <p>Phone: {{ $order->shipping ? $order->shipping->phone : '' }}</p>
                </div>
                <div class="info-box">
                    <h4>Transaction Details</h4>
                    <p>Status: <span class="text-green-600 font-bold uppercase">{{ $order->status->name ?? 'Paid' }}</span>
                    </p>
                    <p>Method: <span
                            class="font-bold uppercase tracking-tight">{{ $order->payment ? $order->payment->payment_method : 'COD' }}</span>
                    </p>
                </div>
                <div class="info-box" style="text-align: right;">
                    <h4>Company Info</h4>
                    <p>{{ $contact->address }}</p>
                    <p>Dhaka, Bangladesh</p>
                </div>
            </div>

            <!-- Table -->
            <table class="item-table">
                <thead>
                    <tr>
                        <th style="width: 100px;">SKU / Code</th>
                        <th>Item & Description</th>
                        <th style="text-align: center;">Price</th>
                        <th style="text-align: center;">Qty</th>
                        <th style="text-align: right;">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($order->orderdetails as $key => $value)
                        <tr>
                            <td class="item-code">ITEM-{{ $value->product_id }}</td>
                            <td class="product-cell">
                                <b>{{ $value->product_name }}</b>
                                <span>
                                    @if($value->product_color) COLOR: {{ $value->product_color }} @endif
                                    @if($value->product_size) &nbsp;&bull;&nbsp; SIZE: {{ $value->product_size }} @endif
                                </span>
                            </td>
                            <td style="text-align: center; font-weight: 500;">৳{{ number_format($value->sale_price, 0) }}</td>
                            <td style="text-align: center; font-weight: 700;">{{ $value->qty }}</td>
                            <td style="text-align: right; font-weight: 800;">
                                ৳{{ number_format($value->sale_price * $value->qty, 0) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- Totals -->
            <div class="summary-container">
                <div class="calculation-box">
                    <div class="calc-row">
                        <span
                            style="color: #999; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: 1px;">Subtotal</span>
                        <span
                            class="font-bold">৳{{ number_format($order->orderdetails->sum(function ($i) {
        return $i->sale_price * $i->qty; }), 0) }}</span>
                    </div>
                    <div class="calc-row">
                        <span
                            style="color: #999; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: 1px;">Logistics
                            Fee</span>
                        <span class="font-bold">৳{{ number_format($order->shipping_charge, 0) }}</span>
                    </div>
                    <div class="calc-row">
                        <span
                            style="color: #999; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: 1px;">Discount
                            Applied</span>
                        <span class="font-bold text-red-600">-৳{{ number_format($order->discount, 0) }}</span>
                    </div>
                    <div class="calc-row total">
                        <span>TOTAL</span>
                        <span>৳{{ number_format($order->amount, 0) }}</span>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="invoice-footer">
                <div class="footer-note">
                    {{ $generalsetting->name }} &bull; aesthetic apparel for the modern era &bull; {{ date('Y') }}
                </div>
            </div>
        </div>
    </div>
@endsection