{{-- @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>

    @if (url()->previous() == route('visa'))
        <a href="{{ route('visa') }}" class="btn btn-light-success btn-sm"><i class="fa fa-arrow-left me-1"></i>Back</a>
    @else
        <a href="{{ url()->previous() }}" class="btn btn-light-success btn-sm"><i class="fa fa-arrow-left me-1"></i>Back</a>
    @endif
@endsection

@section('content')
    <style>
        @media print {
            .avoid-break {
                page-break-inside: avoid !important;
                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 avoid-break">
                        <div class="card" style="padding: 30px;">
                            <table class="table" width="600" class="mt-2" cellpadding="0" cellspacing="0"
                                border="0" align="center">
                                <tr>
                                    <td align="left" width="20%">
                                        <img src="{{ asset('media/logo-gymnastics-color.png') }}" style="height: 70px;"
                                            alt="Logo Left">
                                    </td>
                                    <td align="center" width="60%">
                                        <h2 style="margin: 0;">53<sup>rd</sup> Artistic Gymnastics<br>World Championships
                                        </h2>
                                        <p style="margin: 0;">Jakarta 2025</p>
                                    </td>
                                    <td align="right" width="20%">
                                        <img src="{{ asset('media/logo-fig.png') }}" style="height: 70px;" alt="Logo Right">
                                    </td>
                                </tr>
                            </table>
                            <div class="card-body pt-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>
                                        </div>
                                        <div class="text-end">
                                            <p class="text-muted mb-1">Invoice Number: {{ $visa->visa_number }}</p>
                                            <p class="text-muted mb-1">Date: {{ $visa->created_at->format('F d, Y') }}</p>
                                        </div>
                                    </div>

                                    <div class="pb-7">
                                        <h5 class="fw-bolder text-gray-800">Bill To:</h5>

                                        <p class="text-muted mb-0">{{ $visa->user->country->name }}</p>
                                        @if (!empty($visa->user->address))
                                            <p class="col-5">{{ $visa->user->address }}</p>
                                        @endif
                                    </div>

                                    <div class="border-bottom pb-12 avoid-break">
                                        <table class="table avoid-break">
                                            <thead class="avoid-break">
                                                <tr
                                                    class="border-bottom fs-6 fw-bold text-muted text-uppercase avoid-break">
                                                    <th style="width:5%;">#</th>
                                                    <th style="width:55%;">Person</th>
                                                    <th style="width:20%; text-align:right;">Price</th>
                                                    <th style="width:20%; text-align:right;">Total Price</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($accreditations as $index => $acc)
                                                    <tr class="fw-bold text-gray-700 fs-5 avoid-break">
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $acc->accreditation->first_name }}
                                                            {{ $acc->accreditation->last_name }}</td>
                                                        <td style="text-align:right;">USD
                                                            {{ number_format($acc->price, 2) }}</td>
                                                        <td style="text-align:right;">USD
                                                            {{ number_format($acc->price, 2) }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>


                                    <!-- Total Section -->
                                    @php
                                        $total = $accreditations->sum('price');
                                    @endphp

                                    <table class="table table-borderless fs-3 fw-bolder w-75 ms-auto mt-3 text-end"
                                        style="border-collapse:collapse;">
                                        <tbody>
                                            <tr>
                                                <td class="text-end"
                                                    style="padding-right: 10px; padding-left: 0; width:60%;">Grand Total:
                                                </td>
                                                <td class="text-success text-end"
                                                    style="padding-left: 10px; padding-right: 0; width:40%;">USD
                                                    {{ number_format($total, 2) }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-end" style="padding-right: 10px; padding-left: 0;">Payment:
                                                </td>
                                                <td class="text-success text-end"
                                                    style="padding-left: 10px; padding-right: 0;">USD
                                                    {{ number_format($visa->payment_amount, 2) }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-end" style="padding-right: 10px; padding-left: 0;">
                                                    Outstanding:</td>
                                                <td class="text-success text-end"
                                                    style="padding-left: 10px; padding-right: 0;">USD
                                                    {{ number_format($total - $visa->payment_amount, 2) }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <table>
                                <!-- Terms and Conditions -->
                                <tr>
                                    <td colspan="3" style="font-size: 12px; line-height: 1.6; color: #555;">
                                        <div class="mt-4 avoid-break">
                                            <p style="font-size: 12px; line-height: 1.6; color: #555;">
                                                <strong>Details:</strong><br>
                                                {{ $visa->keterangan_invoice }}
                                            </p>
                                        </div>

                                        <strong>Terms and Conditions:</strong>
                                        <ol style="padding-left: 20px; margin: 10px 0;">
                                            <li>
                                                All the payments made should be <strong>NET of any bank charges</strong>.
                                                And
                                                please state the name of the entity concerned <strong>as well as the payment
                                                    purpose</strong> on the transfer with the format <strong>"DELEGATION
                                                    NAME"_2025 ART WCH Jakarta</strong>, Example: <span></span>
                                                <strong>INA_2025 ART WCH Jakarta</strong></span>
                                            </li>
                                            @php
                                                $grouped = $accreditations->groupBy('visa_category_code');
                                                $hasAthlete = $grouped->has('C8A');
                                                $hasNonAthlete = $grouped->has('C8B');

                                                $priceAthlete = $grouped->get('C8A')?->first()->price ?? null;
                                                $priceNonAthlete = $grouped->get('C8B')?->first()->price ?? null;
                                            @endphp

                                            <li>
                                                The LOC will start the Visa processing only after the receipt of the
                                                <strong>NON-REFUNDABLE</strong> payment of

                                                @if ($hasAthlete && $hasNonAthlete)
                                                    <strong>USD {{ number_format($priceAthlete, 2) }}</strong> for
                                                    athlete(s) and
                                                    <strong>USD {{ number_format($priceNonAthlete, 2) }}</strong> for
                                                    non-athlete(s)
                                                @elseif ($hasAthlete)
                                                    <strong>USD {{ number_format($priceAthlete, 2) }}</strong> per athlete
                                                    applicant
                                                @elseif ($hasNonAthlete)
                                                    <strong>USD {{ number_format($priceNonAthlete, 2) }}</strong> per
                                                    non-athlete applicant
                                                @else
                                                    <strong>USD -</strong>
                                                @endif

                                                at the latest on <strong>01 September 2025</strong>.
                                            </li>

                                            <li>
                                                The LOC is not responsible of late visa request and late payment.
                                            </li>
                                            <li>
                                                The participating Federation is responsible for covering all bank fees in
                                                connection with the bank transfers.
                                            </li>
                                        </ol>
                                    </td>
                                </tr>


                                <!-- Spacer -->
                                <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>
                                        Pengurus Besar Persatuan Senam Indonesia-JAGOC 2025<br>
                                        <strong>BANK MANDIRI</strong> 126-05-5000-202-5<br>
                                        <strong>SWIFT CODE:</strong> BMRIIDJA<br><br>

                                        Bank Mandiri Jakarta Gandaria<br>
                                        Jalan Gandaria Tengah III No. 21, <br>
                                        Kebayoran Baru, Jakarta Selatan
                                    </td>
                                </tr>

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

                                <!-- Thank you note -->
                                <tr>
                                    <td colspan="3" style="font-size: 14px; text-align: right; color: #555;">
                                        Thank you,<br><br>
                                        (Finance Division)
                                    </td>
                                </tr>
                            </table>

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

                <!-- Payment Proof Upload Card -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card">
                            <div class="card-body">

                                @if ($visa->payment_proff)
                                    <div>
                                        <p class="fw-bold">Uploaded Payment Proof:</p>
                                        <img src="{{ asset('storage/' . $visa->payment_proff) }}"
                                            class="img-fluid rounded border" alt="Proof" />
                                    </div>
                                @else
                                    @if (auth()->user()->role == 'admin_nf' || auth()->user()->role == 'admin_media')
                                        <h5 class="mb-3">Upload Payment Proof</h5>
                                        <div id="payment-upload">
                                            <input type="file" name="payment_proff" id="payment_proff"
                                                class="form-control mb-3" accept="image/*" required>
                                            <button type="submit" class="btn btn-primary w-100"
                                                id="uploadPaymentBtn">Submit
                                                Payment
                                                Proof</button>
                                        </div>
                                    @else
                                        <div class="alert alert-warning">
                                            Payment proof has not been uploaded yet.
                                        </div>
                                    @endif
                                @endif
                                @if (auth()->user()->role == 'admin_nf')
                                    <!-- <button type="submit" class="btn btn-danger w-100 mt-3"
                                                            id="cancelBtn">
                                                            <i class="fa fa-ban"></i>
                                                            Cancel Visa
                                                        </button> -->
                                @endif
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </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>
        $('#uploadPaymentBtn').on('click', function() {
            let file = $('#payment_proff')[0].files[0];
            if (!file) {
                Swal.fire('Warning', 'Please select a file first.', 'warning');
                return;
            }

            let formData = new FormData();
            formData.append('payment_proff', file);
            formData.append('_token', '{{ csrf_token() }}');

            $.ajax({
                url: "{{ route('visa.uploadPayment', $visa->id) }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'Payment proof uploaded successfully!',
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload(); // Or update UI manually
                    });
                },
                error: function(xhr) {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Upload failed.', 'error');
                }
            });
        });

        function printPDF() {
            const element = document.querySelector('.printed');

            Swal.fire({
                title: 'Generating PDF...',
                text: 'Please wait while we prepare your invoice.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            const opt = {
                margin: [20, 20, 20, 20],
                filename: 'invoice-{{ $visa->visa_number }}.pdf', // nama file dinamis
                image: {
                    type: 'jpeg',
                    quality: 1
                },
                html2canvas: {
                    scale: 2,
                    useCORS: true
                },
                jsPDF: {
                    unit: 'pt',
                    format: 'a4',
                    orientation: 'portrait'
                },
                pagebreak: {
                    mode: ['avoid-all', 'css', 'legacy']
                }
            };

            html2pdf().set(opt).from(element).save().then(() => {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'Your invoice has been downloaded.',
                    timer: 2000,
                    showConfirmButton: false
                });
            });
        }
    </script>
@endsection --}}


