@extends('admin.layout')
@section('title', 'Bagian Kerja')
@section('subtitle', 'Kelola bagian kerja dan jam kerjanya')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h2 class="text-lg font-bold text-gray-800">Daftar Bagian Kerja</h2>
    <div class="flex items-center gap-2">
        <button type="button" onclick="document.getElementById('importSection').classList.toggle('hidden')"
            class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-500 hover:bg-emerald-600 active:scale-[0.98] text-white font-semibold text-sm rounded-xl shadow-md shadow-emerald-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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/></svg>
            Import Excel
        </button>
        <button type="button" onclick="openModal()" class="px-4 py-2 bg-sky-500 hover:bg-sky-600 active:scale-[0.98] text-white text-sm font-bold rounded-xl shadow-md shadow-sky-500/30 transition-all flex items-center gap-2">
            <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 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
            Tambah Bagian
        </button>
    </div>
</div>

{{-- Import Section (hidden by default) --}}
<div id="importSection" class="hidden mb-5">
    <div class="bg-emerald-50 border border-emerald-200 rounded-2xl p-5">
        <div class="flex items-start gap-4">
            <div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center shrink-0">
                <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <div class="flex-1">
                <h3 class="text-emerald-800 font-bold text-sm mb-1">Import Bagian Kerja dari Excel</h3>
                <p class="text-emerald-600 text-xs mb-3">Download template, isi data, lalu upload kembali.</p>
                
                <div class="flex flex-col sm:flex-row items-start sm:items-end gap-3">
                    {{-- Download Template --}}
                    <a href="{{ route('admin.work-sections.template') }}" 
                        class="inline-flex items-center gap-2 px-3 py-2 bg-white border border-emerald-300 text-emerald-700 rounded-xl text-xs font-semibold hover:bg-emerald-100 transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        Download Template Excel
                    </a>

                    {{-- Upload Form --}}
                    <form action="{{ route('admin.work-sections.import') }}" method="POST" enctype="multipart/form-data" class="flex items-end gap-2 flex-1">
                        @csrf
                        <div class="flex-1">
                            <input type="file" name="file" accept=".xlsx,.xls,.csv" required
                                class="block w-full text-sm text-gray-600
                                file:mr-4 file:py-2 file:px-4
                                file:rounded-xl file:border-0
                                file:text-sm file:font-bold
                                file:bg-emerald-100 file:text-emerald-700
                                hover:file:bg-emerald-200 file:transition-colors file:cursor-pointer
                                border border-emerald-200 rounded-xl bg-white cursor-pointer hover:border-emerald-300 transition-colors outline-none focus:ring-2 focus:ring-emerald-500/20">
                        </div>
                        <button type="submit" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs rounded-xl transition-colors whitespace-nowrap">
                            Upload & Import
                        </button>
                    </form>
                </div>

                @error('file')
                    <p class="text-xs text-rose-500 mt-2">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>
</div>

