{{-- resources/views/admin/keuangan/siswa/transaksi.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Transaksi Keuangan Siswa')

@push('styles')
<style>
    .month-box { border: 2px solid #dee2e6; border-radius: 8px; padding: 10px; text-align: center; background-color: #fff; transition: all 0.2s; position: relative; }
    .month-box.lunas { border-color: #198754; background-color: #d1e7dd; color: #0f5132; }
    .month-box.cicilan { border-color: #ffc107; background-color: #fff3cd; color: #664d03; }
    .month-box.belum { border-color: #dc3545; background-color: #f8d7da; color: #842029; }
    .month-box.clickable-box { cursor: pointer; }
    .month-box.clickable-box:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); filter: brightness(0.95); }
    .custom-v-pills .nav-link { color: #495057; border-radius: 8px; font-weight: 500; font-size: 14px; padding: 10px 15px; margin-bottom: 5px; transition: all 0.3s ease; border: 1px solid #f8f9fa; background-color: #f8f9fa; }
    .custom-v-pills .nav-link:hover { background-color: #e9ecef; border-color: #dee2e6; }
    .custom-v-pills .nav-link.active { background-color: #e8f4fd; color: #0d6efd; border-color: #b6d4fe; font-weight: 700; box-shadow: inset 4px 0 0 0 #0d6efd; }
</style>
@endpush

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

    @php
        if (!function_exists('hijriToMasehi')) {
            function hijriToMasehi($d, $m, $y) {
                $jd = (int)((11 * $y + 3) / 30) + 354 * $y + 30 * $m - (int)(($m - 1) / 2) + $d + 1948440 - 385;
                $l = $jd + 68569;
                $n = (int)((4 * $l) / 146097);
                $l = $l - (int)((146097 * $n + 3) / 4);
                $i = (int)((4000 * ($l + 1)) / 1461001);
                $l = $l - (int)((1461 * $i) / 4) + 31;
                $j = (int)((80 * $l) / 2447);
                $d_g = $l - (int)((2447 * $j) / 80);
                $l = (int)($j / 11);
                $m_g = $j + 2 - 12 * $l;
                $y_g = 100 * ($n - 49) + $i + $l;
                return sprintf("%04d-%02d-%02d", $y_g, $m_g, $d_g);
            }
        }

        if (!function_exists('terbilang')) {
            function terbilang($angka) {
                $angka = abs($angka);
                $baca = array("", "Satu", "Dua", "Tiga", "Empat", "Lima", "Enam", "Tujuh", "Delapan", "Sembilan", "Sepuluh", "Sebelas");
                $terbilang = "";
                if ($angka < 12) { $terbilang = " " . $baca[$angka]; } 
                else if ($angka < 20) { $terbilang = terbilang($angka - 10) . " Belas"; } 
                else if ($angka < 100) { $terbilang = terbilang($angka / 10) . " Puluh" . terbilang($angka % 10); } 
                else if ($angka < 200) { $terbilang = " Seratus" . terbilang($angka - 100); } 
                else if ($angka < 1000) { $terbilang = terbilang($angka / 100) . " Ratus" . terbilang($angka % 100); } 
                else if ($angka < 2000) { $terbilang = " Seribu" . terbilang($angka - 1000); } 
                else if ($angka < 1000000) { $terbilang = terbilang($angka / 1000) . " Ribu" . terbilang($angka % 1000); } 
                else if ($angka < 1000000000) { $terbilang = terbilang($angka / 1000000) . " Juta" . terbilang($angka % 1000000); }
                return $terbilang;
            }
        }

        $bulanMasehiIndo = [ 1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember' ];
        
        $bulanAkademikHijri = [
            ['nama' => 'Syawal',       'idx' => 10, 'tambah_tahun' => 0],
            ['nama' => 'Dzulqa\'dah',  'idx' => 11, 'tambah_tahun' => 0],
            ['nama' => 'Dzulhijjah',   'idx' => 12, 'tambah_tahun' => 0],
            ['nama' => 'Muharram',     'idx' => 1,  'tambah_tahun' => 1],
            ['nama' => 'Safar',        'idx' => 2,  'tambah_tahun' => 1],
            ['nama' => 'Rabiul Awal',  'idx' => 3,  'tambah_tahun' => 1],
            ['nama' => 'Rabiul Akhir', 'idx' => 4,  'tambah_tahun' => 1],
            ['nama' => 'Jumadil Awal', 'idx' => 5,  'tambah_tahun' => 1],
            ['nama' => 'Jumadil Akhir','idx' => 6,  'tambah_tahun' => 1],
            ['nama' => 'Rajab',        'idx' => 7,  'tambah_tahun' => 1],
            ['nama' => 'Sya\'ban',     'idx' => 8,  'tambah_tahun' => 1],
            ['nama' => 'Ramadhan',     'idx' => 9,  'tambah_tahun' => 1],
        ];

        $profilSekolah = \App\Models\ProfilSekolah::first();
        $logoUrl = $profilSekolah && $profilSekolah->logo_path ? asset('storage/'.$profilSekolah->logo_path) : '';
        $namaMadrasah = $profilSekolah->nama_madrasah ?? 'Madrasah Al Idrus';
        $alamatMadrasah = $profilSekolah->alamat ?? '';
        $telpMadrasah = $profilSekolah->telepon ?? '-';
        $emailMadrasah = $profilSekolah->email ?? '-';
        $webMadrasah = $profilSekolah->website ?? '-';

        $jenjangSiswa = $siswa->kelas->tingkat->jenjang->nama_jenjang ?? '-';
        $tingkatSiswa = $siswa->kelas->tingkat->nama_tingkat ?? '-';
        $kelasSiswa = $siswa->kelas->nama_kelas ?? '-';
        $detailKelas = $jenjangSiswa . ' - ' . $tingkatSiswa . ' - ' . $kelasSiswa;
    @endphp

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Detail Tagihan & Pembayaran</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola rincian transaksi cerdas atas nama <strong class="text-primary">{{ $siswa->nama_lengkap }}</strong>.</p>
        </div>
        <a href="{{ session('url_kembali_keuangan_siswa', route('admin.keuangan.siswa.tingkat', ['jenjang_id' => $siswa->kelas->tingkat->jenjang_id ?? 1, 'tingkat_id' => $siswa->kelas->tingkat_id ?? 1])) }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card shadow-sm border-0 h-100 position-sticky" style="top: 20px;">
                <div class="card-body text-center p-4">
                    <img src="{{ $siswa->foto ? asset('storage/siswa/' . $siswa->foto) : 'https://ui-avatars.com/api/?name='.urlencode($siswa->nama_lengkap).'&background=random&size=150' }}" 
                        class="rounded-circle object-fit-cover shadow-sm mb-3 border border-white" 
                        style="width: 100px; height: 100px; border-width: 3px !important;" alt="Foto Profil">
                    
                    <h5 class="fw-bold text-primary mb-1">{{ $siswa->nama_lengkap }}</h5>
                    <p class="text-muted mb-3" style="font-size: 13px;">NIS: {{ $siswa->nis ?? '-' }} | Kls: {{ $detailKelas }}</p>

                    <div class="text-start mt-4">
                        
                        <div class="p-3 bg-light rounded-3 border mb-3 shadow-sm border-start border-success" style="border-left-width: 4px !important;">
                            <h6 class="fw-bold text-secondary mb-3" style="font-size: 11px; letter-spacing: 0.5px;"><i class="bi bi-calendar3 me-1"></i> TAGIHAN GLOBAL (1 TAHUN PENUH)</h6>
                            <div class="d-flex justify-content-between align-items-center mb-2" style="font-size: 13px;">
                                <span class="text-muted">Estimasi Setahun:</span><strong class="text-dark">Rp {{ number_format($totalTagihanGlobal ?? $totalTagihan, 0, ',', '.') }}</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2" style="font-size: 13px;">
                                <span class="text-muted">Total Dibayar:</span><strong class="text-success">Rp {{ number_format($totalDibayarGlobal ?? $totalDibayar, 0, ',', '.') }}</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="font-size: 13px;">
                                <span class="text-muted">Kekurangan Global:</span><strong class="text-danger">Rp {{ number_format($sisaTagihanGlobal ?? $sisaTagihan, 0, ',', '.') }}</strong>
                            </div>
                        </div>

                        <h6 class="fw-bold text-primary mb-2 mt-4" style="font-size: 12px; letter-spacing: 0.5px;">FILTER PERIODE TAGIHAN</h6>
                        <form action="{{ url()->current() }}" method="GET" class="mb-3 p-2 bg-white rounded-3 border border-primary border-opacity-25 shadow-sm">
                            <div class="mb-2">
                                <select name="tahun_ajaran_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()">
                                    @foreach($tahunAjarans as $ta)
                                        <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                                            TA: {{ $ta->tahun_ajaran_hijriyah }} H ({{ $ta->tahun_ajaran }} M)
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <select name="semester_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()">
                                    <option value="all" {{ $selectedSemId == 'all' ? 'selected' : '' }}>-- Semua {{ ucfirst($jenjang->sistem_akademik ?? 'Semester') }} --</option>
                                    @foreach($semesters as $sem)
                                        <option value="{{ $sem->id }}" {{ $selectedSemId == $sem->id ? 'selected' : '' }}>
                                            {{ $sem->nama }} {{ $sem->is_active ? '(Aktif)' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </form>

                        @if(($sisaTagihanPeriode ?? $sisaTagihan) <= 0 && ($totalTagihanPeriode ?? $totalTagihan) > 0)
                            <div class="p-3 mb-4 bg-success bg-opacity-10 border border-success border-opacity-25 rounded-3 text-center shadow-sm">
                                <div class="text-success fw-bold mb-1" style="font-size: 11px;">🟢 LUNAS (PERIODE INI)</div>
                                <h4 class="mb-0 fw-bold text-success">Rp 0</h4>
                            </div>
                        @else
                            <div class="p-3 mb-4 bg-danger bg-opacity-10 border border-danger border-opacity-25 rounded-3 text-center shadow-sm">
                                <div class="text-danger fw-bold mb-1" style="font-size: 11px;">🔴 KEKURANGAN (PERIODE INI)</div>
                                <h4 class="mb-0 fw-bold text-danger">Rp {{ number_format($sisaTagihanPeriode ?? $sisaTagihan, 0, ',', '.') }}</h4>
                            </div>
                        @endif

                        <h6 class="fw-bold text-secondary mb-3" style="font-size: 12px; letter-spacing: 0.5px;">PILIH ITEM TAGIHAN</h6>
                        <div class="nav flex-column nav-pills custom-v-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            @forelse($tarifs as $tarif)
                                @php
                                    $sisaItemMenu = $tarif->sisa ?? max(0, $tarif->total_tarif - ($tarif->terbayar ?? 0));
                                    $warnaIndikator = $sisaItemMenu <= 0 ? 'text-success' : (($tarif->terbayar > 0) ? 'text-warning' : 'text-danger');
                                    $iconIndikator = $sisaItemMenu <= 0 ? 'bi-check-circle-fill' : 'bi-circle-fill';
                                    
                                    $tipeKategori = $tarif->kategori->tipe ?? 'Umum';
                                    $berlakuUntuk = $tarif->tingkat_kelas_id ? 'Tingkat ' . ($tarif->tingkat->nama_tingkat ?? '') : 'Semua Tingkat';
                                @endphp
                                <button class="nav-link text-start d-flex justify-content-between align-items-center {{ $loop->first ? 'active' : '' }}" 
                                    id="v-pills-tarif-{{ $tarif->id }}-tab" data-bs-toggle="pill" data-bs-target="#v-pills-tarif-{{ $tarif->id }}" type="button" role="tab">
                                    <div class="text-truncate pe-2">
                                        <span class="d-block mb-1"><i class="bi {{ $iconIndikator }} {{ $warnaIndikator }} me-2" style="font-size: 10px;"></i>{{ $tarif->kategori->nama ?? '-' }}</span>
                                        
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary" style="font-size: 9px;">{{ $tipeKategori }}</span>
                                        <span class="badge {{ $tarif->tingkat_kelas_id ? 'bg-info text-dark border-info' : 'bg-primary bg-opacity-10 text-primary border-primary' }} border" style="font-size: 9px;">
                                            {{ $berlakuUntuk }}
                                        </span>
                                    </div>
                                    <i class="bi bi-chevron-right opacity-50"></i>
                                </button>
                            @empty
                                <div class="text-center text-muted p-3 border rounded-3 bg-white" style="font-size: 13px;">
                                    Tidak ada tagihan untuk periode ini.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8 mb-4">
            <h5 class="fw-bold text-dark mb-3"><i class="bi bi-layout-text-window-reverse me-2"></i>Rincian Tagihan Terpilih <span class="text-muted fs-6">({{ $activeTa->tahun_ajaran_hijriyah ?? '-' }} H)</span></h5>
            
            <div class="tab-content" id="v-pills-tabContent">
                @forelse($tarifs as $tarif)
                    @php 
                        $terbayar = $tarif->terbayar ?? 0;
                        $sisa = $tarif->sisa ?? 0;
                        $deposit = $tarif->deposit ?? 0;
                        $tipe = $tarif->kategori->tipe ?? 'Umum';
                        $berlakuUntuk = $tarif->tingkat_kelas_id ? 'Khusus Tingkat ' . ($tarif->tingkat->nama_tingkat ?? '') : 'Berlaku Semua Tingkat';
                        $persen = $tarif->total_tarif > 0 ? floor(($terbayar / $tarif->total_tarif) * 100) : 0;
                        if($persen > 100) $persen = 100;
                    @endphp

                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="v-pills-tarif-{{ $tarif->id }}" role="tabpanel">
                        <div class="card shadow-sm border-0 mb-4 overflow-hidden">
                            <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0 fw-bold text-primary">{{ $tarif->kategori->nama ?? '-' }}</h6>
                                    <small class="text-muted" style="font-size: 11px;">
                                        {{ $tipe }} | {{ $berlakuUntuk }} | Tarif: Rp {{ number_format($tarif->nominal, 0, ',', '.') }} x {{ $tarif->pengali }} Siklus
                                    </small>
                                </div>
                                <h5 class="mb-0 fw-bold text-dark">Rp {{ number_format($tarif->total_tarif, 0, ',', '.') }}</h5>
                            </div>
                            
                            <div class="card-body bg-light p-4">
                                
                                @if(in_array($tipe, ['Bulanan', 'Harian', 'Mingguan']))
                                    <div class="row g-2">
                                        @php
                                            $taHijriRaw = $tarif->tahunAjaran->tahun_ajaran_hijriyah ?? '1447/1448';
                                            $taHijriArr = explode('/', $taHijriRaw);
                                            $baseHijriYear = isset($taHijriArr[0]) ? (int)preg_replace('/[^0-9]/', '', $taHijriArr[0]) : 1447;
                                            
                                            $tglMulaiHijriRaw = $tarif->tahunAjaran->tgl_mulai_hijriyah ?? '10 Syawal 1447 H';
                                            preg_match('/^(\d+)/', $tglMulaiHijriRaw, $matches);
                                            $hariHijri = isset($matches[1]) ? (int)$matches[1] : 10;

                                            $startDate = $tarif->tahunAjaran->tgl_mulai ?? date('Y') . '-07-01';
                                            $akumulasiUangMasuk = $terbayar + $deposit; 
                                        @endphp

                                        @for($i = 1; $i <= $tarif->pengali; $i++)
                                            @php
                                                $uangUntukSiklusIni = $akumulasiUangMasuk - (($i - 1) * $tarif->nominal);
                                                $sisaUntukSiklusIni = 0;
                                                $isClickable = false;

                                                if($uangUntukSiklusIni >= $tarif->nominal) {
                                                    $class = 'lunas'; $icon = '<i class="bi bi-check-circle-fill"></i>'; $teks = 'Lunas';
                                                } elseif($uangUntukSiklusIni > 0) {
                                                    $sisaUntukSiklusIni = $tarif->nominal - $uangUntukSiklusIni;
                                                    $class = 'cicilan'; $icon = '<i class="bi bi-hourglass-split"></i>'; $teks = 'Sisa (Rp '.number_format($sisaUntukSiklusIni, 0, ',', '.').')';
                                                    $isClickable = true; 
                                                } else {
                                                    $sisaUntukSiklusIni = $tarif->nominal;
                                                    $class = 'belum'; $icon = '<i class="bi bi-x-circle-fill"></i>'; $teks = 'Belum Bayar';
                                                    $isClickable = true; 
                                                }

                                                if ($tipe == 'Bulanan') {
                                                    $idxBulan = ($i - 1) % 12;
                                                    $namaHijriTampil = $bulanAkademikHijri[$idxBulan]['nama'];
                                                    $bulanHijriNum = $bulanAkademikHijri[$idxBulan]['idx'];
                                                    $tahunHijriCalc = $baseHijriYear + $bulanAkademikHijri[$idxBulan]['tambah_tahun'];

                                                    $tanggalMasehiDB = hijriToMasehi($hariHijri, $bulanHijriNum, $tahunHijriCalc);
                                                    $approxMasehiTime = strtotime($tanggalMasehiDB);
                                                    
                                                    $labelHijriUtama = $hariHijri . ' ' . $namaHijriTampil . ' ' . $tahunHijriCalc . ' H';
                                                    $cleanHijriUtama = $labelHijriUtama;
                                                    $teksKeteranganOtomatis = "SPP Bulan {$namaHijriTampil} {$tahunHijriCalc} H";
                                                    $fullMasehi = date('d', $approxMasehiTime) . ' ' . $bulanMasehiIndo[(int)date('n', $approxMasehiTime)] . ' ' . date('Y', $approxMasehiTime);
                                                } else {
                                                    $stepDays = ($tipe == 'Mingguan') ? 7 : 1;
                                                    $approxMasehiTime = strtotime("+" . round(($i - 1) * $stepDays) . " days", strtotime($startDate));
                                                    $tanggalMasehiDB = date('Y-m-d', $approxMasehiTime);
                                                    $fullMasehi = date('d', $approxMasehiTime) . ' ' . $bulanMasehiIndo[(int)date('n', $approxMasehiTime)] . ' ' . date('Y', $approxMasehiTime);
                                                    
                                                    $labelHijriUtama = '<span class="text-hijri-render" data-date="'.$tanggalMasehiDB.'">Memuat...</span>';
                                                    $cleanHijriUtama = ''; 
                                                    $teksKeteranganOtomatis = "Siklus ke-{$i}";
                                                }
                                            @endphp
                                            
                                            <div class="col-md-4 col-sm-6">
                                                <div class="month-box {{ $class }} {{ $isClickable ? 'clickable-box shadow-sm' : 'opacity-75' }} d-flex flex-column h-100 justify-content-center"
                                                    @if($isClickable)
                                                        data-bs-toggle="modal" data-bs-target="#modalBayar{{ $tarif->id }}"
                                                        onclick="siapkanKeterangan('{{ $tarif->id }}', '{{ $teksKeteranganOtomatis }}', '{{ $tanggalMasehiDB }}', {{ $sisaUntukSiklusIni }}, '{{ $cleanHijriUtama }}')"
                                                    @endif
                                                >
                                                    <span class="fw-bold mb-0 text-truncate text-uppercase {{ $class == 'belum' ? 'text-danger' : 'text-success' }}" style="font-size: 13px; letter-spacing: 0.5px;" title="Siklus ke-{{ $i }}">{!! $labelHijriUtama !!}</span>
                                                    <span class="opacity-75 mb-2 text-muted d-block" style="font-size: 10px;"><i class="bi bi-globe2 me-1"></i>{{ $fullMasehi }} M</span>
                                                    <strong class="mb-1 text-dark" style="font-size: 13px;">Rp {{ number_format($tarif->nominal, 0, ',', '.') }}</strong>
                                                    <span style="font-size: 11px;">{!! $icon !!} {{ $teks }}</span>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>

                                @elseif(in_array($tipe, ['Sekali Bayar', 'Tahunan', 'Per Periode']))
                                    <div class="mb-2 d-flex justify-content-between align-items-end">
                                        <span class="fw-bold" style="font-size: 13px;">Progress Pembayaran</span>
                                        <span class="badge {{ $persen == 100 ? 'bg-success' : 'bg-primary' }} fs-6 shadow-sm">{{ $persen }}%</span>
                                    </div>
                                    <div class="progress mb-3 shadow-sm" style="height: 18px; border-radius: 10px; background-color:#dee2e6;">
                                        <div class="progress-bar {{ $persen == 100 ? 'bg-success' : 'bg-primary' }} progress-bar-striped {{ $persen < 100 ? 'progress-bar-animated' : '' }}" role="progressbar" style="width: {{ $persen }}%"></div>
                                    </div>
                                    <div class="d-flex justify-content-between text-muted" style="font-size: 13px;">
                                        <span class="bg-white px-2 py-1 rounded shadow-sm">Telah dibayar: <strong class="text-success">Rp {{ number_format($terbayar, 0, ',', '.') }}</strong></span>
                                        <span class="bg-white px-2 py-1 rounded shadow-sm">Kekurangan: <strong class="text-danger">Rp {{ number_format($sisa, 0, ',', '.') }}</strong></span>
                                    </div>

                                @else
                                    <div class="d-flex justify-content-between align-items-center border bg-white p-4 rounded-3 shadow-sm">
                                        <div>
                                            <span class="d-block text-muted mb-1" style="font-size: 12px;">Target / Estimasi Total</span>
                                            <h4 class="fw-bold mb-0 text-dark">Rp {{ number_format($tarif->total_tarif, 0, ',', '.') }}</h4>
                                        </div>
                                        <div class="text-end border-start ps-4">
                                            <span class="d-block text-muted mb-1" style="font-size: 12px;">Terkumpul Saat Ini</span>
                                            <h4 class="fw-bold mb-0 text-success">Rp {{ number_format($terbayar, 0, ',', '.') }}</h4>
                                        </div>
                                    </div>
                                @endif

                                @if($deposit > 0)
                                    <div class="alert alert-success mt-3 mb-0 border-0 shadow-sm py-2 px-3 d-flex justify-content-between align-items-center">
                                        <span style="font-size: 12px;"><i class="bi bi-info-circle-fill me-1"></i> Kelebihan bayar dicatat sebagai deposit item ini.</span>
                                        <strong class="fs-6">Deposit: Rp {{ number_format($deposit, 0, ',', '.') }}</strong>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="card-footer bg-white border-top-0 p-3 text-end">
                                <button class="btn btn-success fw-bold shadow-sm px-4" data-bs-toggle="modal" data-bs-target="#modalBayar{{ $tarif->id }}" onclick="resetKeterangan('{{ $tarif->id }}', {{ $tarif->nominal }})">
                                    <i class="bi bi-cash-coin me-1"></i> Input Pembayaran (Bebas)
                                </button>
                            </div>
                        </div>

                        @include('admin.keuangan.siswa.table_histori_item', ['tarif' => $tarif, 'siswa' => $siswa])

                        <div class="modal fade" id="modalBayar{{ $tarif->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header bg-success text-white border-bottom-0">
                                        <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-wallet2 me-2"></i>Input Pembayaran Baru</h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form action="{{ route('admin.keuangan.siswa.bayar', $siswa->id) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="tarif_keuangan_id" value="{{ $tarif->id }}">
                                        
                                        <div class="modal-body p-4 text-start">
                                            <div class="mb-3">
                                                <label class="form-label fw-medium text-muted" style="font-size: 13px;">Item Pembayaran Terpilih</label>
                                                <div class="form-control bg-light fw-bold">{{ $tarif->kategori->nama ?? '-' }} ({{ $tipe }})</div>
                                            </div>
                                            
                                            <div class="row mb-3">
                                                <div class="col-6">
                                                    <label class="form-label fw-medium text-muted" style="font-size: 13px;">Sisa Kekurangan Tagihan</label>
                                                    <div class="form-control bg-light text-danger fw-bold" style="font-size: 14px;">Rp {{ number_format($sisa, 0, ',', '.') }}</div>
                                                </div>
                                                <div class="col-6">
                                                    <label class="form-label fw-medium text-muted" style="font-size: 13px;">Total Deposit Saat Ini</label>
                                                    <div class="form-control bg-light text-success fw-bold" style="font-size: 14px;">Rp {{ number_format($deposit, 0, ',', '.') }}</div>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label fw-bold text-dark">Nominal Uang Disetor <span class="text-danger">*</span></label>
                                                <div class="input-group input-group-lg shadow-sm">
                                                    <span class="input-group-text bg-success text-white fw-bold border-success">Rp</span>
                                                    <input type="number" name="nominal_bayar" id="nominal_bayar_{{ $tarif->id }}" class="form-control fw-bold text-success border-success" placeholder="Contoh: {{ $tarif->nominal }}" required min="1">
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label fw-bold text-success">Tanggal Pembayaran (Hijriyah) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-success fw-bold input-hijri-auto" id="add_hijri_tgl_bayar_{{ $tarif->id }}" placeholder="Memuat kalender..." readonly>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium text-muted" style="font-size: 13px;">Tanggal Anchor (Masehi)</label>
                                                <input type="date" name="tanggal_bayar" class="form-control bg-light input-masehi-anchor" data-target="add_hijri_tgl_bayar_{{ $tarif->id }}" value="{{ date('Y-m-d') }}" required>
                                            </div>

                                            <div class="mb-1">
                                                <label class="form-label fw-medium">Keterangan / Catatan Admin</label>
                                                <textarea name="keterangan" id="keterangan_admin_{{ $tarif->id }}" class="form-control fw-medium" rows="2" placeholder="Contoh: Titipan wali murid..."></textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-light border-top-0">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-success fw-bold px-4">Catat Pembayaran</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                @empty
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-body text-center py-5 text-muted">
                            <i class="bi bi-emoji-smile fs-1 d-block mb-3 text-black-50"></i>
                            <h5>Bersih, Belum Ada Tagihan!</h5>
                            <p class="mb-0">Tidak ada tanggungan untuk periode yang Anda pilih ini.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            @include('admin.keuangan.siswa.table_histori_global', ['historiPembayaran' => $historiPembayaran ?? collect()])
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    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) {
            console.error("Gagal konversi kalender:", error);
            return "";
        }
    }

    function cetakKuitansi(idKuitansi, tglMasehi, tglHijriRaw, keterangan, nominal, terbilang) {
        let tglHijri = convertToHijriyah(tglHijriRaw);
        
        let logoMadrasah = "{!! $logoUrl !!}";
        let namaMadrasah = "{!! addslashes($namaMadrasah) !!}";
        let alamatMadrasah = "{!! addslashes($alamatMadrasah) !!}";
        let kontakMadrasah = "Telp/WA: {!! addslashes($telpMadrasah) !!} | Email: {!! addslashes($emailMadrasah) !!} | Web: {!! addslashes($webMadrasah) !!}";
        
        let namaSiswa = "{!! addslashes($siswa->nama_lengkap) !!}";
        let nisSiswa = "{{ $siswa->nis ?? '-' }}";
        let infoKelasSiswa = "{!! addslashes($detailKelas) !!}";
        let namaAdmin = "{{ Auth::user()->name ?? 'Administrator' }}";
        
        let printWindow = window.open('', '_blank', 'width=800,height=600');
        let imgTag = logoMadrasah ? `<img src="${logoMadrasah}" class="kop-logo">` : '';

        let htmlContent = `
            <html>
            <head>
                <title>Kuitansi Pembayaran - ${idKuitansi}</title>
                <style>
                    @page { size: 24.13cm 13.97cm; margin: 0.5cm; } /* Ukuran 9.5 x 5.5 Inch Continuous Form */
                    body { font-family: 'Courier New', Courier, monospace, Arial, sans-serif; font-size: 13px; margin: 0; padding: 0; color: #000; }
                    .print-container { width: 100%; max-width: 100%; border: 2px dashed #ccc; padding: 15px; box-sizing: border-box; position: relative; height: 12.97cm; }
                    
                    /* CSS KOP SURAT MODERN RESMI */
                    .kop-surat { display: flex; align-items: center; border-bottom: 3px double #000; padding-bottom: 10px; margin-bottom: 15px; }
                    .kop-logo { width: 70px; height: 70px; object-fit: contain; margin-right: 15px; }
                    .kop-text { flex: 1; text-align: center; }
                    .kop-text h2 { margin: 0; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-family: Arial, sans-serif;}
                    .kop-text p { margin: 2px 0; font-size: 10px; font-family: Arial, sans-serif; }
                    
                    .kuitansi-title { text-align: center; font-size: 16px; font-weight: bold; text-decoration: underline; margin-bottom: 15px; letter-spacing: 2px;}
                    
                    .info-top { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 12px; font-weight: bold; }
                    
                    .row-data { display: flex; margin-bottom: 8px; line-height: 1.5; }
                    .col-label { width: 25%; font-weight: bold; }
                    .col-separator { width: 2%; text-align: center; font-weight: bold; }
                    .col-value { width: 73%; border-bottom: 1px dotted #888; }
                    
                    .terbilang-box { background-color: #f9f9f9; padding: 6px 10px; font-style: italic; border: 1px solid #000; font-weight: bold; border-radius: 4px; margin-top: 5px; margin-bottom: 5px;}
                    
                    .footer-area { display: flex; justify-content: space-between; margin-top: 20px; align-items: flex-end; }
                    .nominal-besar { font-size: 22px; font-weight: bold; border: 2px solid #000; padding: 8px 15px; display: inline-block; background: #eee; border-radius: 5px;}
                    
                    .ttd-box { text-align: center; width: 30%; font-size: 12px;}
                    .ttd-space { height: 50px; }
                    .ttd-name { font-weight: bold; text-decoration: underline; }
                </style>
            </head>
            <body onload="window.print(); window.onafterprint = function(){ window.close(); }">
                <div class="print-container">
                    
                    <div class="kop-surat">
                        ${imgTag}
                        <div class="kop-text">
                            <h2>${namaMadrasah}</h2>
                            <p>${alamatMadrasah}</p>
                            <p>${kontakMadrasah}</p>
                        </div>
                    </div>
                    
                    <div class="kuitansi-title">KUITANSI PEMBAYARAN</div>
                    
                    <div class="info-top">
                        <div>No. Transaksi : ${idKuitansi}</div>
                        <div style="text-align: right;">Tanggal : ${tglHijri} <br><span style="font-size:10px; font-weight:normal;">(${tglMasehi} M)</span></div>
                    </div>

                    <div class="row-data">
                        <div class="col-label">Telah terima dari</div>
                        <div class="col-separator">:</div>
                        <div class="col-value"><strong>${namaSiswa}</strong></div>
                    </div>
                    <div class="row-data">
                        <div class="col-label">No. Induk (NIS)</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${nisSiswa}</div>
                    </div>
                    <div class="row-data">
                        <div class="col-label">Jenjang / Kelas</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${infoKelasSiswa}</div>
                    </div>
                    
                    <div class="row-data" style="align-items: center; margin-top: 10px;">
                        <div class="col-label">Uang sejumlah</div>
                        <div class="col-separator">:</div>
                        <div class="col-value terbilang-box" style="border-bottom: none;">## ${terbilang} Rupiah ##</div>
                    </div>

                    <div class="row-data">
                        <div class="col-label">Untuk Pembayaran</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${keterangan}</div>
                    </div>

                    <div class="footer-area">
                        <div>
                            <div class="nominal-besar">Rp ${Number(nominal).toLocaleString('id-ID')}</div>
                        </div>
                        <div class="ttd-box">
                            <div>Penerima / Bendahara</div>
                            <div class="ttd-space"></div>
                            <div class="ttd-name">${namaAdmin}</div>
                        </div>
                    </div>
                </div>
            </body>
            </html>
        `;
        
        printWindow.document.write(htmlContent);
        printWindow.document.close();
    }

    function siapkanKeterangan(tarifId, teksCatatan, tanggalDB, nominal, textHijriUtama) {
        document.getElementById('keterangan_admin_' + tarifId).value = teksCatatan;
        document.getElementById('nominal_bayar_' + tarifId).value = nominal;
        
        const dateInput = document.querySelector('input[name="tanggal_bayar"][data-target="add_hijri_tgl_bayar_' + tarifId + '"]');
        if(dateInput) dateInput.value = tanggalDB;

        const hijriInput = document.getElementById('add_hijri_tgl_bayar_' + tarifId);
        if(hijriInput) {
            if(textHijriUtama) {
                hijriInput.value = textHijriUtama;
            } else {
                hijriInput.value = convertToHijriyah(tanggalDB);
            }
        }
    }

    function resetKeterangan(tarifId, nominalDasar) {
        document.getElementById('keterangan_admin_' + tarifId).value = "Pembayaran Deposit / Titipan Bebas";
        document.getElementById('nominal_bayar_' + tarifId).value = nominalDasar;
    }

    document.addEventListener('DOMContentLoaded', function () {
        
        document.querySelectorAll('.text-hijri-render').forEach(el => {
            let masehiDate = el.getAttribute('data-date');
            if(masehiDate) {
                el.innerText = convertToHijriyah(masehiDate);
            }
        });

        document.querySelectorAll('.input-masehi-anchor').forEach(el => {
            const targetId = el.getAttribute('data-target');
            const targetEl = document.getElementById(targetId);
            
            if(targetEl && el.value) targetEl.value = convertToHijriyah(el.value);

            el.addEventListener('change', function() {
                if(targetEl) targetEl.value = convertToHijriyah(this.value);
            });
        });

        @if(session('success'))
            Swal.fire({
                icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}',
                timer: 3000, showConfirmButton: false, toast: true, position: 'top-end'
            });
        @endif

        @if($errors->any())
            Swal.fire({
                icon: 'error', title: 'Oops... Gagal!', html: '{!! implode("<br>", $errors->all()) !!}', confirmButtonColor: '#d33'
            });
        @endif

        document.querySelectorAll('.btn-delete').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                const form = this.closest('.form-delete');
                Swal.fire({
                    title: 'Batalkan Transaksi?',
                    text: "Uang tagihan siswa akan kembali berkurang jika histori ini dihapus!",
                    icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Batalkan!', cancelButtonText: 'Tutup'
                }).then((result) => {
                    if (result.isConfirmed) form.submit();
                });
            });
        });
    });
</script>
@endsection