@extends('layouts.app')

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

@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 Pengeluaran
    </button>
</div>

<div class="card">
    <div class="card-header">
        <i class="fa-solid fa-arrow-trend-down" style="color:#dc2626;"></i>
        <span class="card-title">Daftar Pengeluaran</span>
        <div style="margin-left:auto; background:#fee2e2; padding:6px 14px; border-radius:8px;">
            <span style="font-size:12px; color:#991b1b;">Total: </span>
            <strong style="color:#991b1b;">Rp {{ number_format($totalPengeluaran, 0, ',', '.') }}</strong>
        </div>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Uraian</th>
                    <th>Jumlah</th>
                    <th>Tanggal</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($pengeluaran as $i => $p)
                <tr>
                    <td style="color:#9db8ac;">{{ $pengeluaran->firstItem() + $i }}</td>
                    <td style="font-weight:500;">{{ $p->uraian }}</td>
                    <td><strong style="color:#991b1b;">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="editPengeluaran(
                                {{ $p->id }},
                                '{{ addslashes($p->uraian) }}',
                                '{{ $p->jumlah }}',
                                '{{ \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-pgl-{{ $p->id }}', '{{ addslashes($p->uraian) }}')"
                                class="btn btn-danger btn-sm">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                            <form id="del-pgl-{{ $p->id }}" action="{{ route('pengeluaran.destroy', $p) }}"
                                method="POST" style="display:none">
                                @csrf @method('DELETE')
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="text-align:center; padding:40px; color:#9db8ac;">
                        Belum ada pengeluaran
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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

{{-- Modal: Tambah / Edit Pengeluaran --}}
<div class="modal-backdrop" id="modal-pengeluaran">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title" id="modal-title">Tambah Pengeluaran</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('pengeluaran.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 pengeluaran" 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>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 pengeluaran" 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>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>

{{-- 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 pengeluaran <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;

    function openModal() {
        document.getElementById('input-uraian').value  = '';
        document.getElementById('input-jumlah').value  = '';
        document.getElementById('input-tanggal').value = '';

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

    function editPengeluaran(id, uraian, jumlah, tanggal) {
        document.getElementById('edit-uraian').value  = uraian;
        document.getElementById('edit-jumlah').value  = jumlah;
        document.getElementById('edit-tanggal').value = tanggal;

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

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

    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');
    }

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

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