@extends('school.layouts.app')

@section('content')
<div class="w-full px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-5">
        <h1 class="text-2xl font-bold text-slate-800">Class Management</h1>
        <p class="text-xs text-slate-400 mt-0.5">Manage classes and their sections</p>
    </div>

    @if(session('success'))
        <div class="mb-4 p-2.5 bg-emerald-50 text-emerald-600 text-xs rounded-lg border border-emerald-100 flex items-center gap-2">
            <i class="fa-solid fa-circle-check text-[10px]"></i> {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <!-- Form Card -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm h-fit">
            @if(request()->get('mode') == 'section')
                <!-- MODE: ADD SECTION -->
                <div class="px-5 py-3 border-b border-slate-100 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <i class="fa-solid fa-folder-plus text-slate-400 text-xs"></i>
                        <h3 class="text-sm font-bold text-slate-600 uppercase tracking-wide">Add New Section</h3>
                    </div>
                    <a href="{{ route('school.settings.classes') }}" class="text-[11px] text-indigo-500 font-semibold hover:underline">
                        <i class="fa-solid fa-xmark"></i> Add Class
                    </a>
                </div>
                
                <form action="{{ route('school.settings.sections.store') }}" method="POST" class="p-5 space-y-4">
                    @csrf
                    <input type="hidden" name="class_id" value="{{ request()->get('class_id') }}">
                    
                    <div class="p-2.5 bg-indigo-50 rounded-lg border border-indigo-100">
                        <p class="text-[10px] font-bold text-indigo-400 uppercase tracking-wider">Adding section for:</p>
                        <p class="text-sm font-bold text-indigo-700">{{ \App\Models\SchoolClass::find(request()->get('class_id'))?->name ?? 'Unknown Class' }}</p>
                    </div>

                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Section Name</label>
                        <input type="text" name="name" placeholder="e.g. Section A" required 
                               class="w-full px-3 py-2 rounded-lg border text-sm outline-none transition-all border-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Section Code (Optional)</label>
                        <input type="text" name="code" placeholder="e.g. A" 
                               class="w-full px-3 py-2 rounded-lg border text-sm outline-none transition-all border-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                    </div>
                    <button type="submit" class="w-full py-2.5 bg-indigo-600 text-white rounded-lg font-semibold text-sm hover:bg-indigo-700 transition-colors shadow-sm">
                        Save Section <i class="fa-solid fa-plus ml-1.5"></i>
                    </button>
                </form>

            @else
                <!-- MODE: ADD CLASS (Default) -->
                <div class="px-5 py-3 border-b border-slate-100 flex items-center gap-2">
                    <i class="fa-solid fa-plus text-slate-400 text-xs"></i>
                    <h3 class="text-sm font-bold text-slate-600 uppercase tracking-wide">Add New Class</h3>
                </div>
                <form action="{{ route('school.settings.classes.store') }}" method="POST" class="p-5 space-y-4">
                    @csrf
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Class Name</label>
                        <input type="text" name="name" placeholder="e.g. Grade 1" required 
                               class="w-full px-3 py-2 rounded-lg border text-sm outline-none transition-all border-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Class Code (Optional)</label>
                        <input type="text" name="code" placeholder="e.g. G1" 
                               class="w-full px-3 py-2 rounded-lg border text-sm outline-none transition-all border-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                    </div>
                    <button type="submit" class="w-full py-2.5 bg-indigo-600 text-white rounded-lg font-semibold text-sm hover:bg-indigo-700 transition-colors shadow-sm">
                        Save Class <i class="fa-solid fa-plus ml-1.5"></i>
                    </button>
                </form>
            @endif
        </div>

        <!-- Data Table -->
        <div class="lg:col-span-2 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="px-5 py-3 border-b border-slate-100 flex items-center gap-2">
                <i class="fa-solid fa-list text-slate-400 text-xs"></i>
                <h3 class="text-sm font-bold text-slate-600 uppercase tracking-wide">All Classes</h3>
            </div>
            <table class="w-full text-left border-collapse">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        <th class="px-5 py-3 text-[11px] font-bold text-slate-500 uppercase w-14">Sr.</th>
                        <th class="px-5 py-3 text-[11px] font-bold text-slate-500 uppercase">
                            <a href="{{ route('school.settings.classes', ['sort_by' => 'name', 'sort' => ($sortDirection == 'asc' ? 'desc' : 'asc')]) }}" 
                               class="flex items-center gap-1 hover:text-indigo-600 transition-all">
                                Class
                                <i class="fa-solid {{ ($sortBy == 'name' && $sortDirection == 'asc') ? 'fa-sort-up' : (($sortBy == 'name' && $sortDirection == 'desc') ? 'fa-sort-down' : 'fa-sort') }} text-[10px]"></i>
                            </a>
                        </th>
                        <th class="px-5 py-3 text-[11px] font-bold text-slate-500 uppercase">
                            <a href="{{ route('school.settings.classes', ['sort_by' => 'code', 'sort' => ($sortDirection == 'asc' ? 'desc' : 'asc')]) }}" 
                               class="flex items-center gap-1 hover:text-indigo-600 transition-all">
                                Code 
                                <i class="fa-solid {{ ($sortBy == 'code' && $sortDirection == 'asc') ? 'fa-sort-up' : (($sortBy == 'code' && $sortDirection == 'desc') ? 'fa-sort-down' : 'fa-sort') }} text-[10px]"></i>
                            </a>
                        </th>
                        <th class="px-5 py-3 text-[11px] font-bold text-slate-500 uppercase">Sections</th>
                        <th class="px-5 py-3 text-[11px] font-bold text-slate-500 uppercase text-right">Action</th>
                    </tr>
                </thead>
                <tbody id="sortable-classes" class="divide-y divide-slate-100">
                    @foreach($classes as $class)
                    <tr class="hover:bg-slate-50 transition-all cursor-move group" data-id="{{ $class->id }}">
                        <td class="px-5 py-3 text-sm text-slate-500 font-medium">{{ $loop->iteration }}</td>
                        <td class="px-5 py-3 text-sm font-bold text-slate-800">
                            <i class="fa-solid fa-grip-vertical text-slate-300 mr-2 group-hover:text-indigo-400 transition-all text-xs"></i>
                            @if($class->is_deleted)
                                <span class="line-through text-slate-400">{{ $class->name }}</span>
                            @else
                                {{ $class->name }}
                            @endif
                        </td>
                        <td class="px-5 py-3 text-sm text-slate-500">{{ $class->code ?? 'N/A' }}</td>
                        <td class="px-5 py-3 text-sm text-slate-600">
                            @if($class->sections->count() > 0)
                                <div class="flex flex-wrap gap-1.5">
                                    @foreach($class->sections as $section)
                                        @if(!$section->is_deleted)
                                            <button type="button" 
                                                onclick="openSectionManager({{ $section->id }}, '{{ $section->name }}', '{{ $section->code }}', {{ $class->id }}, 0)"
                                                class="px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-indigo-50 text-indigo-600 border border-indigo-100 rounded-md hover:bg-indigo-600 hover:text-white transition-all cursor-pointer">
                                                {{ $section->name }}
                                            </button>
                                        @else
                                            <button type="button" 
                                                onclick="openSectionManager({{ $section->id }}, '{{ $section->name }}', '{{ $section->code }}', {{ $class->id }}, 1)"
                                                class="px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-400 border border-slate-200 rounded-md hover:bg-red-50 hover:text-red-600 transition-all cursor-pointer line-through">
                                                {{ $section->name }}
                                            </button>
                                        @endif
                                    @endforeach
                                </div>
                            @else
                                <span class="text-xs font-medium text-slate-300 italic">N/A</span>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-right space-x-1">
                            @if(!$class->is_deleted)
                                <a href="{{ route('school.settings.classes', ['mode' => 'section', 'class_id' => $class->id]) }}" 
                                   class="text-emerald-500 hover:text-emerald-700 p-1.5 transition-all inline-block" title="Add Section">
                                    <i class="fa-solid fa-folder-plus text-sm"></i>
                                </a>
                                <a href="{{ route('school.settings.classes.edit', $class->id) }}" class="text-indigo-500 hover:text-indigo-700 p-1.5 transition-all inline-block">
                                    <i class="fa-solid fa-pen-to-square text-sm"></i>
                                </a>
                                <form action="{{ route('school.settings.classes.delete', $class->id) }}" method="POST" class="inline">
                                    @csrf @method('DELETE')
                                    <button class="text-red-400 hover:text-red-600 p-1.5 transition-all"><i class="fa-solid fa-trash-can text-sm"></i></button>
                                </form>
                            @else
                                <form action="{{ route('school.settings.classes.restore', $class->id) }}" method="POST" class="inline">
                                    @csrf @method('PATCH')
                                    <button class="flex items-center gap-1 px-2 py-1 text-[11px] font-bold uppercase tracking-wider text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700 rounded-lg transition-all border border-transparent hover:border-emerald-200">
                                        <i class="fa-solid fa-rotate-left text-[10px]"></i> Restore
                                    </button>
                                </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- SortableJS -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const el = document.getElementById('sortable-classes');
        const sortable = new Sortable(el, {
            animation: 150,
            ghostClass: 'bg-indigo-50',
            handle: '.fa-grip-vertical',
            onEnd: function (evt) {
                let order = [];
                document.querySelectorAll('#sortable-classes tr').forEach(row => {
                    order.push(row.getAttribute('data-id'));
                });
                fetch("{{ route('school.settings.classes.reorder') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ order: order })
                })
                .then(response => response.json())
                .then(data => { if(data.success) console.log('Order saved!'); })
                .catch(error => console.error('Error:', error));
            }
        });
    });
