@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>
        .scale-down {
            transform: scale(0.7);
            transform-origin: top left;
            width: 140%;
            /* compensate the scale so layout tetap center */
        }
    </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" 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->name }}</p>
                                        @if (!empty($visa->user->address))
                                            <p class="col-5">{{ $visa->user->address }}</p>
                                        @endif
                                    </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></th>
                                                    <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>{{ $loop->iteration }}</td>
                                                        <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>
                                <tr>
                                    <td colspan="3" style="font-size: 12px; line-height: 1.6; color: #555; padding-bottom: 45px;">
                                        <strong>Details:</strong>
                                        <div>
                                            {{ $visa->keterangan_invoice }}
                                        </div>
                                    </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');

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

            html2canvas(element, {
                scale: 2,
                scrollY: -window.scrollY
            }).then(canvas => {
                const imgData = canvas.toDataURL('image/jpeg', 1.0);

                const {
                    jsPDF
                } = window.jspdf;
                const pdf = new jsPDF('p', 'pt', 'a4');

                const pageWidth = pdf.internal.pageSize.getWidth();
                const pageHeight = pdf.internal.pageSize.getHeight();

                const imgWidth = pageWidth;
                const imgHeight = canvas.height * imgWidth / canvas.width;

                const adjustedHeight = imgHeight > pageHeight ? pageHeight : imgHeight;

                pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, adjustedHeight);
                pdf.save('invoice.pdf');

                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'Your invoice has been downloaded.',
                    timer: 2000,
                    showConfirmButton: false
                });
            });
        }
    </script>
@endsection