<div class="space-y-4">
    @forelse ($workSections as $ws)
    <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-purple-500 to-purple-600 flex items-center justify-center shadow-md shadow-purple-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="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>
                    <h3 class="font-bold text-gray-800 text-lg">{{ $ws->name }}</h3>
                    <div class="flex items-center gap-3 mt-0.5">
                        <span class="text-xs font-medium text-gray-500">{{ $ws->section_schedules_count }} jam kerja</span>
                        <span class="text-xs text-gray-300">•</span>
                        <span class="text-xs font-medium text-gray-500">{{ $ws->volunteer_assignments_count }} relawan</span>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-1.5">
                <button type="button" onclick="openModal(true, '{{ $ws->id }}', '{{ addslashes($ws->name) }}', {{ json_encode($ws->sectionSchedules->map(function($s) { return ['id' => $s->id, 'shift_label' => $s->shift_label, 'start_time' => \Carbon\Carbon::parse($s->start_time)->format('H:i'), 'end_time' => \Carbon\Carbon::parse($s->end_time)->format('H:i')]; })) }})" 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.work-sections.destroy', $ws) }}" onsubmit="return confirm('Hapus bagian kerja {{ $ws->name }}? Semua jam kerja dan penugasan di dalamnya akan terhapus.')">
                    @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>

        {{-- Section Schedules --}}
        @if ($ws->sectionSchedules->count())
        <div class="divide-y divide-gray-50">
            @foreach ($ws->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">
                    <span class="px-2.5 py-1 bg-sky-100 text-sky-700 rounded-lg text-xs font-bold">{{ $ss->shift_label }}</span>
                </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.</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 bagian kerja. Klik tombol "Tambah Bagian" untuk memulai.
    </div>
    @endforelse
</div>

{{-- MODAL FORM --}}
<div id="sectionModal" 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-purple-500 to-purple-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="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>
                        <h3 class="text-lg font-bold text-white leading-tight" id="modalTitle">Tambah Bagian Kerja</h3>
                        <p class="text-purple-100 text-xs opacity-90 mt-0.5">Atur nama bagian dan jadwal kerjanya.</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="sectionForm" method="POST" action="{{ route('admin.work-sections.store') }}" class="flex flex-col overflow-hidden">
                @csrf
                <div id="methodPut"></div>
                
                <div class="p-6 overflow-y-auto" id="modalScrollArea">
                    {{-- Nama Bagian --}}
                    <div class="mb-6">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Nama Bagian Kerja</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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></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-purple-500/10 focus:border-purple-500 text-sm transition-all outline-none"
                                placeholder="Contoh: Persiapan, Memasak, Kebersihan">
                        </div>
                    </div>

                    {{-- Jam Kerja --}}
                    <div>
                        <div class="flex items-center justify-between mb-3 border-b border-gray-100 pb-3">
                            <div>
                                <label class="block text-sm font-bold text-gray-700">Pengaturan Jam Kerja</label>
                                <p class="text-[10px] text-gray-400 mt-0.5">Tambahkan jadwal shift untuk bagian ini.</p>
                            </div>
                            <button type="button" onclick="addScheduleRow()"
                                class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-purple-50 hover:bg-purple-100 active:scale-95 text-purple-600 text-xs font-bold rounded-lg transition-all border border-purple-100">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                                Tambah Jadwal
                            </button>
                        </div>

                        <div id="schedulesContainer" class="space-y-3">
                            {{-- Rows will be injected here --}}
                        </div>

                        <div id="emptyMsg" class="py-6 text-center bg-gray-50 rounded-xl border border-dashed border-gray-200 mt-3 hidden">
                            <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mx-auto mb-2 shadow-sm">
                                <svg class="w-5 h-5 text-gray-300" 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>
                            <p class="text-xs font-medium text-gray-500">Belum ada jam kerja yang diatur.</p>
                            <p class="text-[10px] text-gray-400 mt-0.5">Klik tombol Tambah Jadwal di atas.</p>
                        </div>
                    </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-purple-500 hover:bg-purple-600 active:scale-[0.98] text-white font-bold text-sm rounded-xl shadow-md shadow-purple-500/30 transition-all flex items-center justify-center gap-2">
                            <span id="btnText">Simpan Bagian Kerja</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('sectionModal');
    const backdrop = document.getElementById('modalBackdrop');
    const panel = document.getElementById('modalPanel');
    const form = document.getElementById('sectionForm');
    const methodPut = document.getElementById('methodPut');
    const container = document.getElementById('schedulesContainer');
    const emptyMsg = document.getElementById('emptyMsg');
    
    const createUrl = "{{ route('admin.work-sections.store') }}";
    let scheduleIndex = 0;

    function openModal(isEdit = false, id = null, name = '', schedules = []) {
        if (isEdit) {
            document.getElementById('modalTitle').innerText = 'Edit Bagian Kerja';
            document.getElementById('btnText').innerText = 'Simpan Perubahan';
            form.action = `/admin/work-sections/${id}`;
            methodPut.innerHTML = '<input type="hidden" name="_method" value="PUT">';
            document.getElementById('inputName').value = name;
            
            // Populate schedules
            container.innerHTML = '';
            scheduleIndex = 0;
            if (schedules.length > 0) {
                schedules.forEach(s => {
                    addScheduleRow(s.id, s.shift_label, s.start_time, s.end_time);
                });
            } else {
                checkEmpty();
            }
        } else {
            document.getElementById('modalTitle').innerText = 'Tambah Bagian Kerja';
            document.getElementById('btnText').innerText = 'Simpan Bagian Kerja';
            form.action = createUrl;
            methodPut.innerHTML = '';
            form.reset();
            
            // Clear schedules
            container.innerHTML = '';
            scheduleIndex = 0;
            // Add one empty schedule row by default
            addScheduleRow();
        }

        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);
    }

    function addScheduleRow(id = null, label = '', start = '', end = '') {
        const i = scheduleIndex++;
        const row = document.createElement('div');
        row.className = 'schedule-row group flex items-start gap-3 p-4 bg-white rounded-xl border border-gray-200 shadow-sm transition-all hover:border-purple-300 relative';
        
        // Input layout (prettier "dropdown-like" aesthetics for time inputs)
        row.innerHTML = `
            ${id ? `<input type="hidden" name="schedules[${i}][id]" value="${id}">` : ''}
            
            <div class="flex-1 min-w-0">
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1.5 ml-1">Label Shift</label>
                <div class="relative">
                    <input type="text" name="schedules[${i}][shift_label]" required value="${label || `Shift ${i + 1}`}"
                        class="w-full px-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:bg-white focus:ring-4 focus:ring-purple-500/10 focus:border-purple-500 text-sm font-medium text-gray-700 transition-all outline-none"
                        placeholder="Contoh: Shift Pagi">
                </div>
            </div>
            
            <div class="w-28">
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1.5 ml-1">Masuk</label>
                <div class="relative">
                    <input type="time" name="schedules[${i}][start_time]" required value="${start}"
                        class="w-full px-2 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:bg-white focus:ring-4 focus:ring-purple-500/10 focus:border-purple-500 text-sm font-bold text-gray-700 transition-all outline-none cursor-pointer appearance-none">
                </div>
            </div>
            
            <div class="w-28">
                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1.5 ml-1">Pulang</label>
                <div class="relative">
                    <input type="time" name="schedules[${i}][end_time]" required value="${end}"
                        class="w-full px-2 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:bg-white focus:ring-4 focus:ring-purple-500/10 focus:border-purple-500 text-sm font-bold text-gray-700 transition-all outline-none cursor-pointer appearance-none">
                </div>
            </div>
            
            <div class="pt-6">
                <button type="button" onclick="removeScheduleRow(this)"
                    class="w-9 h-9 rounded-lg bg-white border border-gray-200 hover:bg-red-50 hover:border-red-200 flex items-center justify-center text-gray-400 hover:text-red-500 transition-all shadow-sm group-hover:shadow" title="Hapus Jadwal">
                    <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>
            </div>
        `;

        container.appendChild(row);
        checkEmpty();

        // Animate in
        row.style.opacity = '0';
        row.style.transform = 'translateY(-10px)';
        requestAnimationFrame(() => {
            row.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
            row.style.opacity = '1';
            row.style.transform = 'translateY(0)';
        });
        
        // Scroll to bottom of modal scroll area if needed
        setTimeout(() => {
            const scrollArea = document.getElementById('modalScrollArea');
            scrollArea.scrollTop = scrollArea.scrollHeight;
        }, 100);
    }

    function removeScheduleRow(btn) {
        const row = btn.closest('.schedule-row');
        row.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
        row.style.opacity = '0';
        row.style.transform = 'translateX(20px)';
        setTimeout(() => {
            row.remove();
            checkEmpty();
        }, 300);
    }
    
    function checkEmpty() {
        if (container.children.length === 0) {
            emptyMsg.classList.remove('hidden');
        } else {
            emptyMsg.classList.add('hidden');
        }
    }
</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