@extends('layouts.app')

@section('title', 'Add Realization - SIPHLN 2026')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <div class="flex justify-between items-center bg-white p-5 rounded-lg shadow border border-gray-200">
        <div>
            <h1 class="text-xl font-bold text-gray-800">Add Quarterly Realization</h1>
            <p class="text-gray-500 text-sm">Input realization data for financial & physical achievements</p>
        </div>
        <a href="{{ route('realizations.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium px-4 py-2 rounded-lg shadow transition">Cancel</a>
    </div>

    <div class="bg-white p-6 rounded-lg shadow border border-gray-200">
        @if ($errors->any())
            <div class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow-sm">
                <ul class="list-disc list-inside space-y-1 text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('realizations.store') }}" method="POST" class="space-y-6">
            @csrf

            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">1. Target Activity & Quarter</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Target Activity *</label>
                        <select name="activity_id" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500 bg-gray-50">
                            <option value="">-- Select Activity --</option>
                            @foreach($activities as $act)
                                <option value="{{ $act->id }}">
                                    {{ $act->activity_name }} ({{ $act->project->project_name ?? 'No Project' }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Quarter (Triwulan) *</label>
                        <select name="quarter" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="1">Triwulan 1 (TW 1)</option>
                            <option value="2">Triwulan 2 (TW 2)</option>
                            <option value="3">Triwulan 3 (TW 3)</option>
                            <option value="4">Triwulan 4 (TW 4)</option>
                        </select>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">2. Achievements</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div class="bg-emerald-50 p-4 rounded-lg border border-emerald-100">
                        <label class="block text-sm font-bold text-emerald-900 mb-1">Realized Amount (Rp) *</label>
                        <input type="text" inputmode="numeric" name="realized_amount" id="realized_amount" required value="{{ old('realized_amount') }}" placeholder="0" autocomplete="off" class="w-full border-emerald-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                        <p id="budget-info" class="text-xs text-emerald-700 mt-1.5">Pilih kegiatan untuk melihat budget kegiatannya.</p>
                        @error('realized_amount')
                            <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="bg-sky-50 p-4 rounded-lg border border-sky-100">
                        <label class="block text-sm font-bold text-sky-900 mb-1">Realized Progress (%) *</label>
                        <input type="text" name="realized_percentage" id="realized_percentage" readonly value="0.00" placeholder="0.00" class="w-full border-sky-300 rounded-lg p-2.5 border bg-sky-100 cursor-not-allowed focus:ring-teal-500 focus:border-teal-500">
                        <p class="text-xs text-sky-700 mt-1.5">Terhitung otomatis dari Realized Amount terhadap budget kegiatan.</p>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">3. Notes & Issues</h3>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Justification / Remarks</label>
                        <textarea name="justification" rows="2" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500" placeholder="Catatan pencapaian..."></textarea>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Problem / Issues</label>
                        <textarea name="bottlenecks" rows="2" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500" placeholder="Kendala atau hambatan di lapangan..."></textarea>
                    </div>
                </div>
            </div>

            <div class="pt-6 mt-6 border-t border-gray-200 flex justify-end">
                <button type="submit" class="bg-teal-700 hover:bg-teal-800 text-white font-medium px-8 py-2.5 rounded-lg shadow-md transition">
                    Save Realization
                </button>
            </div>
        </form>
    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var stateMap = @json($realizationState);

    var form = document.querySelector('form');
    var amountInput = document.getElementById('realized_amount');
    var pctInput = document.getElementById('realized_percentage');
    var activitySelect = document.querySelector('select[name="activity_id"]');
    var budgetInfo = document.getElementById('budget-info');

    function rawValue(input) {
        return (input.value || '').replace(/[^\d]/g, '');
    }

    function formatThousand(raw) {
        return raw ? raw.replace(/\B(?=(\d{3})+(?!\d))/g, '.') : '';
    }

    function num(raw) {
        return parseFloat(raw || '0') || 0;
    }

    function currentState() {
        var aid = activitySelect ? activitySelect.value : '';
        return stateMap[aid] || { budget: 0, used: 0, year: '' };
    }

    function updatePercentage() {
        var budget = currentState().budget;
        var amount = num(rawValue(amountInput));
        var pct = budget > 0 ? Math.min(100, (amount / budget) * 100) : 0;
        pctInput.value = pct.toFixed(2);
    }

    function updateBudgetInfo() {
        var state = currentState();
        var amount = num(rawValue(amountInput));
        var budget = num(state.budget);
        var remaining = budget - state.used - amount;

        if (budget <= 0) {
            budgetInfo.textContent = 'Kegiatan belum memiliki budget' + (state.year ? ' ' + state.year : '') + '.';
            budgetInfo.className = 'text-xs text-amber-700 mt-1.5';
            return;
        }

        budgetInfo.className = 'text-xs mt-1.5 ' + (remaining < 0 ? 'text-red-600 font-bold' : 'text-emerald-700');
        budgetInfo.textContent = 'Budget' + (state.year ? ' ' + state.year : '') + ': Rp ' + formatThousand(String(Math.floor(budget)))
            + ' — Sudah direalisasi: Rp ' + formatThousand(String(Math.floor(state.used)))
            + ' — Sisa: Rp ' + formatThousand(String(Math.max(0, Math.floor(remaining))))
            + (remaining < 0 ? ' (melebihi budget!)' : '');
    }

    amountInput.addEventListener('input', function () {
        this.value = formatThousand(rawValue(this));
        updatePercentage();
        updateBudgetInfo();
    });

    if (activitySelect) {
        activitySelect.addEventListener('change', function () {
            updatePercentage();
            updateBudgetInfo();
        });
    }

    form.addEventListener('submit', function () {
        amountInput.value = rawValue(amountInput);
    });

    amountInput.value = formatThousand(rawValue(amountInput));
    updatePercentage();
    updateBudgetInfo();
});
</script>
@endpush