@extends('layouts.app')

@section('title', 'Daftar Pengeluaran')
@section('page-title', 'Manajemen Pengeluaran')
@section('breadcrumb', 'SiIuran / Manajemen / Pengeluaran')

@push('styles')
<style>
    /* Glass Filter */
    .glass-search {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 20px; border: 1px solid #f1f5f9; padding: 20px; margin-bottom: 25px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    }
    
    /* Premium Table */
    .table-container {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #f1f5f9;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        overflow: hidden;
    }
    .table-modern thead th {
        background: #fdfdfd; padding: 18px 24px; font-size: 0.65rem; text-transform: uppercase;
        letter-spacing: 1.5px; color: #94a3b8; border: none;
    }
    .table-modern tbody td { padding: 15px 24px; vertical-align: middle; border-bottom: 1px solid #f8fafc; }
    
    .action-btn {
        width: 32px; height: 32px; border-radius: 10px; display: inline-flex;
        align-items: center; justify-content: center; font-size: 0.85rem;
        background: #f1f5f9; color: #64748b; transition: all 0.2s; border: none;
    }
    .action-btn:hover { background: #1e293b; color: #fff; transform: translateY(-2px); }
    .action-btn.edit:hover { background: #f59e0b; color: #fff; }
    .action-btn.delete:hover { background: #ef4444; color: #fff; }
    
    .kategori-badge { font-size: 0.65rem; font-weight: 800; padding: 4px 12px; border-radius: 100px; text-transform: uppercase; background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
</style>
@endpush

@section('content')
<div class="row align-items-center mb-4">
    <div class="col-md-6">
        <h4 class="fw-900 text-dark mb-1">Catatan Pengeluaran</h4>
        <p class="text-muted small mb-0">Kelola dan pantau seluruh transaksi kas keluar.</p>
    </div>
    <div class="col-md-6 text-md-end mt-3 mt-md-0">
        <a href="{{ route('pengeluaran.create') }}" class="btn btn-danger rounded-pill px-4 fw-bold shadow-sm">
            <i class="bi bi-cart-dash me-2"></i>Catat Pengeluaran
        </a>
    </div>
</div>

{{-- Filter --}}
<div class="glass-search">
    <form method="GET">
        <div class="row g-3 align-items-end">
            <div class="col-md-6">
                <label class="small fw-800 text-muted text-uppercase letter-spacing-1 mb-2 d-block">Pencarian</label>
                <div class="input-group bg-light rounded-3 overflow-hidden border-0">
                    <span class="input-group-text bg-transparent border-0"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" name="search" class="form-control border-0 bg-transparent py-2" placeholder="Cari keterangan atau kategori..." value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-md-3">
                <label class="small fw-800 text-muted text-uppercase letter-spacing-1 mb-2 d-block">Kategori</label>
                <select name="kategori" class="form-select border-0 bg-light rounded-3 py-2">
                    <option value="">Semua Kategori</option>
                    @foreach($kategoriList as $kat)
                        <option value="{{ $kat }}" {{ request('kategori') === $kat ? 'selected' : '' }}>{{ $kat }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button type="submit" class="btn btn-dark rounded-pill px-4 flex-grow-1 fw-bold">Filter</button>
                <a href="{{ route('pengeluaran.index') }}" class="btn btn-outline-secondary rounded-pill px-3"><i class="bi bi-arrow-clockwise"></i></a>
            </div>
        </div>
    </form>
</div>

{{-- Table --}}
<div class="table-container">
    <div class="table-responsive">
        <table class="table table-modern mb-0">
            <thead>
                <tr>
                    <th class="ps-4">Tanggal</th>
                    <th>Keterangan</th>
                    <th>Kategori</th>
                    <th>Jumlah</th>
                    <th>Pencatat / Bukti</th>
                    <th class="text-end pe-4">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($pengeluaran as $p)
                <tr>
                    <td class="ps-4">
                        <div class="fw-bold text-dark" style="font-size:0.875rem;">{{ $p->tanggal->format('d M Y') }}</div>
                    </td>
                    <td>
                        <div class="fw-500 text-dark small">{{ $p->keterangan }}</div>
                    </td>
                    <td>
                        @if($p->kategori)
                        <span class="kategori-badge">{{ $p->kategori }}</span>
                        @else
                        <span class="text-muted small">-</span>
                        @endif
                    </td>
                    <td>
                        <div class="fw-900 text-danger" style="font-size:0.9rem;">Rp {{ number_format($p->jumlah, 0, ',', '.') }}</div>
                    </td>
                    <td>
                        <div class="small fw-500 text-muted mb-1"><i class="bi bi-person me-1"></i>{{ $p->user->name ?? 'Sistem' }}</div>
                        @if($p->bukti_nota)
                        <a href="{{ Storage::url($p->bukti_nota) }}" target="_blank" class="badge bg-light text-primary text-decoration-none border"><i class="bi bi-image me-1"></i>Lihat Nota</a>
                        @endif
                    </td>
                    <td class="text-end pe-4">
                        <div class="d-flex justify-content-end gap-1">
                            <a href="{{ route('pengeluaran.edit', $p) }}" class="action-btn edit" title="Edit"><i class="bi bi-pencil"></i></a>
                            <form action="{{ route('pengeluaran.destroy', $p) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus data pengeluaran ini?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn delete" title="Hapus"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-5">
                        <i class="bi bi-inbox fs-1 text-muted opacity-25 d-block mb-3"></i>
                        <span class="text-muted">Belum ada data pengeluaran dicatat.</span>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($pengeluaran->hasPages())
<div class="card-footer bg-transparent border-0 py-4">
    {{ $pengeluaran->links() }}
</div>
@endif
@endsection