@extends('layouts.app')

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

@push('styles')
<style>
    .form-container {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #f1f5f9;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        padding: 30px;
    }
    .form-label {
        font-weight: 700;
        font-size: 0.85rem;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }
    .form-control, .form-select {
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: all 0.2s;
        background-color: #f8fafc;
    }
    .form-control:focus, .form-select:focus {
        background-color: #fff;
        border-color: #dc2626;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
    }
    .input-group-text {
        border-radius: 12px 0 0 12px;
        border: 1px solid #e2e8f0;
        border-right: 0;
        background: #f8fafc;
        font-weight: 800;
        color: #64748b;
    }
    .input-group .form-control {
        border-radius: 0 12px 12px 0;
        border-left: 0;
    }
    .input-group .form-control:focus {
        border-left: 1px solid #dc2626;
    }
</style>
@endpush

@section('content')
<div class="row mb-4 align-items-center">
    <div class="col-md-6">
        <h4 class="fw-900 text-dark mb-1">Catat Pengeluaran Baru</h4>
        <p class="text-muted small mb-0">Masukkan detail pengeluaran kas organisasi beserta bukti notanya.</p>
    </div>
    <div class="col-md-6 text-md-end mt-3 mt-md-0">
        <a href="{{ route('pengeluaran.index') }}" class="btn btn-light rounded-pill px-4 fw-bold shadow-sm">
            <i class="bi bi-arrow-left me-2"></i>Kembali
        </a>
    </div>
</div>

<div class="row">
    <div class="col-xl-8">
        <div class="form-container fade-in">
            <form action="{{ route('pengeluaran.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row g-4">
                    <div class="col-md-6">
                        <label for="tanggal" class="form-label">Tanggal <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('tanggal') is-invalid @enderror" id="tanggal" name="tanggal" value="{{ old('tanggal', date('Y-m-d')) }}" required>
                        @error('tanggal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label for="jumlah" class="form-label">Jumlah (Rp) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number" class="form-control @error('jumlah') is-invalid @enderror" id="jumlah" name="jumlah" value="{{ old('jumlah') }}" placeholder="0" min="0" required>
                        </div>
                        @error('jumlah')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-6">
                        <label for="kategori" class="form-label">Kategori</label>
                        <input type="text" class="form-control @error('kategori') is-invalid @enderror" id="kategori" name="kategori" list="kategoriList" value="{{ old('kategori') }}" placeholder="Contoh: Operasional">
                        <datalist id="kategoriList">
                            @foreach($kategoriList as $kat)
                                <option value="{{ $kat }}">
                            @endforeach
                        </datalist>
                        <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Anda bisa mengetik kategori baru atau memilih dari daftar.</small>
                        @error('kategori')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-6">
                        <label for="bukti_nota" class="form-label">Bukti Nota / Kuitansi</label>
                        <input class="form-control @error('bukti_nota') is-invalid @enderror" type="file" id="bukti_nota" name="bukti_nota" accept="image/png, image/jpeg, image/jpg">
                        <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Format gambar JPG/PNG, maks 2MB (Opsional).</small>
                        @error('bukti_nota')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12">
                        <label for="keterangan" class="form-label">Keterangan / Rincian <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('keterangan') is-invalid @enderror" id="keterangan" name="keterangan" rows="3" placeholder="Masukkan rincian pengeluaran..." required>{{ old('keterangan') }}</textarea>
                        @error('keterangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12 mt-5 text-end">
                        <button type="submit" class="btn btn-danger rounded-pill px-5 py-2 fw-bold shadow-sm">
                            <i class="bi bi-save me-2"></i>Simpan Pengeluaran
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection