@extends('admin.layouts.app')

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

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Tambah Data Anggaran Baru</h2>
            <a href="{{ route('admin.anggaran.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Kembali
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-calculator text-primary me-2"></i>
                        <h5 class="mb-0">Form Tambah Anggaran</h5>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.anggaran.store') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tahun" class="form-label">Tahun Anggaran <span class="text-danger">*</span></label>
                                    <select name="tahun" id="tahun" class="form-control @error('tahun') is-invalid @enderror">
                                        <option value="">-- Pilih Tahun --</option>
                                        @for($year = date('Y'); $year >= 2020; $year--)
                                            <option value="{{ $year }}" {{ old('tahun') == $year ? 'selected' : '' }}>{{ $year }}</option>
                                        @endfor
                                    </select>
                                    @error('tahun')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="mb-3">
                                    <label for="jenis" class="form-label">Jenis Anggaran <span class="text-danger">*</span></label>
                                    <select name="jenis" id="jenis" class="form-control @error('jenis') is-invalid @enderror">
                                        <option value="">-- Pilih Jenis Anggaran --</option>
                                        <option value="Pendapatan" {{ old('jenis') == 'Pendapatan' ? 'selected' : '' }}>Pendapatan</option>
                                        <option value="Belanja" {{ old('jenis') == 'Belanja' ? 'selected' : '' }}>Belanja</option>
                                        <option value="Pembiayaan" {{ old('jenis') == 'Pembiayaan' ? 'selected' : '' }}>Pembiayaan</option>
                                        <option value="Dana Desa" {{ old('jenis') == 'Dana Desa' ? 'selected' : '' }}>Dana Desa</option>
                                        <option value="ADD" {{ old('jenis') == 'ADD' ? 'selected' : '' }}>ADD (Alokasi Dana Desa)</option>
                                        <option value="Bantuan Provinsi" {{ old('jenis') == 'Bantuan Provinsi' ? 'selected' : '' }}>Bantuan Provinsi</option>
                                        <option value="Bantuan Kabupaten" {{ old('jenis') == 'Bantuan Kabupaten' ? 'selected' : '' }}>Bantuan Kabupaten</option>
                                        <option value="Swadaya" {{ old('jenis') == 'Swadaya' ? 'selected' : '' }}>Swadaya</option>
                                    </select>
                                    @error('jenis')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">
                                            Status Aktif
                                        </label>
                                    </div>
                                    <div class="form-text">Data aktif akan ditampilkan di website</div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="total_anggaran" class="form-label">Total Anggaran <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="text" name="total_anggaran" id="total_anggaran" 
                                               value="{{ old('total_anggaran') }}" 
                                               class="form-control @error('total_anggaran') is-invalid @enderror" 
                                               placeholder="0"
                                               onkeyup="formatCurrency(this)"
                                               onchange="formatCurrency(this)">
                                    </div>
                                    <div class="form-text">Masukkan jumlah anggaran dalam rupiah</div>
                                    @error('total_anggaran')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="realisasi" class="form-label">Realisasi</label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="text" name="realisasi" id="realisasi" 
                                               value="{{ old('realisasi') }}" 
                                               class="form-control @error('realisasi') is-invalid @enderror" 
                                               placeholder="0"
                                               onkeyup="formatCurrency(this)"
                                               onchange="formatCurrency(this)">
                                    </div>
                                    <div class="form-text">Kosongkan jika belum ada realisasi</div>
                                    @error('realisasi')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="keterangan" class="form-label">Keterangan</label>
                            <textarea name="keterangan" id="keterangan" rows="4" 
                                      class="form-control @error('keterangan') is-invalid @enderror" 
                                      placeholder="Tuliskan keterangan tambahan tentang anggaran ini...">{{ old('keterangan') }}</textarea>
                            @error('keterangan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Informasi:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>Tahun anggaran harus sesuai dengan periode anggaran yang berlaku</li>
                                        <li>Total anggaran wajib diisi dengan nilai yang valid</li>
                                        <li>Realisasi dapat diisi kemudian setelah ada pelaksanaan</li>
                                        <li>Pastikan jenis anggaran sesuai dengan klasifikasi yang benar</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.anggaran.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Batal
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Simpan Anggaran
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function formatCurrency(input) {
    // Remove all non-digit characters
    let value = input.value.replace(/\D/g, '');
    
    // Add thousands separators
    value = value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    
    // Update input value
    input.value = value;
}

// Auto calculate percentage when both values are filled
document.addEventListener('DOMContentLoaded', function() {
    const totalAnggaran = document.getElementById('total_anggaran');
    const realisasi = document.getElementById('realisasi');
    
    function updatePercentage() {
        const total = parseFloat(totalAnggaran.value.replace(/\./g, '')) || 0;
        const real = parseFloat(realisasi.value.replace(/\./g, '')) || 0;
        
        if (total > 0 && real > 0) {
            const percentage = ((real / total) * 100).toFixed(2);
            const percentageElement = document.getElementById('percentage-info');
            if (percentageElement) {
                percentageElement.textContent = `Realisasi: ${percentage}%`;
                percentageElement.className = percentage > 100 ? 'text-danger' : 'text-success';
            }
        }
    }
    
    totalAnggaran.addEventListener('input', updatePercentage);
    realisasi.addEventListener('input', updatePercentage);
    
    // Add percentage info display
    const realisasiGroup = realisasi.closest('.mb-3');
    const percentageDiv = document.createElement('div');
    percentageDiv.id = 'percentage-info';
    percentageDiv.className = 'small text-muted mt-1';
    realisasiGroup.appendChild(percentageDiv);
});
</script>

<style>
.input-group-text {
    background-color: #f8f9fa;
    border-color: #ced4da;
    font-weight: 500;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.alert-info {
    border-left: 4px solid #007bff;
}
</style>
@endsection