</script>

<!-- Section Manager Modal -->
<div id="sectionModal" class="hidden fixed inset-0 z-[60] overflow-hidden">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity"></div>
    <div class="absolute inset-0 overflow-hidden flex justify-end">
        <div class="relative w-full max-w-md bg-white h-full shadow-2xl transform transition-transform duration-300 translate-x-full" id="modalPanel">
            <div class="flex flex-col h-full">
                <div class="px-5 py-3 border-b border-slate-100 flex items-center justify-between bg-slate-50">
                    <h3 class="text-sm font-bold text-slate-600 uppercase tracking-wide">Manage Section</h3>
                    <button onclick="closeSectionManager()" class="text-slate-400 hover:text-slate-600 transition-all">
                        <i class="fa-solid fa-xmark text-lg"></i>
                    </button>
                </div>
                <div class="p-5 flex-1 overflow-y-auto">
                    <form id="sectionForm" action="" method="POST" class="space-y-4">
                        @csrf
                        <input type="hidden" name="_method" id="modal_method" value="PUT">
                        <input type="hidden" name="class_id" id="modal_class_id">
                        <input type="hidden" id="modal_section_id">
                        
                        <div id="formFields" class="space-y-4">
                            <div>
                                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Section Name</label>
                                <input type="text" name="name" id="modal_section_name" required 
                                       class="w-full px-3 py-2 rounded-lg border text-sm outline-none transition-all border-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Section Code</label>
                                <input type="text" name="code" id="modal_section_code" 
                                       class="w-full px-3 py-2 rounded-lg border text-sm outline-none transition-all border-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                            </div>
                        </div>

                        <div class="pt-4 border-t border-slate-100 flex flex-col gap-2">
                            <button type="submit" id="btnUpdate" class="w-full py-2.5 bg-indigo-600 text-white rounded-lg font-semibold text-sm hover:bg-indigo-700 transition-colors shadow-sm">
                                Update Section <i class="fa-solid fa-save ml-1.5"></i>
                            </button>
                            <button type="submit" id="btnRestore" class="hidden w-full py-2.5 bg-emerald-600 text-white rounded-lg font-semibold text-sm hover:bg-emerald-700 transition-colors shadow-sm">
                                Restore Section <i class="fa-solid fa-rotate-left ml-1.5"></i>
                            </button>
                            <button type="button" id="btnDelete" onclick="confirmDelete()" class="w-full py-2.5 bg-white text-red-500 border border-red-100 rounded-lg font-semibold text-sm hover:bg-red-50 transition-all">
                                <i class="fa-solid fa-trash-can mr-1.5"></i> Delete Section
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function openSectionManager(sectionId, sectionName, sectionCode, classId, isDeleted) {
        const modal = document.getElementById('sectionModal');
        const panel = document.getElementById('modalPanel');
        const form = document.getElementById('sectionForm');
        
        document.getElementById('modal_section_id').value = sectionId;
        document.getElementById('modal_section_name').value = sectionName;
        document.getElementById('modal_section_code').value = sectionCode;
        document.getElementById('modal_class_id').value = classId;
        
        const updateUrl = `{{ route('school.settings.sections.update', 'ID_PLACEHOLDER') }}`.replace('ID_PLACEHOLDER', sectionId);
        const deleteUrl = `{{ route('school.settings.sections.delete', 'ID_PLACEHOLDER') }}`.replace('ID_PLACEHOLDER', sectionId);
        const restoreUrl = `{{ route('school.settings.sections.restore', 'ID_PLACEHOLDER') }}`.replace('ID_PLACEHOLDER', sectionId);

        if(isDeleted == 1) {
            form.action = restoreUrl;
            document.getElementById('modal_method').value = 'PATCH';
            document.getElementById('btnUpdate').classList.add('hidden');
            document.getElementById('btnDelete').classList.add('hidden');
            document.getElementById('btnRestore').classList.remove('hidden');
            document.getElementById('formFields').classList.add('opacity-50', 'pointer-events-none');
        } else {
            form.action = updateUrl;
            document.getElementById('modal_method').value = 'PUT';
            document.getElementById('btnUpdate').classList.remove('hidden');
            document.getElementById('btnDelete').classList.remove('hidden');
            document.getElementById('btnRestore').classList.add('hidden');
            document.getElementById('formFields').classList.remove('opacity-50', 'pointer-events-none');
        }

        document.getElementById('btnDelete').setAttribute('data-url', deleteUrl);
        modal.classList.remove('hidden');
        setTimeout(() => { panel.classList.remove('translate-x-full'); }, 10);
    }

    function confirmDelete() {
        const form = document.getElementById('sectionForm');
        const deleteUrl = document.getElementById('btnDelete').getAttribute('data-url');
        form.action = deleteUrl;
        document.getElementById('modal_method').value = 'DELETE';
        form.submit();
    }

    function closeSectionManager() {
        const panel = document.getElementById('modalPanel');
        panel.classList.add('translate-x-full');
        setTimeout(() => { document.getElementById('sectionModal').classList.add('hidden'); }, 300);
    }
</script>
@endsection