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

@section('title', 'Daftar Buku Rekening Tabungan')

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

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold text-success"><i class="bi bi-piggy-bank me-2"></i>Keuangan Tabungan</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola buku rekening tabungan syariah dan jariyah nasabah.</p>
        </div>
        <button type="button" class="btn btn-success btn-sm shadow-sm d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#modalBukaRekening">
            <i class="bi bi-plus-circle"></i> Buka Rekening Baru
        </button>
    </div>

    <div class="row mb-4 g-3">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm border-start border-primary border-4 h-100">
                <div class="card-body">
                    <p class="text-muted fw-bold mb-1" style="font-size: 12px;">TOTAL REKENING AKTIF</p>
                    <h4 class="fw-bold mb-0 text-dark">{{ $nasabahs->count() }} <span style="font-size: 14px;" class="text-muted fw-normal">Nasabah</span></h4>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm border-start border-info border-4 h-100 bg-info bg-opacity-10">
                <div class="card-body">
                    <p class="text-info fw-bold mb-1" style="font-size: 12px;">TOTAL SALDO SYARIAH</p>
                    <h4 class="fw-bold mb-0 text-info">Rp {{ number_format($nasabahs->sum('saldo_syariah'), 0, ',', '.') }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm border-start border-success border-4 h-100 bg-success bg-opacity-10">
                <div class="card-body">
                    <p class="text-success fw-bold mb-1" style="font-size: 12px;">TOTAL SALDO JARIYAH</p>
                    <h4 class="fw-bold mb-0 text-success">Rp {{ number_format($nasabahs->sum('saldo_jariyah'), 0, ',', '.') }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-wallet2 text-primary me-2"></i>Daftar Buku Rekening</h6>
            
            <div class="input-group input-group-sm" style="width: 280px;">
                <span class="input-group-text bg-light border-end-0"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama / No. Rekening..." onkeyup="searchNasabah(this)" aria-label="Cari Nasabah">
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%;">NO</th>
                            <th class="text-secondary" style="font-size: 12px;">PROFIL NASABAH</th>
                            <th class="text-secondary" style="font-size: 12px;">KATEGORI & NO. REK</th>
                            <th class="text-secondary" style="font-size: 12px;">SALDO SYARIAH</th>
                            <th class="text-secondary" style="font-size: 12px;">SALDO JARIYAH</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 10%;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-nasabah">
                        @forelse($nasabahs as $index => $n)
                        <tr class="row-nasabah">
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <span class="fw-bold text-dark d-block" style="font-size: 14px;">{{ $n->nama_lengkap }}</span>
                                <span class="text-muted" style="font-size: 12px;"><i class="bi bi-telephone me-1"></i>{{ $n->no_hp ?? '-' }}</span>
                            </td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary d-inline-block mb-1" style="font-size: 10px;">{{ $n->entitas_profil }}</span>
                                <span class="d-block fw-bold font-monospace" style="font-size: 14px; letter-spacing: 1px;">{{ $n->no_rekening }}</span>
                            </td>
                            <td>
                                <span class="fw-bold text-info" style="font-size: 14px;">Rp {{ number_format($n->saldo_syariah, 0, ',', '.') }}</span>
                            </td>
                            <td>
                                <span class="fw-bold text-success" style="font-size: 14px;">Rp {{ number_format($n->saldo_jariyah, 0, ',', '.') }}</span>
                            </td>
                            <td class="text-center">
                                <a href="{{ route('admin.tabungan.show', $n->id) }}" class="btn btn-sm btn-primary shadow-sm" title="Buka Buku Tabungan">
                                    <i class="bi bi-journal-text me-1"></i> Detail
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-journal-x fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada buku rekening tabungan.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalBukaRekening" tabindex="-1" aria-labelledby="modalBukaRekeningLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('admin.tabungan.store') }}" method="POST">
      @csrf
      <div class="modal-content">
        <div class="modal-header bg-success text-white">
          <h5 class="modal-title" id="modalBukaRekeningLabel"><i class="bi bi-journal-plus me-2"></i>Buka Rekening Baru</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body p-4">
            
            <div class="mb-3">
                <label class="form-label fw-bold">Pilih Kategori Nasabah</label>
                <select class="form-select border-success shadow-sm" name="kode_kategori" id="kode_kategori" required onchange="toggleFormKategori()">
                    <option value="">-- Pilih Kategori --</option>
                    <option value="02">Siswa / Santri Madrasah (Kode: 02)</option>
                    <option value="01">Guru / Staff Madrasah (Kode: 01)</option>
                    <option value="03">Masyarakat Umum (Kode: 03)</option>
                </select>
            </div>

            <div id="form-pegawai" class="d-none">
                <div class="mb-3">
                    <label class="form-label fw-medium">Jenis Kepegawaian</label>
                    <select class="form-select" name="jenis_pegawai" id="jenis_pegawai" onchange="togglePegawai()">
                        <option value="guru">Tenaga Pendidik (Guru)</option>
                        <option value="staff">Tenaga Kependidikan (Staff)</option>
                    </select>
                </div>
                <div class="mb-3" id="select-guru">
                    <label class="form-label fw-medium">Pilih Guru</label>
                    <select class="form-select" name="guru_id">
                        <option value="">-- Pilih Guru --</option>
                        @foreach($gurus as $g) <option value="{{ $g->id }}">{{ $g->nama_lengkap }}</option> @endforeach
                    </select>
                </div>
                <div class="mb-3 d-none" id="select-staff">
                    <label class="form-label fw-medium">Pilih Staff</label>
                    <select class="form-select" name="staff_id">
                        <option value="">-- Pilih Staff --</option>
                        @foreach($staffs as $s) <option value="{{ $s->id }}">{{ $s->nama_lengkap }}</option> @endforeach
                    </select>
                </div>
            </div>

            <div id="form-siswa" class="d-none">
                <div class="mb-3">
                    <label class="form-label fw-medium">Pilih Siswa/Santri</label>
                    <select class="form-select" name="siswa_id">
                        <option value="">-- Pilih Siswa --</option>
                        @foreach($siswas as $s) 
                            <option value="{{ $s->id }}">{{ $s->nama_lengkap }} ({{ $s->nis ?? '-' }})</option> 
                        @endforeach
                    </select>
                    <div class="form-text text-danger" style="font-size:11px;">*Hanya siswa yang belum memiliki tabungan yang muncul.</div>
                </div>
            </div>

            <div id="form-umum" class="d-none">
                <div class="mb-3">
                    <label class="form-label fw-medium">Nama Lengkap</label>
                    <input type="text" class="form-control" name="nama_lengkap" placeholder="Nama Warga / Nasabah">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-medium">NIK (Nomor Induk Kependudukan)</label>
                    <input type="text" class="form-control" name="nik" placeholder="16 Digit NIK KTP">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-medium">Nomor WhatsApp / HP</label>
                    <input type="text" class="form-control" name="no_hp" placeholder="08xxxxxx">
                </div>
            </div>

        </div>
        <div class="modal-footer bg-light">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-success"><i class="bi bi-save me-1"></i> Buat Rekening</button>
        </div>
      </div>
    </form>
  </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function toggleFormKategori() {
        let val = document.getElementById('kode_kategori').value;
        document.getElementById('form-pegawai').classList.add('d-none');
        document.getElementById('form-siswa').classList.add('d-none');
        document.getElementById('form-umum').classList.add('d-none');

        if(val === '01') document.getElementById('form-pegawai').classList.remove('d-none');
        if(val === '02') document.getElementById('form-siswa').classList.remove('d-none');
        if(val === '03') document.getElementById('form-umum').classList.remove('d-none');
    }

    function togglePegawai() {
        let val = document.getElementById('jenis_pegawai').value;
        document.getElementById('select-guru').classList.add('d-none');
        document.getElementById('select-staff').classList.add('d-none');
        if(val === 'guru') document.getElementById('select-guru').classList.remove('d-none');
        if(val === 'staff') document.getElementById('select-staff').classList.remove('d-none');
    }

    function searchNasabah(input) {
        let filter = input.value.toLowerCase();
        let rows = document.getElementsByClassName('row-nasabah');
        for (let i = 0; i < rows.length; i++) {
            let text = rows[i].textContent.toLowerCase();
            rows[i].style.display = text.includes(filter) ? "" : "none";
        }
    }

    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: 'Error!', html: '<ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection