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

@section('title', 'Buku Tabungan - ' . $nasabah->nama_lengkap)

@push('styles')
<style>
    .mutasi-row:hover { background-color: #f8f9fa; }
</style>
@endpush

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

    @php
        $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 ?? '';
        $kontakMadrasah = "Telp/WA: " . ($profilSekolah->telepon ?? '-') . " | Email: " . ($profilSekolah->email ?? '-');
        
        if($nasabah->kode_kategori == '02' && $nasabah->siswa && $nasabah->siswa->kelas) {
            $infoNasabah = "Siswa Kelas: " . $nasabah->siswa->kelas->nama_kelas;
        } elseif($nasabah->kode_kategori == '01') {
            $infoNasabah = "Pegawai Madrasah";
        } else {
            $infoNasabah = "Nasabah Umum";
        }

        if (!function_exists('terbilangTabungan')) {
            function terbilangTabungan($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 = terbilangTabungan($angka - 10) . " Belas"; } 
                else if ($angka < 100) { $terbilang = terbilangTabungan($angka / 10) . " Puluh" . terbilangTabungan($angka % 10); } 
                else if ($angka < 200) { $terbilang = " Seratus" . terbilangTabungan($angka - 100); } 
                else if ($angka < 1000) { $terbilang = terbilangTabungan($angka / 100) . " Ratus" . terbilangTabungan($angka % 100); } 
                else if ($angka < 2000) { $terbilang = " Seribu" . terbilangTabungan($angka - 1000); } 
                else if ($angka < 1000000) { $terbilang = terbilangTabungan($angka / 1000) . " Ribu" . terbilangTabungan($angka % 1000); } 
                else if ($angka < 1000000000) { $terbilang = terbilangTabungan($angka / 1000000) . " Juta" . terbilangTabungan($angka % 1000000); }
                return $terbilang;
            }
        }
    @endphp

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold"><i class="bi bi-journal-bookmark-fill text-primary me-2"></i>Buku Rekening Nasabah</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Detail profil dan log histori mutasi (Setor/Tarik).</p>
        </div>
        <a href="{{ url()->previous() }}" class="btn btn-outline-secondary btn-sm shadow-sm">
            <i class="bi bi-arrow-left me-1"></i> Kembali
        </a>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center p-4">
                    <img src="https://ui-avatars.com/api/?name={{ urlencode($nasabah->nama_lengkap) }}&background=E3F2FD&color=1565C0&size=100" class="rounded-circle mb-3 shadow-sm" alt="Avatar">
                    <h5 class="fw-bold text-dark mb-1">{{ $nasabah->nama_lengkap }}</h5>
                    <span class="badge bg-primary bg-opacity-10 text-primary border border-primary mb-3">{{ $nasabah->entitas_profil }}</span>
                    
                    <div class="bg-light p-3 rounded text-start mb-3 border border-secondary-subtle">
                        <small class="text-muted d-block fw-bold mb-1" style="font-size: 11px;">NOMOR REKENING:</small>
                        <h5 class="fw-bold font-monospace text-dark mb-2" style="letter-spacing: 2px;">{{ $nasabah->no_rekening }}</h5>
                        <hr class="my-2 border-secondary opacity-25">
                        <div class="d-flex justify-content-between align-items-center mb-1" style="font-size: 12px;">
                            <span class="text-muted"><i class="bi bi-telephone me-1"></i>{{ $nasabah->no_hp ?? '-' }}</span>
                            <span class="text-muted"><i class="bi bi-person-vcard me-1"></i>{{ $nasabah->nik ?? '-' }}</span>
                        </div>

                        @if($nasabah->kode_kategori == '03')
                            <hr class="my-2 border-secondary opacity-25">
                            <div class="d-flex justify-content-between align-items-center mb-1" style="font-size: 12px;">
                                <span class="text-muted"><i class="bi bi-geo-alt me-1"></i> Alamat:</span>
                            </div>
                            <div style="font-size: 11px; line-height:1.4;" class="text-dark mb-2">{{ $nasabah->alamat ?? 'Belum diisi...' }}</div>
                            
                            <div class="d-flex justify-content-between align-items-center" style="font-size: 12px;">
                                <span class="text-muted"><i class="bi bi-file-earmark-person me-1"></i> Dokumen KTP:</span>
                                @if($nasabah->file_ktp)
                                    <a href="{{ asset('storage/nasabah_ktp/' . $nasabah->file_ktp) }}" target="_blank" class="badge bg-info text-decoration-none">Lihat File</a>
                                @else
                                    <span class="badge bg-secondary">Kosong</span>
                                @endif
                            </div>
                            <button class="btn btn-sm btn-outline-primary w-100 mt-3" data-bs-toggle="modal" data-bs-target="#modalProfilUmum" style="font-size: 11px;">
                                <i class="bi bi-pencil-square me-1"></i> Lengkapi Alamat & KTP
                            </button>
                        @endif
                    </div>

                    <button class="btn btn-success w-100 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTransaksi">
                        <i class="bi bi-cash-coin me-2"></i> Input Transaksi Tunai
                    </button>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="row g-3 h-100">
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm bg-primary text-white h-100" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
                        <div class="card-body p-4 d-flex flex-column justify-content-center">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold mb-0 text-white-50">SALDO TABUNGAN SYARIAH</h6>
                                <i class="bi bi-wallet2 fs-2 opacity-50"></i>
                            </div>
                            <h2 class="fw-bold mb-0 font-monospace">Rp {{ number_format($nasabah->saldo_syariah, 0, ',', '.') }}</h2>
                            <p class="text-white-50 mt-2 mb-0" style="font-size: 12px;">Dapat ditarik sewaktu-waktu untuk keperluan pribadi.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm bg-success text-white h-100" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                        <div class="card-body p-4 d-flex flex-column justify-content-center">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold mb-0 text-white-50">SALDO TABUNGAN JARIYAH</h6>
                                <i class="bi bi-heart-fill fs-2 opacity-50"></i>
                            </div>
                            <h2 class="fw-bold mb-0 font-monospace">Rp {{ number_format($nasabah->saldo_jariyah, 0, ',', '.') }}</h2>
                            <p class="text-white-50 mt-2 mb-0" style="font-size: 12px;">Disalurkan melalui akad wakaf/infaq pembangunan.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex flex-wrap justify-content-between align-items-center gap-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-clock-history me-2"></i>Histori Transaksi (Mutasi)</h6>
            
            <div class="d-flex flex-wrap align-items-center gap-2">
                <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 m-0">
                    <input type="date" name="start_date" class="form-control form-control-sm border-secondary-subtle" value="{{ request('start_date') }}" required title="Dari Tanggal">
                    <span class="text-muted" style="font-size: 12px;">s/d</span>
                    <input type="date" name="end_date" class="form-control form-control-sm border-secondary-subtle" value="{{ request('end_date') }}" required title="Sampai Tanggal">
                    <button type="submit" class="btn btn-sm btn-primary shadow-sm" title="Terapkan Filter"><i class="bi bi-filter"></i></button>
                    @if(request('start_date'))
                        <a href="{{ url()->current() }}" class="btn btn-sm btn-light border shadow-sm" title="Reset Filter"><i class="bi bi-arrow-clockwise"></i></a>
                    @endif
                </form>

                <div class="border-start ps-2 ms-1 d-flex gap-2">
                    <a href="{{ route('admin.tabungan.cetak_koran', ['id' => $nasabah->id, 'start_date' => request('start_date'), 'end_date' => request('end_date')]) }}" target="_blank" class="btn btn-sm btn-outline-dark shadow-sm">
                        <i class="bi bi-printer me-1"></i> Rekening Koran
                    </a>
                    <a href="{{ route('admin.tabungan.cetak_buku', $nasabah->id) }}" target="_blank" class="btn btn-sm btn-success shadow-sm" onclick="alert('Pilih \'Simpan sebagai PDF\' pada opsi tujuan cetak browser Anda.');">
                        <i class="bi bi-journal-check me-1"></i> Cetak Buku (PDF)
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-secondary ps-3" style="font-size: 12px;">TANGGAL TRANSAKSI</th>
                            <th class="text-secondary" style="font-size: 12px;">JENIS TRANSAKSI</th>
                            <th class="text-secondary" style="font-size: 12px;">KATEGORI</th>
                            <th class="text-secondary text-end" style="font-size: 12px;">NOMINAL</th>
                            <th class="text-secondary" style="font-size: 12px; padding-left:20px;">KETERANGAN</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 140px;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($nasabah->mutasi as $mutasi)
                        <tr class="mutasi-row">
                            <td class="ps-3">
                                <span class="d-block fw-bold text-dark" style="font-size: 13px;">{{ $mutasi->tanggal_hijriyah }}</span>
                                <span class="text-muted" style="font-size: 11px;">{{ \Carbon\Carbon::parse($mutasi->tanggal_transaksi)->format('d M Y') }} M</span>
                            </td>
                            <td>
                                @if($mutasi->jenis_mutasi == 'Setor')
                                    <span class="badge bg-success bg-opacity-10 text-success border border-success"><i class="bi bi-arrow-down-left-circle me-1"></i>Setoran</span>
                                @else
                                    <span class="badge bg-danger bg-opacity-10 text-danger border border-danger"><i class="bi bi-arrow-up-right-circle me-1"></i>Penarikan</span>
                                @endif
                            </td>
                            <td>
                                <span class="fw-medium text-dark" style="font-size: 13px;">Tabungan {{ $mutasi->jenis_tabungan }}</span>
                            </td>
                            <td class="text-end">
                                <span class="fw-bold font-monospace {{ $mutasi->jenis_mutasi == 'Setor' ? 'text-success' : 'text-danger' }}">
                                    {{ $mutasi->jenis_mutasi == 'Setor' ? '+' : '-' }} Rp {{ number_format($mutasi->nominal, 0, ',', '.') }}
                                </span>
                            </td>
                            <td style="padding-left:20px;">
                                <span class="text-muted d-block text-wrap" style="font-size: 12px; max-width: 250px;">{{ $mutasi->keterangan ?? '-' }}</span>
                            </td>
                            
                            <td class="text-center">
                                <div class="btn-group shadow-sm">
                                    <button type="button" class="btn btn-sm btn-info text-white" title="Cetak Kuitansi" 
                                        onclick="cetakKuitansiTabungan(
                                            'TBG-{{ str_pad($mutasi->id, 5, '0', STR_PAD_LEFT) }}', 
                                            '{{ \Carbon\Carbon::parse($mutasi->tanggal_transaksi)->format('d M Y') }}', 
                                            '{{ $mutasi->tanggal_hijriyah }}', 
                                            '{{ $mutasi->jenis_mutasi }} Tabungan {{ $mutasi->jenis_tabungan }}', 
                                            '{{ $mutasi->nominal }}', 
                                            '{{ trim(terbilangTabungan($mutasi->nominal)) }}',
                                            '{{ $mutasi->jenis_mutasi }}'
                                        )">
                                        <i class="bi bi-printer"></i>
                                    </button>
                                    
                                    <button type="button" class="btn btn-sm btn-warning text-dark" title="Edit Transaksi" data-bs-toggle="modal" data-bs-target="#modalEditTransaksi{{ $mutasi->id }}">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    
                                    <form action="{{ route('admin.tabungan.mutasi.destroy', $mutasi->id) }}" id="form-delete-{{ $mutasi->id }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-danger" title="Hapus Transaksi" onclick="confirmDeleteMutasi({{ $mutasi->id }})">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        <!-- Modal Edit Transaksi Mutasi -->
                        <div class="modal fade" id="modalEditTransaksi{{ $mutasi->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog">
                                <form action="{{ route('admin.tabungan.mutasi.update', $mutasi->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-content border-0 shadow">
                                        <div class="modal-header bg-warning text-dark border-0">
                                            <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square me-2"></i>Edit Mutasi Tabungan</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body p-4 bg-light text-start">
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label class="form-label fw-bold">Jenis Mutasi</label>
                                                    <select class="form-select border-warning shadow-sm fw-bold" name="jenis_mutasi" required>
                                                        <option value="Setor" {{ $mutasi->jenis_mutasi == 'Setor' ? 'selected' : '' }} class="text-success">Setoran (Menabung)</option>
                                                        <option value="Tarik" {{ $mutasi->jenis_mutasi == 'Tarik' ? 'selected' : '' }} class="text-danger">Penarikan (Ambil)</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label fw-bold">Pilih Tabungan</label>
                                                    <select class="form-select border-warning shadow-sm fw-bold" name="jenis_tabungan" required>
                                                        <option value="Syariah" {{ $mutasi->jenis_tabungan == 'Syariah' ? 'selected' : '' }}>Tabungan Syariah</option>
                                                        <option value="Jariyah" {{ $mutasi->jenis_tabungan == 'Jariyah' ? 'selected' : '' }}>Tabungan Jariyah</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Nominal Tunai (Rp)</label>
                                                <div class="input-group input-group-lg shadow-sm">
                                                    <span class="input-group-text bg-white border-warning fw-bold text-dark">Rp</span>
                                                    <input type="number" class="form-control border-warning fw-bold text-dark font-monospace" name="nominal" min="1000" value="{{ (int)$mutasi->nominal }}" required>
                                                </div>
                                                <div class="form-text text-danger" style="font-size: 11px;">*Mengubah nominal akan otomatis mengkalkulasi ulang Saldo Nasabah.</div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Tanggal Transaksi (Masehi)</label>
                                                <input type="date" class="form-control" name="tanggal_transaksi" value="{{ $mutasi->tanggal_transaksi }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Keterangan / Berita Acara</label>
                                                <textarea class="form-control" name="keterangan" rows="2">{{ $mutasi->keterangan }}</textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-white border-top-0">
                                            <button type="button" class="btn btn-secondary shadow-sm" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-warning fw-bold shadow-sm"><i class="bi bi-save me-1"></i> Simpan Perubahan</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-clipboard-x fs-2 d-block mb-2 text-black-50"></i>
                                Belum ada riwayat transaksi mutasi.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<div class="modal fade" id="modalTransaksi" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('admin.tabungan.transaksi', $nasabah->id) }}" method="POST">
      @csrf
      <div class="modal-content border-0 shadow">
        <div class="modal-header bg-primary text-white border-0">
          <h5 class="modal-title fw-bold"><i class="bi bi-cash-stack me-2"></i>Input Transaksi Tunai</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-4 bg-light">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Jenis Mutasi</label>
                    <select class="form-select border-primary shadow-sm fw-bold" name="jenis_mutasi" required>
                        <option value="Setor" class="text-success">Setoran (Menabung)</option>
                        <option value="Tarik" class="text-danger">Penarikan (Ambil)</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold">Pilih Tabungan</label>
                    <select class="form-select border-primary shadow-sm fw-bold" name="jenis_tabungan" required>
                        <option value="Syariah">Tabungan Syariah</option>
                        <option value="Jariyah">Tabungan Jariyah</option>
                    </select>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">Nominal Tunai (Rp)</label>
                <div class="input-group input-group-lg shadow-sm">
                    <span class="input-group-text bg-white border-primary fw-bold text-dark">Rp</span>
                    <input type="number" class="form-control border-primary fw-bold text-dark font-monospace" name="nominal" min="1000" placeholder="0" required>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium">Tanggal Transaksi (Masehi)</label>
                <input type="date" class="form-control" name="tanggal_transaksi" value="{{ date('Y-m-d') }}" required>
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium">Keterangan / Berita Acara</label>
                <textarea class="form-control" name="keterangan" rows="2" placeholder="Catatan opsional... (misal: Setoran via Transfer / Pencairan untuk Wakaf Masjid)"></textarea>
            </div>
        </div>
        <div class="modal-footer bg-white border-top-0">
          <button type="button" class="btn btn-secondary shadow-sm" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary fw-bold shadow-sm"><i class="bi bi-check-circle me-1"></i> Proses Transaksi</button>
        </div>
      </div>
    </form>
  </div>
