@extends('school.layouts.app')

@section('content')
<div class="mb-8">
    <h1 class="text-3xl font-extrabold text-slate-800 tracking-tight">Section Mapping</h1>
</div>

<div class="flex flex-col lg:flex-row gap-8">

    <div class="flex-1">
        @if(session('success'))
            <div class="mb-6 p-4 bg-green-50 text-green-600 text-sm rounded-2xl border border-green-100 flex items-center gap-3">
                <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Form Card -->
            <div class="bg-white rounded-[2rem] border border-slate-200 shadow-sm p-8 h-fit">
                <h3 class="text-xl font-bold text-slate-800 mb-6">Add New Section</h3>
                <form action="{{ route('school.settings.sections.store') }}" method="POST" class="space-y-6">
                    @csrf
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2 ml-1">Assign to Class</label>
                        <select name="class_id" required class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none">
                            <option value="">Select Class</option>
                            @foreach($classes as $class)
                                <option value="{{ $class->id }}">{{ $class->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2 ml-1">Section Name</label>
                        <input type="text" name="name" placeholder="e.g. Section A" required class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2 ml-1">Section Code (Optional)</label>
                        <input type="text" name="code" placeholder="e.g. A" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none">
                    </div>
                    <button type="submit" class="w-full py-3 bg-indigo-600 text-white rounded-2xl font-bold text-sm hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200">
                        Save Section <i class="fa-solid fa-plus ml-2"></i>
                    </button>
                </form>
            </div>

            <!-- Data Table -->
            <div class="lg:col-span-2 bg-white rounded-[2rem] border border-slate-200 shadow-sm overflow-hidden">
                <table class="w-full text-left border-collapse">
                    {{-- Find the <thead> section and replace it with this --}}
                    <thead class="bg-slate-50 border-b border-slate-200">
                        <tr class="text-left">
                            <!-- ✅ ADDED SR NO COLUMN -->
                            <th class="px-4 py-4 text-xs font-bold text-slate-400 uppercase w-20">Sr. No.</th>

                            <!-- SORTABLE CLASS NAME -->
                            <th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase">
                                <a href="{{ route('school.settings.sections', ['sort_by' => 'class_name', 'sort' => ($sortDirection == 'asc' ? 'desc' : 'asc')]) }}" 
                                class="flex items-center gap-1 hover:text-indigo-600 transition-all">
                                    Class 
                                    <i class="fa-solid {{ ($sortBy == 'class_name' && $sortDirection == 'asc') ? 'fa-sort-up' : (($sortBy == 'class_name' && $sortDirection == 'desc') ? 'fa-sort-down' : 'fa-sort') }} text-[10px]"></i>
                                </a>
                            </th>

                            
                            <!-- SORTABLE SECTION NAME -->
                            <th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase">
                                <a href="{{ route('school.settings.sections', ['sort_by' => 'name', 'sort' => ($sortDirection == 'asc' ? 'desc' : 'asc')]) }}" 
                                class="flex items-center gap-1 hover:text-indigo-600 transition-all">
                                    Section Name 
                                    <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-6 py-4 text-xs font-bold text-slate-400 uppercase">Code</th>
                            <th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase text-right">Action</th>
                        </tr>
                    </thead>

                    {{-- Find the <tbody> section and replace it with this --}}
                    <tbody id="sortable-sections" class="divide-y divide-slate-100">
                        @foreach($sections as $section)
                        <tr class="hover:bg-slate-50 transition-all cursor-move group" data-id="{{ $section->id }}">
                            
                            <!-- ✅ ADDED SR NO VALUE -->
                            <td class="px-4 py-4 text-sm text-slate-500 font-medium">
                                {{ $loop->iteration }}
                            </td>
                            
                            <td class="px-6 py-4 text-sm text-slate-500">{{ $section->schoolClass->name }}</td>

                            <td class="px-6 py-4 text-sm font-bold text-slate-800">
                                <i class="fa-solid fa-grip-vertical text-slate-300 mr-3 group-hover:text-indigo-400 transition-all"></i>
                                @if($section->is_deleted)
                                    <span class="line-through text-slate-400">{{ $section->name }}</span>
                                @else
                                    {{ $section->name }}
                                @endif
                            </td>
                            
                            <td class="px-6 py-4 text-sm text-slate-500">{{ $section->code ?? 'N/A' }}</td>
                            
                            <td class="px-6 py-4 text-right space-x-2">
                                @if(!$section->is_deleted)
                                    <a href="{{ route('school.settings.sections.edit', $section->id) }}" class="text-indigo-500 hover:text-indigo-700 p-2 transition-all"><i class="fa-solid fa-pen-to-square"></i></a>
                                    <form action="{{ route('school.settings.sections.delete', $section->id) }}" method="POST" class="inline">
                                        @csrf @method('DELETE')
                                        <button class="text-red-400 hover:text-red-600 p-2 transition-all"><i class="fa-solid fa-trash-can"></i></button>
                                    </form>
                                @else
                                    <form action="{{ route('school.settings.sections.restore', $section->id) }}" method="POST" class="inline">
                                        @csrf @method('PATCH')
                                        <button class="flex items-center gap-1.5 px-2 py-1 text-[11px] font-bold uppercase tracking-wider text-green-600 hover:bg-green-50 hover:text-green-700 rounded-lg transition-all border border-transparent hover:border-green-200">
                                            <i class="fa-solid fa-rotate-left text-[10px]"></i> Restore
                                        </button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>

                </table>
            </div>
        </div>
    </div>
</div>

<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-sections');
        new Sortable(el, {
            animation: 150, ghostClass: 'bg-indigo-50', handle: '.fa-grip-vertical',
            onEnd: function () {
                let order = [];
                document.querySelectorAll('#sortable-sections tr').forEach(row => { order.push(row.getAttribute('data-id')); });
                fetch("{{ route('school.settings.sections.reorder') }}", {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ order: order })
                }).then(res => res.json());
            }
        });
    });
</script>
@endsection