{{-- resources/views/admin/master-data/tahun-ajaran/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Data Tahun Ajaran')

@section('content')
<div class="container-fluid py-4">

    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Master Data Tahun Ajaran (Berbasis Hijriyah)</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">
            Sistem secara otomatis menginduk pada Kalender Hijriyah. Tahun Masehi akan terisi otomatis sebagai pelengkap data sistem.
        </p>
    </div>
    
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body p-3">
            <div class="row g-3 align-items-center">
                <div class="col-12 col-md-auto d-flex align-items-center gap-2">
                    <i class="bi bi-funnel text-muted d-none d-md-block"></i>
                    <label for="filterTahun" class="form-label mb-0 fw-medium text-nowrap">Filter Tahun:</label>
                    <select class="form-select form-select-sm" id="filterTahun" style="width: auto; min-width: 200px;">
                        <option value="">Semua Tahun Ajaran</option>
                        @foreach($tahunAjarans as $ta)
                            <option value="{{ $ta->tahun_ajaran_hijriyah }}">{{ $ta->tahun_ajaran_hijriyah }} H</option>
                        @endforeach
                    </select>
                </div>
                <div class="col d-none d-md-block"></div>
                <div class="col-12 col-md-auto text-md-end">
                    <button type="button" class="btn btn-success fw-bold btn-sm d-inline-flex align-items-center gap-2 w-100 justify-content-center w-md-auto shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahTahun">
                        <i class="bi bi-calendar-plus"></i> Tambah Tahun Ajaran
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3">
            <h6 class="card-title mb-0 fw-bold">Daftar Tahun Ajaran & PPDB</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped align-middle mb-0" id="tableTahunAjaran">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; letter-spacing: 0.5px;" width="5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; letter-spacing: 0.5px;">TAHUN AJARAN</th>
                            <th class="text-center text-secondary" style="font-size: 12px; letter-spacing: 0.5px;">TAHUN PPDB</th>
                            <th class="text-center text-secondary" style="font-size: 12px; letter-spacing: 0.5px;">KODE</th>
                            <th class="text-center text-secondary" style="font-size: 12px; letter-spacing: 0.5px;">STATUS AKADEMIK</th>
                            <th class="text-center text-secondary" style="font-size: 12px; letter-spacing: 0.5px;">STATUS PPDB</th>
                            <th class="text-secondary" style="font-size: 12px; letter-spacing: 0.5px;">INFO PENDAFTARAN</th>
                            <th class="text-center text-secondary" style="font-size: 12px; letter-spacing: 0.5px;" width="8%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tahunAjarans as $index => $ta)
                        <tr>
                            <td class="text-center text-muted fw-medium">{{ $index + 1 }}</td>
                            
                            <td class="col-tahun-ajaran">
                                <span class="d-block fw-bold text-dark fs-6">{{ $ta->tahun_ajaran_hijriyah }} H</span>
                                <small class="text-muted text-hijriyah-filter"><i class="bi bi-globe2 me-1"></i>{{ $ta->tahun_ajaran }} M</small>
                            </td>
                            
                            <td class="text-center">
                                <span class="d-block fw-bold text-dark">{{ $ta->tahun_ppdb_hijriyah }} H</span>
                                <small class="text-muted">{{ $ta->tahun_ppdb }} M</small>
                            </td>

                            <td class="text-center"><span class="badge bg-secondary">{{ $ta->kode }}</span></td>
                            <td class="text-center">
                                @if($ta->status_akademik == 'aktif')
                                    <span class="badge bg-success rounded-pill px-3 py-2">Aktif</span>
                                @elseif($ta->status_akademik == 'tidak_aktif')
                                    <span class="badge bg-danger rounded-pill px-3 py-2">Tidak Aktif</span>
                                @else
                                    <span class="badge bg-warning text-dark rounded-pill px-3 py-2">Mendatang</span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if($ta->status_ppdb == 'buka')
                                    <span class="badge bg-success rounded-pill px-3 py-2">Buka</span>
                                @elseif($ta->status_ppdb == 'tutup')
                                    <span class="badge bg-danger rounded-pill px-3 py-2">Tutup</span>
                                @else
                                    <span class="badge bg-warning text-dark rounded-pill px-3 py-2">Persiapan</span>
                                @endif
                            </td>

                            <td>
                                <ul class="mb-0 list-unstyled" style="font-size: 13px;">
                                    <li class="mb-1">
                                        <i class="bi bi-moon-stars-fill text-success me-1"></i> 
                                        <span class="fw-bold text-dark">{{ $ta->tgl_mulai_hijriyah }} - {{ $ta->tgl_akhir_hijriyah }}</span>
                                    </li>
                                    <li class="mb-1 text-muted">
                                        <i class="bi bi-calendar-check text-secondary me-1"></i> 
                                        <small>{{ \Carbon\Carbon::parse($ta->tgl_mulai)->format('d M Y') }} - {{ \Carbon\Carbon::parse($ta->tgl_akhir)->format('d M Y') }}</small>
                                    </li>
                                    <li>
                                        <i class="bi bi-people-fill text-secondary me-1"></i> 
                                        <strong>Kuota:</strong> {{ $ta->kuota }} Siswa
                                    </li>
                                </ul>
                            </td>

                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-outline-primary" title="Edit" data-bs-toggle="modal" data-bs-target="#modalEditTahun{{ $ta->id }}">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                            </td>
                        </tr>
                        @include('admin.master-data.tahun-ajaran.edit', ['ta' => $ta])
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-4 text-muted" id="noDataRow">Belum ada data Tahun Ajaran.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @include('admin.master-data.tahun-ajaran.create')
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        
        function convertToHijriyah(dateString) {
            if (!dateString) return "";
            try {
                const dateObj = new Date(dateString);
                if (isNaN(dateObj.getTime())) return "";

                const formatter = new Intl.DateTimeFormat('id-ID-u-ca-islamic-umalqura', {
                    day: 'numeric', month: 'long', year: 'numeric'
                });

                let hijriFormatterText = formatter.format(dateObj);
                if (!hijriFormatterText.endsWith('H') && !hijriFormatterText.endsWith('AH')) {
                    hijriFormatterText += ' H';
                }
                return hijriFormatterText;
            } catch (error) {
                return "";
            }
        }

        function convertHijriyahToMasehi(hijriStr) {
            if (!hijriStr) return "";
            let parts = hijriStr.split('/');
            let masehiParts = [];
            
            parts.forEach(part => {
                let year = parseInt(part.trim());
                if (!isNaN(year) && year > 1300 && year < 1600) {
                    let masehiYear = year + 579; 
                    masehiParts.push(masehiYear);
                } else {
                    if(part.trim() !== "") masehiParts.push(part.trim());
                }
            });
            return masehiParts.join('/');
        }

        const filterTahunInput = document.getElementById('filterTahun');
        if(filterTahunInput) {
            filterTahunInput.addEventListener('change', function() {
                let selectedYear = this.value.toLowerCase().trim();
                let rows = document.querySelectorAll('#tableTahunAjaran tbody tr:not(#noDataRow)');
                
                rows.forEach(row => {
                    if (selectedYear === "") {
                        row.style.display = '';
                    } else {
                        let rowYearElem = row.querySelector('.col-tahun-ajaran span.fw-bold');
                        if(rowYearElem) {
                            let rowYear = rowYearElem.innerText.toLowerCase();
                            row.style.display = rowYear.includes(selectedYear) ? '' : 'none';
                        }
                    }
                });
            });
        }

        const createTahunAjaranHijriyah = document.getElementById('create_tahun_ajaran_hijriyah');
        const createTahunAjaran = document.getElementById('create_tahun_ajaran');
        
        const createTahunPpdbHijriyah = document.getElementById('create_tahun_ppdb_hijriyah');
        const createTahunPpdb = document.getElementById('create_tahun_ppdb');
        const createKode = document.getElementById('create_kode');

        if (createTahunAjaranHijriyah && createTahunAjaran) {
            createTahunAjaranHijriyah.addEventListener('input', function() {
                createTahunAjaran.value = convertHijriyahToMasehi(this.value);
            });
        }

        if (createTahunPpdbHijriyah && createTahunPpdb) {
            createTahunPpdbHijriyah.addEventListener('input', function() {
                createTahunPpdb.value = convertHijriyahToMasehi(this.value);
                
                let val = this.value.trim();
                if (val.length >= 2) {
                    createKode.value = val.slice(-2);
                } else {
                    createKode.value = '';
                }
            });
        }

        const createTglMulai = document.getElementById('create_tgl_mulai');
        const createTglMulaiHijriyah = document.getElementById('create_tgl_mulai_hijriyah');
        const createTglAkhir = document.getElementById('create_tgl_akhir');
        const createTglAkhirHijriyah = document.getElementById('create_tgl_akhir_hijriyah');

        if (createTglMulai) {
            createTglMulai.addEventListener('change', function() {
                createTglMulaiHijriyah.value = convertToHijriyah(this.value);
            });
        }
        if (createTglAkhir) {
            createTglAkhir.addEventListener('change', function() {
                createTglAkhirHijriyah.value = convertToHijriyah(this.value);
            });
        }

        document.addEventListener('input', function(e) {
            if (e.target && e.target.classList.contains('edit-tahun-ajaran-hijriyah')) {
                const dataId = e.target.getAttribute('data-id');
                const targetMasehi = document.getElementById(`edit_tahun_ajaran_${dataId}`);
                if (targetMasehi) targetMasehi.value = convertHijriyahToMasehi(e.target.value);
            }

            if (e.target && e.target.classList.contains('edit-tahun-ppdb-hijriyah')) {
                const dataId = e.target.getAttribute('data-id');
                const targetMasehi = document.getElementById(`edit_tahun_ppdb_${dataId}`);
                const targetKode = document.getElementById(`edit_kode_${dataId}`);
                
                if (targetMasehi) {
                    targetMasehi.value = convertHijriyahToMasehi(e.target.value);
                }
                if (targetKode) {
                    let val = e.target.value.trim();
                    targetKode.value = val.length >= 2 ? val.slice(-2) : '';
                }
            }
        });

        document.addEventListener('change', function(e) {
            if (e.target && e.target.classList.contains('edit-tgl-mulai')) {
                const dataId = e.target.getAttribute('data-id');
                const targetHijriInput = document.getElementById(`edit_tgl_mulai_hijriyah_${dataId}`);
                if (targetHijriInput) targetHijriInput.value = convertToHijriyah(e.target.value);
            }
            if (e.target && e.target.classList.contains('edit-tgl-akhir')) {
                const dataId = e.target.getAttribute('data-id');
                const targetHijriInput = document.getElementById(`edit_tgl_akhir_hijriyah_${dataId}`);
                if (targetHijriInput) targetHijriInput.value = convertToHijriyah(e.target.value);
            }
        });

        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2000 });
        @endif

        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Gagal Menyimpan!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush