@extends('layouts.admin')

@section('title', 'Manage Students')

@section('content')
    <div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
        <!-- Heading -->
        <div>
            <h2 class="text-2xl font-bold text-gray-800">All Students</h2>
            <p class="text-gray-600">Manage and view student records</p>
        </div>

        <!-- Actions -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-3 space-y-3 sm:space-y-0 w-full sm:w-auto">
            <!-- Search Form -->
            <form method="GET" action="{{ route('admin.students.index') }}" class="flex w-full sm:w-auto">
                <div class="relative flex-1">
                    <input
                        type="text"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Search students..."
                        class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                    >
                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <button type="submit" class="ml-2 bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition duration-200">
                    Search
                </button>
            </form>

            <!-- Add New Student Button -->
            <a href="{{ route('admin.students.create') }}" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition duration-200 flex items-center justify-center">
                <i class="fas fa-plus mr-2"></i>
                Add Student
            </a>

            <!-- Import Students Button -->
{{--            <button id="openImportModal" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition duration-200 flex items-center justify-center">--}}
{{--                <i class="fas fa-download mr-2"></i>--}}
{{--                Import Students--}}
{{--            </button>--}}
        </div>
    </div>


    <!-- Students Table -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-800">Student Records</h3>
                <div class="flex space-x-2">
                    <!-- Export Buttons -->
                    <a href="{{ route('admin.students.export.excel') }}"
                       class="bg-green-600 text-white px-3 py-2 rounded-lg hover:bg-green-700 transition duration-200 text-sm flex items-center">
                        <i class="fas fa-file-excel mr-2"></i>
                        Excel
                    </a>
                    <a href="{{ route('admin.students.export.pdf') }}" target="_blank"
                       class="bg-red-600 text-white px-3 py-2 rounded-lg hover:bg-red-700 transition duration-200 text-sm flex items-center">
                        <i class="fas fa-file-pdf mr-2"></i>
                        PDF
                    </a>
                </div>
            </div>
        </div>

        @if($students->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                    <tr>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <div class="flex items-center">
                                <span>Student</span>
                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'surname', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}">
                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
                                </a>
                            </div>
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            JUPEB Number
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Subjects Combination
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Course Applied
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Date Registered
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($students as $student)
                        <tr class="hover:bg-gray-50 transition duration-150">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div
                                        class="flex-shrink-0 h-10 w-10 bg-primary-100 rounded-full flex items-center justify-center">
                                        <i class="fas fa-user text-primary-600"></i>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ $student->surname }} {{ $student->other_name }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            ID: {{ $student->id }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900 font-mono">{{ $student->jupeb_number }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900 font-mono">{{ $student->jamb_reg_number }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900 font-mono">{{ $student->course_applied }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $student->created_at->format('M j, Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex justify-end space-x-2">
                                    <a href="{{ route('admin.students.edit', $student->id) }}"
                                       class="text-yellow-600 hover:text-yellow-900 p-2 rounded-full hover:bg-yellow-50 transition duration-200"
                                       title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('admin.students.destroy', $student->id) }}" method="POST"
                                          class="inline"
                                          onsubmit="return confirm('Are you sure you want to delete this student?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50 transition duration-200"
                                                title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="px-6 py-4 border-t border-gray-200">
                <div class="flex items-center justify-between">
                    <div class="text-sm text-gray-700">
                        Showing {{ $students->firstItem() }} to {{ $students->lastItem() }} of {{ $students->total() }}
                        results
                    </div>
                    <div class="flex space-x-2">
                        {{ $students->links() }}
                    </div>
                </div>
            </div>
        @else
            <div class="text-center py-12">
                <i class="fas fa-users text-4xl text-gray-300 mb-4"></i>
                <h3 class="text-lg font-medium text-gray-900">No students found</h3>
                <p class="text-gray-500 mt-1">
                    @if(request('search'))
                        No students match your search criteria. <a href="{{ route('admin.students.index') }}"
                                                                   class="text-primary-600 hover:text-primary-500">Clear
                            search</a>
                    @else
                        There are no students in the database yet.
                    @endif
                </p>
                <div class="mt-6 flex justify-center space-x-3">
                    <a href="{{ route('admin.students.create') }}"
                       class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition duration-200">
                        <i class="fas fa-plus mr-2"></i>
                        Add First Student
                    </a>
{{--                    <button id="openImportModalEmpty"--}}
{{--                            class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-200">--}}
{{--                        <i class="fas fa-download mr-2"></i>--}}
{{--                        Import Students--}}
{{--                    </button>--}}
                </div>
            </div>
        @endif
    </div>


    <!-- Import Students Modal -->
    <div id="importModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4">
            <!-- Modal Header -->
            <div class="bg-slate-900 px-6 py-4 rounded-t-xl">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-white flex items-center">
                        <i class="fas fa-file-import mr-2"></i>
                        Import Students
                    </h3>
                    <button id="closeImportModal" class="text-white hover:text-purple-200 transition duration-200">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>

            <!-- Modal Body -->
            <div class="p-6">
                <form id="importForm" method="POST" action="{{ route('admin.students.import') }}"
                      enctype="multipart/form-data" class="space-y-4">
                    @csrf

                    <!-- File Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-file-excel text-green-500 mr-1"></i>
                            Select Excel/CSV File
                        </label>
                        <div class="relative">
                            <input
                                type="file"
                                name="file"
                                id="fileInput"
                                accept=".xlsx,.xls,.csv"
                                required
                                class="hidden"
                            >
                            <div id="fileDropZone"
                                 class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-purple-400 transition duration-200">
                                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                                <p class="text-gray-600 font-medium">Click to upload or drag and drop</p>
                                <p class="text-sm text-gray-500 mt-1">Excel (.xlsx, .xls) or CSV files</p>
                                <p class="text-xs text-gray-400 mt-2">Max file size: 10MB</p>
                            </div>
                            <div id="fileName" class="mt-2 text-sm text-green-600 hidden"></div>
                        </div>
                        @error('file')
                        <p class="mt-1 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Template Download -->
                    <div class="bg-blue-50 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-blue-700 mb-2 flex items-center">
                            <i class="fas fa-download text-blue-500 mr-2"></i>
                            Need a template?
                        </h4>
                        <p class="text-sm text-blue-600 mb-3">Download our Excel template to ensure proper
                            formatting.</p>
                        <a href="{{ route('admin.students.import.template') }}"
                           class="inline-flex items-center text-sm bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition duration-200">
                            <i class="fas fa-file-download mr-2"></i>
                            Download Template
                        </a>
                    </div>

                    <!-- Modal Actions -->
                    <div class="flex space-x-3 pt-4">
                        <button type="button" id="cancelImport"
                                class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition duration-200">
                            Cancel
                        </button>
                        <button type="submit" id="importSubmit"
                                class="flex-1 px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg hover:from-primary-700 hover:to-primary-800 transition duration-200 flex items-center justify-center">
                            <i class="fas fa-upload mr-2"></i>
                            Import
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Import Progress Modal -->
    <div id="progressModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-spinner fa-spin text-purple-600 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">Importing Students</h3>
                <p class="text-gray-600 mb-4">Please wait while we process your file...</p>

                <!-- Progress Bar -->
                <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                    <div id="progressBar" class="bg-purple-600 h-2 rounded-full transition-all duration-300"
                         style="width: 0%"></div>
                </div>
                <p id="progressText" class="text-sm text-gray-500">Processing...</p>
            </div>
        </div>
    </div>

    <!-- Import Success Modal -->
    <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-check text-green-600 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">Import Successful!</h3>
                <p id="successMessage" class="text-gray-600 mb-4"></p>
                <button id="closeSuccessModal"
                        class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-200">
                    Continue
                </button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        // Modal Elements
        const importModal = document.getElementById('importModal');
        const progressModal = document.getElementById('progressModal');
        const successModal = document.getElementById('successModal');
        const fileInput = document.getElementById('fileInput');
        const fileDropZone = document.getElementById('fileDropZone');
        const fileName = document.getElementById('fileName');
        const importForm = document.getElementById('importForm');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        const successMessage = document.getElementById('successMessage');

        // Open Modal
        document.getElementById('openImportModal').addEventListener('click', openImportModal);
        if (document.getElementById('openImportModalEmpty')) {
            document.getElementById('openImportModalEmpty').addEventListener('click', openImportModal);
        }

        function openImportModal() {
            importModal.classList.remove('hidden');
            importModal.classList.add('flex');
        }

        // Close Modal
        document.getElementById('closeImportModal').addEventListener('click', closeImportModal);
        document.getElementById('cancelImport').addEventListener('click', closeImportModal);
        document.getElementById('closeSuccessModal').addEventListener('click', closeSuccessModal);

        function closeImportModal() {
            importModal.classList.add('hidden');
            importModal.classList.remove('flex');
            resetForm();
        }

        function closeSuccessModal() {
            successModal.classList.add('hidden');
            successModal.classList.remove('flex');
        }

        // File Upload Handling
        fileDropZone.addEventListener('click', () => fileInput.click());

        fileDropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            fileDropZone.classList.add('border-purple-500', 'bg-purple-50');
        });

        fileDropZone.addEventListener('dragleave', () => {
            fileDropZone.classList.remove('border-purple-500', 'bg-purple-50');
        });

        fileDropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            fileDropZone.classList.remove('border-purple-500', 'bg-purple-50');

            if (e.dataTransfer.files.length) {
                fileInput.files = e.dataTransfer.files;
                handleFileSelect();
            }
        });

        fileInput.addEventListener('change', handleFileSelect);

        function handleFileSelect() {
            if (fileInput.files.length > 0) {
                const file = fileInput.files[0];
                fileName.textContent = `Selected: ${file.name}`;
                fileName.classList.remove('hidden');
                fileDropZone.innerHTML = `
                    <i class="fas fa-file-excel text-3xl text-green-500 mb-2"></i>
                    <p class="text-green-600 font-medium">${file.name}</p>
                    <p class="text-sm text-gray-500 mt-1">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
                `;
            }
        }

        // Form Submission
        importForm.addEventListener('submit', function (e) {
            e.preventDefault();

            if (!fileInput.files.length) {
                alert('Please select a file to import.');
                return;
            }

            // Show progress modal
            importModal.classList.add('hidden');
            progressModal.classList.remove('hidden');
            progressModal.classList.add('flex');

            // Simulate progress (in real implementation, use AJAX with progress events)
            let progress = 0;
            const interval = setInterval(() => {
                progress += 5;
                progressBar.style.width = `${progress}%`;
                progressText.textContent = `Processing... ${progress}%`;

                if (progress >= 100) {
                    clearInterval(interval);

                    // In real implementation, this would be handled by AJAX response
                    setTimeout(() => {
                        progressModal.classList.add('hidden');
                        successModal.classList.remove('hidden');
                        successModal.classList.add('flex');
                        successMessage.textContent = '15 student records imported successfully. 2 duplicates skipped.';
                    }, 500);
                }
            }, 100);

            // For actual implementation, use:
            // const formData = new FormData(this);
            // fetch(this.action, {
            //     method: 'POST',
            //     body: formData,
            //     headers: {
            //         'X-Requested-With': 'XMLHttpRequest'
            //     }
            // }).then(response => response.json())
            // .then(data => {
            //     // Handle response
            // });
        });

        function resetForm() {
            importForm.reset();
            fileName.classList.add('hidden');
            fileDropZone.innerHTML = `
                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                <p class="text-gray-600 font-medium">Click to upload or drag and drop</p>
                <p class="text-sm text-gray-500 mt-1">Excel (.xlsx, .xls) or CSV files</p>
                <p class="text-xs text-gray-400 mt-2">Max file size: 10MB</p>
            `;
        }

        // Close modals when clicking outside
        [importModal, progressModal, successModal].forEach(modal => {
            if (modal) {
                modal.addEventListener('click', (e) => {
                    if (e.target === modal) {
                        if (modal === importModal) closeImportModal();
                        if (modal === progressModal) {
                            progressModal.classList.add('hidden');
                            importModal.classList.remove('hidden');
                            importModal.classList.add('flex');
                        }
                        if (modal === successModal) closeSuccessModal();
                    }
                });
            }
        });

        // Search functionality with debounce
        let searchTimeout;
        document.querySelector('input[name="search"]').addEventListener('input', function (e) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                if (e.target.value.length === 0 || e.target.value.length >= 3) {
                    e.target.form.submit();
                }
            }, 500);
        });

        // Sort functionality
        document.querySelectorAll('th a').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                window.location.href = this.href;
            });
        });
    </script>
@endpush