@extends('Component.layout')

@section('title', 'Student List - Iqra')
@section('breadcrumb', 'Student Management / Student List')

@section('content')
<div class="space-y-6">

    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-100 text-emerald-800 text-xs font-semibold flex items-center gap-2">
        <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current shrink-0" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ session('success') }}
    </div>
    @endif

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">Student Directory</h1>
            <p class="text-xs text-slate-500 mt-1 font-medium">Manage and view all student records. Hover a row to edit or delete.</p>
        </div>
        @php
            $role = Auth::user()->role;
            $createRoute = ($role === 'super_admin' ? 'superadmin' : $role) . '.students.create';
        @endphp
        <a href="{{ route($createRoute) }}"
           class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl shadow-md shadow-indigo-600/20 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 4v16m8-8H4"></path></svg>
            Add New Student
        </a>
    </div>

    <!-- Filters Section -->
    <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm" x-data="studentFilters()">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Filter by Class</label>
                <select name="school_class_id" x-model="class_id" @change="fetchSections()" class="w-full px-3 py-2 rounded-xl border border-slate-200 bg-slate-50 text-xs text-slate-700 font-medium focus:ring-2 focus:ring-indigo-200 outline-none">
                    <option value="">All Classes</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ request('school_class_id') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Filter by Section</label>
                <select name="section_id" x-model="section_id" :disabled="sections.length === 0" class="w-full px-3 py-2 rounded-xl border border-slate-200 bg-slate-50 text-xs text-slate-700 font-medium focus:ring-2 focus:ring-indigo-200 outline-none disabled:opacity-50">
                    <option value="">All Sections</option>
                    <template x-for="section in sections" :key="section.id">
                        <option :value="section.id" x-text="section.name" :selected="section.id == '{{ request('section_id') }}'"></option>
                    </template>
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Search</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Name or Mobile..." class="w-full px-3 py-2 rounded-xl border border-slate-200 bg-slate-50 text-xs text-slate-700 font-medium focus:ring-2 focus:ring-indigo-200 outline-none">
            </div>
            <div class="flex items-center gap-2">
                <button type="submit" class="px-5 py-2 rounded-xl bg-slate-800 text-white text-xs font-bold hover:bg-slate-900 transition-all">Filter</button>
                <a href="{{ url()->current() }}" class="px-5 py-2 rounded-xl bg-slate-100 text-slate-600 text-xs font-bold hover:bg-slate-200 transition-all">Reset</a>
            </div>
        </form>
    </div>

    <!-- Data Table -->
    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100">
                        <th class="px-5 py-4 text-[10px] font-extrabold text-slate-400 uppercase tracking-wider whitespace-nowrap">Student</th>
                        <th class="px-5 py-4 text-[10px] font-extrabold text-slate-400 uppercase tracking-wider whitespace-nowrap">Father / Mother</th>
                        <th class="px-5 py-4 text-[10px] font-extrabold text-slate-400 uppercase tracking-wider whitespace-nowrap">Class</th>
                        <th class="px-5 py-4 text-[10px] font-extrabold text-slate-400 uppercase tracking-wider whitespace-nowrap">RTE</th>
                        <th class="px-5 py-4 text-[10px] font-extrabold text-slate-400 uppercase tracking-wider whitespace-nowrap">Login ID</th>
                        <th class="px-5 py-4 text-[10px] font-extrabold text-slate-400 uppercase tracking-wider whitespace-nowrap">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($students as $student)
                        <tr class="hover:bg-slate-50/50 transition-colors group">

                            {{-- Student Name + Mobile --}}
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center shrink-0 overflow-hidden">
                                        <img src="{{ $student->avatar_url }}" alt="{{ $student->first_name }}" class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <div class="text-xs font-extrabold text-slate-800">{{ $student->first_name }} {{ $student->surname }}</div>
                                        <div class="text-[10px] text-slate-500 font-medium mt-0.5">📱 {{ $student->mobile_number }}</div>
                                    </div>
                                </div>
                            </td>

                            {{-- Parents --}}
                            <td class="px-5 py-4">
                                <div class="text-xs font-bold text-slate-700">{{ $student->father_name }}</div>
                                <div class="text-[10px] text-slate-400 mt-0.5">{{ $student->mother_name ?? '—' }}</div>
                            </td>

                            {{-- Class & Section --}}
                            <td class="px-5 py-4">
                                <span class="inline-flex px-2 py-1 bg-emerald-50 text-emerald-700 rounded-lg text-[10px] font-extrabold uppercase">
                                    {{ $student->schoolClass->name ?? 'N/A' }}
                                </span>
                                <span class="inline-flex px-2 py-1 bg-indigo-50 text-indigo-700 rounded-lg text-[10px] font-extrabold uppercase ml-1">
                                    Sec {{ $student->section->name ?? 'N/A' }}
                                </span>
                            </td>

                            {{-- RTE --}}
                            <td class="px-5 py-4">
                                @if($student->rte_status)
                                    <span class="inline-flex px-2 py-1 bg-orange-100 text-orange-700 rounded-lg text-[10px] font-extrabold">RTE</span>
                                @else
                                    <span class="inline-flex px-2 py-1 bg-slate-100 text-slate-400 rounded-lg text-[10px] font-bold">General</span>
                                @endif
                            </td>

                            {{-- Login ID (for parent portal) --}}
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2">
                                    <span class="text-xs font-extrabold text-indigo-600 bg-indigo-50 px-2 py-1 rounded-lg">
                                        {{ $student->login_id ?? '—' }}
                                    </span>
                                </div>
                                <div class="text-[9px] text-slate-400 font-medium mt-1">Pass: DOB or Mobile</div>
                            </td>

                            {{-- Actions --}}
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                    @php
                                        $role = Auth::user()->role;
                                        $editRoute = ($role === 'super_admin' ? 'superadmin' : $role) . '.students.edit';
                                        $deleteRoute = ($role === 'super_admin' ? 'superadmin' : $role) . '.students.destroy';
                                    @endphp
                                    <a href="{{ route($editRoute, $student->id) }}"
                                       title="Edit Student"
                                       class="p-1.5 bg-white border border-slate-200 rounded-lg text-slate-400 hover:text-emerald-600 hover:border-emerald-200 transition-all shadow-sm">
                                        <svg class="w-4 h-4 fill-none stroke-current" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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>
                                    </a>
                                    <form action="{{ route($deleteRoute, $student->id) }}" method="POST" onsubmit="return confirm('Delete {{ $student->first_name }} {{ $student->surname }}?')" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" title="Delete Student" class="p-1.5 bg-white border border-slate-200 rounded-lg text-slate-400 hover:text-red-600 hover:border-red-200 transition-all shadow-sm">
                                            <svg class="w-4 h-4 fill-none stroke-current" viewBox="0 0 24 24" stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round" 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>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-5 py-16 text-center">
                                <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-3">
                                    <svg class="w-8 h-8 text-slate-300 fill-none stroke-current" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                                </div>
                                <h3 class="text-sm font-bold text-slate-700">No Students Found</h3>
                                <p class="text-[11px] text-slate-500 mt-1">No records match your filter. <a href="{{ url()->current() }}" class="text-indigo-600 hover:underline">Reset filters</a></p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($students->hasPages())
            <div class="p-4 border-t border-slate-100 bg-slate-50">
                {{ $students->links() }}
            </div>
        @endif
    </div>

    <!-- Parent Portal Link Info -->
    <div class="bg-indigo-50 border border-indigo-100 rounded-2xl p-4 flex items-center gap-3">
        <div class="w-8 h-8 rounded-xl bg-indigo-600 flex items-center justify-center shrink-0">
            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <div class="flex-1">
            <p class="text-xs font-bold text-indigo-800">Parent Portal Available</p>
            <p class="text-[11px] text-indigo-600 mt-0.5">Parents can login at <strong>/parent/login</strong> using the Student Login ID and their child's Date of Birth as password.</p>
        </div>
        <a href="{{ route('parent.login') }}" target="_blank" class="px-4 py-2 bg-indigo-600 text-white text-xs font-bold rounded-xl hover:bg-indigo-700 transition-all shrink-0">
            Open Portal
        </a>
    </div>

</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('studentFilters', () => ({
            class_id: '{{ request('school_class_id') }}',
            section_id: '{{ request('section_id') }}',
            sections: [],

            init() {
                if(this.class_id) {
                    this.fetchSections();
                }
            },

            fetchSections() {
                if (!this.class_id) {
                    this.sections = [];
                    return;
                }
                fetch(`/api/classes/${this.class_id}/sections`)
                    .then(res => res.json())
                    .then(data => { this.sections = data; })
                    .catch(err => console.error(err));
            }
        }));
    });
</script>
@endsection