@extends('layouts.app')

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

@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;
    }
    .preview-box {
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        padding: 10px;
        text-align: center;
        background: #f8fafc;
        position: relative;
    }
    .preview-box img {
        max-width: 100%;
        max-height: 200px;
        border-radius: 8px;
        object-fit: contain;
    }
</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">Ubah Data Pengeluaran</h4>
        <p class="text-muted small mb-0">Perbarui rincian, jumlah, atau nota pengeluaran ini.</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.update', $pengeluaran) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <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', $pengeluaran->tanggal->format('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', $pengeluaran->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', $pengeluaran->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 mb-2" style="font-size: 0.7rem;">Biarkan kosong jika tidak ingin mengubah nota.</small>
                        
                        @if($pengeluaran->bukti_nota)
                        <div class="preview-box mt-2">
                            <span class="badge bg-danger position-absolute top-0 end-0 m-2" style="font-size:0.6rem;">Saat ini</span>
                            <a href="{{ Storage::url($pengeluaran->bukti_nota) }}" target="_blank">
                                <img src="{{ Storage::url($pengeluaran->bukti_nota) }}" alt="Bukti Nota">
                            </a>
                            <div class="mt-2">
                                <div class="form-check d-inline-block text-start">
                                    <input class="form-check-input" type="checkbox" id="hapus_nota" name="hapus_nota" value="1">
                                    <label class="form-check-label text-danger small fw-bold" for="hapus_nota">
                                        Hapus gambar ini
                                    </label>
                                </div>
                            </div>
                        </div>
                        @endif
                        
                        @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', $pengeluaran->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-warning rounded-pill px-5 py-2 fw-bold shadow-sm">
                            <i class="bi bi-pencil-square me-2"></i>Perbarui Pengeluaran
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection