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

@section('title', 'Tabungan Nasabah Umum')

@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-globe me-2"></i>Tabungan Nasabah Umum</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola rekening tabungan masyarakat, donatur, atau pihak luar madrasah.</p>
        </div>
        <button class="btn btn-primary btn-sm shadow-sm fw-bold d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#modalTambahUmum">
            <i class="bi bi-person-plus"></i> Pendaftaran Rekening Baru
        </button>
    </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="card-title mb-0 fw-bold"><i class="bi bi-people-fill text-primary me-2"></i>Daftar Rekening Umum</h6>
            
            <div class="d-flex align-items-center gap-3">
                <div class="input-group input-group-sm" style="width: 260px;">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama / NIK..." 
                           onkeyup="searchTableUmum(this)" aria-label="Cari Nasabah">
                </div>
                <span class="badge bg-success rounded-pill px-3 py-2">{{ $umums->count() }} Nasabah</span>
            </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; width: 30%">PROFIL NASABAH</th>
                            <th class="text-secondary" style="font-size: 12px; width: 20%">NO. REKENING</th>
                            <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO SYARIAH</th>
                            <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO JARIYAH</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 15%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-umum">
                        @forelse($umums as $index => $umum)
                        <tr class="row-umum">
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($umum->nama_lengkap) }}&background=random&size=100" 
                                         class="rounded-circle object-fit-cover shadow-sm me-3 border" 
                                         style="width: 50px; height: 50px; aspect-ratio: 1/1;" alt="Foto">
                                    <div class="data-pencarian">
                                        <span class="fw-bold text-dark d-block mb-1" style="font-size: 14px;">{{ $umum->nama_lengkap }}</span>
                                        <div class="text-muted" style="font-size: 11px; line-height: 1.4;">
                                            <span class="d-block"><i class="bi bi-person-vcard me-1"></i> NIK: <strong>{{ $umum->nik ?? '-' }}</strong></span>
                                            <span class="d-block"><i class="bi bi-telephone me-1"></i> HP: <strong>{{ $umum->no_hp ?? '-' }}</strong></span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="d-block fw-bold font-monospace text-primary" style="font-size: 14px; letter-spacing: 1px;">{{ $umum->no_rekening }}</span>
                                <span class="badge bg-success bg-opacity-10 text-success border border-success" style="font-size: 10px;">{{ $umum->status_rekening }}</span>
                            </td>
                            <td class="text-end fw-bold text-info" style="font-size: 13px;">Rp {{ number_format($umum->saldo_syariah, 0, ',', '.') }}</td>
                            <td class="text-end fw-bold text-success" style="font-size: 13px;">Rp {{ number_format($umum->saldo_jariyah, 0, ',', '.') }}</td>
                            <td class="text-center">
                                <div class="d-flex justify-content-center gap-1">
                                    <a href="{{ route('admin.tabungan.show', $umum->id) }}" class="btn btn-sm btn-primary" title="Buku Tabungan">
                                        <i class="bi bi-journal-text"></i>
                                    </a>
                                    <button class="btn btn-sm btn-warning text-dark" data-bs-toggle="modal" data-bs-target="#modalEditUmum{{ $umum->id }}" title="Edit Data">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <form action="{{ route('admin.tabungan.umum.destroy', $umum->id) }}" method="POST" class="d-inline" id="form-delete-{{ $umum->id }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-danger" title="Hapus" onclick="confirmDeleteUmum({{ $umum->id }}, '{{ addslashes($umum->nama_lengkap) }}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        <div class="modal fade" id="modalEditUmum{{ $umum->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog">
                                <form action="{{ route('admin.tabungan.umum.update', $umum->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 Data Dasar Nasabah</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="mb-3">
                                                <label class="form-label fw-bold">Nama Lengkap Sesuai KTP <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-warning" name="nama_lengkap" value="{{ $umum->nama_lengkap }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">NIK / No. Identitas <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-warning" name="nik" value="{{ $umum->nik }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Nomor HP / WhatsApp <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-warning" name="no_hp" value="{{ $umum->no_hp }}" required>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-white border-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">Simpan Perubahan</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-person-x fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada nasabah umum yang terdaftar.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambahUmum" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('admin.tabungan.umum.store') }}" 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-person-plus me-2"></i>Pendaftaran Nasabah Umum</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="alert alert-info border-0 shadow-sm mb-4" style="font-size: 13px;">
                        <i class="bi bi-info-circle me-1"></i> Data kelengkapan dokumen seperti <strong>Alamat</strong> dan <strong>File KTP</strong> dapat diunggah menyusul di dalam halaman profil/buku tabungan nasabah.
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Nama Lengkap Sesuai KTP <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-primary" name="nama_lengkap" placeholder="Contoh: Budi Santoso" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">NIK / No. Identitas <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-primary" name="nik" placeholder="16 Digit NIK" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Nomor HP / WhatsApp <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-primary" name="no_hp" placeholder="08xxxxxxxxxx" required>
                    </div>
                </div>
                <div class="modal-footer bg-white border-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">Buat Rekening Sekarang</button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function searchTableUmum(input) {
        let filter = input.value.toLowerCase();
        let rows = document.getElementsByClassName('row-umum');
        for (let i = 0; i < rows.length; i++) {
            let text = rows[i].textContent || rows[i].innerText;
            rows[i].style.display = text.toLowerCase().indexOf(filter) > -1 ? "" : "none";
        }
    }

    function confirmDeleteUmum(id, nama) {
        Swal.fire({
            title: 'Hapus Rekening?',
            text: "Data " + nama + " beserta histori tabungannya akan dihapus permanen!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!'
        }).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: 'Error!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection