@extends('layouts.app')

@section('title', 'Data Donatur')
@section('page-title', 'Data Donatur')
@section('breadcrumb', 'Beranda / Donatur')

@section('content')

<div style="display:flex; justify-content:flex-end; margin-bottom:16px;" class="no-print">
    <button onclick="openModal()" class="btn btn-primary">
        <i class="fa-solid fa-plus"></i> Tambah Donatur
    </button>
</div>

<div class="card">
    <div class="card-header">
        <i class="fa-solid fa-hand-holding-heart" style="color:#1e6f5c;"></i>
        <span class="card-title">Daftar Donatur</span>
        <div style="margin-left:auto; background:#e8f5f1; padding:6px 14px; border-radius:8px;">
            <span style="font-size:12px; color:#3d6657;">Total: </span>
            <strong style="color:#1e6f5c;">Rp {{ number_format($totalDonasi, 0, ',', '.') }}</strong>
        </div>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Donatur</th>
                    <th>Jumlah Donasi</th>
                    <th>Tanggal</th>
                    <th>Keterangan</th>
                    <th style="width:120px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($donatur as $i => $d)
                <tr>
                    <td style="color:#9db8ac;">{{ $donatur->firstItem() + $i }}</td>
                    <td style="font-weight:600;">{{ $d->nama }}</td>
                    <td>
                        <span style="color:#065f46; font-weight:700;">
                            Rp {{ number_format($d->jumlah, 0, ',', '.') }}
                        </span>
                    </td>
                    <td style="font-size:13px;">{{ \Carbon\Carbon::parse($d->tanggal)->format('d M Y') }}</td>
                    <td style="font-size:13px; color:#6b8f7e;">{{ Str::limit($d->keterangan ?? '—', 40) }}</td>
                    <td>
                        <div style="display:flex; gap:6px;">
                            <button onclick="editDonatur(
                                {{ $d->id }},
                                '{{ addslashes($d->nama) }}',
                                '{{ $d->jumlah }}',
                                '{{ $d->tanggal }}',
                                '{{ addslashes($d->keterangan ?? '') }}'
                            )" class="btn btn-outline btn-sm">
                                <i class="fa-solid fa-pen"></i>
                            </button>
                            <button onclick="confirmDelete('del-donatur-{{ $d->id }}', '{{ addslashes($d->nama) }}')"
                                class="btn btn-danger btn-sm">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                            <form id="del-donatur-{{ $d->id }}" action="{{ route('donatur.destroy', $d) }}"
                                method="POST" style="display:none">
                                @csrf @method('DELETE')
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" style="text-align:center; padding:40px; color:#9db8ac;">
                        Belum ada data donatur
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($donatur->hasPages())
    <div style="padding:14px 22px; border-top:1px solid #e8f0ec;">
        {{ $donatur->links('vendor.pagination.custom') }}
    </div>
    @endif
</div>

{{-- Modal: Tambah / Edit Donatur --}}
<div class="modal-backdrop" id="modal-donatur">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title" id="modal-title">Tambah Donatur</span>
            <button type="button" onclick="closeModal()"
                style="background:none;border:none;font-size:20px;cursor:pointer;color:#7aaa94;">&times;</button>
        </div>

        {{-- Form TAMBAH --}}
        <form method="POST" id="form-store" action="{{ route('donatur.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-group">
                    <label>Nama Donatur <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="nama" id="input-nama" class="form-control"
                        placeholder="Nama donatur" required>
                </div>
                <div class="form-group">
                    <label>Jumlah Donasi <span style="color:#dc2626;">*</span></label>
                    <input type="number" name="jumlah" id="input-jumlah" class="form-control"
                        placeholder="0" min="0" required>
                </div>
                <div class="form-group">
                    <label>Tanggal <span style="color:#dc2626;">*</span></label>
                    <input type="date" name="tanggal" id="input-tanggal" class="form-control" required>
                </div>
                <div class="form-group">
                    <label>Keterangan</label>
                    <textarea name="keterangan" id="input-keterangan" class="form-control"
                        rows="3" placeholder="Keterangan (opsional)"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="closeModal()" class="btn btn-outline">Batal</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-floppy-disk"></i> Simpan
                </button>
            </div>
        </form>

        {{-- Form EDIT --}}
        <form method="POST" id="form-update" action="" style="display:none;">
            @csrf
            @method('PUT')
            <div class="modal-body">
                <div class="form-group">
                    <label>Nama Donatur <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="nama" id="edit-nama" class="form-control"
                        placeholder="Nama donatur" required>
                </div>
                <div class="form-group">
                    <label>Jumlah Donasi <span style="color:#dc2626;">*</span></label>
                    <input type="number" name="jumlah" id="edit-jumlah" class="form-control"
                        placeholder="0" min="0" required>
                </div>
                <div class="form-group">
                    <label>Tanggal <span style="color:#dc2626;">*</span></label>
                    <input type="date" name="tanggal" id="edit-tanggal" class="form-control" required>
                </div>
                <div class="form-group">
                    <label>Keterangan</label>
                    <textarea name="keterangan" id="edit-keterangan" class="form-control"
                        rows="3" placeholder="Keterangan (opsional)"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="closeModal()" class="btn btn-outline">Batal</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-floppy-disk"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Modal Konfirmasi Hapus --}}
