@extends('layouts.admin')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <h1 class="m-0 font-weight-bold text-dark">Manajemen User Siswa</h1>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="card shadow-sm border-0" style="border-radius: 15px;">
            <div class="card-header bg-white py-3">
                <div class="row align-items-center">
                    <div class="col">
                        <h5 class="mb-0 font-weight-bold">Daftar Pendaftar</h5>
                    </div>
                    <div class="col-md-4">
                        {{-- ID search-form ditambahkan untuk handle AJAX --}}
                        <form id="search-form" action="{{ route('admin.user.index') }}" method="GET">
                            <div class="input-group">
                                {{-- Atribut id="search-input" ditambahkan untuk Live Search --}}
                                <input type="text" id="search-input" name="search" class="form-control" placeholder="Cari Nama, NISN atau Sekolah..." value="{{ request('search') }}" autocomplete="off">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="submit">
                                        <i class="fas fa-search" id="search-icon"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light text-muted text-uppercase small font-weight-bold">
                            <tr>
                                <th class="text-center" width="50">NO</th>
                                <th>NAMA SISWA</th>
                                <th>NISN</th>
                                <th>ASAL SEKOLAH</th>
                                <th>EMAIL/USERNAME</th>
                                <th>PASSWORD</th>
                                <th>STATUS</th>
                                <th class="text-center">AKSI</th>
                            </tr>
                        </thead>
                        {{-- ID user-table-body ditambahkan sebagai target update AJAX --}}
                        <tbody id="user-table-body">
                            @include('admin.user._user_table') {{-- Gunakan file fragment untuk isi tabel --}}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-white py-3" id="pagination-container">
                <div class="float-right">
                    {{ $users->appends(['search' => request('search')])->links() }}
                </div>
            </div>
        </div>
    </div>
</section>

@include('admin.user.user_modal')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Popup Sukses Global
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: "{{ session('success') }}",
            confirmButtonColor: '#008F5D',
        });
    @endif

    // Live Search AJAX Script (Smooth Processing)
    $(document).ready(function() {
        let timeout = null;

        // Fungsi pencarian otomatis saat mengetik (Live Search)
        $('#search-input').on('keyup', function() {
            clearTimeout(timeout);
            let query = $(this).val();
            let icon = $('#search-icon');

            // Ganti icon ke spinner saat mencari
            icon.removeClass('fa-search').addClass('fa-spinner fa-spin');

            // Debounce: Tunggu 300ms setelah ketikan terakhir agar server tidak berat
            timeout = setTimeout(function() {
                $.ajax({
                    url: "{{ route('admin.user.index') }}",
                    type: "GET",
                    data: { 'search': query },
                    success: function(data) {
                        // Update isi tabel dan pagination secara halus
                        $('#user-table-body').html($(data).find('#user-table-body').html());
                        $('#pagination-container').html($(data).find('#pagination-container').html());
                        icon.removeClass('fa-spinner fa-spin').addClass('fa-search');
                    },
                    error: function() {
                        icon.removeClass('fa-spinner fa-spin').addClass('fa-search');
                    }
                });
            }, 300);
        });

        // Menjaga agar pagination tetap menggunakan AJAX tanpa reload halaman
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            let url = $(this).attr('href');
            $.get(url, function(data) {
                $('#user-table-body').html($(data).find('#user-table-body').html());
                $('#pagination-container').html($(data).find('#pagination-container').html());
                window.history.pushState("", "", url); // Update URL di browser
            });
        });
    });

    function confirmDelete(id) {
        Swal.fire({
            title: 'Hapus User?',
            text: "Data akun dan profil siswa ini akan dihapus permanen!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        })
    }

    function openEditModal(user) {
        $('#formEditUser').attr('action', '/admin/user/' + user.id);
        $('#edit_name').val(user.name);
        $('#edit_email').val(user.email);

        // Isi NISN jika ada
        $('#edit_nisn').val(user.data_siswa ? user.data_siswa.nisn : '');

        // Isi Asal Sekolah jika ada
        $('#edit_asal_sekolah').val(user.data_sekolah ? user.data_sekolah.asal_sekolah : '');

        $('#modalEditUser').modal('show');
    }
</script>
@endsection