@extends('layouts.app')

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

@section('content')

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

<div class="card">
    <div class="card-header">
        <i class="fa-solid fa-arrow-trend-up" style="color:#1e6f5c;"></i>
        <span class="card-title">Daftar Pemasukan</span>
        <div style="margin-left:auto; background:#d1fae5; padding:6px 14px; border-radius:8px;">
            <span style="font-size:12px; color:#065f46;">Total: </span>
            <strong style="color:#065f46;">Rp {{ number_format($totalPemasukan, 0, ',', '.') }}</strong>
        </div>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Uraian</th>
                    <th>Donatur</th>
                    <th>Jumlah</th>
                    <th>Tanggal</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($pemasukan as $i => $p)
                <tr>
                    <td style="color:#9db8ac;">{{ $pemasukan->firstItem() + $i }}</td>
                    <td style="font-weight:500;">{{ $p->uraian }}</td>
                    <td style="font-size:13px;">{{ $p->donatur->nama ?? '—' }}</td>
                    <td><strong style="color:#065f46;">Rp {{ number_format($p->jumlah, 0, ',', '.') }}</strong></td>
                    <td style="font-size:13px;">{{ \Carbon\Carbon::parse($p->tanggal)->format('d M Y') }}</td>
                    <td>
                        <div style="display:flex; gap:6px;">
                            <button onclick="editPemasukan(
                                {{ $p->id }},
                                '{{ addslashes($p->uraian) }}',
                                '{{ $p->jumlah }}',
                                '{{ $p->donatur_id ?? '' }}',
                                '{{ \Carbon\Carbon::parse($p->tanggal)->format('Y-m-d') }}'
                            )" class="btn btn-outline btn-sm">
                                <i class="fa-solid fa-pen"></i>
                            </button>
                            <button onclick="confirmDelete('del-pms-{{ $p->id }}', '{{ addslashes($p->uraian) }}')"
                                class="btn btn-danger btn-sm">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                            <form id="del-pms-{{ $p->id }}" action="{{ route('pemasukan.destroy', $p) }}"
                                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 pemasukan
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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

{{-- Modal: Tambah / Edit Pemasukan --}}
<div class="modal-backdrop" id="modal-pemasukan">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title" id="modal-title">Tambah Pemasukan</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('pemasukan.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-group">
                    <label>Uraian <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="uraian" id="input-uraian" class="form-control"
                        placeholder="Keterangan pemasukan" required>
                </div>
                <div class="form-group">
                    <label>Jumlah <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>Donatur</label>
                    <div style="display:flex; gap:8px; align-items:center;">
                        <select name="donatur_id" id="input-donatur" class="form-control">
                            <option value="">— Pilih Donatur (opsional) —</option>
                            @foreach($donaturList as $don)
                            <option value="{{ $don->id }}">{{ $don->nama }}</option>
                            @endforeach
                        </select>
                        <button type="button" onclick="openMiniModal('input-donatur')"
                            class="btn btn-outline btn-sm" title="Tambah donatur baru"
                            style="white-space:nowrap; padding:8px 12px;">
                            <i class="fa-solid fa-plus"></i>
                        </button>
                    </div>
                </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>
            <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>Uraian <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="uraian" id="edit-uraian" class="form-control"
                        placeholder="Keterangan pemasukan" required>
                </div>
                <div class="form-group">
                    <label>Jumlah <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>Donatur</label>
                    <div style="display:flex; gap:8px; align-items:center;">
                        <select name="donatur_id" id="edit-donatur" class="form-control">
                            <option value="">— Pilih Donatur (opsional) —</option>
                            @foreach($donaturList as $don)
                            <option value="{{ $don->id }}">{{ $don->nama }}</option>
                            @endforeach
                        </select>
                        <button type="button" onclick="openMiniModal('edit-donatur')"
                            class="btn btn-outline btn-sm" title="Tambah donatur baru"
                            style="white-space:nowrap; padding:8px 12px;">
                            <i class="fa-solid fa-plus"></i>
                        </button>
                    </div>
                </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>
            <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>

