<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice #INV-20251736583593</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #202228;
            color: white;
            line-height: 1.6;
            padding: 20px;
            font-size: 14px;
        }

        a {
            text-decoration: none;
        }

        a,
        p {
            color: #4b4b4b;
        }

        .invoice-container {
            max-width: 800px;
            margin: auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background: #fff;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: self-start;
            background-color: #202228;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 16px;
            gap: 12px;
            flex-wrap: wrap;
            padding: 20px;
        }

        .logo img {
            height: 30px;
        }

        .payable-info p {
            margin-bottom: 5px;
            color: #fff;
        }

        .invoice-details-box {
            padding: 20px;
            color: #202228;
        }

        .invoice-details {
            display: flex;
            justify-content: space-between;
            margin-bottom: 50px;
            gap: 12px;
            flex-wrap: wrap;
        }

        .invoice-details h3 {
            margin-bottom: 8px;
        }

        .invoice-table-box {
            position: relative;
            margin-bottom: 35px;
        }

        .invoice-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        .invoice-table th,
        .invoice-table td {
            padding: 10px 0;
            text-align: left;
        }

        .invoice-table tbody {
            border-bottom: 1px solid rgba(215, 218, 224, 0.5);
        }

        .footer-top {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 30px;
            gap: 16px;
        }

        .footer-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 16px;
        }

        .bank-info p {
            color: #ffffff;
            text-align: left;
            font-weight: 500;
        }

        .payment-details strong {
            margin-bottom: 5px;
            display: block;
        }

        .button-container {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 50px;
            flex-wrap: wrap;
        }

        .print-button,
        .download-button {
            background: linear-gradient(270deg, #5AC0F4 0%, #4B4BFE 100%);
            color: white;
            border: none;
            padding: 0px 18px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border-radius: 5px;
            text-decoration: none;
            height: 44px;
            display: inline-flex;
            align-items: center;
        }

        .print-button {
            background: #fdd702;
            transition: all 0.3s ease-in-out;
            color: #202228;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;

            svg {
                width: 15px;
            }
        }

        /* Adjustments for Small Screens */
        @media (max-width: 480px) {
            .invoice-table-box {
                overflow-x: scroll;
                padding-left: 0;
            }
        }

        /* Print Styles */
        @media print {
            body {
                background: #ffffff !important;
                /* Fallback to white for the body */
                color: #ffffff !important;
                /* Ensure text is black for readability */
            }

            .invoice-container {
                /* background: linear-gradient(180deg, rgba(7, 9, 16, 1) 0%, rgba(24, 30, 53, 1) 50%, rgba(7, 9, 16, 1) 100%) !important; */
                -webkit-print-color-adjust: exact;
                /* Ensures proper background printing */
                /* color: #ffffff !important; */
            }

            .print-button,
            .download-button {
                display: none !important;
            }
        }

        .app-badge.badge-success {
            background: rgba(17, 188, 13, 0.06);
            border: 1px solid rgba(17, 188, 13, 0.15);
            color: #11BC0D;
        }

        .app-badge.badge-danger {
            background: rgba(237, 64, 48, 0.1);
            color: #ed4030;
            border: 1px solid rgba(237, 64, 48, 0.1);
        }

        .app-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 7px 15px;
            min-width: 87px;
            border-radius: 30px;
            line-height: 1;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="invoice-container">
        <header class="invoice-header">
            <div class="logo">
                <a href="#">
                    <img src="{{ asset(setting('site_logo')) }}" alt="Invoice Logo">
                </a>
            </div>
            <div class="payable-info">
                <p>ID: #{{ $booking->booking_id }}</p>
                <p>Issued: {{ $booking->created_at->format('d M Y h:i A') }}</p>
            </div>
        </header>
        <div class="invoice-details-box">
            <div class="invoice-details">
                <div class="billed-to">
                    <h3>{{ $booking->billing_details['first_name'] . ' ' . $booking->billing_details['last_name'] }}
                    </h3>
                    <p>{{ $booking->billing_details['email'] }}</p>
                    <p>{{ $booking->billing_details['phone'] }}</p>
                    <p>{{ $booking->billing_details['address'] }}</p>
                    <span @class([
                        'app-badge',
                        'badge-danger' => !$booking->is_paid,
                        'badge-success' => $booking->is_paid,
                    ]) style="margin-top: 10px;">
                        {{ $booking->is_paid ? __('Paid') : __('Unpaid') }}
                    </span>
                </div>
                <div class="from">
                    <p><strong>Amount:</strong> {{ $booking->total_amount . ' ' . $currency }}</p>
                </div>
            </div>
            <div class="invoice-table-box">
                <table class="invoice-table">
                    <thead>
                        <tr>
                            <th>Item Name</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $booking->space->title ?? 'N/A' }}</td>
                            <td>{{ $booking->booking_from->format('d M Y h:i A') }}</td>
                            <td>{{ $booking->booking_to->format('d M Y h:i A') }}</td>
                            <td>{{ $booking->total_amount . ' ' . $currency }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3"><strong>Total</strong></td>
                            <td>
                                <strong style="color: #000000;">{{ $booking->total_amount }}
                                    {{ $currency }}</strong>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="footer">
                <div class="footer-bottom">
                    <p>Thanks for the booking space.</p>
                </div>
            </div>
            <div class="button-container">
                <button class="print-button" onclick="window.print()">
                    <svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve"
                        fill="#000000">
                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <style type="text/css">
                                .feather_een {
                                    fill: #0B1719;
                                }
                            </style>
                            <path class="feather_een"
                                d="M18.5,22h-5c-0.276,0-0.5-0.224-0.5-0.5l0,0c0-0.276,0.224-0.5,0.5-0.5h5c0.276,0,0.5,0.224,0.5,0.5 l0,0C19,21.776,18.776,22,18.5,22z M18.5,23h-5c-0.276,0-0.5,0.224-0.5,0.5l0,0c0,0.276,0.224,0.5,0.5,0.5h5 c0.276,0,0.5-0.224,0.5-0.5l0,0C19,23.224,18.776,23,18.5,23z M18.5,25h-5c-0.276,0-0.5,0.224-0.5,0.5l0,0 c0,0.276,0.224,0.5,0.5,0.5h5c0.276,0,0.5-0.224,0.5-0.5l0,0C19,25.224,18.776,25,18.5,25z M31,11v8c0,1.657-1.343,3-3,3h-1v5 c0,1.657-1.343,3-3,3H8c-1.657,0-3-1.343-3-3v-5H4c-1.657,0-3-1.343-3-3v-8c0-1.657,1.343-3,3-3h1V5c0-1.657,1.343-3,3-3h16 c1.657,0,3,1.343,3,3v3h1C29.657,8,31,9.343,31,11z M6,8h20V5c0-1.105-0.895-2-2-2H8C6.895,3,6,3.895,6,5V8z M26,18H6v9 c0,1.105,0.895,2,2,2h16c1.105,0,2-0.895,2-2V18z M28,9H4c-1.105,0-2,0.895-2,2v8c0,1.105,0.895,2,2,2h1v-3H4.5 C4.224,18,4,17.776,4,17.5l0,0C4,17.224,4.224,17,4.5,17h23c0.276,0,0.5,0.224,0.5,0.5l0,0c0,0.276-0.224,0.5-0.5,0.5H27v3h1 c1.105,0,2-0.895,2-2v-8C30,9.895,29.105,9,28,9z M5,12.5C5,11.672,5.672,11,6.5,11S8,11.672,8,12.5S7.328,14,6.5,14 S5,13.328,5,12.5z M6,12.5C6,12.776,6.224,13,6.5,13S7,12.776,7,12.5S6.776,12,6.5,12S6,12.224,6,12.5z">
                            </path>
                        </g>
                    </svg>
                    Print Invoice
                </button>
            </div>
        </div>
    </div>
</body>

</html>
