@extends('layouts.header')

@section('content')
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    /* (Style section unchanged – retain as-is) */
</style>

<main class="container-fluid px-4">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Student Management</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Student List</li>
        </ol>
    </div>

    <!-- Student Table with Filter & Bulk Actions -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-white">Student Records</h6>
                    <div class="mt-3 mt-md-0">
                        <button id="downloadExcel" class="btn btn-secondary btn-sm me-2">
                            <i class="fas fa-file-excel me-1"></i> Download Excel
                        </button>
                        <a href="{{ route('student.list') }}" class="btn btn-light btn-sm">
                            <i class="fas fa-sync-alt me-1"></i> Reset Filters
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Filters -->
                    <form method="GET" action="{{ route('student.list') }}" class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label class="small mb-1">School</label>
                            <select name="school_id" class="form-select">
                                <option value="">All Schools</option>
                                @foreach($schools as $school)
                                    <option value="{{ $school->Id }}" {{ request('school_id') == $school->Id ? 'selected' : '' }}>
                                        {{ $school->school_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="small mb-1">Class</label>
                            <select name="class" class="form-select">
                                <option value="">All Classes</option>
                                @foreach($classes as $class)
                                    <option value="{{ $class }}" {{ request('class') == $class ? 'selected' : '' }}>
                                        {{ $class }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-filter me-1"></i> Filter
                            </button>
                        </div>
                    </form>

                    <!-- Bulk Actions -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <form class="upgrade-form" action="{{ route('student.upgrade') }}" method="POST">
                                @csrf
                                <input type="hidden" class="selected-students-input" name="selected_students[]">
                                <button type="submit" class="btn btn-success w-100">
                                    <i class="fas fa-level-up-alt me-1"></i> Upgrade Selected
                                </button>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <form class="upgrade-form" action="{{ route('student.excelupload') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="input-group">
                                    <input type="file" name="excel_file" accept=".xlsx, .xls" class="form-control">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-upload me-1"></i> Upload
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4 d-flex align-items-center justify-content-end">
                            <a href="#" id="exportSelected" class="btn btn-outline-dark w-100">
                                <i class="fas fa-file-export me-1"></i> Export Selected
                            </a>
                        </div>
                    </div>

                    <!-- Table -->
                    <div class="table-responsive">
                        <table id="studentTable" class="table table-hover table-striped">
                            <thead class="thead-light">
                                <tr>
                                    <th width="40px"><input type="checkbox" id="select-all"></th>
                                    <th>#</th>
                                    <th>Student ID</th>
                                    <th>Name</th>
                                    <th>Age</th>
                                    <th>DOB</th>
                                    <th>Gender</th>
                                    <th>Guardian</th>
                                    <th>Phone</th>
                                    <th>Class</th>
                                    <th>School</th>
                                    <th>Fees</th>
                                    <th>Photo</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($students as $index => $student)
                                    <tr>
                                        <td><input type="checkbox" class="student-checkbox" name="selected_students[]" value="{{ $student->id }}"></td>
                                        <td>{{ count($students) - $index }}</td>
                                        <td>{{ $student->student_id }}</td>
                                        <td>
                                            <a href="{{ url('/getStudentFullDetails/' . $student->id) }}">
                                                {{ $student->student_name }}
                                            </a>
                                        </td>
                                        
                                        <td>{{ $student->student_age }}</td>
                                        <td>{{ \Carbon\Carbon::parse($student->date_of_birth)->format('d/m/Y') }}</td>
                                        <td>
                                            <span class="badge bg-{{ $student->gender == 'Male' ? 'primary' : 'info' }}">
                                                {{ $student->gender }}
                                            </span>
                                        </td>
                                        <td>{{ $student->guardian_name }}</td>
                                        <td>{{ $student->contact_phone }}</td>
                                        <td><span class="badge bg-secondary">{{ $student->student_class }}</span></td>
                                        <td>{{ $student->school->school_name ?? 'N/A' }}</td>
                                        <td>₹{{ number_format($student->school_fees, 2, '.', ',') }}</td>
                                        <td>
                                            <img src="{{ !empty($student['student_image']) ? asset($student['student_image']) : 'https://demovb150.zigainfotech.app/public/images/student-5446.png' }}" 
                                            alt="Student Image" 
                                            style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;">
                                       
                                        </td>
                                                                                <td>
                                            <div class="action-buttons">
                                                <a href="{{ route('student.edit', $student->id) }}" class="btn btn-primary btn-sm" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form action="{{ route('student.destroy', $student->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if (session('success'))
                        <div id="success-message" class="alert alert-success alert-dismissible fade show mt-3">
                            <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function () {
        const studentTable = $('#studentTable').DataTable({
            responsive: true,
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search students...",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                paginate: {
                    first: "First",
                    last: "Last",
                    next: "Next",
                    previous: "Previous"
                }
            },
            initComplete: function () {
                $('.dataTables_filter input').addClass('form-control');
                $('.dataTables_length select').addClass('form-select');
            }
        });

        // Bulk Selection
        $('#select-all').on('change', function () {
            $('.student-checkbox').prop('checked', this.checked);
            updateSelectedStudentsInput();
        });

        $('.student-checkbox').on('change', function () {
            $('#select-all').prop('checked', $('.student-checkbox:checked').length === $('.student-checkbox').length);
            updateSelectedStudentsInput();
        });

        function updateSelectedStudentsInput() {
            const selectedIds = $('.student-checkbox:checked').map(function () {
                return this.value;
            }).get().join(',');
            $('.selected-students-input').val(selectedIds);
        }

        // Download Excel
        $('#downloadExcel').on('click', function () {
            let url = '/students/export/json';
            const schoolId = $('select[name="school_id"]').val();
            const studentClass = $('select[name="class"]').val();

            if (schoolId || studentClass) {
                url += '?';
                if (schoolId) url += `school_id=${schoolId}`;
                if (studentClass) url += `${schoolId ? '&' : ''}class=${studentClass}`;
            }

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    const ws = XLSX.utils.json_to_sheet(data);
                    const wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, ws, 'Students');
                    XLSX.writeFile(wb, `students_${new Date().toISOString().slice(0, 10)}.xlsx`);
                });
        });

        // Export Selected
        $('#exportSelected').on('click', function (e) {
            e.preventDefault();
            const selectedIds = $('.student-checkbox:checked').map(function () {
                return this.value;
            }).get();

            if (selectedIds.length === 0) {
                alert('Please select at least one student to export');
                return;
            }

            fetch('/students/export/selected', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                body: JSON.stringify({ selected_students: selectedIds })
            })
                .then(response => response.json())
                .then(data => {
                    const ws = XLSX.utils.json_to_sheet(data);
                    const wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, ws, 'Selected_Students');
                    XLSX.writeFile(wb, `selected_students_${new Date().toISOString().slice(0, 10)}.xlsx`);
                });
        });
    });
</script>
@endpush