</div>

@if($nasabah->kode_kategori == '03')
<div class="modal fade" id="modalProfilUmum" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('admin.tabungan.nasabah.update_profil', $nasabah->id) }}" method="POST" enctype="multipart/form-data">
      @csrf
      @method('PUT')
      <div class="modal-content border-0 shadow">
        <div class="modal-header bg-primary text-white border-0">
          <h5 class="modal-title fw-bold" style="font-size:16px;"><i class="bi bi-file-person me-2"></i>Kelengkapan Dokumen KYC</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-4 bg-light text-start">
            <div class="mb-3">
                <label class="form-label fw-bold">Alamat Lengkap</label>
                <textarea class="form-control border-primary" name="alamat" rows="3" placeholder="Masukkan alamat domisili nasabah...">{{ $nasabah->alamat }}</textarea>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">Unggah Scan/Foto KTP</label>
                <input type="file" class="form-control border-primary" name="file_ktp" accept=".jpg,.jpeg,.png,.pdf">
                <div class="form-text text-muted" style="font-size: 11px;">*Format didukung: JPG, PNG, PDF. Maksimal 5MB.</div>
                @if($nasabah->file_ktp)
                    <div class="mt-2" style="font-size:12px;">
                        <span class="text-success"><i class="bi bi-check-circle-fill me-1"></i>File KTP saat ini sudah tersedia.</span> Mengunggah file baru akan menggantikan file lama.
                    </div>
                @endif
            </div>
        </div>
        <div class="modal-footer bg-white border-top-0">
          <button type="button" class="btn btn-secondary shadow-sm" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary fw-bold shadow-sm"><i class="bi bi-save me-1"></i> Simpan Dokumen</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endif

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function cetakKuitansiTabungan(idKuitansi, tglMasehi, tglHijri, jenisTransaksi, nominal, terbilang, aksiMutasi) {
        let logoMadrasah = "{!! $logoUrl !!}";
        let namaMadrasah = "{!! addslashes($namaMadrasah) !!}";
        let alamatMadrasah = "{!! addslashes($alamatMadrasah) !!}";
        let kontakMadrasah = "{!! addslashes($kontakMadrasah) !!}";
        
        let namaSiswa = "{!! addslashes($nasabah->nama_lengkap) !!}";
        let noRekening = "{{ $nasabah->no_rekening }}";
        let infoNasabah = "{!! addslashes($infoNasabah) !!}";
        let namaAdmin = "{{ Auth::user()->name ?? 'Bendahara Madrasah' }}";
        
        let judulKuitansi = aksiMutasi === 'Setor' ? 'BUKTI SETORAN TABUNGAN' : 'BUKTI PENARIKAN TABUNGAN';
        let labelPenyerah = aksiMutasi === 'Setor' ? 'Telah terima dari' : 'Telah diserahkan kepada';
        
        let printWindow = window.open('', '_blank', 'width=800,height=600');
        let imgTag = logoMadrasah ? `<img src="${logoMadrasah}" class="kop-logo">` : '';

        let htmlContent = `
            <html>
            <head>
                <title>Kuitansi Tabungan - ${idKuitansi}</title>
                <style>
                    @page { size: 24.13cm 13.97cm; margin: 0.5cm; }
                    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; }
                    .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">${judulKuitansi}</div>
                    
                    <div class="info-top">
                        <div>No. Referensi : ${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">${labelPenyerah}</div>
                        <div class="col-separator">:</div>
                        <div class="col-value"><strong>${namaSiswa}</strong></div>
                    </div>
                    <div class="row-data">
                        <div class="col-label">Nomor Rekening</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${noRekening}</div>
                    </div>
                    <div class="row-data">
                        <div class="col-label">Status Nasabah</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${infoNasabah}</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; margin-top:0;">## ${terbilang} Rupiah ##</div>
                    </div>

                    <div class="row-data" style="margin-top: 10px;">
                        <div class="col-label">Guna Membayar</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${jenisTransaksi}</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 confirmDeleteMutasi(id) {
        Swal.fire({
            title: 'Hapus Transaksi?',
            text: "Data transaksi yang dihapus tidak bisa dikembalikan. Saldo nasabah akan dikalkulasi ulang secara otomatis.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2500 });
        @endif
        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Terjadi Kesalahan!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection