@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" onclick="event.preventDefault(); validateAndSubmit();">
                                <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf

                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            {{-- TAB NAVIGATION - 3 Shift --}}
                            <ul class="nav nav-tabs mb-3" role="tablist">
                                @for ($i = 1; $i <= 3; $i++)
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link {{ $i == 1 ? 'active' : '' }}" id="shift-{{ $i }}-tab"
                                            data-bs-toggle="tab" data-bs-target="#shift-{{ $i }}" type="button"
                                            onclick="switchShift({{ $i }})">
                                            <i class="fas fa-utensils me-1"></i>Shift {{ $i }}
                                            <span class="badge bg-secondary ms-1" id="badge-shift-{{ $i }}">0/7</span>
                                        </button>
                                    </li>
                                @endfor
                            </ul>

                            {{-- TAB CONTENT - Konten untuk setiap Shift --}}
                            <div class="tab-content">
                                @for ($i = 1; $i <= 3; $i++)
                                    <div class="tab-pane fade {{ $i == 1 ? 'show active' : '' }}" id="shift-{{ $i }}"
                                        role="tabpanel">

                                        {{-- Card Pilihan Katering untuk shift ini --}}
                                        <div class="card shadow-sm mb-3">
                                            <div class="card-header pb-0">
                                                <h6 class="mb-0">Pilih Katering Shift {{ $i }}</h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label class="form-label">Katering Shift {{ $i }}</label>
                                                        <select id="katering_shift_{{ $i }}" class="form-select">
                                                            <option value="">Pilih Katering</option>
                                                            @foreach ($katerings as $katering)
                                                                <option value="{{ $katering->id_catering }}">
                                                                    {{ $katering->nama_catering }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table table-hover">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th style="width: 5%;">No</th>
                                                        <th style="width: 12%;">Tanggal</th>
                                                        <th style="width: 10%;">Hari</th>
                                                        <th>Menu 1</th>
                                                        <th>Menu 2</th>
                                                        <th>Menu 3</th>
                                                        <th>Menu 4</th>
                                                        <th>Menu 5</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tbody-shift-{{ $i }}"></tbody>
                                            </table>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
    <style>
        /* SEMBUNYIKAN SELECT ASLI SEPENUHNYA */
        .menu-select {
            position: absolute !important;
            opacity: 0 !important;
            pointer-events: none !important;
            width: 1px !important;
            height: 1px !important;
        }

        /* STYLING SELECT2 - INI ADALAH DROPDOWN YANG SEBENARNYA TERLIHAT */
        .select2-container--bootstrap-5 .select2-selection {
            min-height: 38px !important;
            border: 1px solid #d2d6da !important;
            border-radius: 0.5rem !important;
            padding: 0.375rem 0.75rem !important;
            background-color: #ffffff !important;
            font-size: 0.875rem !important;
            line-height: 1.5 !important;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
        }

        /* PLACEHOLDER TEXT */
        .select2-container--bootstrap-5 .select2-selection__placeholder {
            color: #6c757d !important;
        }

        /* ARROW DROPDOWN */
        .select2-container--bootstrap-5 .select2-selection__arrow {
            height: 36px !important;
        }

        /* HOVER STATE */
        .select2-container--bootstrap-5 .select2-selection:hover {
            border-color: #00b7bd !important;
        }

        /* FOCUS & OPEN STATE */
        .select2-container--bootstrap-5.select2-container--focus .select2-selection,
        .select2-container--bootstrap-5.select2-container--open .select2-selection {
            border-color: #00b7bd !important;
            box-shadow: 0 0 0 0.2rem rgba(0, 183, 189, 0.25) !important;
            outline: 0 !important;
        }

        /* DROPDOWN MENU */
        .select2-container--bootstrap-5 .select2-dropdown {
            border: 1px solid #00b7bd !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }

        /* SEARCH BOX DI DALAM DROPDOWN */
        .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
            border: 1px solid #d2d6da !important;
            border-radius: 0.375rem !important;
            padding: 0.375rem 0.75rem !important;
            font-size: 0.875rem !important;
        }

        .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
            border-color: #00b7bd !important;
            box-shadow: 0 0 0 0.2rem rgba(0, 183, 189, 0.25) !important;
            outline: 0 !important;
        }

        /* ITEM HASIL PENCARIAN */
        .select2-container--bootstrap-5 .select2-results__option {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.875rem !important;
        }

        /* ITEM HOVER */
        .select2-container--bootstrap-5 .select2-results__option--highlighted {
            background-color: #00b7bd !important;
            color: white !important;
        }

        /* ITEM SELECTED */
        .select2-container--bootstrap-5 .select2-results__option--selected {
            background-color: #e9ecef !important;
            color: #212529 !important;
        }

        /* CLEAR BUTTON (X) */
        .select2-container--bootstrap-5 .select2-selection__clear {
            margin-right: 0.5rem !important;
            font-size: 1.2rem !important;
            color: #6c757d !important;
        }

        .select2-container--bootstrap-5 .select2-selection__clear:hover {
            color: #dc3545 !important;
        }

        /* CONTAINER WIDTH */
        .select2-container {
            width: 100% !important;
            display: block !important;
        }

        /* PASTIKAN TIDAK ADA SPACING TAMBAHAN */
        .select2-container--bootstrap-5 {
            margin: 0 !important;
            padding: 0 !important;
        }

        /* NO RESULTS MESSAGE */
        .select2-container--bootstrap-5 .select2-results__message {
            padding: 0.75rem !important;
            color: #6c757d !important;
            font-size: 0.875rem !important;
        }

        /* Styling Tombol Tambah di dalam Select2 */
        .select2-results__message {
            text-align: center;
            padding: 15px !important;
        }

        .btn-add-new-menu {
            display: inline-block;
            width: 100%;
            margin-top: 8px;
            padding: 6px;
            font-size: 0.75rem;
            font-weight: bold;
            color: #00b7bd;
            background-color: #ffffff;
            border: 1px dashed #00b7bd;
            border-radius: 5px;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .btn-add-new-menu:hover {
            background-color: #00b7bd;
            color: white;
            border-style: solid;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        const menus = @json($menus);
        const daysOfWeek = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];

        // ✅ RESTORE OLD VALUES FROM LARAVEL
        const oldMenus = @json(old('menus', []));

        let shiftData = {
            1: { katering: '', rows: [] },
            2: { katering: '', rows: [] },
            3: { katering: '', rows: [] }
        };

        let currentShift = 1;
        let dateRange = [];

        document.addEventListener('DOMContentLoaded', function () {

            const today = new Date();
            const nextMonday = new Date();
            nextMonday.setDate(today.getDate() + (8 - today.getDay()));

            for (let i = 0; i < 7; i++) {
                const d = new Date(nextMonday);
                d.setDate(nextMonday.getDate() + i);
                dateRange.push(d);
            }

            // ✅ RESTORE OLD DATA KE shiftData
            if (oldMenus && oldMenus.length > 0) {
                oldMenus.forEach(menu => {
                    const shift = parseInt(menu.shift);
                    const rowIndex = shiftData[shift].rows.findIndex(r => r.tanggal === menu.tanggal);

                    if (rowIndex === -1) {
                        // Jika row belum ada, tambahkan
                        shiftData[shift].rows.push({
                            tanggal: menu.tanggal,
                            hari: menu.hari,
                            menu1_id: menu.menu1_id || '',
                            menu2_id: menu.menu2_id || '',
                            menu3_id: menu.menu3_id || '',
                            menu4_id: menu.menu4_id || '',
                            menu5_id: menu.menu5_id || ''
                        });
                    }

                    // Set katering untuk shift ini
                    if (menu.id_katering) {
                        shiftData[shift].katering = menu.id_katering;
                    }
                });
                console.log('✅ Old values restored:', shiftData);
            }

            [1, 2, 3].forEach(shift => {
                generateShiftTable(shift);

                // ✅ SET KATERING VALUE DARI OLD DATA
                const kateringSelect = document.getElementById(`katering_shift_${shift}`);
                if (shiftData[shift].katering) {
                    kateringSelect.value = shiftData[shift].katering;
                }

                kateringSelect.addEventListener('change', function () {
                    shiftData[shift].katering = this.value;
                    console.log(`Katering Shift ${shift} dipilih:`, this.value);
                });
            });

            updateAllBadges();

            console.log('✅ Inisialisasi selesai!');
            console.log('📅 Date Range:', dateRange);
            console.log('💾 Shift Data:', shiftData);
        });

        function generateShiftTable(shift) {
            const tbody = document.getElementById(`tbody-shift-${shift}`);
            tbody.innerHTML = '';

            // ✅ GUNAKAN DATA DARI shiftData JIKA ADA, ATAU DEFAULT KE dateRange
            const rowsToGenerate = shiftData[shift].rows.length > 0
                ? shiftData[shift].rows
                : dateRange.map(date => ({
                    tanggal: date.toISOString().split('T')[0],
                    hari: daysOfWeek[date.getDay()],
                    menu1_id: '',
                    menu2_id: '',
                    menu3_id: '',
                    menu4_id: '',
                    menu5_id: ''
                }));

            rowsToGenerate.forEach((rowData, idx) => {
                // Jika shiftData belum terisi, isi dengan data default
                if (!shiftData[shift].rows[idx]) {
                    shiftData[shift].rows[idx] = rowData;
                }

                const row = tbody.insertRow();
                row.innerHTML = `
                            <td>${idx + 1}</td>
                            <td>
                                <input type="date" value="${rowData.tanggal}" class="form-control date-input" 
                                    data-shift="${shift}" data-row="${idx}">
                            </td>
                            <td id="day-${shift}-${idx}">${rowData.hari}</td>
                            ${[1, 2, 3, 4, 5].map(m =>
                    `<td>${createMenuSelect(shift, idx, `menu${m}_id`)}</td>`
                ).join('')}
                        `;
            });

            attachListeners(shift);
            initSelect2ForShift(shift);
        }

        function createMenuSelect(shift, idx, name) {
            const val = shiftData[shift].rows[idx]?.[name] || '';
            const selectId = `menu-${shift}-${idx}-${name}`;

            return `<select id="${selectId}"
                                    class="menu-select" 
                                    data-shift="${shift}" 
                                    data-row="${idx}" 
                                    data-menu="${name}">
                            <option value="">Pilih Menu</option>
                            ${menus.map(m =>
                `<option value="${m.id_menu_utama}" 
                                        ${val == m.id_menu_utama ? 'selected' : ''}>
                                        ${m.menu_utama}
                                    </option>`
            ).join('')}
                        </select>`;
        }

        function initSelect2ForShift(shift) {
            $(`#tbody-shift-${shift} .menu-select`).each(function () {
                const $selectElement = $(this); // Simpan referensi elemen select

                $(this).select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: 'Pilih Menu',
                    allowClear: true,
                    escapeMarkup: function (markup) { return markup; },
                    language: {
                        noResults: function () {
                            // Ambil teks yang sedang diketik user di search box Select2
                            let searchTerm = $(".select2-search__field").val();

                            return `
                            <div class="no-results-container text-center">
                                <span class="d-block mb-1 text-muted">"${searchTerm}" tidak ditemukan</span>
                                <button type="button" class="btn-add-new-menu" 
                                    onclick="handleAddNewMenu('${searchTerm}', '${$selectElement.attr('id')}')">
                                    <i class="fas fa-plus-circle me-1"></i> Tambah Menu Baru
                                </button>
                            </div>
                        `;
                        }
                    }
                });

                // ... sisa listener change.select2 Anda tetap sama ...
                $(this).on('change.select2', function (e) {
                    const s = this.dataset.shift;
                    const r = this.dataset.row;
                    const m = this.dataset.menu;
                    if (!shiftData[s].rows[r]) shiftData[s].rows[r] = {};
                    shiftData[s].rows[r][m] = this.value;
                    updateBadge(s);
                });
            });
        }

        // Fungsi untuk eksekusi simpan otomatis
        function handleAddNewMenu(menuName, targetSelectId) {
            if (!menuName) return;

            Swal.fire({
                title: 'Simpan Menu?',
                text: `Tambahkan "${menuName}" ke daftar menu utama?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan',
                confirmButtonColor: '#00b7bd',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('menu-utama.quick-store') }}",
                        method: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            menu_name: menuName.toUpperCase()
                        },
                        beforeSend: function () {
                            Swal.showLoading();
                        },
                        success: function (response) {
                            if (response.success) {
                                // 1. Update array global menus (agar baris baru yang dibuat nanti punya data ini)
                                menus.push({
                                    id_menu_utama: response.id,
                                    menu_utama: response.name
                                });

                                // 2. Tambahkan option baru ke SEMUA dropdown .menu-select yang ada di tabel
                                // Ini kunci agar tidak perlu refresh
                                $('.menu-select').each(function () {
                                    const $this = $(this);
                                    // Cek apakah option sudah ada (mencegah duplikat di DOM)
                                    if ($this.find(`option[value="${response.id}"]`).length === 0) {
                                        const newOption = new Option(response.name, response.id, false, false);
                                        $this.append(newOption);
                                    }
                                });

                                // 3. Khusus untuk select yang sedang diklik, set nilainya menjadi terpilih
                                $(`#${targetSelectId}`).val(response.id).trigger('change');

                                // 4. Tutup dropdown yang sedang terbuka
                                $(`#${targetSelectId}`).select2('close');

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Tersimpan!',
                                    text: `Menu "${response.name}" berhasil ditambahkan ke semua pilihan.`,
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                            }
                        },
                        error: function (xhr) {
                            let errorMsg = xhr.responseJSON ? xhr.responseJSON.message : 'Gagal menyimpan';
                            Swal.fire('Error', errorMsg, 'error');
                        }
                    });
                }
            });
        }

        function attachListeners(shift) {
            document.querySelectorAll(`#tbody-shift-${shift} .date-input`).forEach(inp => {
                inp.addEventListener('change', function () {
                    const s = this.dataset.shift;
                    const r = parseInt(this.dataset.row);
                    const d = new Date(this.value);
                    const day = daysOfWeek[d.getDay()];

                    shiftData[s].rows[r].tanggal = this.value;
                    shiftData[s].rows[r].hari = day;

                    document.getElementById(`day-${s}-${r}`).textContent = day;

                    console.log(`📅 Tanggal diubah - Shift ${s}, Row ${r}:`, this.value, day);
                });
            });

            document.querySelectorAll(`#tbody-shift-${shift} .menu-select`).forEach(sel => {
                sel.addEventListener('change', function () {
                    const s = this.dataset.shift;
                    const r = this.dataset.row;
                    const m = this.dataset.menu;

                    if (!shiftData[s].rows[r]) shiftData[s].rows[r] = {};
                    shiftData[s].rows[r][m] = this.value;

                    updateBadge(s);

                    console.log(`🍽️ Menu dipilih - Shift ${s}, Row ${r}, ${m}:`, this.value);
                });
            });
        }

        function switchShift(shift) {
            shiftData[currentShift].katering = document.getElementById(`katering_shift_${currentShift}`).value;

            console.log(`💾 Save Shift ${currentShift} - Katering:`, shiftData[currentShift].katering);

            currentShift = shift;

            document.getElementById(`katering_shift_${shift}`).value = shiftData[shift].katering;

            console.log(`📂 Load Shift ${shift} - Katering:`, shiftData[shift].katering);
        }

        function updateBadge(shift) {
            const total = shiftData[shift].rows.length;

            const filled = shiftData[shift].rows.filter(r =>
                r.menu1_id || r.menu2_id || r.menu3_id || r.menu4_id || r.menu5_id
            ).length;

            const badge = document.getElementById(`badge-shift-${shift}`);

            badge.textContent = `${filled}/${total}`;

            if (filled === 0) {
                badge.className = 'badge ms-1 bg-secondary';
            } else if (filled === total) {
                badge.className = 'badge ms-1 bg-success';
            } else {
                badge.className = 'badge ms-1 bg-warning';
            }

            console.log(`🏷️ Badge Shift ${shift} updated: ${filled}/${total}`);
        }

        function updateAllBadges() {
            [1, 2, 3].forEach(updateBadge);
            console.log('🏷️ All badges updated!');
        }

        function validateAndSubmit() {
            shiftData[currentShift].katering = document.getElementById(`katering_shift_${currentShift}`).value;
            console.log('💾 Final save shift aktif:', currentShift);

            const validationErrors = [];

            [1, 2, 3].forEach(shift => {
                const hasMenus = shiftData[shift].rows.some(row =>
                    row.menu1_id || row.menu2_id || row.menu3_id || row.menu4_id || row.menu5_id
                );

                const hasKatering = shiftData[shift].katering && shiftData[shift].katering !== '';

                if (hasMenus && !hasKatering) {
                    validationErrors.push(`Shift ${shift}`);
                }
            });

            if (validationErrors.length > 0) {
                console.warn('⚠️ Validasi gagal!', validationErrors);
                return Swal.fire({
                    icon: 'error',
                    title: 'Katering Belum Dipilih',
                    html: `<p>Anda sudah memilih menu untuk shift berikut, tetapi belum memilih katering:</p>
                               <p class="fw-bold text-danger">${validationErrors.join(', ')}</p>
                               <p class="mt-2">Silakan pilih katering atau hapus menu yang sudah dipilih.</p>`,
                    confirmButtonText: 'OK'
                });
            }

            const filledShifts = [1, 2, 3].filter(s =>
                shiftData[s].katering &&
                shiftData[s].rows.some(row =>
                    row.menu1_id || row.menu2_id || row.menu3_id || row.menu4_id || row.menu5_id
                )
            );

            if (filledShifts.length === 0) {
                console.warn('⚠️ Validasi gagal! Tidak ada shift yang terisi');
                return Swal.fire({
                    icon: 'warning',
                    title: 'Data Belum Lengkap',
                    text: 'Minimal pilih katering dan isi menu untuk salah satu shift.',
                    confirmButtonText: 'OK'
                });
            }

            const allMenus = [];

            [1, 2, 3].forEach(shift => {
                if (shiftData[shift].katering) {
                    shiftData[shift].rows.forEach(row => {
                        allMenus.push({
                            tanggal: row.tanggal,
                            hari: row.hari,
                            shift: shift,
                            id_katering: shiftData[shift].katering,
                            menu1_id: row.menu1_id || null,
                            menu2_id: row.menu2_id || null,
                            menu3_id: row.menu3_id || null,
                            menu4_id: row.menu4_id || null,
                            menu5_id: row.menu5_id || null
                        });
                    });
                }
            });

            console.log('📦 Data valid siap dikirim:', allMenus);

            Swal.fire({
                title: 'Konfirmasi Simpan',
                html: `<p>Anda akan menyimpan menu plan untuk <strong>${filledShifts.length} shift</strong>.</p>
                           <p class="text-muted small">Shift: ${filledShifts.join(', ')}</p>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Simpan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Menyimpan Data',
                        html: 'Mohon tunggu...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    const form = document.getElementById('{{ $dmenu }}-form');

                    form.querySelectorAll('input[type="hidden"]').forEach(inp => {
                        if (inp.name !== '_token') inp.remove();
                    });

                    allMenus.forEach((menu, i) => {
                        Object.keys(menu).forEach(key => {
                            const inp = document.createElement('input');
                            inp.type = 'hidden';
                            inp.name = `menus[${i}][${key}]`;
                            inp.value = menu[key] || '';
                            form.appendChild(inp);
                        });
                    });

                    console.log('✅ Form siap submit dengan', allMenus.length, 'records');

                    form.submit();
                }
            });
        }
    </script>
    @if(session('duplicate_error'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                let errorDetails = '';
                @foreach(session('duplicate_error') as $dup)
                    errorDetails += '<strong>{{ $dup["catering"] }}</strong> - {{ $dup["hari"] }}, {{ $dup["tanggal"] }} - Shift {{ $dup["shift"] }}<br>';
                @endforeach

                Swal.fire({
                    icon: 'error',
                    title: 'Data Sudah Ada!',
                    html: 'Menu plan sudah ada untuk:<br><br>' + errorDetails,
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#d33'
                });
            });
        </script>
    @endif
@endsection