{{-- resources/views/admin/kesiswaan/siswa/index.blade.php --}}
@extends('layouts.admin')
@section('title', 'Manajemen Data Siswa')

@section('content')
<div class="page-inner">
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-3">
        <div>
            <h3 class="fw-bold mb-3">Manajemen Kesiswaan: Data Siswa</h3>
            <h6 class="op-7 mb-2">Pusat pengelolaan data diri, rombel, dan status seluruh siswa.</h6>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
            <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <i class="fa fa-exclamation-triangle me-2"></i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 mb-4">
        <div class="col">
            <div class="card card-round shadow-sm border-0 h-100 position-relative">
                {{-- Indikator Live --}}
                <span class="position-absolute top-0 end-0 mt-2 me-2 p-1 bg-danger border border-light rounded-circle animate-pulse" title="Real-Time Active" style="width: 10px; height: 10px;"></span>
                <div class="card-body text-center py-3">
                    <i class="fa fa-users fa-2x text-primary mb-2"></i>
                    <h6 class="text-muted fw-bold mb-1">Total Siswa ({{ request('status') ?: 'Aktif' }})</h6>
                    <h3 class="fw-bold mb-0 text-dark stat-live" id="live-total">{{ $totalSiswaAktif }}</h3>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card card-round shadow-sm border-0 h-100">
                <div class="card-body text-center py-3">
                    <i class="fa fa-mars fa-2x text-info mb-2"></i>
                    <h6 class="text-muted fw-bold mb-1">Putra</h6>
                    <h3 class="fw-bold mb-0 text-dark stat-live" id="live-putra">{{ $genderStats['L'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card card-round shadow-sm border-0 h-100">
                <div class="card-body text-center py-3">
                    <i class="fa fa-venus fa-2x text-warning mb-2"></i>
                    <h6 class="text-muted fw-bold mb-1">Putri</h6>
                    <h3 class="fw-bold mb-0 text-dark stat-live" id="live-putri">{{ $genderStats['P'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card card-round shadow-sm border-0 h-100">
                <div class="card-body text-center py-3">
                    <i class="fa fa-layer-group fa-2x text-success mb-2"></i>
                    <h6 class="text-muted fw-bold mb-1">Rombel Aktif</h6>
                    <h3 class="fw-bold mb-0 text-dark stat-live" id="live-rombel">{{ count($rombelStats) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4" id="rombel-distribution-container" style="{{ empty($rombelStats) ? 'display:none;' : '' }}">
        <div class="col-md-12">
            <div class="card card-round shadow-sm border-0">
                <div class="card-header py-3">
                    <div class="card-title fs-6"><i class="fa fa-chart-pie me-2 text-primary"></i> Distribusi Siswa per Rombel</div>
                </div>
                <div class="card-body">
                    {{-- ID ini digunakan jQuery untuk menembakkan HTML yang baru dirakit --}}
                    <div class="row g-2" id="live-rombel-distribution">
                        @php
                            $sortedRombelStats = collect($rombelStats)->sortBy(function ($jumlah, $rombel) {
                                [$level, $kelas, $gender] = array_pad(explode('-', $rombel), 3, '');
                                return sprintf('%02d-%s-%s-%s', strlen($level), $level, $kelas, $gender === 'L' ? '0' : '1');
                            });
                        @endphp
                        @foreach($sortedRombelStats as $rombel => $jumlah)
                            @php $gender = explode('-', $rombel)[2] ?? null; @endphp
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="p-2 border rounded-3 bg-light text-center border-{{ $gender === 'L' ? 'primary' : 'danger' }}-subtle">
                                    <div class="fw-bold text-dark" style="font-size: 0.9rem;">
                                        {{ $rombel }}
                                        @if($gender === 'L') <i class="fa fa-male text-primary ms-1" title="Putra"></i>
                                        @elseif($gender === 'P') <i class="fa fa-female text-danger ms-1" title="Putri"></i> @endif
                                    </div>
                                    <div class="small fw-bold text-success mt-1">{{ $jumlah }} siswa</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-3">
            <form action="{{ route('admin.siswa.index') }}" method="GET" class="m-0" id="filterForm">
                <div class="row g-3 align-items-end">
                    
                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-calendar-check me-1"></i> Tahun Ajaran</label>
                        <select name="tahun_ajaran_id" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
                            <option value="">-- Semua Tahun --</option>
                            @foreach($tahunAjarans as $ta)
                                <option value="{{ $ta->id }}" {{ request('tahun_ajaran_id') == $ta->id ? 'selected' : '' }}>
                                    {{ $ta->tahun_ajaran }} {{ $ta->is_active ? '(Aktif)' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-users me-1"></i> Angkatan</label>
                        <select name="angkatan_id" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
                            <option value="">-- Semua --</option>
                            @foreach($angkatans as $agt)
                                <option value="{{ $agt->id }}" {{ request('angkatan_id') == $agt->id ? 'selected' : '' }}>
                                    {{ $agt->nama_angkatan }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-info-circle me-1"></i> Status Siswa</label>
                        <select name="status" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
                            <option value="">-- Semua Status --</option> 
                            @foreach(['Aktif', 'Tidak Aktif', 'Naik Kelas', 'Pindah Kelas', 'Pindah Sekolah', 'Lulus', 'Tidak Lulus'] as $st)
                                <option value="{{ $st }}" {{ request('status') == $st ? 'selected' : (request('status') == '' && $st == 'Aktif' ? 'selected' : '') }}>
                                    {{ $st }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-search me-1"></i> Pencarian Siswa</label>
                        <div class="input-group">
                            <input type="text" name="search" class="form-control border-primary-subtle bg-light" placeholder="Cari Nama / NIS / NIPD..." value="{{ request('search') }}">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i> Cari</button>
                            @if(request()->hasAny(['search','tahun_ajaran_id','angkatan_id','status']))
                                <a href="{{ route('admin.siswa.index') }}" class="btn btn-outline-secondary" data-bs-toggle="tooltip" title="Reset Filter"><i class="fa fa-sync-alt"></i></a>
                            @endif
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card card-round shadow-sm border-0">
                <div class="card-header d-flex justify-content-between align-items-center py-3 flex-wrap gap-3">
                    <div class="card-title text-dark mb-0" style="font-size: 1.1rem;">
                        <i class="fa fa-user-graduate me-2 text-primary"></i> Daftar Seluruh Siswa
                    </div>
                    
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="{{ route('admin.siswa.export', request()->query()) }}" class="btn btn-sm btn-success shadow-sm">
                            <i class="fa fa-file-excel me-1"></i> Export Excel
                        </a>
                        <a href="{{ route('admin.siswa.export.pdf', request()->query()) }}" class="btn btn-sm btn-danger shadow-sm">
                            <i class="fa fa-file-pdf me-1"></i> Export PDF
                        </a>
                        <button type="button" class="btn btn-sm btn-warning shadow-sm fw-bold text-dark" data-bs-toggle="modal" data-bs-target="#importSiswaModal">
                            <i class="fa fa-upload me-1"></i> Import Siswa
                        </button>
                        <a href="{{ route('admin.siswa.create') }}" class="btn btn-sm btn-primary shadow-sm">
                            <i class="fa fa-plus me-1"></i> Tambah Siswa
                        </a>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="p-3">
                        @include('admin.kesiswaan.siswa._table')
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="modal fade" id="importSiswaModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content card-round border-0 shadow-lg">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title fw-bold"><i class="fa fa-file-excel me-2"></i> Import Data Siswa Secara Masal</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form action="{{ route('admin.siswa.import') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="modal-body p-4">
            <div class="alert alert-info small border-0 shadow-sm fw-bold">
                <i class="fa fa-info-circle me-1"></i> Pastikan format file sesuai dengan ketentuan sistem. 
                <a href="{{ route('admin.siswa.download-template') }}" class="text-primary text-decoration-underline ms-1">Download Template Excel.</a>
            </div>
            
            <div class="mb-3">
                <label class="form-label fw-bold">Pilih File Excel Data Siswa <span class="text-danger">*</span></label>
                <input class="form-control border-primary-subtle shadow-none" type="file" name="file" accept=".xlsx, .xls" required>
            </div>
            
            <div class="form-check bg-light border border-secondary-subtle p-3 rounded-3 mt-3">
                <input class="form-check-input ms-1" type="checkbox" checked disabled>
                <label class="form-check-label ms-2 small text-muted">
                    Semua akun siswa yang terbuat otomatis akan menggunakan Password default: <strong class="text-dark">alidrus123</strong>.
                </label>
            </div>
        </div>
        <div class="modal-footer bg-light border-0">
            <button type="button" class="btn btn-secondary btn-round" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary btn-round shadow-sm"><i class="fa fa-cloud-upload-alt me-1"></i> Mulai Proses Import</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('styles')
<style>
    @keyframes pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }
    .animate-pulse {
        animation: pulse 2s infinite;
    }
    
    .highlight-update {
        color: #198754 !important; 
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        $('.stat-live').each(function () {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 1500,
                easing: 'swing',
                step: function (now) {
                    $(this).text(Math.ceil(now));
                }
            });
        });

        let isFetching = false;

        function fetchRealtimeStats() {
            if(isFetching) return;
            isFetching = true;

            let formData = $('#filterForm').serialize();

            $.ajax({
                url: "{{ route('admin.siswa.realtime-stats') }}",
                type: "GET",
                data: formData,
                dataType: 'json',
                success: function(res) {
                    updateStatNumber('#live-total', res.total);
                    updateStatNumber('#live-putra', res.putra);
                    updateStatNumber('#live-putri', res.putri);
                    updateStatNumber('#live-rombel', res.rombel);

                    if(res.rombel_details && res.rombel_details.length > 0) {
                        let rombelHtml = '';
                        res.rombel_details.forEach(function(item) {
                            rombelHtml += `
                                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                    <div class="p-2 border rounded-3 bg-light text-center border-${item.color_class}-subtle">
                                        <div class="fw-bold text-dark" style="font-size: 0.9rem;">
                                            ${item.rombel_full}
                                            <i class="fa ${item.icon_class} ms-1" title="${item.gender_text}"></i>
                                        </div>
                                        <div class="small fw-bold text-success mt-1">${item.jumlah} siswa</div>
                                    </div>
                                </div>
                            `;
                        });
                        
                        $('#live-rombel-distribution').html(rombelHtml);
                        $('#rombel-distribution-container').fadeIn();
                    } else {
                        $('#live-rombel-distribution').html('');
                        $('#rombel-distribution-container').fadeOut();
                    }
                },
                complete: function() {
                    isFetching = false;
                }
            });
        }

        function updateStatNumber(selector, newValue) {
            let el = $(selector);
            let currentValue = parseInt(el.text()) || 0;

            if (currentValue !== newValue) {
                el.fadeOut(150, function() {
                    $(this).text(newValue).addClass('highlight-update').fadeIn(150);
                    setTimeout(() => {
                        $(this).removeClass('highlight-update');
                    }, 1000);
                });
            }
        }

        setInterval(fetchRealtimeStats, 10000);
    });
</script>
@endpush