@extends('admin.layouts.app')

@section('title', 'Edit 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">Edit Data Anggaran</h2>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.anggaran.show', $anggaran) }}" class="btn btn-info">
                    <i class="fas fa-eye me-2"></i>Detail
                </a>
                <a href="{{ route('admin.anggaran.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Kembali
                </a>
            </div>
        </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-edit text-primary me-2"></i>
                        <h5 class="mb-0">Form Edit Anggaran</h5>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.anggaran.update', $anggaran) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <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', $anggaran->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', $anggaran->jenis) == 'Pendapatan' ? 'selected' : '' }}>Pendapatan</option>
                                        <option value="Belanja" {{ old('jenis', $anggaran->jenis) == 'Belanja' ? 'selected' : '' }}>Belanja</option>
                                        <option value="Pembiayaan" {{ old('jenis', $anggaran->jenis) == 'Pembiayaan' ? 'selected' : '' }}>Pembiayaan</option>
                                        <option value="Dana Desa" {{ old('jenis', $anggaran->jenis) == 'Dana Desa' ? 'selected' : '' }}>Dana Desa</option>
                                        <option value="ADD" {{ old('jenis', $anggaran->jenis) == 'ADD' ? 'selected' : '' }}>ADD (Alokasi Dana Desa)</option>
                                        <option value="Bantuan Provinsi" {{ old('jenis', $anggaran->jenis) == 'Bantuan Provinsi' ? 'selected' : '' }}>Bantuan Provinsi</option>
                                        <option value="Bantuan Kabupaten" {{ old('jenis', $anggaran->jenis) == 'Bantuan Kabupaten' ? 'selected' : '' }}>Bantuan Kabupaten</option>
                                        <option value="Swadaya" {{ old('jenis', $anggaran->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', $anggaran->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', number_format($anggaran->total_anggaran, 0, ',', '.')) }}" 
                                               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', $anggaran->realisasi ? number_format($anggaran->realisasi, 0, ',', '.') : '') }}" 
                                               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>

                                @if($anggaran->total_anggaran > 0)
                                    <div class="mb-3">
                                        <div class="card bg-light">
                                            <div class="card-body py-2">
                                                @php
                                                    $percentage = $anggaran->realisasi && $anggaran->total_anggaran 
                                                        ? ($anggaran->realisasi / $anggaran->total_anggaran) * 100 
                                                        : 0;
                                                @endphp
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <small class="text-muted">Persentase Realisasi:</small>
                                                    <span class="badge {{ $percentage > 100 ? 'bg-warning' : ($percentage > 80 ? 'bg-success' : 'bg-primary') }}">
                                                        {{ number_format($percentage, 2) }}%
                                                    </span>
                                                </div>
                                                <div class="progress mt-2" style="height: 8px;">
                                                    <div class="progress-bar {{ $percentage > 100 ? 'bg-warning' : ($percentage > 80 ? 'bg-success' : 'bg-primary') }}" 
                                                         role="progressbar" 
                                                         style="width: {{ min($percentage, 100) }}%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </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', $anggaran->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-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <strong>Perhatian:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>Perubahan data anggaran akan mempengaruhi laporan keuangan</li>
                                        <li>Pastikan data yang diubah sudah sesuai dengan dokumen resmi</li>
                                        <li>Realisasi tidak boleh melebihi 150% dari total anggaran</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>Update 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');
    if (!document.getElementById('percentage-info')) {
        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-warning {
    border-left: 4px solid #ffc107;
}

.progress {
    background-color: #e9ecef;
}
</style>
@endsection