@extends('layouts.app')

@section('title', 'All Students - Assistant Director')

@section('content')
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6 mb-6">

    <div class="flex justify-between items-center mb-4 md:mb-6">
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">👥 All Students Panel</h1>
            <p class="text-gray-600 mt-1">View and manage all students in the institute</p>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 mb-6 md:mb-8">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-blue-600">{{ $stats['total_students'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Total Students</div>
        </div>
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-yellow-600">{{ $stats['students_with_pending_leaves'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Students with Pending Leaves</div>
        </div>
        <div class="bg-orange-50 border border-orange-200 rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-orange-600">{{ $stats['active_leave_requests'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Active Leave Requests</div>
        </div>
        <div class="bg-green-50 border border-green-200 rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-green-600">{{ $stats['approved_this_month'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Approved This Month</div>
        </div>
    </div>

    <!-- Search and Filter Section -->
    <div class="mb-6 md:mb-8 bg-gray-50 rounded-lg p-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            <div>
                <input type="text" id="searchInput" placeholder="Search by name, roll no..."
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <select id="tradeFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Trades</option>
                    @php
                        $trades = \App\Models\Trade::pluck('trade_name')->unique();
                    @endphp
                    @foreach($trades as $trade)
                        <option value="{{ $trade }}">{{ $trade }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <select id="genderFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Gender</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Students List -->
    <div class="mb-6 md:mb-8">
        <h2 class="text-lg md:text-xl font-bold text-gray-800 mb-4">📚 All Institute Students</h2>

        @if($allStudents->count() > 0)
            <div class="overflow-x-auto rounded-lg border">
                <table class="w-full text-xs md:text-sm">

                    <thead class="bg-gray-100">
                        <tr>
                            <th class="px-2 md:px-4 py-2 text-left">Student Name</th>
                            <th class="px-2 md:px-4 py-2 text-left">Roll No</th>
                            <th class="px-2 md:px-4 py-2 text-left">Trade</th>
                            <th class="px-2 md:px-4 py-2 text-left">Shift</th>
                            <th class="px-2 md:px-4 py-2 text-left">Gender</th>
                            <th class="px-2 md:px-4 py-2 text-left">Contact</th>
                            <th class="px-2 md:px-4 py-2 text-left">Pending Leaves</th>
                            <th class="px-2 md:px-4 py-2 text-left">Status</th>
                            <th class="px-2 md:px-4 py-2 text-left">Action</th>
                        </tr>
                    </thead>

                    <tbody id="studentTableBody">
                        @forelse($allStudents as $student)
                            @php
                                $pendingCount = $student->leaveRequests()->where('status', 'pending')->count();
                                $totalLeaves = $student->leaveRequests()->count();
                                $tradeName = $student->trade ?? 'N/A';
                            @endphp
                            <tr class="border-b hover:bg-gray-50 student-row"
                                data-name="{{ strtolower($student->user->name) }}"
                                data-rollno="{{ strtolower($student->roll_no ?? '') }}"
                                data-trade="{{ strtolower($tradeName) }}"
                                data-gender="{{ strtolower($student->gender ?? '') }}">

                                <td class="px-2 md:px-4 py-2 md:py-3 font-medium">
                                    {{ Str::limit($student->user->name, 20) }}
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    {{ $student->roll_no }}
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs font-semibold">
                                        {{ Str::limit($tradeName, 12) }}
                                    </span>
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-semibold">
                                        {{ ucfirst($student->shift ?? '-') }}
                                    </span>
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    {{ ucfirst($student->gender ?? '-') }}
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    {{ $student->mobile ?? '-' }}
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    @if($pendingCount > 0)
                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs font-semibold">
                                            {{ $pendingCount }} Pending
                                        </span>
                                    @else
                                        <span class="text-gray-500 text-xs">None</span>
                                    @endif
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    <span class="px-2 py-1 rounded text-white text-xs font-bold bg-green-500">
                                        Active
                                    </span>
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    <div class="flex gap-2">
                                        @if($totalLeaves > 0)
                                            <a href="{{ route('approval.view-all') }}"
                                               class="bg-blue-600 text-white px-2 md:px-3 py-1 rounded hover:bg-blue-700 text-xs font-semibold">
                                                View Leave Requests
                                            </a>
                                        @else
                                            <span class="text-gray-400 text-xs">-</span>
                                        @endif
                                    </div>
                                </td>

                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="px-4 py-6 text-center text-gray-500">
                                    No students found
                                </td>
                            </tr>
                        @endforelse
                    </tbody>

                </table>
            </div>
        @else
            <div class="bg-blue-50 border border-dashed border-blue-300 rounded p-6 text-center">
                <p class="text-blue-600">No students found in the institute</p>
            </div>
        @endif
    </div>

    <!-- Quick Actions -->
    <div class="bg-gray-50 rounded-lg p-4 md:p-6">
        <h3 class="text-lg font-semibold mb-4">⚡ Quick Actions</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <a href="{{ route('approval.index') }}"
               class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-center font-semibold">
                📋 View Pending Approvals
            </a>
            <a href="{{ route('dashboard') }}"
               class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 text-center font-semibold">
                ← Back to Dashboard
            </a>
        </div>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const tradeFilter = document.getElementById('tradeFilter');
    const genderFilter = document.getElementById('genderFilter');
    const rows = document.querySelectorAll('.student-row');

    function filterTable() {
        const searchTerm = searchInput.value.toLowerCase();
        const tradeTerm = tradeFilter.value.toLowerCase();
        const genderTerm = genderFilter.value.toLowerCase();

        rows.forEach(row => {
            const name = row.dataset.name;
            const rollno = row.dataset.rollno;
            const trade = row.dataset.trade;
            const gender = row.dataset.gender;

            const matchSearch = name.includes(searchTerm) || rollno.includes(searchTerm);
            const matchTrade = !tradeTerm || trade.includes(tradeTerm);
            const matchGender = !genderTerm || gender === genderTerm;

            row.style.display = matchSearch && matchTrade && matchGender ? '' : 'none';
        });
    }

    searchInput.addEventListener('keyup', filterTable);
    tradeFilter.addEventListener('change', filterTable);
    genderFilter.addEventListener('change', filterTable);
});
</script>
@endsection