@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 (auth()->user()->role == 'admin_loc' || auth()->user()->role == 'superadmin')
        <a href="{{ route('visa_approve') }}" class="btn btn-light-success btn-sm"><i
                class="fa fa-arrow-left me-1"></i>Approve</a>
    @else
        <a href="{{ route('visa') }}" 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 {
                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;">
                            <!-- Header & Info -->

                            <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>Persons</th>
                                            <th>Price</th>
                                            <th>Total Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($accreditations as $acc)
                                            <tr class="fw-bold text-gray-700 fs-5">
                                                <td>{{ $acc->accreditation->first_name }}
                                                    {{ $acc->accreditation->last_name }}</td>
                                                <td>USD {{ number_format($acc->price, 2) }}</td>
                                                <td>USD {{ number_format($acc->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($accreditations->sum('price'), 2) }}</span>
                                </p>
                            </div>

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

                            <!-- Terms and Conditions -->
                            <div class="avoid-break">
                                <strong>Terms and Conditions:</strong>
                                <ol>
                                    <li>All the payments made should be NET ...</li>
                                    <li>The LOC will start ...</li>
                                </ol>
                            </div>

                            <!-- Payment Info + Footer -->
                            <div class="avoid-break">
                                <p><strong>Payment to:</strong> ...</p>
                            </div>

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

                    {{-- <div class="printed">
                        <div class="card" style="padding: 30px;">
                            <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 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>
                                        </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">{{ $visa->user->country->name ?? '-' }}</p>
                                    </div>

                                    <div class="border-bottom pb-12">
                                        <!-- Table with Itemized List -->
                                        <table class="table">
                                            <thead>
                                                <tr class="border-bottom fs-6 fw-bold text-muted text-uppercase">
                                                    <th>Person</th>
                                                    <th>Price</th>
                                                    <th>Total Price</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($accreditations as $acc)
                                                    <tr class="fw-bold text-gray-700 fs-5">
                                                        <td>{{ $acc->accreditation->first_name }}
                                                            {{ $acc->accreditation->last_name }}</td>
                                                        <td>USD {{ number_format($acc->price, 2) }}</td>
                                                        <td>USD {{ number_format($acc->price, 2) }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>

                                        </table>
                                    </div>

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

                                    <div class="fs-xl-2x fs-2 fw-bolder text-end pt-3">
                                        <p>Total: <span class="text-success">
                                                USD {{ number_format($total, 2) }}
                                            </span></p>
                                    </div>
                                </div>
                            </div>
                            <table>
                                <!-- Spacer -->
                                <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; 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')
                                        <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');

            const opt = {
                margin: [20, 20, 20, 20],
                filename: 'invoice.pdf',
                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();
        }
    </script>
@endsection