@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 position-relative end-0">
                        <button class="btn btn-secondary mb-0 me-2" 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 " id="btn-submit-form">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Compact Realtime Log --}}
    <div class="container-fluid pt-3 px-4">
        <div id="realtime-log" class="realtime-log" style="display: none;">
            <div class="log-header">
                <span id="log-count">0</span> Menu Plan yang belum diisi lengkap
            </div>
            <div id="log-content" class="log-content"></div>
        </div>
    </div>

    <div class="container-fluid py-4 readable-form">
        <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
            @csrf

            {{-- Loop untuk setiap menu plan --}}
            @foreach($menus as $index => $menu)
                <div class="row @if($index > 0) mt-4 @endif">
                    <div class="col-md-12">
                        <div class="card menu-plan-card" data-index="{{ $index }}">
                            {{-- Card Header yang bisa diklik untuk toggle collapse --}}
                            <div class="card-header pb-0" 
                                style="background-color: #ffffff; border-bottom: 1px solid #dee2e6; cursor: pointer;"
                                data-bs-toggle="collapse" 
                                data-bs-target="#collapse{{ $index }}"
                                aria-expanded="{{ $index == 0 ? 'true' : 'false' }}"
                                aria-controls="collapse{{ $index }}">
                                
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0" style="color: #000000;">
                                        Menu Plan {{ $index + 1 }} - {{ $menu->nama_cateringg }} | 
                                        {{ $menu->hari }}, {{ date('d-m-Y', strtotime($menu->tanggal)) }} - 
                                        Shift {{ $menu->shift }}
                                    </h6>
                                    <i class="fas fa-chevron-down" style="color: #000000;"></i>
                                </div>
                            </div>

                            {{-- Card Body dengan collapse --}}
                            <div id="collapse{{ $index }}" 
                                class="collapse {{ $index == 0 ? 'show' : '' }}" 
                                data-bs-parent="#accordionMenuPlan">
                                
                                <div class="card-body" style="padding: 25px;">
                                    {{-- Hidden input untuk id menu plan --}}
                                    <input type="hidden" name="menu_plans[{{ $index }}][id_menu_plan]" value="{{ $menu->id_menu_plan }}">

                                    <div class="row">
                                        {{-- Baris: ID Menu Plan, Tanggal & Shift, Nama Katering --}}
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">ID Menu Plan</label>
                                            <input type="text" class="form-control"
                                                value="{{ $menu->id_menu_plan }}" readonly>
                                        </div>

                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">Tanggal & Shift</label>
                                            <input type="text" class="form-control"
                                                value="{{ $menu->hari }}, {{ date('d-m-Y', strtotime($menu->tanggal)) }} - Shift {{ $menu->shift }}"
                                                readonly>
                                        </div>

                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">Catering</label>
                                            <input type="text" class="form-control"
                                                value="{{ $menu->nama_cateringg }}" readonly>
                                        </div>
                                    </div>
                                    
                                    <hr class="horizontal dark mt-0">
                                    
                                    {{-- Baris Menu: Menu 1-5 dibagi jadi 2 kolom --}}
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label">Menu 1</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $menu->menu1_name ?? '-' }}" readonly>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Menu 2</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $menu->menu2_name ?? '-' }}" readonly>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label">Menu 3</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $menu->menu3_name ?? '-' }}" readonly>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Menu 4</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $menu->menu4_name ?? '-' }}" readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <hr class="horizontal dark mt-2">

                                    {{-- Input Qty Porsi untuk menu plan ini --}}
                                    <h6 class="section-title" style="background-color: #ffffff; padding: 10px; border-left: 3px solid #000000; color: #000000;">
                                        📝 Planning Qty Porsi Catering
                                    </h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-control-label">Qty Satpam</label>
                                                    <input type="number"
                                                        class="form-control qty-input @error('menu_plans.'.$index.'.total_porsi_satpam') is-invalid @enderror"
                                                        name="menu_plans[{{ $index }}][total_porsi_satpam]"
                                                        data-field="Satpam"
                                                        data-index="{{ $index }}"
                                                        data-catering="{{ $menu->nama_cateringg }}"
                                                        data-tanggal="{{ $menu->hari }}, {{ date('d-m-Y', strtotime($menu->tanggal)) }}"
                                                        data-shift="{{ $menu->shift }}"
                                                        value="{{ old('menu_plans.'.$index.'.total_porsi_satpam', $menu->total_porsi_satpam ?? '') }}"
                                                        min="0"
                                                        placeholder="Masukkan qty satpam">
                                                    @error('menu_plans.'.$index.'.total_porsi_satpam')
                                                        <div class="invalid-feedback" style="font-size: 14px; font-weight: 600;">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-control-label">Qty Office</label>
                                                    <input type="number"
                                                        class="form-control qty-input @error('menu_plans.'.$index.'.total_porsi_office') is-invalid @enderror"
                                                        name="menu_plans[{{ $index }}][total_porsi_office]"
                                                        data-field="Office"
                                                        data-index="{{ $index }}"
                                                        data-catering="{{ $menu->nama_cateringg }}"
                                                        data-tanggal="{{ $menu->hari }}, {{ date('d-m-Y', strtotime($menu->tanggal)) }}"
                                                        data-shift="{{ $menu->shift }}"
                                                        value="{{ old('menu_plans.'.$index.'.total_porsi_office', $menu->total_porsi_office ?? '') }}"
                                                        min="0"
                                                        placeholder="Masukkan qty office">
                                                    @error('menu_plans.'.$index.'.total_porsi_office')
                                                        <div class="invalid-feedback" style="font-size: 14px; font-weight: 600;">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-control-label">Qty Produksi</label>
                                                    <input type="number"
                                                        class="form-control qty-input @error('menu_plans.'.$index.'.total_porsi_produksi') is-invalid @enderror"
                                                        name="menu_plans[{{ $index }}][total_porsi_produksi]"
                                                        data-field="Produksi"
                                                        data-index="{{ $index }}"
                                                        data-catering="{{ $menu->nama_cateringg }}"
                                                        data-tanggal="{{ $menu->hari }}, {{ date('d-m-Y', strtotime($menu->tanggal)) }}"
                                                        data-shift="{{ $menu->shift }}"
                                                        value="{{ old('menu_plans.'.$index.'.total_porsi_produksi', $menu->total_porsi_produksi ?? '') }}"
                                                        min="0"
                                                        placeholder="Masukkan qty produksi">
                                                    @error('menu_plans.'.$index.'.total_porsi_produksi')
                                                        <div class="invalid-feedback" style="font-size: 14px; font-weight: 600;">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-control-label">Qty Mess</label>
                                                    <input type="number"
                                                        class="form-control qty-input @error('menu_plans.'.$index.'.total_porsi_mess') is-invalid @enderror"
                                                        name="menu_plans[{{ $index }}][total_porsi_mess]"
                                                        data-field="Mess"
                                                        data-index="{{ $index }}"
                                                        data-catering="{{ $menu->nama_cateringg }}"
                                                        data-tanggal="{{ $menu->hari }}, {{ date('d-m-Y', strtotime($menu->tanggal)) }}"
                                                        data-shift="{{ $menu->shift }}"
                                                        value="{{ old('menu_plans.'.$index.'.total_porsi_mess', $menu->total_porsi_mess ?? '') }}"
                                                        min="0"
                                                        placeholder="Masukkan qty mess">
                                                    @error('menu_plans.'.$index.'.total_porsi_mess')
                                                        <div class="invalid-feedback" style="font-size: 14px; font-weight: 600;">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </form>
    </div>
        
    <style>
        .readable-form .form-label {
            font-size: 13px;
            font-weight: 600;
            color: #000000;
            margin-bottom: 5px;
        }
        
        .readable-form .form-control {
            font-size: 13px;
            font-weight: 500;
            color: #000000;
            border: 1px solid #cccccc;
            padding: 8px 12px;
            background-color: #ffffff;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        
        .readable-form .form-control:focus {
            border-color: #000000;
            box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
        }
        
        .readable-form .form-control:read-only {
            background-color: #f5f5f5;
            color: #666666;
            font-weight: 500;
        }
        
        .readable-form .card-header h6 {
            font-size: 16px;
            font-weight: 600;
            color: #000000;
        }
        
        .readable-form .section-title {
            font-size: 15px;
            font-weight: 600;
            color: #000000;
            margin-bottom: 10px;
        }
        
        .readable-form .btn {
            font-size: 14px;
            font-weight: 600;
            padding: 8px 16px;
        }
        
        .readable-form .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            color: #ffffff;
        }
        
        .readable-form .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #ffffff;
        }
        
        .readable-form .card {
            border: 1px solid #cccccc;
            background-color: #ffffff;
        }
        
        .readable-form .horizontal.dark {
            border-top: 1px solid #cccccc;
            opacity: 1;
        }

        /* Realtime Log Styles */
        .realtime-log {
            background: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 8px;
            padding: 10px 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: sticky;
            top: 80px;
            z-index: 1000;
            animation: slideDown 0.3s ease-out;
        }

        .log-header {
            color: #000000;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .log-header #log-count {
            background: #f5f5f5;
            color: #000000;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
            margin-right: 8px;
            border: 1px solid #cccccc;
        }

        .log-content {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .log-item {
            background: #f5f5f5;
            color: #000000;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #cccccc;
            animation: fadeIn 0.2s ease-out;
        }

        .log-item .menu-info {
            color: #000000;
            font-weight: 700;
        }

        .log-item .field-info {
            color: #000000;
            font-weight: 700;
        }

        .log-item .separator {
            color: #666666;
            font-weight: 400;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('{{ $dmenu }}-form');
            const submitButton = document.getElementById('btn-submit-form');
            const realtimeLog = document.getElementById('realtime-log');
            const logContent = document.getElementById('log-content');
            const logCount = document.getElementById('log-count');
            
            // Fungsi untuk update realtime log
            function updateRealtimeLog() {
                const inputs = document.querySelectorAll('.qty-input');
                let emptyMenuPlans = new Set();
                let allEmptyFields = [];

                inputs.forEach(input => {
                    const value = input.value.trim();
                    
                    if (value === '' || value === null) {
                        const menuPlanIndex = parseInt(input.dataset.index);
                        emptyMenuPlans.add(menuPlanIndex);
                        
                        allEmptyFields.push({
                            index: menuPlanIndex + 1,
                            field: input.dataset.field,
                            catering: input.dataset.catering,
                            tanggal: input.dataset.tanggal,
                            shift: input.dataset.shift
                        });
                    }
                });

                // Convert Set to Array and sort
                const emptyMenuPlansArray = Array.from(emptyMenuPlans).sort((a, b) => a - b);

                // Update count
                logCount.textContent = emptyMenuPlansArray.length;

                // Update content
                if (emptyMenuPlansArray.length > 0) {
                    logContent.innerHTML = '';
                    
                    // Group by menu plan
                    const groupedByMenuPlan = {};
                    allEmptyFields.forEach(item => {
                        if (!groupedByMenuPlan[item.index]) {
                            groupedByMenuPlan[item.index] = {
                                catering: item.catering,
                                tanggal: item.tanggal,
                                shift: item.shift
                            };
                        }
                    });

                    emptyMenuPlansArray.forEach(index => {
                        const menuPlanNum = index + 1;
                        const info = groupedByMenuPlan[menuPlanNum];
                        
                        const logItem = document.createElement('div');
                        logItem.className = 'log-item';
                        logItem.innerHTML = `
                            <span class="menu-info">Menu Plan ${menuPlanNum}</span>
                            <span class="separator">-</span>
                            <span>${info.catering}</span>
                            <span class="separator">|</span>
                            <span>${info.tanggal} - Shift ${info.shift}</span>
                            <span class="separator">|</span>
                            <span class="field-info">⚠ Ada yang belum diisi</span>
                        `;
                        logContent.appendChild(logItem);
                    });

                    realtimeLog.style.display = 'block';
                } else {
                    realtimeLog.style.display = 'none';
                }

                return allEmptyFields;
            }

            // Check saat halaman load
            updateRealtimeLog();

            // Check setiap kali ada perubahan input
            document.querySelectorAll('.qty-input').forEach(input => {
                input.addEventListener('input', function() {
                    updateRealtimeLog();
                });

                input.addEventListener('blur', function() {
                    updateRealtimeLog();
                });
            });

            // Validasi form sebelum submit
            if (submitButton) {
                submitButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const emptyFields = updateRealtimeLog();
                    
                    if (emptyFields.length > 0) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Ada Field yang Kosong',
                            html: `
                                <p>Terdapat <strong>${emptyFields.length} field</strong> yang belum diisi.</p>
                                <p class="text-start mb-2"><strong>Apakah Anda ingin tetap menyimpan?</strong></p>
                                <small class="text-muted text-start d-block">Field yang kosong akan tersimpan sebagai NULL/kosong</small>
                            `,
                            showCancelButton: true,
                            confirmButtonText: 'Ya, Simpan Tetap!',
                            cancelButtonText: 'Batal, Isi Dulu',
                            confirmButtonColor: '#0d6efd',
                            cancelButtonColor: '#6c757d',
                            allowOutsideClick: false
                        }).then((result) => {
                            if (result.isConfirmed) {
                                form.submit();
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'question',
                            title: 'Konfirmasi Simpan',
                            text: 'Semua field sudah terisi. Apakah Anda yakin ingin menyimpan data porsi catering ini?',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, Simpan!',
                            cancelButtonText: 'Batal',
                            confirmButtonColor: '#0d6efd',
                            cancelButtonColor: '#6c757d',
                            allowOutsideClick: false
                        }).then((result) => {
                            if (result.isConfirmed) {
                                form.submit();
                            }
                        });
                    }
                });
            }
        });
    </script>
@endsection