@extends('layouts.app')

@section('title', 'Tambah Pengeluaran')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <a href="{{ route('pengeluarans.index') }}" class="btn btn-secondary">
                        <i class="mdi mdi-arrow-left me-1"></i> Kembali
                    </a>
                </div>
                <h4 class="page-title">Tambah Pengeluaran</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('pengeluarans.index') }}">Pengeluaran</a></li>
                    <li class="breadcrumb-item active">Tambah</li>
                </ol>
            </div>
        </div>
    </div>

    <form action="{{ route('pengeluarans.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-lg-8">
                <!-- Informasi Dasar -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-information-outline me-2"></i>
                            Informasi Dasar
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tanggal_transaksi" class="form-label">Tanggal Transaksi <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('tanggal_transaksi') is-invalid @enderror" 
                                           id="tanggal_transaksi" name="tanggal_transaksi" 
                                           value="{{ old('tanggal_transaksi', date('Y-m-d')) }}" required>
                                    @error('tanggal_transaksi')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="kategori_id" class="form-label">Kategori <span class="text-danger">*</span></label>
                                    <select class="form-select @error('kategori_id') is-invalid @enderror" 
                                            id="kategori_id" name="kategori_id" required>
                                        <option value="">Pilih Kategori</option>
                                        @foreach($kategoris as $kategori)
                                            <option value="{{ $kategori->id }}" {{ old('kategori_id') == $kategori->id ? 'selected' : '' }}>
                                                {{ $kategori->nama_kategori }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('kategori_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="deskripsi" class="form-label">Deskripsi <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('deskripsi') is-invalid @enderror" 
                                   id="deskripsi" name="deskripsi" 
                                   value="{{ old('deskripsi') }}" 
                                   placeholder="Deskripsi pengeluaran..." required>
                            @error('deskripsi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="nama_vendor" class="form-label">Nama Vendor/Penyedia</label>
                                    <input type="text" class="form-control @error('nama_vendor') is-invalid @enderror" 
                                           id="nama_vendor" name="nama_vendor" 
                                           value="{{ old('nama_vendor') }}" 
                                           placeholder="Nama vendor atau penyedia...">
                                    @error('nama_vendor')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="kontak_vendor" class="form-label">Kontak Vendor</label>
                                    <input type="text" class="form-control @error('kontak_vendor') is-invalid @enderror" 
                                           id="kontak_vendor" name="kontak_vendor" 
                                           value="{{ old('kontak_vendor') }}" 
                                           placeholder="No. telp/email vendor...">
                                    @error('kontak_vendor')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Informasi Keuangan -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-cash-multiple me-2"></i>
                            Informasi Keuangan
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="jumlah" class="form-label">Jumlah Dasar <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" step="0.01" min="0" required>
                                    </div>
                                    @error('jumlah')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="ppn" class="form-label">PPN</label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="number" class="form-control @error('ppn') is-invalid @enderror" 
                                               id="ppn" name="ppn" 
                                               value="{{ old('ppn', 0) }}" 
                                               placeholder="0" step="0.01" min="0">
                                    </div>
                                    @error('ppn')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="pph" class="form-label">PPh</label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="number" class="form-control @error('pph') is-invalid @enderror" 
                                               id="pph" name="pph" 
                                               value="{{ old('pph', 0) }}" 
                                               placeholder="0" step="0.01" min="0">
                                    </div>
                                    @error('pph')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="biaya_lain" class="form-label">Biaya Lain</label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="number" class="form-control @error('biaya_lain') is-invalid @enderror" 
                                               id="biaya_lain" name="biaya_lain" 
                                               value="{{ old('biaya_lain', 0) }}" 
                                               placeholder="0" step="0.01" min="0">
                                    </div>
                                    @error('biaya_lain')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="metode_pembayaran" class="form-label">Metode Pembayaran <span class="text-danger">*</span></label>
                                    <select class="form-select @error('metode_pembayaran') is-invalid @enderror" 
                                            id="metode_pembayaran" name="metode_pembayaran" required>
                                        <option value="">Pilih Metode</option>
                                        <option value="tunai" {{ old('metode_pembayaran') == 'tunai' ? 'selected' : '' }}>Tunai</option>
                                        <option value="transfer" {{ old('metode_pembayaran') == 'transfer' ? 'selected' : '' }}>Transfer Bank</option>
                                        <option value="kartu_kredit" {{ old('metode_pembayaran') == 'kartu_kredit' ? 'selected' : '' }}>Kartu Kredit</option>
                                        <option value="e_wallet" {{ old('metode_pembayaran') == 'e_wallet' ? 'selected' : '' }}>E-Wallet</option>
                                        <option value="cek" {{ old('metode_pembayaran') == 'cek' ? 'selected' : '' }}>Cek</option>
                                        <option value="lainnya" {{ old('metode_pembayaran') == 'lainnya' ? 'selected' : '' }}>Lainnya</option>
                                    </select>
                                    @error('metode_pembayaran')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="nomor_referensi" class="form-label">Nomor Referensi</label>
                                    <input type="text" class="form-control @error('nomor_referensi') is-invalid @enderror" 
                                           id="nomor_referensi" name="nomor_referensi" 
                                           value="{{ old('nomor_referensi') }}" 
                                           placeholder="No. ref/invoice/kwitansi...">
                                    @error('nomor_referensi')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Total Calculation Display -->
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-light border">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <strong>Total yang Dibayar:</strong>
                                        </div>
                                        <div class="col-sm-6 text-end">
                                            <span id="total_display" class="fs-16 fw-bold text-danger">Rp 0</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- File Bukti -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-file-document-multiple me-2"></i>
                            File Bukti
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="file_bukti" class="form-label">Upload File Bukti</label>
                            <input type="file" class="form-control @error('file_bukti') is-invalid @enderror" 
                                   id="file_bukti" name="file_bukti[]" 
                                   accept=".jpg,.jpeg,.png,.pdf" multiple>
                            <div class="form-text">
                                Format yang diizinkan: JPG, PNG, PDF. Maksimal 2MB per file.
                            </div>
                            @error('file_bukti')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Catatan -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-note-text me-2"></i>
                            Catatan
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <textarea class="form-control @error('catatan') is-invalid @enderror" 
                                      id="catatan" name="catatan" rows="4"
                                      placeholder="Catatan tambahan...">{{ old('catatan') }}</textarea>
                            @error('catatan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Status & Pengaturan -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-cog me-2"></i>
                            Status & Pengaturan
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                            <select class="form-select @error('status') is-invalid @enderror" 
                                    id="status" name="status" required>
                                <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="disetujui" {{ old('status') == 'disetujui' ? 'selected' : '' }}>Disetujui</option>
                                <option value="dibayar" {{ old('status') == 'dibayar' ? 'selected' : '' }}>Dibayar</option>
                                <option value="selesai" {{ old('status') == 'selesai' ? 'selected' : '' }}>Selesai</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="prioritas" class="form-label">Prioritas <span class="text-danger">*</span></label>
                            <select class="form-select @error('prioritas') is-invalid @enderror" 
                                    id="prioritas" name="prioritas" required>
                                <option value="rendah" {{ old('prioritas') == 'rendah' ? 'selected' : '' }}>Rendah</option>
                                <option value="normal" {{ old('prioritas', 'normal') == 'normal' ? 'selected' : '' }}>Normal</option>
                                <option value="tinggi" {{ old('prioritas') == 'tinggi' ? 'selected' : '' }}>Tinggi</option>
                                <option value="urgent" {{ old('prioritas') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                            </select>
                            @error('prioritas')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="tanggal_jatuh_tempo" class="form-label">Tanggal Jatuh Tempo</label>
                            <input type="date" class="form-control @error('tanggal_jatuh_tempo') is-invalid @enderror" 
                                   id="tanggal_jatuh_tempo" name="tanggal_jatuh_tempo" 
                                   value="{{ old('tanggal_jatuh_tempo') }}">
                            @error('tanggal_jatuh_tempo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Recurring Settings -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-repeat me-2"></i>
                            Pengaturan Recurring
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="recurring" class="form-label">Jenis Recurring <span class="text-danger">*</span></label>
                            <select class="form-select @error('recurring') is-invalid @enderror" 
                                    id="recurring" name="recurring" required>
                                <option value="tidak" {{ old('recurring', 'tidak') == 'tidak' ? 'selected' : '' }}>Tidak Berulang</option>
                                <option value="harian" {{ old('recurring') == 'harian' ? 'selected' : '' }}>Harian</option>
                                <option value="mingguan" {{ old('recurring') == 'mingguan' ? 'selected' : '' }}>Mingguan</option>
                                <option value="bulanan" {{ old('recurring') == 'bulanan' ? 'selected' : '' }}>Bulanan</option>
                                <option value="tahunan" {{ old('recurring') == 'tahunan' ? 'selected' : '' }}>Tahunan</option>
                            </select>
                            @error('recurring')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3" id="recurring_date_container" style="display: none;">
                            <label for="tanggal_recurring_berikutnya" class="form-label">Tanggal Recurring Berikutnya</label>
                            <input type="date" class="form-control @error('tanggal_recurring_berikutnya') is-invalid @enderror" 
                                   id="tanggal_recurring_berikutnya" name="tanggal_recurring_berikutnya" 
                                   value="{{ old('tanggal_recurring_berikutnya') }}">
                            @error('tanggal_recurring_berikutnya')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="mdi mdi-content-save me-1"></i> Simpan Pengeluaran
                            </button>
                            <a href="{{ route('pengeluarans.index') }}" class="btn btn-secondary">
                                <i class="mdi mdi-arrow-left me-1"></i> Batal
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Calculate total when amounts change
    const jumlahInput = document.getElementById('jumlah');
    const ppnInput = document.getElementById('ppn');
    const pphInput = document.getElementById('pph');
    const biayaLainInput = document.getElementById('biaya_lain');
    const totalDisplay = document.getElementById('total_display');

    function calculateTotal() {
        const jumlah = parseFloat(jumlahInput.value) || 0;
        const ppn = parseFloat(ppnInput.value) || 0;
        const pph = parseFloat(pphInput.value) || 0;
        const biayaLain = parseFloat(biayaLainInput.value) || 0;
        
        const total = jumlah + ppn + pph + biayaLain;
        totalDisplay.textContent = 'Rp ' + total.toLocaleString('id-ID');
    }

    [jumlahInput, ppnInput, pphInput, biayaLainInput].forEach(input => {
        input.addEventListener('input', calculateTotal);
    });

    // Show/hide recurring date based on recurring selection
    const recurringSelect = document.getElementById('recurring');
    const recurringDateContainer = document.getElementById('recurring_date_container');

    function toggleRecurringDate() {
        if (recurringSelect.value !== 'tidak') {
            recurringDateContainer.style.display = 'block';
        } else {
            recurringDateContainer.style.display = 'none';
        }
    }

    recurringSelect.addEventListener('change', toggleRecurringDate);
    
    // Initial calculation and toggle
    calculateTotal();
    toggleRecurringDate();
});
</script>
@endpush
@endsection