@extends('admin.layout')

@section('title', 'Rekap Shift')
@section('subtitle', 'Rangkuman semua master shift dan jam kerja yang dipilih')

@section('content')
    <div class="flex items-center justify-between mb-5">
        <p class="text-gray-500 text-sm">Total: <span class="font-bold text-gray-700">{{ $shifts->count() }}</span> shift</p>
        <button type="button" onclick="openModal()"
            class="inline-flex items-center gap-2 px-4 py-2.5 bg-sky-500 hover:bg-sky-600 active:scale-[0.98] text-white font-bold text-sm rounded-xl shadow-md shadow-sky-500/30 transition-all">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Tambah Shift
        </button>
    </div>

    <div class="space-y-4">
        @forelse ($shifts as $shift)
            <div class="bg-white rounded-2xl border border-gray-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden">
                {{-- Header --}}
                <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between bg-gradient-to-r from-gray-50 to-white">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-sky-400 to-sky-600 flex items-center justify-center shadow-md shadow-sky-500/20">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800 text-lg">{{ $shift->name }}</h3>
                            <p class="text-xs font-medium text-gray-500">{{ $shift->sectionSchedules->count() }} jam kerja dipilih</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <button type="button" onclick="openModal(true, '{{ $shift->id }}', '{{ addslashes($shift->name) }}', {{ json_encode($shift->sectionSchedules->pluck('id')) }})" class="w-8 h-8 rounded-lg bg-sky-50 hover:bg-sky-100 flex items-center justify-center text-sky-500 transition-all" title="Edit">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </button>
                        <form method="POST" action="{{ route('admin.shifts.destroy', $shift) }}" onsubmit="return confirm('Hapus shift {{ $shift->name }}?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="w-8 h-8 rounded-lg bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-400 hover:text-red-600 transition-all" title="Hapus">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Selected Section Schedules --}}
                @if ($shift->sectionSchedules->count())
                <div class="divide-y divide-gray-50">
                    @foreach ($shift->sectionSchedules as $ss)
                    <div class="px-5 py-3 flex items-center justify-between hover:bg-sky-50/30 transition-colors">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-purple-50 flex items-center justify-center">
                                <svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            </div>
                            <div>
                                <p class="text-sm font-bold text-gray-800">{{ $ss->workSection->name }}</p>
                                <p class="text-xs text-gray-400 font-medium">{{ $ss->shift_label }}</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold">{{ \Carbon\Carbon::parse($ss->start_time)->format('H:i') }}</span>
                            <svg class="w-3 h-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                            <span class="px-2.5 py-1 bg-amber-50 text-amber-700 rounded-lg text-xs font-bold">{{ \Carbon\Carbon::parse($ss->end_time)->format('H:i') }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="px-5 py-6 text-center">
                    <p class="text-gray-400 text-sm">Belum ada jam kerja yang dipilih.</p>
                </div>
                @endif
            </div>
        @empty
            <div class="bg-white rounded-2xl border border-gray-100 p-8 text-center text-gray-400 text-sm shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
                Belum ada shift. Klik tombol "Tambah Shift" untuk memulai.
            </div>
        @endforelse
    </div>

    {{-- MODAL FORM --}}
    <div id="shiftModal" class="fixed inset-0 z-50 hidden">
        {{-- Backdrop --}}
        <div class="absolute inset-0 bg-gray-900/40 backdrop-blur-sm transition-opacity opacity-0" id="modalBackdrop" onclick="closeModal()"></div>
        
        {{-- Modal Panel --}}
        <div class="fixed inset-0 flex items-center justify-center p-4">
            <div class="w-full max-w-2xl transform rounded-2xl bg-white text-left align-middle shadow-2xl transition-all scale-95 opacity-0 flex flex-col max-h-[90vh]" id="modalPanel">
                
                {{-- Header Modal --}}
                <div class="bg-gradient-to-r from-sky-500 to-sky-600 rounded-t-2xl px-6 py-5 flex items-center justify-between shrink-0">
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 bg-white/20 rounded-xl backdrop-blur-sm flex items-center justify-center border border-white/20">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white leading-tight" id="modalTitle">Tambah Shift</h3>
                            <p class="text-sky-100 text-xs opacity-90 mt-0.5">Atur nama master shift dan hubungkan dengan jam kerja bagian.</p>
                        </div>
                    </div>
                    <button type="button" onclick="closeModal()" class="text-white/70 hover:text-white transition-colors focus:outline-none">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>

                {{-- Form Body (Scrollable) --}}
                <form id="shiftForm" method="POST" action="{{ route('admin.shifts.store') }}" class="flex flex-col overflow-hidden">
                    @csrf
                    <div id="methodPut"></div>
                    
                    <div class="p-6 overflow-y-auto" id="modalScrollArea">
                        {{-- Nama Shift --}}
                        <div class="mb-6">
                            <label class="block text-sm font-bold text-gray-700 mb-2">Nama Shift</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                </div>
                                <input type="text" name="name" id="inputName" required
                                    class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-4 focus:ring-sky-500/10 focus:border-sky-500 text-sm transition-all outline-none"
                                    placeholder="Contoh: Shift Pertama, Shift Kedua">
                            </div>
                        </div>

                        {{-- Pilih Jam Kerja --}}
                        <div>
                            <div class="mb-4">
                                <label class="block text-sm font-bold text-gray-700">Pilih Jam Kerja</label>
                                <p class="text-[10px] text-gray-400 mt-0.5">Untuk setiap bagian kerja, centang jam kerja mana yang termasuk dalam shift ini.</p>
                            </div>

                            @if($workSections->count())
                            <div class="space-y-4">
                                @foreach($workSections as $ws)
                                <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                                    <div class="flex items-center gap-2 mb-3">
                                        <div class="w-7 h-7 rounded-lg bg-purple-100 flex items-center justify-center">
                                            <svg class="w-3.5 h-3.5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                                        </div>
                                        <span class="text-sm font-bold text-gray-800">{{ $ws->name }}</span>
                                    </div>

                                    @if($ws->sectionSchedules->count())
                                    <div class="space-y-2 ml-9">
                                        @foreach($ws->sectionSchedules as $ss)
                                        <label class="flex items-center gap-3 p-3 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-sky-50 has-[:checked]:bg-sky-50 has-[:checked]:border-sky-300 transition-all">
                                            <input type="checkbox" name="section_schedule_ids[]" value="{{ $ss->id }}"
                                                class="schedule-checkbox text-sky-500 focus:ring-sky-500 rounded">
                                            <div class="flex-1 flex items-center justify-between">
                                                <span class="text-sm font-bold text-gray-700">{{ $ss->shift_label }}</span>
                                                <div class="flex items-center gap-1.5">
                                                    <span class="px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded text-xs font-bold">{{ \Carbon\Carbon::parse($ss->start_time)->format('H:i') }}</span>
                                                    <span class="text-gray-300 text-xs">→</span>
                                                    <span class="px-2 py-0.5 bg-amber-50 text-amber-700 rounded text-xs font-bold">{{ \Carbon\Carbon::parse($ss->end_time)->format('H:i') }}</span>
                                                </div>
                                            </div>
                                        </label>
                                        @endforeach
                                    </div>
                                    @else
                                    <p class="text-xs text-gray-400 ml-9">Belum ada jam kerja di bagian ini.</p>
                                    @endif
                                </div>
                                @endforeach
                            </div>
                            @else
                            <div class="p-6 bg-gray-50 rounded-xl border border-dashed border-gray-200 text-center">
                                <p class="text-gray-500 text-sm font-medium">Belum ada bagian kerja.</p>
                                <p class="text-gray-400 text-[10px] mt-1">Buat Bagian Kerja terlebih dahulu di menu Bagian Kerja.</p>
                            </div>
                            @endif
                        </div>
                    </div>

                    {{-- Footer Actions --}}
                    <div class="p-6 border-t border-gray-100 bg-gray-50/50 rounded-b-2xl shrink-0">
                        <div class="flex items-center gap-3">
                            <button type="submit" class="flex-1 px-4 py-2.5 bg-sky-500 hover:bg-sky-600 active:scale-[0.98] text-white font-bold text-sm rounded-xl shadow-md shadow-sky-500/30 transition-all flex items-center justify-center gap-2">
                                <span id="btnText">Simpan Shift</span>
                            </button>
                            <button type="button" onclick="closeModal()" class="flex-1 px-4 py-2.5 bg-white border border-gray-200 hover:bg-gray-50 active:scale-[0.98] text-gray-600 font-bold text-sm rounded-xl transition-all shadow-sm">
                                Batal
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        const modal = document.getElementById('shiftModal');
        const backdrop = document.getElementById('modalBackdrop');
        const panel = document.getElementById('modalPanel');
        const form = document.getElementById('shiftForm');
        const methodPut = document.getElementById('methodPut');
        const checkboxes = document.querySelectorAll('.schedule-checkbox');
        
        const createUrl = "{{ route('admin.shifts.store') }}";

        function openModal(isEdit = false, id = null, name = '', selectedIds = []) {
            if (isEdit) {
                document.getElementById('modalTitle').innerText = 'Edit Shift';
                document.getElementById('btnText').innerText = 'Simpan Perubahan';
                form.action = `/admin/shifts/${id}`;
                methodPut.innerHTML = '<input type="hidden" name="_method" value="PUT">';
                document.getElementById('inputName').value = name;
                
                // Check the correct checkboxes
                checkboxes.forEach(cb => {
                    cb.checked = selectedIds.includes(parseInt(cb.value));
                });
            } else {
                document.getElementById('modalTitle').innerText = 'Tambah Shift';
                document.getElementById('btnText').innerText = 'Simpan Shift';
                form.action = createUrl;
                methodPut.innerHTML = '';
                form.reset();
                
                // Uncheck all
                checkboxes.forEach(cb => cb.checked = false);
            }

            modal.classList.remove('hidden');
            setTimeout(() => {
                backdrop.classList.remove('opacity-0');
                backdrop.classList.add('opacity-100');
                panel.classList.remove('scale-95', 'opacity-0');
                panel.classList.add('scale-100', 'opacity-100');
            }, 10);
        }

        function closeModal() {
            backdrop.classList.remove('opacity-100');
            backdrop.classList.add('opacity-0');
            panel.classList.remove('scale-100', 'opacity-100');
            panel.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }
    </script>
    
    <style>
        /* Custom Scrollbar for Modal Scroll Area */
        #modalScrollArea::-webkit-scrollbar {
            width: 14px;
        }
        
        #modalScrollArea::-webkit-scrollbar-track {
            background: #f8fafc;
            border-radius: 8px;
            margin: 4px;
        }
        
        #modalScrollArea::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 8px;
            border: 4px solid #f8fafc;
        }
        
        #modalScrollArea::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8;
        }
        
        /* Scrollbar Arrows */
        #modalScrollArea::-webkit-scrollbar-button:single-button {
            display: block;
            background-color: #f1f5f9;
            height: 12px;
            border-radius: 4px;
        }
        
        #modalScrollArea::-webkit-scrollbar-button:single-button:vertical:decrement {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='3'><path stroke-linecap='round' stroke-linejoin='round' d='M5 15l7-7 7 7'/></svg>");
            background-size: 10px;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        #modalScrollArea::-webkit-scrollbar-button:single-button:vertical:increment {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='3'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
            background-size: 10px;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
    @endpush
@endsection