@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">Subject Management</h1>
        <p class="text-xs text-slate-400 mt-0.5">Manage class-wise subjects</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

    @php
        $classFilter = request()->filled('class_id') ? ['class_id' => request('class_id')] : [];
    @endphp

    <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">
            <div class="px-5 py-3 border-b border-slate-100 flex items-center gap-2">
                <i class="fa-solid fa-book-open text-slate-400 text-xs"></i>
                <h3 class="text-sm font-bold text-slate-600 uppercase tracking-wide">Add New Subject</h3>
            </div>
            <form action="{{ route('school.settings.subjects.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">Select Class <span class="text-red-400">*</span></label>
                    <select name="class_id" 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 bg-white">
                        <option value="" disabled selected>-- Select Class --</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}" {{ old('class_id') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Subject Name</label>
                    <input type="text" name="name" value="{{ old('name') }}" placeholder="e.g. Mathematics" 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">Subject Code (Optional)</label>
                    <input type="text" name="code" value="{{ old('code') }}" placeholder="e.g. MATH"
                           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 Subject <i class="fa-solid fa-plus ml-1.5"></i>
                </button>
            </form>
        </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 justify-between gap-2">
                <div class="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 Subjects</h3>
                </div>
                {{-- Class-wise filter --}}
                <form action="{{ route('school.settings.subjects') }}" method="GET">
                    <select name="class_id" onchange="this.form.submit()"
                            class="px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs outline-none focus:border-indigo-500 bg-white text-slate-600">
                        <option value="">All Classes</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}" {{ request()->get('class_id') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                        @endforeach
                    </select>
                </form>
            </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.subjects', array_merge($classFilter, ['sort_by' => 'name', 'sort' => ($sortBy == 'name' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}"
                               class="flex items-center gap-1 hover:text-indigo-600 transition-all">
                                Subject
                                <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">Class</th>
                        <th class="px-5 py-3 text-[11px] font-bold text-slate-500 uppercase">
                            <a href="{{ route('school.settings.subjects', array_merge($classFilter, ['sort_by' => 'code', 'sort' => ($sortBy == 'code' && $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 text-right">Action</th>
                    </tr>
                </thead>
                <tbody id="sortable-subjects" class="divide-y divide-slate-100">
                    @forelse($subjects as $subject)
                    <tr class="hover:bg-slate-50 transition-all cursor-move group" data-id="{{ $subject->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($subject->is_deleted)
                                <span class="line-through text-slate-400">{{ $subject->name }}</span>
                            @else
                                {{ $subject->name }}
                            @endif
                        </td>
                        <td class="px-5 py-3 text-sm">
                            <span class="px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-slate-50 text-slate-600 border border-slate-200 rounded-md">
                                {{ $subject->schoolClass->name ?? 'N/A' }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-sm text-slate-500">{{ $subject->code ?? 'N/A' }}</td>
                        <td class="px-5 py-3 text-right space-x-1">
                            @if(!$subject->is_deleted)
                                <button type="button"
                                    onclick="openSubjectManager({{ $subject->id }}, '{{ addslashes($subject->name) }}', '{{ addslashes($subject->code) }}', {{ $subject->class_id }}, 0)"
                                    class="text-indigo-500 hover:text-indigo-700 p-1.5 transition-all inline-block" title="Edit Subject">
                                    <i class="fa-solid fa-pen-to-square text-sm"></i>
                                </button>
                            @else
                                <button type="button"
                                    onclick="openSubjectManager({{ $subject->id }}, '{{ addslashes($subject->name) }}', '{{ addslashes($subject->code) }}', {{ $subject->class_id }}, 1)"
                                    class="inline-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>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-5 py-10 text-center text-sm text-slate-400">
                            <i class="fa-solid fa-book-open text-2xl block mb-2 text-slate-300"></i>
                            No subjects found. Add one from the panel.
                        </td>
                    </tr>
                    @endforelse
                </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-subjects');
    if (el) {
        new Sortable(el, {
            animation: 150,
            ghostClass: 'bg-indigo-50',
            handle: '.fa-grip-vertical',
            onEnd: function (evt) {
                let order = [];
                document.querySelectorAll('#sortable-subjects tr[data-id]').forEach(row => {
                    order.push(row.getAttribute('data-id'));
                });
                fetch("{{ route('school.settings.subjects.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>

<!-- Subject Manager Modal -->
<div id="subjectModal" 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 Subject</h3>
                    <button onclick="closeSubjectManager()" 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="subjectForm" action="" method="POST" class="space-y-4">
                        @csrf
                        <input type="hidden" name="_method" id="modal_method" value="PUT">
                        <input type="hidden" id="modal_subject_id">
                        <div id="formFields" class="space-y-4">
                            <div>
                                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Class</label>
                                <select name="class_id" id="modal_class_id"
                                        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 bg-white">
                                    @foreach($classes as $class)
                                        <option value="{{ $class->id }}">{{ $class->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Subject Name</label>
                                <input type="text" name="name" id="modal_subject_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">Subject Code</label>
                                <input type="text" name="code" id="modal_subject_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 Subject <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 Subject <i class="fa-solid fa-rotate-left ml-1.5"></i>
                            </button>
                            {{-- ⚠️ Remove this button + delete route if you want ONLY Add/Edit --}}
                            <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 Subject
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function openSubjectManager(subjectId, subjectName, subjectCode, classId, isDeleted) {
    const modal = document.getElementById('subjectModal');
    const panel = document.getElementById('modalPanel');
    const form  = document.getElementById('subjectForm');

    document.getElementById('modal_subject_id').value   = subjectId;
    document.getElementById('modal_subject_name').value = subjectName;
    document.getElementById('modal_subject_code').value = subjectCode;
    document.getElementById('modal_class_id').value     = classId;

    const updateUrl  = `{{ route('school.settings.subjects.update', 'ID_PLACEHOLDER') }}`.replace('ID_PLACEHOLDER', subjectId);
    const deleteUrl  = `{{ route('school.settings.subjects.delete', 'ID_PLACEHOLDER') }}`.replace('ID_PLACEHOLDER', subjectId);
    const restoreUrl = `{{ route('school.settings.subjects.restore', 'ID_PLACEHOLDER') }}`.replace('ID_PLACEHOLDER', subjectId);

    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('subjectForm');
    const deleteUrl = document.getElementById('btnDelete').getAttribute('data-url');
    form.action = deleteUrl;
    document.getElementById('modal_method').value = 'DELETE';
    form.submit();
}

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