@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('farewell-banquet') }}" class="btn btn-light-success btn-sm"><i
            class="fa fa-arrow-left me-1"></i>Back</a>
@endsection

@section('content')

    <style>
        .qr-container svg {
            width: 80px !important;
            height: 80px !important;
        }

        #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 {
            .no-break {
                page-break-inside: avoid !important;
            }

            .keep-together {
                page-break-inside: avoid !important;
                page-break-before: avoid !important;
            }

            .force-new-page {
                page-break-before: always !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">

                <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">
                                    <div class="d-flex justify-content-between pb-7">
                                        <div>
                                            <h2 class="fw-bolder text-gray-800 fs-2qx pe-5">INVOICE</h2>
                                            <h3>
                                                {{ ucfirst($farewell->status) }}
                                            </h3>
                                        </div>
                                        <div class="text-end">
                                            <p class="text-dark mb-1">Invoice Number: {{ $farewell->invoice_no }}</p>
                                            <p class="text-dark mb-1">Date:
                                                {{ \Carbon\Carbon::parse($farewell->created_at)->format('F d, Y') }}</p>
                                            <p class="text-dark">Due Date:
                                                {{ \Carbon\Carbon::parse($farewell->due_date)->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">{{ $farewell->user_name ?? '-' }}
                                            ({{ $farewell->user_email ?? '-' }})</p>
                                    </div>

                                    <div class="border-bottom pb-12">
                                        <!-- Farewell Code Table -->
                                        <table class="table">
                                            <thead>
                                                <tr class="border-bottom fw-bold text-muted text-uppercase">
                                                    <th>Farewell Code</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if ($farewell->status === 'approved')
                                                    @foreach ($details as $detail)
                                                        <tr class="fw-bold text-gray-700 align-middle">
                                                            <td>
                                                                <div
                                                                    class="d-flex align-items-center justify-content-between gap-3">
                                                                    <div>{{ $detail->farewell_code }}</div>
                                                                    <div class="qr-container">
                                                                        {!! $detail->qr_svg !!}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @else
                                                    @for ($i = 1; $i <= $farewell->quantity; $i++)
                                                        <tr class="fw-bold text-gray-700 farewell-row">
                                                            <td> person {{ $i }} - USD
                                                                {{ number_format(45, 2) }}</td>
                                                        </tr>
                                                    @endfor
                                                @endif
                                            </tbody>

                                        </table>
                                    </div>

                                    <!-- Total Section -->

                                </div>
                            </div>

                            <div class="keep-together">
                                <!-- Total Section -->
                                <div class="fw-bolder text-end pt-3">
                                    <p>Quantity: <span class="text-dark">{{ $farewell->quantity }}</span></p>
                                    <p>Total Amount:
                                        <span class="text-success">USD
                                            {{ number_format($farewell->amount, 2) }}</span>
                                    </p>
                                </div>
                                <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>All prices include applicable taxes, service charges, and
                                                    transportation.
                                                    Personal expenses are not included.</li>
                                                <li>Any charges (e.g. early check-in or late check-out) must be settled
                                                    directly
                                                    with the hotel.</li>
                                                <li>Hotel price increases may apply after <strong>30 June 2025</strong>.
                                                </li>
                                            </ol>
                                        </td>
                                    </tr>

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

                                    <!-- Payment Info -->
                                    <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>

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

                                    <!-- Thank you -->
                                    <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>
                </div>

                <!-- Payment Proof Upload Card -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            @if (!$farewell->payment_proof)
                                <h5 class="mb-3">Upload Payment Proof</h5>
                                <form action="{{ route('farewell.uploadProof', $farewell->id) }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf

                                    <input type="file" name="payment_proof"
                                        class="form-control mb-3 @error('payment_proof') is-invalid @enderror"
                                        accept="image/*,application/pdf" required>
                                    @error('payment_proof')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror

                                    <button type="submit" class="btn btn-primary w-100">Submit Payment Proof</button>
                                </form>
                            @else
                                <h5 class="text-success mb-3">Payment Proof Uploaded</h5>

                                @php
                                    $extension = pathinfo($farewell->payment_proof, PATHINFO_EXTENSION);
                                @endphp

                                @if (in_array($extension, ['jpg', 'jpeg', 'png']))
                                    <img src="{{ asset('storage/' . $farewell->payment_proof) }}" class="img-fluid"
                                        width="300">
                                @elseif($extension === 'pdf')
                                    <a href="{{ asset('storage/' . $farewell->payment_proof) }}" target="_blank"
                                        class="btn btn-outline-secondary">View PDF</a>
                                @else
                                    <p class="text-muted">Uploaded file: <a
                                            href="{{ asset('storage/' . $farewell->payment_proof) }}" target="_blank">View
                                            File</a></p>
                                @endif
                                @if (
                                    (auth()->user()->role === 'admin_loc' || auth()->user()->role == 'superadmin') &&
                                        $farewell->status === 'waiting_approval')
                                    <form action="{{ route('farewell.approve', $farewell->id) }}" method="POST"
                                        class="mt-3 approve-farewell-form" data-id="{{ $farewell->id }}">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="btn btn-success w-100">Approve</button>
                                    </form>
                                @endif
                            @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>
        $(document).ready(function() {
            $('.approve-farewell-form').on('submit', function(e) {
                e.preventDefault();

                const form = $(this);
                const url = form.attr('action');
                const farewellId = form.data('id');

                Swal.fire({
                    title: 'Are you sure?',
                    text: 'You are about to approve this farewell request.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, approve it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            method: 'POST',
                            data: form.serialize(),
                            success: function(res) {
                                Swal.fire('Approved!', res.message ??
                                        'Farewell request approved.', 'success')
                                    .then(() => {
                                        location
                                            .reload(); // reload to reflect changes if needed
                                    });
                            },
                            error: function(xhr) {
                                let msg = 'Something went wrong.';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    msg = xhr.responseJSON.message;
                                }
                                Swal.fire('Error', msg, 'error');
                            }
                        });
                    }
                });
            });
        });

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

            // scroll ke paling atas
            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: [10, 10, 10, 10],
                filename: 'invoice.pdf',
                image: {
                    type: 'jpeg',
                    quality: 1
                },
                html2canvas: {
                    scale: 2,
                    useCORS: true,
                    scrollY: 0
                },
                jsPDF: {
                    unit: 'pt',
                    format: 'a4',
                    orientation: 'portrait'
                },
                pagebreak: {
                    mode: ['css', 'legacy']
                } // biarin CSS yang atur
            };

            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