{{-- Mini Modal: Tambah Donatur Baru --}}
<div class="modal-backdrop" id="modal-mini-donatur" style="z-index:1100;">
    <div class="modal" style="max-width:420px;">
        <div class="modal-header">
            <span class="modal-title">Tambah Donatur Baru</span>
            <button type="button" onclick="closeMiniModal()"
                style="background:none;border:none;font-size:20px;cursor:pointer;color:#7aaa94;">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label>Nama Donatur <span style="color:#dc2626;">*</span></label>
                <input type="text" id="mini-nama" class="form-control"
                    placeholder="Nama donatur / lembaga">
            </div>
            <div class="form-group">
                <label>Jumlah Donasi <span style="color:#dc2626;">*</span></label>
                <input type="number" id="mini-jumlah" class="form-control"
                    placeholder="0" min="0">
            </div>
            <div class="form-group">
                <label>Tanggal <span style="color:#dc2626;">*</span></label>
                <input type="date" id="mini-tanggal" class="form-control">
            </div>
            <div class="form-group">
                <label>Keterangan</label>
                <input type="text" id="mini-keterangan" class="form-control"
                    placeholder="Opsional">
            </div>
            <div id="mini-error" style="color:#dc2626; font-size:13px; display:none;"></div>
        </div>
        <div class="modal-footer">
            <button type="button" onclick="closeMiniModal()" class="btn btn-outline">Batal</button>
            <button type="button" onclick="saveMiniDonatur()" id="mini-save-btn" class="btn btn-primary">
                <i class="fa-solid fa-floppy-disk"></i> Simpan
            </button>
        </div>
    </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 pemasukan <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;
    let activeDropdown  = null; // menyimpan id dropdown yang sedang aktif

    // ── Modal Pemasukan TAMBAH ───────────────────────
    function openModal() {
        document.getElementById('input-uraian').value  = '';
        document.getElementById('input-jumlah').value  = '';
        document.getElementById('input-donatur').value = '';
        document.getElementById('input-tanggal').value = '';

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

    // ── Modal Pemasukan EDIT ─────────────────────────
    function editPemasukan(id, uraian, jumlah, donaturId, tanggal) {
        document.getElementById('edit-uraian').value  = uraian;
        document.getElementById('edit-jumlah').value  = jumlah;
        document.getElementById('edit-tanggal').value = tanggal;
        document.getElementById('edit-donatur').value = donaturId;

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

    function closeModal() {
        document.getElementById('modal-pemasukan').classList.remove('open');
    }

    // ── Mini Modal Donatur ───────────────────────────
    function openMiniModal(dropdownId) {
        activeDropdown = dropdownId;

        // reset form mini
        document.getElementById('mini-nama').value        = '';
        document.getElementById('mini-jumlah').value      = '';
        document.getElementById('mini-tanggal').value     = '';
        document.getElementById('mini-keterangan').value  = '';
        document.getElementById('mini-error').style.display = 'none';
        document.getElementById('mini-save-btn').disabled = false;
        document.getElementById('mini-save-btn').innerHTML = '<i class="fa-solid fa-floppy-disk"></i> Simpan';

        document.getElementById('modal-mini-donatur').classList.add('open');
    }

    function closeMiniModal() {
        document.getElementById('modal-mini-donatur').classList.remove('open');
        activeDropdown = null;
    }

    async function saveMiniDonatur() {
        const nama       = document.getElementById('mini-nama').value.trim();
        const jumlah     = document.getElementById('mini-jumlah').value.trim();
        const tanggal    = document.getElementById('mini-tanggal').value.trim();
        const keterangan = document.getElementById('mini-keterangan').value.trim();
        const errEl      = document.getElementById('mini-error');

        // validasi sederhana
        if (!nama || !jumlah || !tanggal) {
            errEl.textContent    = 'Nama, jumlah, dan tanggal wajib diisi.';
            errEl.style.display  = 'block';
            return;
        }

        errEl.style.display = 'none';

        const btn = document.getElementById('mini-save-btn');
        btn.disabled   = true;
        btn.innerHTML  = '<i class="fa-solid fa-spinner fa-spin"></i> Menyimpan...';

        try {
            const res = await fetch('{{ route("donatur.ajax") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ nama, jumlah, tanggal, keterangan }),
            });

            const json = await res.json();

            if (json.success) {
                // tambah option baru ke KEDUA dropdown (tambah & edit)
                const newOption = new Option(json.donatur.nama, json.donatur.id, true, true);

                ['input-donatur', 'edit-donatur'].forEach(selId => {
                    document.getElementById(selId).appendChild(newOption.cloneNode(true));
                });

                // pilih donatur baru di dropdown yang aktif
                document.getElementById(activeDropdown).value = json.donatur.id;

                closeMiniModal();
            } else {
                errEl.textContent   = 'Gagal menyimpan. Coba lagi.';
                errEl.style.display = 'block';
                btn.disabled  = false;
                btn.innerHTML = '<i class="fa-solid fa-floppy-disk"></i> Simpan';
            }
        } catch (e) {
            errEl.textContent   = 'Terjadi kesalahan. Coba lagi.';
            errEl.style.display = 'block';
            btn.disabled  = false;
            btn.innerHTML = '<i class="fa-solid fa-floppy-disk"></i> Simpan';
        }
    }

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

    function submitDelete() {
        if (deleteFormId) {
            document.getElementById(deleteFormId).submit();
        }
    }

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

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

    document.getElementById('modal-mini-donatur').addEventListener('click', function(e) {
        if (e.target === this) closeMiniModal();
    });

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