{{-- @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>

    @if (url()->previous() == route('visa'))
        <a href="{{ route('visa') }}" class="btn btn-light-success btn-sm">
            <i class="fa fa-arrow-left me-1"></i>Back
        </a>
    @else
        <a href="{{ url()->previous() }}" class="btn btn-light-success btn-sm">
            <i class="fa fa-arrow-left me-1"></i>Back
        </a>
    @endif
@endsection

@section('content')
    <style>
        @media print {
            .avoid-break {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }

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

            table thead {
                display: table-header-group;
                /* repeat header di setiap halaman */
            }

            table tfoot {
                display: table-footer-group;
            }

            @media print {

                tr,
                td,
                th {
                    page-break-inside: avoid !important;
                    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;">

                            <!-- ===== HEADER, BILL TO, TABLE, TOTAL (satu grup, tidak boleh terpisah) ===== -->
                            <div class="avoid-break">
                                <!-- Header Logo -->
                                <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                                    <tr>
                                        <td align="left" width="20%">
                                            <img src="{{ asset('media/logo-gymnastics-color.png') }}" style="height:70px;"
                                                alt="Logo Left">
                                        </td>
                                        <td align="center" width="60%">
                                            <h2 style="margin:0;">53<sup>rd</sup> Artistic Gymnastics<br>World Championships
                                            </h2>
                                            <p style="margin:0;">Jakarta 2025</p>
                                        </td>
                                        <td align="right" width="20%">
                                            <img src="{{ asset('media/logo-fig.png') }}" style="height:70px;"
                                                alt="Logo Right">
                                        </td>
                                    </tr>
                                </table>

                                <!-- Invoice Header -->
                                <div class="d-flex justify-content-between pb-7 mt-5">
                                    <div>
                                        <h2 class="fw-bolder text-gray-800 fs-2qx pe-5">INVOICE</h2>
                                    </div>
                                    <div class="text-end">
                                        <p class="text-muted mb-1">Invoice Number: {{ $visa->visa_number }}</p>
                                        <p class="text-muted mb-1">Date: {{ $visa->created_at->format('F d, Y') }}</p>
                                    </div>
                                </div>

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

                                <!-- Itemized List -->
                                <div class="border-bottom pb-12 avoid-break">
                                    <table class="table">
                                        <thead>
                                            <tr class="border-bottom fs-6 fw-bold text-muted text-uppercase">
                                                <th style="width:5%;">#</th>
                                                <th style="width:55%;">Person</th>
                                                <th style="width:20%; text-align:right;">Price</th>
                                                <th style="width:20%; text-align:right;">Total Price</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($accreditations as $index => $acc)
                                                <tr class="fw-bold text-gray-700 fs-5">
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>{{ $acc->accreditation->first_name }}
                                                        {{ $acc->accreditation->last_name }}</td>
                                                    <td style="text-align:right;">USD {{ number_format($acc->price, 2) }}
                                                    </td>
                                                    <td style="text-align:right;">USD {{ number_format($acc->price, 2) }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Total -->
                                @php $total = $accreditations->sum('price'); @endphp
                                <table class="table table-borderless fs-3 fw-bolder w-75 ms-auto mt-3 text-end"
                                    style="border-collapse:collapse;">
                                    <tbody>
                                        <tr>
                                            <td style="width:60%; text-align:right;">Grand Total:</td>
                                            <td class="text-success" style="width:40%; text-align:right;">USD
                                                {{ number_format($total, 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align:right;">Payment:</td>
                                            <td class="text-success" style="text-align:right;">USD
                                                {{ number_format($visa->payment_amount, 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align:right;">Outstanding:</td>
                                            <td class="text-success" style="text-align:right;">USD
                                                {{ number_format($total - $visa->payment_amount, 2) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- ===== END HEADER + TABLE + TOTAL ===== -->

                            <!-- PAGE BREAK sebelum Terms -->
                            <div class="page-break"></div>

                            <div class="mt-4 avoid-break">
                                <p style="font-size: 12px; line-height: 1.6; color: #555;">
                                    <strong>Details:</strong><br>
                                    {{ $visa->keterangan_invoice }}
                                </p>
                            </div>

                            <!-- Terms & Conditions -->
                            <div>
                                <p style="font-size:12px; line-height:1.6; color:#555;">
                                    <strong>Terms and Conditions:</strong>
                                </p>
                                <ol style="padding-left:20px; font-size:12px; line-height:1.6; color:#555; margin:10px 0;">
                                    <li>All the payments made should be <strong>NET of any bank charges</strong> ...</li>
                                    <li>The LOC will start the Visa processing only after ...</li>
                                    <li>The LOC is not responsible for late visa request and late payment.</li>
                                    <li>The participating Federation is responsible for covering all bank fees.</li>
                                </ol>
                            </div>

                            <!-- Payment Info -->
                            <div class="mt-4">
                                <p style="font-size:12px; line-height:1.6; color:#555;">
                                    <strong>Payment to:</strong><br>
                                    Pengurus Besar Persatuan Senam Indonesia-JAGOC 2025<br>
                                    <strong>BANK MANDIRI</strong> 126-05-5000-202-5<br>
                                    <strong>SWIFT CODE:</strong> BMRIIDJA<br><br>
                                    Bank Mandiri Jakarta Gandaria<br>
                                    Jalan Gandaria Tengah III No. 21,<br>
                                    Kebayoran Baru, Jakarta Selatan
                                </p>
                            </div>

                            <!-- Footer -->
                            <div class="invoice-footer mt-5 text-end" style="font-size:14px; color:#555;">
                                Thank you,<br><br>(Finance Division)
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payment Proof Upload -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            @if ($visa->payment_proff)
                                <p class="fw-bold">Uploaded Payment Proof:</p>
                                <img src="{{ asset('storage/' . $visa->payment_proff) }}" class="img-fluid rounded border"
                                    alt="Proof" />
                            @else
                                <div class="alert alert-warning">Payment proof has not been uploaded yet.</div>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function printPDF() {
            const element = document.querySelector('.printed');

            // Scroll ke atas dulu biar html2canvas ambil full layout dengan benar
            window.scrollTo(0, 0);

            Swal.fire({
                title: 'Generating PDF...',
                text: 'Please wait while we prepare your invoice.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            const opt = {
                margin: [20, 20, 20, 20],
                filename: 'invoice-{{ $visa->visa_number }}.pdf',
                image: {
                    type: 'jpeg',
                    quality: 1
                },
                html2canvas: {
                    scale: 2,
                    useCORS: true,
                    scrollY: 0 // pastikan tidak ambil offset scroll
                },
                jsPDF: {
                    unit: 'pt',
                    format: 'a4',
                    orientation: 'portrait'
                },
                pagebreak: {
                    mode: ['css', 'legacy'],
                    before: '.page-break' // gunakan class page-break untuk memaksa page break
                }
            };

            // Delay sedikit biar scroll benar-benar ke atas dulu
            setTimeout(() => {
                html2pdf().set(opt).from(element).save().then(() => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Your invoice has been downloaded.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                });
            }, 300);
        }
    </script>
@endsection --}}

@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>

    @if (url()->previous() == route('visa'))
        <a href="{{ route('visa') }}" class="btn btn-light-success btn-sm">
            <i class="fa fa-arrow-left me-1"></i>Back
        </a>
    @else
        <a href="{{ url()->previous() }}" class="btn btn-light-success btn-sm">
            <i class="fa fa-arrow-left me-1"></i>Back
        </a>
    @endif
@endsection

@section('content')
    <style>
        @media print {
            .page-break {
                page-break-before: always !important;
            }

            .avoid-break,
            .avoid-break table,
            .avoid-break tr,
            .avoid-break td,
            .avoid-break th {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }

            table thead {
                display: table-header-group;
            }

            table tfoot {
                display: table-footer-group;
            }
        }
    </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;">

                            <!-- ===== HEADER + BILL TO ===== -->
                            <div class="avoid-break">
                                <table width="100%">
                                    <tr>
                                        <td width="20%" align="left">
                                            <img src="{{ asset('media/logo-gymnastics-color.png') }}" style="height:70px;">
                                        </td>
                                        <td width="60%" align="center">
                                            <h2 style="margin:0;">53<sup>rd</sup> Artistic Gymnastics<br>World Championships
                                            </h2>
                                            <p style="margin:0;">Jakarta 2025</p>
                                        </td>
                                        <td width="20%" align="right">
                                            <img src="{{ asset('media/logo-fig.png') }}" style="height:70px;">
                                        </td>
                                    </tr>
                                </table>

                                <div class="d-flex justify-content-between pb-7 mt-5">
                                    <h2 class="fw-bolder text-gray-800 fs-2qx">INVOICE</h2>
                                    <div class="text-end">
                                        <p class="text-muted mb-1">Invoice Number: {{ $visa->visa_number }}</p>
                                        <p class="text-muted mb-1">Date: {{ $visa->created_at->format('F d, Y') }}</p>
                                    </div>
                                </div>

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

                            <!-- ===== ITEMIZED LIST ===== -->
                            <div class="border-bottom pb-12 avoid-break">
                                <table class="table">
                                    <thead>
                                        <tr class="border-bottom fs-6 fw-bold text-muted text-uppercase">
                                            <th style="width:5%;">#</th>
                                            <th style="width:55%;">Person</th>
                                            <th style="width:20%; text-align:right;">Price</th>
                                            <th style="width:20%; text-align:right;">Total Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($accreditations as $acc)
                                            <tr class="fw-bold text-gray-700 fs-5">
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $acc->accreditation->first_name }}
                                                    {{ $acc->accreditation->last_name }}</td>
                                                <td style="text-align:right;">USD {{ number_format($acc->price, 2) }}</td>
                                                <td style="text-align:right;">USD {{ number_format($acc->price, 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- ===== TOTAL ===== -->
                            @php $total = $accreditations->sum('price'); @endphp
                            <div class="total-section avoid-break">
                                <table
                                    style="width:60%; margin-left:auto; border-collapse:collapse; font-size:14pt; font-weight:bold;">
                                    <tr>
                                        <td style="width:60%; text-align:right; padding:6px;">Grand Total:</td>
                                        <td style="width:40%; text-align:right; color:#28a745; padding:6px;">
                                            USD {{ number_format($total, 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:right; padding:6px;">Payment:</td>
                                        <td style="text-align:right; color:#28a745; padding:6px;">
                                            USD {{ number_format($visa->payment_amount, 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:right; padding:6px;">Outstanding:</td>
                                        <td style="text-align:right; color:#28a745; padding:6px;">
                                            USD {{ number_format($total - $visa->payment_amount, 2) }}
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <!-- PAGE BREAK -->
                            <div class="page-break"></div>

                            <!-- ===== TERMS ===== -->
                            <div class="avoid-break">
                                <p style="font-size:12px; line-height:1.6; color:#555;">
                                    <strong>Terms and Conditions:</strong>
                                </p>
                                <ol style="padding-left: 20px; margin: 10px 0;">
                                    <li>
                                        All the payments made should be <strong>NET of any bank charges</strong>.
                                        And
                                        please state the name of the entity concerned <strong>as well as the payment
                                            purpose</strong> on the transfer with the format <strong>"DELEGATION
                                            NAME"_2025 ART WCH Jakarta</strong>, Example: <span></span>
                                        <strong>INA_2025 ART WCH Jakarta</strong></span>
                                    </li>
                                    @php
                                        $grouped = $accreditations->groupBy('visa_category_code');
                                        $hasAthlete = $grouped->has('C8A');
                                        $hasNonAthlete = $grouped->has('C8B');

                                        $priceAthlete = $grouped->get('C8A')?->first()->price ?? null;
                                        $priceNonAthlete = $grouped->get('C8B')?->first()->price ?? null;
                                    @endphp

                                    <li>
                                        The LOC will start the Visa processing only after the receipt of the
                                        <strong>NON-REFUNDABLE</strong> payment of

                                        @if ($hasAthlete && $hasNonAthlete)
                                            <strong>USD {{ number_format($priceAthlete, 2) }}</strong> for
                                            athlete(s) and
                                            <strong>USD {{ number_format($priceNonAthlete, 2) }}</strong> for
                                            non-athlete(s)
                                        @elseif ($hasAthlete)
                                            <strong>USD {{ number_format($priceAthlete, 2) }}</strong> per athlete
                                            applicant
                                        @elseif ($hasNonAthlete)
                                            <strong>USD {{ number_format($priceNonAthlete, 2) }}</strong> per
                                            non-athlete applicant
                                        @else
                                            <strong>USD -</strong>
                                        @endif

                                        at the latest on <strong>01 September 2025</strong>.
                                    </li>

                                    <li>
                                        The LOC is not responsible of late visa request and late payment.
                                    </li>
                                    <li>
                                        The participating Federation is responsible for covering all bank fees in
                                        connection with the bank transfers.
                                    </li>
                                </ol>
                            </div>

                            <!-- ===== PAYMENT INFO ===== -->
                            <div class="avoid-break mt-4">
                                <p style="font-size:12px; line-height:1.6; color:#555;">
                                    <strong>Payment to:</strong><br>
                                    Pengurus Besar Persatuan Senam Indonesia-JAGOC 2025<br>
                                    <strong>BANK MANDIRI</strong> 126-05-5000-202-5<br>
                                    <strong>SWIFT CODE:</strong> BMRIIDJA<br><br>
                                    Bank Mandiri Jakarta Gandaria<br>
                                    Jalan Gandaria Tengah III No. 21,<br>
                                    Kebayoran Baru, Jakarta Selatan
                                </p>
                            </div>

                            <!-- ===== FOOTER ===== -->
                            <div class="invoice-footer mt-5 text-end" style="font-size:14px; color:#555;">
                                Thank you,<br><br>(Finance Division)
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Proof Upload -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            @if ($visa->payment_proff)
                                <p class="fw-bold">Uploaded Payment Proof:</p>
                                <img src="{{ asset('storage/' . $visa->payment_proff) }}" class="img-fluid rounded border">
                            @else
                                <div class="alert alert-warning">Payment proof has not been uploaded yet.</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function printPDF() {
            const element = document.querySelector('.printed');
            window.scrollTo(0, 0);

            Swal.fire({
                title: 'Generating PDF...',
                text: 'Please wait while we prepare your invoice.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            const opt = {
                margin: [20, 20, 20, 20],
                filename: 'invoice-{{ $visa->visa_number }}.pdf',
                image: {
                    type: 'jpeg',
                    quality: 1
                },
                html2canvas: {
                    scale: 2,
                    useCORS: true,
                    scrollY: 0
                },
                jsPDF: {
                    unit: 'pt',
                    format: 'a4',
                    orientation: 'portrait'
                },
                pagebreak: {
                    mode: ['avoid-all', 'css', 'legacy']
                }
            };

            setTimeout(() => {
                html2pdf().set(opt).from(element).save().then(() => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Your invoice has been downloaded.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                });
            }, 300);
        }
    </script>
@endsection