@extends('layouts.master')

@section('title', 'Pengeluaran')
@section('page-title', 'Pengeluaran Operasional')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-1">Pengeluaran</h4>
            <small class="text-muted">Catat dan monitor pengeluaran operasional layanan internet.</small>
        </div>
        <div>
            <a href="{{ route('pengeluaran.create') }}" class="btn btn-primary">
                <i class="bx bx-plus"></i> Tambah Pengeluaran
            </a>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Filter --}}
    <form class="row g-2 mb-3" method="get">
        <div class="col-md-3">
            <label class="form-label mb-0">Periode</label>
            <input type="month" name="periode" value="{{ $periode }}" class="form-control">
        </div>
        <div class="col-md-3">
            <label class="form-label mb-0">Kategori</label>
            <select name="kategori_id" class="form-select">
                <option value="">Semua Kategori</option>
                @foreach ($kategoriList as $k)
                    <option value="{{ $k->id }}" @selected($kategoriId == $k->id)>
                        {{ $k->nama }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button class="btn btn-outline-primary me-2">
                <i class="bx bx-filter-alt"></i> Filter
            </button>
            <a href="{{ route('pengeluaran.index') }}" class="btn btn-outline-secondary">
                Reset
            </a>
        </div>
        <div class="col-md-3 d-flex align-items-end justify-content-end">
            <div class="text-end">
                <div class="text-muted small">Total Pengeluaran Periode Ini</div>
                <div class="fs-5 fw-semibold">
                    Rp {{ number_format($totalNominal, 0, ',', '.') }}
                </div>
            </div>
        </div>
    </form>

    <div class="card">
        <div class="card-body table-responsive">
            <table class="table table-sm align-middle">
                <thead>
                    <tr>
                        <th style="width: 110px;">Tanggal</th>
                        <th>Kategori</th>
                        <th>Keterangan</th>
                        <th>Metode</th>
                        <th>Referensi</th>
                        <th class="text-end" style="width: 140px;">Nominal</th>
                        <th style="width: 120px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($pengeluaran as $p)
                        <tr>
                            <td>{{ $p->tanggal?->format('d-m-Y') }}</td>
                            <td>{{ $p->kategori->nama ?? '-' }}</td>
                            <td>
                                {{ \Illuminate\Support\Str::limit($p->keterangan, 60) ?? '-' }}
                            </td>
                            <td>{{ $p->metode ?? '-' }}</td>
                            <td>{{ $p->referensi ?? '-' }}</td>
                            <td class="text-end">
                                Rp {{ number_format($p->nominal, 0, ',', '.') }}
                            </td>
                            <td>
                                <a href="{{ route('pengeluaran.edit', $p->id) }}" class="btn btn-sm btn-warning mb-1">
                                    <i class="bx bx-edit"></i>
                                </a>
                                <form action="{{ route('pengeluaran.destroy', $p->id) }}" method="post" class="d-inline"
                                    onsubmit="return confirm('Hapus data pengeluaran ini?')">
                                    @csrf
                                    @method('delete')
                                    <button class="btn btn-sm btn-danger mb-1">
                                        <i class="bx bx-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted">
                                Belum ada data pengeluaran untuk periode ini.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            {{ $pengeluaran->withQueryString()->links() }}
        </div>
    </div>
@endsection

@section('scripts')
    
@endsection