@extends('layouts.admin_lbb')

@section('page-title', 'Manajemen Siswa')

@section('content')

<div class="row g-3 mb-4">
    <!-- Stat Cards -->
    <div class="col-lg-3 col-6">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon primary">
                    <i class="bi bi-people-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ number_format($totalStudents, 0, ',', '.') }}</div>
                <div class="stat-label">Total Siswa</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon success">
                    <i class="bi bi-person-check-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ number_format($activeStudents, 0, ',', '.') }}</div>
                <div class="stat-label">Siswa Aktif</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon danger">
                    <i class="bi bi-person-x-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ number_format($inactiveStudents, 0, ',', '.') }}</div>
                <div class="stat-label">Siswa Nonaktif</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon warning">
                    <i class="bi bi-person-plus-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">+{{ number_format($newStudentsThisMonth, 0, ',', '.') }}</div>
                <div class="stat-label">Bulan Ini</div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <i class="bi bi-people me-2"></i>
            Daftar Siswa
        </div>
        <div class="row">
            <div class="col-auto">
                <a href="{{ route('admin.students.template') }}" class="btn btn-warning">
                    <i class="bi bi-download me-1"></i>
                    Template
                </a>
            </div>
            <div class="col-auto">
                <button class="btn btn-secondary" onclick="showImportModal()">
                    <i class="bi bi-upload me-1"></i>
                    Upload Data
                </button>
            </div>
            <div class="col-auto">
                <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addStudentModal">
                    <i class="bi bi-person-plus me-1"></i>
                    Tambah Siswa
                </button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <!-- Search & Filter -->
        <form action="{{ route('admin.students.index') }}" method="GET" class="row g-3 mb-4">
            <div class="col-md-4 col-sm-12">
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" class="form-control" placeholder="Cari nama atau no HP..." name="search" value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <select class="form-select" name="class">
                    <option value="">Semua Kelas</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ request('class') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 col-sm-6">
                <select class="form-select" name="status">
                    <option value="">Semua Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Aktif</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Nonaktif</option>
                </select>
            </div>
            <div class="col-md-2 col-12">
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-success flex-grow-1">
                        <i class="bi bi-funnel"></i>
                        @if(!request('search') && !request('class') && !request('status'))
                        <span class="d-none d-sm-inline">Filter</span>
                        @endif
                    </button>
                    @if(request('search') || request('class') || request('status'))
                    <a href="{{ route('admin.students.index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle"></i>
                    </a>
                    @endif
                </div>
            </div>
        </form>
        
        <!-- Table -->
        <div class="table-responsive">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()">
                    <label class="form-check-label" for="selectAllCheckbox">
                        <strong>Pilih Semua</strong>
                    </label>
                </div>
                <button class="btn btn-danger d-none" id="deleteSelectedBtn" onclick="deleteSelectedStudents()">
                    <i class="bi bi-trash me-1"></i>
                    Hapus Terpilih (<span id="selectedCount">0</span>)
                </button>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 50px;">
                            <!-- Select All header checkbox - hidden, handled by main checkbox above -->
                        </th>
                        <th>No</th>
                        <th>Nama</th>
                        <th>No HP</th>
                        <th>Kelas</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($students as $student)
                        @php
                            $isActive = $student->status->value === 'active';
                        @endphp
                        <tr data-student-id="{{ $student->id }}">
                            <td>
                                <input class="form-check-input student-checkbox" type="checkbox" value="{{ $student->id }}" onchange="updateSelectedCount()">
                            </td>
                            <td data-label="No">{{ $loop->index + 1 + (($students->currentPage() - 1) * $students->perPage()) }}</td>
                            <td data-label="Nama">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <div class="fw-bold">{{ $student->user->name }}</div>
                                        <small class="text-muted">{{ $student->user->email }}</small>
                                    </div>
                                </div>
                            </td>
                            <td data-label="No HP">{{ $student->user->phone }}</td>
                            <td data-label="Kelas"><span class="badge bg-secondary">{{ $student->classModel->name ?? '-' }}</span></td>
                            <td data-label="Status">
                                <span class="badge {{ $isActive ? 'badge-success' : 'badge-danger' }}">
                                    {{ $isActive ? 'Aktif' : 'Nonaktif' }}
                                </span>
                            </td>
                            <td data-label="Aksi">
                                <div class="btn-group btn-group-sm">
                                    <button class="btn btn-outline-primary" onclick="editStudent({{ $student->id }}, '{{ $student->user->name }}')">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button class="btn btn-outline-warning" onclick="resetPassword({{ $student->id }}, '{{ $student->user->name }}')">
                                        <i class="bi bi-key"></i>
                                    </button>
                                    <button class="btn btn-outline-danger" onclick="deleteStudent({{ $student->id }}, '{{ $student->user->name }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr class="empty-state">
                            <td colspan="7" class="text-center py-4" data-label="">
                                <div class="text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                    Belum ada data siswa
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="card-footer d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <span class="me-2">Tampilkan:</span>
                <select class="form-select form-select-sm" style="width: auto;" onchange="changePerPage(this.value)">
                    <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                    <option value="10" {{ request('per_page') == 10 || !request('per_page') ? 'selected' : '' }}>10</option>
                    <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                </select>
                <span class="ms-2">per halaman</span>
            </div>
            <nav>
                <ul class="pagination pagination-sm mb-0">
                    @if($students->onFirstPage())
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                        </li>
                    @else
                        <li class="page-item">
                            <a class="page-link" href="{{ $students->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a>
                        </li>
                    @endif
                    
                    @foreach($students->getUrlRange(1, $students->lastPage()) as $page => $url)
                        @if($page == $students->currentPage())
                            <li class="page-item active">
                                <span class="page-link">{{ $page }}</span>
                            </li>
                        @elseif($page == 1 || $page == $students->lastPage() || ($page >= $students->currentPage() - 1 && $page <= $students->currentPage() + 1))
                            <li class="page-item">
                                <a class="page-link" href="{{ $students->appends(request()->query())->url($page) }}">{{ $page }}</a>
                            </li>
                        @elseif($page == $students->currentPage() - 2 || $page == $students->currentPage() + 2)
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        @endif
                    @endforeach

                    @if($students->hasMorePages())
                        <li class="page-item">
                            <a class="page-link" href="{{ $students->appends(request()->query())->nextPageUrl() }}"><i class="bi bi-chevron-right"></i></a>
                        </li>
                    @else
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                        </li>
                    @endif
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- Modal Tambah Siswa -->
<div class="modal fade" id="addStudentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('admin.students.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-person-plus me-2"></i>
                        Tambah Siswa
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Lengkap</label>
                        <input type="text" class="form-control" name="name" placeholder="Masukkan nama lengkap" required>
                        @error('name')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" placeholder="Masukkan email" required>
                        @error('email')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">No HP / WhatsApp</label>
                        <input type="tel" class="form-control" name="phone" placeholder="Contoh: 081234567890" required>
                        @error('phone')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Kelas</label>
                        <input type="text" class="form-control" name="class_name" placeholder="Contoh: XII IPA 1" required>
                        @error('class_name')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password" id="addPassword" placeholder="Masukkan password" required>
                            <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('addPassword', this)">
                                <i class="bi bi-eye" id="addPasswordIcon"></i>
                            </button>
                        </div>
                        <small class="text-muted">Minimal 6 karakter</small>
                        @error('password')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-check form-switch">
                        <input type="hidden" name="status" value="inactive">
                        <input class="form-check-input" type="checkbox" name="status" value="active" id="activeStatus" checked>
                        <label class="form-check-label" for="activeStatus">
                            Status Aktif
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-2"></i>
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit Siswa -->
<div class="modal fade" id="editStudentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editStudentForm" method="POST" onsubmit="return confirmUpdate()">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-pencil me-2"></i>
                        Edit Siswa
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Lengkap</label>
                        <input type="text" class="form-control" name="name" id="editName" required>
                        @error('name')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" id="editEmail" required>
                        @error('email')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">No HP / WhatsApp</label>
                        <input type="tel" class="form-control" name="phone" id="editPhone" required>
                        @error('phone')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Kelas</label>
                        <input type="text" class="form-control" name="class_name" id="editClass" required>
                        @error('class_name')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-check form-switch">
                        <input type="hidden" name="status" value="inactive">
                        <input class="form-check-input" type="checkbox" name="status" value="active" id="editActiveStatus">
                        <label class="form-check-label" for="editActiveStatus">
                            Status Aktif
                        </label>
                    </div>
                    @error('status')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-2"></i>
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Import Excel -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('admin.students.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-file-earmark-excel me-2"></i>
                        Import Siswa dari Excel
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="info-box mb-4">
                        <h6><i class="bi bi-info-circle me-2"></i>Panduan Format Excel</h6>
                        <ol class="mb-0 ps-3">
                            <li>Buat file Excel dengan kolom: Nama, Email, No HP, Kelas, Password</li>
                            <li>Pastikan setiap baris berisi data lengkap</li>
                            <li>Simpan file dengan format .xlsx, .xls, atau .csv</li>
                            <li>Ukuran file maksimal 5MB</li>
                        </ol>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Upload File Excel</label>
                        <input type="file" class="form-control" name="file" accept=".xlsx,.xls,.csv" required>
                        @error('file')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="bi bi-lightbulb me-2"></i>
                        <small>
                            Siswa yang sudah ada (berdasarkan email) akan diupdate. Password akan digenerate otomatis jika kosong.
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-upload me-2"></i>
                        Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let currentStudentId = null;
let currentStudentName = null;

function changePerPage(perPage) {
    // Get current URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    
    // Update or add per_page parameter
    urlParams.set('per_page', perPage);
    
    // Keep other parameters
    if (urlParams.has('page')) {
        urlParams.delete('page');
    }
    
    // Construct new URL
    const newUrl = window.location.pathname + '?' + urlParams.toString();
    
    // Navigate to new URL
    window.location.href = newUrl;
}

function showImportModal() {
    var myModal = new bootstrap.Modal(document.getElementById('importModal'));
    myModal.show();
}

function togglePassword(fieldId, button) {
    const field = document.getElementById(fieldId);
    const icon = button.querySelector('i');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    } else {
        field.type = 'password';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    }
}

function confirmUpdate() {
    const name = document.getElementById('editName').value;
    AppAlert.update(
        'Update Data Siswa',
        'Apakah Anda yakin ingin mengupdate data untuk <strong>' + name + '</strong>?',
        function() {
            document.getElementById('editStudentForm').submit();
        }
    );
    return false;
}

function editStudent(id, name) {
    currentStudentId = id;
    currentStudentName = name;
    
    fetch(`/admin/students/${id}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('editName').value = data.name;
            document.getElementById('editEmail').value = data.email;
            document.getElementById('editPhone').value = data.phone;
            document.getElementById('editClass').value = data.class_name;
            document.getElementById('editActiveStatus').checked = data.status === 'active';
            document.getElementById('editStudentForm').action = `/admin/students/${id}`;
            
            var myModal = new bootstrap.Modal(document.getElementById('editStudentModal'));
            myModal.show();
        })
        .catch(error => console.error('Error:', error));
}

function resetPassword(id, name) {
    AppAlert.update(
        'Reset Password',
        'Apakah Anda yakin ingin mereset password untuk <strong>' + name + '</strong>?<br><br><small class="text-muted">Password sementara: 123456</small>',
        function() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/admin/students/${id}/reset-password`;
            
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            document.body.appendChild(form);
            form.submit();
        }
    );
}

function deleteStudent(id, name) {
    AppAlert.delete(
        'Hapus Siswa',
        'Apakah Anda yakin ingin menghapus <strong>' + name + '</strong>?<br><br><small class="text-danger fw-bold">Tindakan ini tidak dapat dibatalkan!</small>',
        function() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/admin/students/${id}`;
            
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);
            
            document.body.appendChild(form);
            form.submit();
        }
    );
}

function toggleSelectAll() {
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    const shouldCheck = selectAllCheckbox.checked;
    
    const checkboxes = document.querySelectorAll('.student-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = shouldCheck;
    });
    
    updateSelectedCount();
}

function updateSelectedCount() {
    const checkboxes = document.querySelectorAll('.student-checkbox');
    const checkedCheckboxes = document.querySelectorAll('.student-checkbox:checked');
    const count = checkedCheckboxes.length;
    const totalCount = checkboxes.length;
    
    document.getElementById('selectedCount').textContent = count;
    
    const deleteBtn = document.getElementById('deleteSelectedBtn');
    if (count > 0) {
        deleteBtn.classList.remove('d-none');
    } else {
        deleteBtn.classList.add('d-none');
    }
    
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    if (count === 0) {
        selectAllCheckbox.checked = false;
    } else if (count === totalCount) {
        selectAllCheckbox.checked = true;
    } else {
        selectAllCheckbox.checked = false;
    }
}

function deleteSelectedStudents() {
    const checkboxes = document.querySelectorAll('.student-checkbox:checked');
    const selectedIds = Array.from(checkboxes).map(cb => cb.value);
    
    if (selectedIds.length === 0) {
        return;
    }
    
    AppAlert.delete(
        'Hapus Siswa Terpilih',
        'Apakah Anda yakin ingin menghapus <strong>' + selectedIds.length + ' siswa</strong> yang dipilih?<br><br><small class="text-danger fw-bold">Tindakan ini tidak dapat dibatalkan!</small>',
        function() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/admin/students/batch-delete';
            
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);
            
            selectedIds.forEach(id => {
                const idInput = document.createElement('input');
                idInput.type = 'hidden';
                idInput.name = 'ids[]';
                idInput.value = id;
                form.appendChild(idInput);
            });
            
            document.body.appendChild(form);
            form.submit();
        }
    );
}
</script>
@endsection