@extends('layout.base')

@section('action')
    <button type="button" class="btn btn-success btn-sm" onclick="printPDF()">
        <i class="fa fa-print me-1"></i>Print
    </button>
    <a href="{{ route('reservation-information') }}" class="btn btn-light-success btn-sm"><i
            class="fa fa-arrow-left me-1"></i>Back</a>
@endsection

@section('content')
    <style>
        #print-area h2,
        #print-area h3,
        #print-area h5 {
            font-size: 14px;
            margin-bottom: 8px;
        }

        #print-area p {
            margin-bottom: 6px;
        }

        #print-area table {
            margin-bottom: 16px;
        }

        #print-area .fw-bolder.text-end.pt-3 {
            margin-top: 16px;
            margin-bottom: 24px;
        }

        #print-area ol {
            padding-left: 20px;
        }

        @media print {
            .page-break {
                page-break-before: always !important;
            }

            .keep-together {
                page-break-inside: avoid !important;
            }
        }
    </style>


    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="row">
                <!-- Invoice Card -->
                <div class="col-md-8">
                    <div class="printed">
                        <div class="card" style="padding: 30px;">

                            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
                                <tr>
                                    <td align="center">
                                        <img src="{{ asset('media/kop2.png') }}" width="100%"
                                            style="max-width: 100%; height: auto;" alt="Header Logo">
                                    </td>
                                </tr>

                            </table>

                            <div class="card-body py-20">
                                <div class="mw-lg-950px mx-auto w-100">
                                    <!-- Invoice Header -->
                                    <div class="d-flex justify-content-between pb-7">
                                        <div>
                                            <h2 class="fw-bolder text-gray-800 fs-2qx pe-5">INVOICE</h2>
                                            <h3>
                                                @if ($invoice->reservation_status == 'first_payment')
                                                    First Payment
                                                @else
                                                    Second Payment
                                                @endif
                                            </h3>
                                        </div>
                                        <div class="text-end">
                                            <p class="text-dark mb-1">Invoice Number: {{ $invoice->invoice_number }}</p>
                                            <p class="text-dark mb-1">Date: {{ $reservation->created_at->format('F d, Y') }}
                                            </p>
                                            <p class="text-dark">Due Date:
                                                {{ $invoice->payment_end_date }}</p>
                                        </div>
                                    </div>

                                    <div class="pb-7">
                                        <h5 class="fw-bolder text-gray-800">Bill To:</h5>
                                        @if (!empty($reservation->user->country))
                                            <p class="text-muted mb-0">{{ $reservation->user->country->name }}</p>
                                        @else
                                            <p class="text-muted mb-0">{{ $reservation->user->name }}</p>
                                        @endif
                                        @if (!empty($reservation->user->address))
                                            <p class="text-muted mb-0 col-5">{{ $reservation->user->address }}</p>
                                        @endif
                                    </div>

                                    <div class="border-bottom pb-12">
                                        <!-- Table with Itemized List -->
                                        <table class="table" style="font-size: 11px">
                                            <thead>
                                                <tr class="border-bottom fw-bold text-muted text-uppercase">
                                                    <th>Hotel</th>
                                                    <th>Room</th>
                                                    <th>Persons</th>
                                                    <th>Price per Night</th>
                                                    <th>Day</th>
                                                    <th>Total Price</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($room as $detail)
                                                    <tr class="fw-bold text-gray-700">
                                                        <td>{{ $detail->hotel_name }}</td>
                                                        <td>{{ $detail->room_name }}
                                                            @if ($invoice->type_invoice == 'personal')
                                                                <p class="text-muted mb-0">{{ $invoice->reservation_name }}
                                                                </p>
                                                            @endif
                                                        </td>
                                                        <td>{{ $detail->quantity }}</td>
                                                        <td>USD {{ number_format($detail->room_price, 2) }}</td>
                                                        <td>{{ $detail->day }} days <br> {{ $detail->start_date }} ->
                                                            {{ $detail->end_date }}</td>
                                                        <td>USD {{ number_format($detail->total_price, 2) }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Total Section -->
                                    <div class="fw-bolder text-end pt-3">
                                        <p>Grand Total: <span class="text-success">USD
                                                {{ number_format($reservation->details->sum('total_price'), 2) }}</span>
                                        </p>
                                        @if ($invoice->reservation_status == 'first_payment')
                                            <p>First Payment(50%): <span class="text-success">USD
                                                    {{ number_format($reservation->details->sum('total_price') / 2, 2) }}</span>
                                            </p>
                                        @elseif ($invoice->reservation_status == 'second_payment')
                                            <p>First Payment: <span class="text-success">USD
                                                    {{ number_format($paymentAmount, 2) }}</span>
                                            </p>
                                            <p>Outstanding: <span class="text-success">USD
                                                    {{ number_format($reservation->details->sum('total_price') - $paymentAmount, 2) }}</span>
                                            </p>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="keep-together">
                                <table>
                                    <tr>
                                        <td colspan="3" style="padding-top: 30px;"></td>
                                    </tr>

                                    <!-- Terms and Conditions -->
                                    <tr>
                                        <td colspan="3" style="font-size: 12px; line-height: 1.6; color: #555;">
                                            <strong>Terms and Conditions:</strong>
                                            <ol style="padding-left: 20px;">
                                                <li>All the payments made should be NET of any bank charges. Please state
                                                    the
                                                    name
                                                    of the entity
                                                    concerned as well as the payment purpose on the transfer with the format
                                                    "<strong>DELEGATION
                                                        NAME_2025 ART WCH Jakarta</strong>".</li>
                                                <li>The LOC is delighted to provide the following selection of official
                                                    hotels
                                                    and
                                                    meal arrangements.
                                                    All rates include applicable taxes, service charges, and transportation.
                                                    All
                                                    personal expenses (such
                                                    as hotel services, laundry, room services, telephone, and mini-bar) are
                                                    not
                                                    included.</li>
                                                <li>Any charges occurred (including early check-in and late check-out) are
                                                    to be
                                                    settled directly with
                                                    the hotel prior to departure, and any outstanding accounts will be the
                                                    Member
                                                    Federation's
                                                    responsibility.</li>
                                                <li>The mentioned hotel prices are valid before the accommodation deadline
                                                    of
                                                    <strong>30 June
                                                        2025</strong>. Prices might increase automatically by USD 6 per
                                                    person
                                                    per
                                                    night after the
                                                    deadline.
                                                </li>
                                            </ol>
                                        </td>
                                    </tr>

                                    <!-- Spacer -->

                                </table>
                            </div>

                            <div class="keep-together">
                                <table>
                                    <tr>
                                        <td colspan="3" style="padding-top: 30px;"></td>
                                    </tr>

                                    <!-- Payment Information -->
                                    <tr>
                                        <td colspan="3" style="font-size: 12px; line-height: 1.6; color: #555;">
                                            <strong>Payment to:</strong><br>
                                            RPL 088 LPDUK UTK OPERASIONAL BLU VALAS<br>
                                            <strong>BANK MANDIRI</strong> 122-000-773975-1<br>
                                            <strong>SWIFT CODE:</strong> BMRIIDJA<br><br>

                                            Bank Mandiri Jakarta<br>
                                            Gedung Pusat Kehutanan, Jalan Jenderal Gatot Subroto, Manggala Wanabakti<br>
                                            Jakarta Pusat 10270, Indonesia
                                        </td>
                                    </tr>

                                    <!-- Spacer -->
                                    <tr>
                                        <td colspan="3" style="padding-top: 30px;"></td>
                                    </tr>

                                    <!-- Thank you note -->


                                </table>
                            </div>
                            <div class="invoice-footer text-end pe-5">
                                Thank you,<br><br>
                                (Finance Division)
                            </div>



                        </div>
                    </div>
                </div>

                <!-- Payment Proof Upload Card -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            @if (!$invoice->payment_proof)
                                <h5 class="mb-3">Upload Payment Proof</h5>
                                <form action="{{ route('reservation.uploadPaymentProof', $reservation->id) }}"
                                    method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input type="file" name="payment_proof" class="form-control mb-3" accept="image/*"
                                        required>
                                    <button type="submit" class="btn btn-primary w-100">Submit Payment Proof</button>
                                </form>
                            @else
                                <h5 class="text-success">Payment Proof Uploaded</h5>
                                <span></span>
                                <img src="{{ asset('storage/' . $invoice->payment_proof) }}" class="img-fluid"
                                    width="300">
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="print-area" style="display: none;"></div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script>
        function printPDF() {
            const original = document.querySelector('.printed .card');
            const clone = original.cloneNode(true);
            const printArea = document.getElementById('print-area');

            // scroll ke paling atas dulu
            window.scrollTo(0, 0);

            // Reset isi
            printArea.innerHTML = '';

            // Hapus elemen interaktif
            clone.querySelectorAll('.btn, .modal, .non-printable').forEach(el => el.remove());

            // Styling khusus untuk total section
            clone.querySelectorAll('p').forEach(p => {
                if (p.textContent.includes('Grand Total') ||
                    p.textContent.includes('First Payment') ||
                    p.textContent.includes('Outstanding')) {
                    p.style.textAlign = 'right';
                    p.style.fontWeight = 'bold';
                    p.querySelectorAll('span').forEach(span => {
                        if (span.textContent.includes('USD')) {
                            span.style.color = '#28a745';
                            span.style.fontWeight = 'bold';
                        }
                    });
                }
            });

            // Bungkus dalam wrapper
            const wrapper = document.createElement('div');
            Object.assign(wrapper.style, {
                maxWidth: '794px', // A4 width
                margin: '0 auto',
                padding: '30px',
                backgroundColor: 'white',
                fontSize: '10.5px',
                lineHeight: '1.5',
                boxSizing: 'border-box',
            });
            wrapper.appendChild(clone);

            printArea.appendChild(wrapper);
            printArea.style.display = 'block';

            // Opsi PDF
            const opt = {
                filename: 'invoice.pdf',
                image: {
                    type: 'jpeg',
                    quality: 1
                },
                html2canvas: {
                    scale: 2,
                    useCORS: true,
                    scrollY: 0 // kunci supaya tidak pakai offset scroll
                },
                jsPDF: {
                    unit: 'pt',
                    format: 'a4',
                    orientation: 'portrait'
                },
                pagebreak: {
                    mode: ['avoid-all', 'css', 'legacy']
                }
            };

            // Delay kecil biar scroll benar-benar ke atas dulu
            setTimeout(() => {
                html2pdf().set(opt).from(wrapper).save().then(() => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Downloaded!',
                        timer: 1500,
                        showConfirmButton: false
                    });
                    printArea.style.display = 'none';
                });
            }, 300);
        }
    </script>
@endsection