<div class="modal-backdrop" id="modal-delete">
    <div class="modal" style="max-width:400px;">
        <div class="modal-header">
            <span class="modal-title">Konfirmasi Hapus</span>
            <button type="button" onclick="closeDeleteModal()"
                style="background:none;border:none;font-size:20px;cursor:pointer;color:#7aaa94;">&times;</button>
        </div>
        <div class="modal-body">
            <p style="margin:0; color:#374151;">
                Yakin ingin menghapus donatur <strong id="delete-nama"></strong>?
                Tindakan ini tidak dapat dibatalkan.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" onclick="closeDeleteModal()" class="btn btn-outline">Batal</button>
            <button type="button" onclick="submitDelete()" class="btn btn-danger">
                <i class="fa-solid fa-trash"></i> Hapus
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let deleteFormId = null;

    // ── Buka modal TAMBAH ────────────────────────────
    function openModal() {
        document.getElementById('input-nama').value        = '';
        document.getElementById('input-jumlah').value     = '';
        document.getElementById('input-tanggal').value    = '';
        document.getElementById('input-keterangan').value = '';

        document.getElementById('modal-title').textContent  = 'Tambah Donatur';
        document.getElementById('form-store').style.display  = '';
        document.getElementById('form-update').style.display = 'none';
        document.getElementById('modal-donatur').classList.add('open');
    }

    // ── Buka modal EDIT ──────────────────────────────
    function editDonatur(id, nama, jumlah, tanggal, keterangan) {
        document.getElementById('edit-nama').value        = nama;
        document.getElementById('edit-jumlah').value      = jumlah;
        document.getElementById('edit-tanggal').value     = tanggal;
        document.getElementById('edit-keterangan').value  = keterangan;

        document.getElementById('modal-title').textContent   = 'Edit Donatur';
        document.getElementById('form-update').action        = '/donatur/' + id;
        document.getElementById('form-store').style.display  = 'none';
        document.getElementById('form-update').style.display = '';
        document.getElementById('modal-donatur').classList.add('open');
    }

    // ── Tutup modal tambah/edit ──────────────────────
    function closeModal() {
        document.getElementById('modal-donatur').classList.remove('open');
    }

    // ── Buka modal konfirmasi hapus ──────────────────
    function confirmDelete(formId, nama) {
        deleteFormId = formId;
        document.getElementById('delete-nama').textContent = nama;
        document.getElementById('modal-delete').classList.add('open');
    }

    // ── Submit form hapus ────────────────────────────
    function submitDelete() {
        if (deleteFormId) {
            document.getElementById(deleteFormId).submit();
        }
    }

    // ── Tutup modal hapus ────────────────────────────
    function closeDeleteModal() {
        deleteFormId = null;
        document.getElementById('modal-delete').classList.remove('open');
    }

    // Klik di luar modal → tutup
    document.getElementById('modal-donatur').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });

    document.getElementById('modal-delete').addEventListener('click', function(e) {
        if (e.target === this) closeDeleteModal();
    });
</script>
@endpush