@extends('layout.base')

@section('css')
<style>
    .select2-container--default .select2-selection--single {
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #212529 !important;
        height: 38px !important;
        border-radius: 4px !important;
    }

    /* Style teks yang ditampilkan */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #212529 !important;
        background-color: transparent !important;
        line-height: 36px !important;
    }

    /* Panah dropdown */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }

    /* Style dropdown saat terbuka */
    .select2-container--open .select2-dropdown {
        background-color: #ffffff !important;
        color: #212529 !important;
        border: 1px solid #ced4da !important;
        z-index: 9999 !important;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    table,
    th,
    td {
        border: 1px solid black !important;
        padding: 10px;
        text-align: center;
        vertical-align: middle;

        /* Menambah jarak lebih luas */
    }

    th {
        background-color: #f8f9fa;
    }

    input,
    select {
        width: 100%;
        padding: 8px;
        /* Tambah padding agar tidak mepet */
        box-sizing: border-box;
        margin: 3px 0;
        /* Beri margin atas dan bawah agar tidak terlalu mepet */
    }

    table input,
    table select {
        margin: 5px;
        /* Beri jarak dari border tabel */
        padding: 8px;
        border-radius: 5px;
        /* Opsional: Untuk memperhalus tampilan */
    }

    table td input[type="text"] {
        width: 98%;
        /* Hindari melebihi border */
        padding: 8px;
        margin: 5px;
        box-sizing: border-box;
        max-width: 80%;
        /* Hindari input melebar di luar sel */
    }

    table td input[type="text"].special-requirements {
        width: 90%;
        /* Batasi lebar maksimum */
        max-width: 95%;
        /* Pastikan tidak lebih dari 90% */
        padding: 8px;
        margin: 5px auto;
        /* Tambahkan margin agar rapi */
        box-sizing: border-box;
        /* Hindari input melebar ke luar */
        display: block;
        /* Pastikan tidak ada efek inline */
    }

    .gender-input {
        width: 50px;
        text-align: center;
    }
</style>
@endsection

@section('content')
    @php
        $user = Auth::user();
    @endphp

    <div class="card pb-4 pt-4">
        <div class="container">
            <h2 class="text-center">ACCOMMODATION FORM</h2>
            <p class="text-center">{{ $reservation->hotel_name }}<br>
                {{ $reservation->hotel_address }}<br>
                <a href="{{ $reservation->hotel_website }}">{{ $reservation->hotel_website }}</a>
            </p>

            <table class="table text-center">
                <tr>
                    <th>Federation</th>
                    <td colspan="3">{{ $reservation->booked_by_name }}</td>
                </tr>
                <tr>
                    <th>Contact Person</th>
                    <td>{{ $reservation->booked_by_name }}</td>
                    <th>Phone</th>
                    <td>{{ $reservation->phone_number }}</td>
                </tr>
                <tr>
                    <th>Email</th>
                    <td colspan="3"> {{ $reservation->booked_by_email }}</td>
                </tr>
            </table>


            <form method="POST" action="{{ route('reservation.accreditation.save', $reservation->id) }}"
                id="accreditationForm">
                @csrf
                <input type="hidden" name="status" id="form_status" value="{{ $status }}">

                @php
                    $reservationIndex = 0; // Untuk tracking indeks dalam loop
                @endphp

                    @foreach ($reservationDetails as $detail)
                    <div class="table-responsive">
                        @php
                            $isDoubleRoom = str_contains(strtolower($detail->room_type_name), 'double');
                            $hasMealOptions = $detail->meals == 1;
                        @endphp
                        <h4 class="mt-3">Room Name: {{ $detail->room_name }}</h4>
                        <table class="table table-bordered text-center">
                            <thead>
                                <tr>
                                    <th style="width: 10%;">Checkin day</th>
                                    <th style="width: 10%;">Checkout day</th>
                                    <th style="width: 20%;">Room Type</th>
                                    <th style="width: 5%"># of nights</th>
                                    <th>Full Name</th>
                                    @if ($isDoubleRoom)
                                    <th>Sharing room with</th>
                                    @endif
                                    @if ($hasMealOptions)
                                    <th>With</th>
                                    @endif
                                    {{-- <th style="width: 5%;">Gender</th> --}}
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $qty = $detail->quantity;
                                    if ($isDoubleRoom)
                                        $qty = floor($qty / 2);
                                @endphp
                                @for ($i = 0; $i < $qty; $i++)
                                    @php
                                        // Ambil data akreditasi sesuai urutan
                                        $reservationAccreditation = $reservationAccreditations[$reservationIndex] ?? null;
                                        $selectedAccreditation = $reservationAccreditation
                                            ? $reservationAccreditation->accreditation_id
                                            : null;
                                        $selectedSharingWith = $reservationAccreditation
                                            ? $reservationAccreditation->sharing_with
                                            : null;
                                    @endphp

                                    <tr>
                                        <td>
                                            <input type="date" class="form-control" name="checkin_date[{{ $loop->iteration }}][]" autocomplete="off" value="{{ $detail->start_date }}" readonly {{ $status === 'final' ? 'readonly' : '' }}>
                                        </td>
                                        <td>
                                            <input type="date" class="form-control" name="checkout_date[{{ $loop->iteration }}][]" autocomplete="off" value="{{ $detail->end_date }}" readonly {{ $status === 'final' ? 'readonly' : '' }}>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="room_id[{{ $loop->iteration }}][]" autocomplete="off" value="{{ $detail->room_id }}" hidden readonly>
                                            {{ $detail->room_type_name }}
                                        </td>
                                        <td>
                                            {{ \Carbon\Carbon::parse($detail->start_date)->diffInDays(\Carbon\Carbon::parse($detail->end_date)) }}
                                        </td>
                                        <td>
                                            <select class="form-select select-accreditation" autocomplete="off" name="full_name[{{ $loop->iteration }}][]" {{ $status === 'final' ? 'disabled' : '' }}>
                                                <option value="" selected></option>
                                                @foreach ($accreditations as $person)
                                                    <option value="{{ $person->id }}" data-gender="{{ $person->gender }}"
                                                            @selected(
                                                                old("full_name.{$loop->parent->iteration}.$i") == $person->id ||
                                                                (empty(old("full_name.{$loop->parent->iteration}.$i")) && !empty($selectedAccreditation) && $selectedAccreditation == $person->id)
                                                            )
                                                        >
                                                        {{ $person->first_name }} {{ $person->last_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        @if ($isDoubleRoom)
                                        <td>
                                            <select class="form-select select-accreditation" autocomplete="off" name="sharing_with[{{ $loop->iteration }}][]" {{ $status === 'final' ? 'disabled' : '' }}>
                                                <option value="" selected></option>
                                                @foreach ($accreditations as $person)
                                                    <option value="{{ $person->id }}" data-gender="{{ $person->gender }}"
                                                            @selected(
                                                                old("sharing_with.{$loop->parent->iteration}.$i") == $person->id ||
                                                                (empty(old("sharing_with.{$loop->parent->iteration}.$i")) && !empty($selectedSharingWith) && $selectedSharingWith == $person->id)
                                                            )
                                                        >
                                                        {{ $person->first_name }} {{ $person->last_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        @endif
                                        @if ($hasMealOptions)
                                        <td>
                                            <select class="form-select" name="meal_for[{{ $loop->iteration }}][]" autocomplete="off" {{ $status === 'final' ? 'disabled' : '' }}>
                                                <option value="launch"
                                                    @selected(
                                                        old("meal_for.{$loop->iteration}.$i") == 'launch' ||
                                                        (empty(old("meal_for.{$loop->iteration}.$i")) && isset($reservationAccreditation) && $reservationAccreditation->meal_for == 'launch')
                                                    )
                                                >Lunch</option>
                                                <option value="dinner"
                                                    @selected(
                                                        old("meal_for.{$loop->iteration}.$i") == 'dinner' ||
                                                        (empty(old("meal_for.{$loop->iteration}.$i")) && isset($reservationAccreditation) && $reservationAccreditation->meal_for == 'dinner')
                                                    )
                                                >Dinner</option>
                                            </select>
                                        </td>
                                        @endif
                                        {{-- <td>
                                            @php
                                                $gender = strtoupper(
                                                    $accreditations->where('id', $selectedAccreditation)->first()->gender ??
                                                        '',
                                                );
                                                $formattedGender =
                                                    $gender === 'MALE' ? 'M' : ($gender === 'FEMALE' ? 'F' : '');
                                            @endphp
                                            <input type="text" class="form-control gender-input"
                                                value="{{ $formattedGender }}" readonly>
                                        </td> --}}
                                    </tr>

                                    @php
                                        $reservationIndex++; // Tambahkan index untuk baris berikutnya
                                    @endphp
                                @endfor
                            </tbody>
                        </table>
                    </div>
                    @endforeach


                <table class="table table-bordered text-center">
                    <tr>
                        <th style="width: 30%">Special requirements</th>
                        <td>
                            <input type="text" class="form-control special-requirements" name="special_requirements" value="{{ old('special_requirements') ?? ($reservationAccreditations->first()->special_requirements ?? '') }}" placeholder="Special requirements (optional)" {{ $status === 'final' ? 'readonly readonly' : '' }}>
                        </td>
                    </tr>
                </table>

                <table class="table text-center">
                    <tr>
                        <th>Place and Date</th>
                        <th>Seal of the NF</th>
                        <th>NF Authorized Signature</th>
                    </tr>
                    <tr>
                        <td>Jakarta, {{ date('d F Y') }}</td>
                        <td style="height: 100px;"></td>
                        <td style="height: 100px; position: relative;">
                            <div style="position: absolute; bottom: 5px; width: 100%;">
                                {{ $reservation->booked_by_name }}
                            </div>
                        </td>
                    </tr>
                </table>

                <div class="d-flex justify-content-end gap-2 mt-3">
                    @if($user->role == 'superadmin' && $status == 'final')
                        <button type="submit" class="btn btn-success px-4 py-2" onclick="submitForm('draft')">Revert to Draft</button>
                    @elseif($status != 'final' && $user->role != 'superadmin')
                        <button type="submit" class="btn btn-secondary px-4 py-2" onclick="submitForm('draft')">Save as Draft</button>
                        <button type="submit" class="btn btn-success px-4 py-2" onclick="submitForm('final')">Finalize Form</button>
                    @endif
                </div>
            </form>

        </div>
    </div>
@endsection

@section('scripts')
@if (session("error"))
<script>
    $(function () {
        Swal.fire("{{ session('error') }}", "", "error")
    });
</script>
@endif

<script>
    function submitForm(status) {
        event.preventDefault();
        document.getElementById('form_status').value = status;
        let form = document.getElementById('accreditationForm');

        Swal.fire({
            title: 'Saving...',
            text: 'Please wait while we save the data.',
            icon: 'info',
            showConfirmButton: false,
            allowOutsideClick: false,
            timer: 2000
        }).then(() => {
            form.querySelectorAll('[disabled]').forEach(element => {
                element.disabled = false;
            });

            form.submit();
        });
    }

    // document.addEventListener("DOMContentLoaded", function() {
    //     document.querySelectorAll(".full-name-select").forEach(select => {
    //         select.addEventListener("change", function() {
    //             let genderInput = this.closest("tr").querySelector(".gender-input");
    //             let selectedOption = this.options[this.selectedIndex];
    //             let gender = selectedOption.getAttribute("data-gender").toLowerCase();
    //             genderInput.value = gender === "male" ? "M" : gender === "female" ? "F" : "";
    //         });
    //     });
    // });

    $(function () {
        let selectData;

        $("[name='meal_for[]']").select2({
            width: "100%",
            allowClear: false,
        })
        function isOptionAllowed(data, selectEl) {
            if (!data.id) return true; // skip placeholder/optgroup

            const parentRow = $(selectEl).closest('tr');
            const mainSelect = parentRow.find('.select-accreditation');
            const mainValue = mainSelect.val();
            const mainGender = mainSelect.find(':selected').data('gender');
            const optionGender = $(data.element).data('gender');

            // gender filter
            if (mainGender && optionGender && mainGender !== optionGender) {
                return false;
            }

            // uniqueness filter
            let isUsedElsewhere = false;
            $('.select-accreditation').not(selectEl).each(function() {
                let selectedValues = $(this).val() || [];
                if (selectedValues.includes(data.id)) {
                    isUsedElsewhere = true;
                }
            });

            return !isUsedElsewhere;
        }

        $('.select-accreditation').each(function() {
            const selectEl = this; // capture current select element

            $(selectEl).select2({
                width: "100%",
                allowClear: true,
                placeholder: "- Select Data -",
                matcher: function(params, data) {
                    if ($.trim(params.term) === '') {
                        return isOptionAllowed(data, selectEl) ? data : null;
                    }
                    if (typeof data.text === 'undefined') return null;

                    if (data.text.toLowerCase().includes(params.term.toLowerCase())) {
                        return isOptionAllowed(data, selectEl) ? data : null;
                    }
                    return null;
                },
                templateResult: function(data) {
                    return data.text;
                }
            });
        });

        $(document).on('change', "[name*=full_name]", function() {
            let element = $(this)
            let tr = $(this).closest('tr')
            let findSelectShareWith = tr.find("[name*=sharing_with]")

            if (findSelectShareWith.length > 0) {
                selectedOption = findSelectShareWith.find("option:selected")
                if (selectedOption.length > 0) {
                    if (selectedOption.data('gender') != element.find("option:selected").data('gender'))
                        findSelectShareWith.val("").trigger("change")
                }
            }
        })

        // refresh on change
        // $('.select-accreditation').on('change', function() {
        //     $('.select-accreditation').each(function() {
        //         $(this).select2('close').select2('open').select2('close');
        //     });
        // });
    });
</script>

@endsection