@extends('layouts.app')

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

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

    <!-- Header Bar -->
    <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 New Project</h1>
            <p class="text-gray-500 text-sm">Register a new PHLN project</p>
        </div>
        <a href="{{ route('projects.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>

    <!-- Form Card -->
    <div class="bg-white p-6 rounded-lg shadow border border-gray-200">
        <form action="{{ route('projects.store') }}" method="POST" class="space-y-6">
            @csrf

            @if($errors->any())
                <div class="bg-rose-100 border border-rose-400 text-rose-700 px-4 py-3 rounded-lg relative shadow-sm" role="alert">
                    <strong class="font-bold">Gagal Menyimpan: </strong>
                    <ul class="mt-1 list-disc list-inside text-sm space-y-0.5">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Section 1: Basic Information -->
            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">1. Basic Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    
                    <!-- Organization Unit -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Organization Unit *</label>
                        <select name="organization_unit_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 Organization Unit --</option>
                            @foreach($organizationUnits as $unit)
                                <option value="{{ $unit->id }}">
                                    {{ $unit->acronym ? $unit->acronym . ' - ' . $unit->organization_unit : $unit->organization_unit }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Project Name -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Project Name *</label>
                        <input type="text" name="project_name" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500" placeholder="e.g. Health System Strengthening">
                    </div>

                    <!-- Register Number -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Register Number</label>
                        <input type="text" name="register_number" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500" placeholder="e.g. 275DY64A">
                    </div>

                    <!-- MoU Period -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">MoU Period *</label>
                        <input type="text" name="mou_period" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500" placeholder="e.g. Jan 2025 - Dec 2028">
                    </div>

                    <!-- Funding Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Funding Type *</label>
                            <select name="funding_type_id" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                              <option value="">-- Select Funding Type --</option>
                            @foreach($fundingTypes as $type)
                              <option value="{{ $type->id }}">
                            {{ $type->acronym ? $type->acronym . ' - ' . $type->funding_type_name : $type->funding_type_name }}
                              </option>
                            @endforeach
                            </select>
                    </div>

                    <!-- Lender -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Lender / Donor *</label>
                        <select name="lender_id" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Lender --</option>
                            @foreach($lenders as $lender)
                                <option value="{{ $lender->id }}">{{ $lender->lender_name ?? $lender->name }}</option>
                            @endforeach
                        </select>
                    </div>

                </div>
            </div>

            <!-- Section 2: Financial Details -->
           <div>
    <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">2. Financial Details</h3> 
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Total MoU Amount (Rp) *</label>
            <input type="text" inputmode="numeric" name="mou_amount" required value="{{ old('mou_amount') ? number_format((int) old('mou_amount'), 0, ',', '.') : '' }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500 font-semibold text-gray-900 mou-input" placeholder="e.g. 500.000">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Total MoU Amount (USD)</label>
            <input type="text" inputmode="numeric" name="mou_amount_usd" value="{{ old('mou_amount_usd') ? number_format((int) old('mou_amount_usd'), 0, ',', '.') : '' }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500 font-semibold text-gray-900 mou-input" placeholder="e.g. 500.000">
        </div>
    </div>
</div>
            <!-- Section 3: Grant Registration -->
            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">3. Grant Registration</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                    <!-- Grant Registration Status -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Grant Registration Status *</label>
                        <select name="grant_registration_status" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500 bg-gray-50">
                            @foreach($projectStatusOptions as $option)
                                <option value="{{ $option }}" {{ old('grant_registration_status', 'Not Yet Registered') === $option ? 'selected' : '' }}>
                                    {{ $option }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Grant Registration Date -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Grant Registration Date</label>
                        <input type="date" name="grant_registration_date" value="{{ old('grant_registration_date') }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    </div>

                    <!-- Grant Registration Document Link -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Grant Registration Document Link</label>
                        <input type="text" name="grant_registration_link" value="{{ old('grant_registration_link') }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500" placeholder="https://example.com/documents/grant-registration">
                        <p class="mt-1 text-xs text-gray-400">Paste the full URL (including https://) of the official grant registration document.</p>
                    </div>

                </div>
            </div>

            <!-- Submit Button -->
            <div class="pt-6 mt-6 border-t border-gray-200 flex justify-end">
                <button type="submit" id="btnSave" class="bg-teal-700 hover:bg-teal-800 text-white font-medium px-8 py-2.5 rounded-lg shadow-md transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    Save Project
                </button>
            </div>
        </form>
    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const inputs = document.querySelectorAll('.mou-input');
    const form = inputs[0].closest('form');
    const btnSave = document.getElementById('btnSave');
    const requiredSelectors = ['select[name="organization_unit_id"]', 'input[name="project_name"]', 'input[name="mou_period"]', 'select[name="funding_type_id"]', 'select[name="lender_id"]', 'input[name="mou_amount"]'];

    function formatNumber(val) {
        val = val.replace(/[^0-9]/g, '');
        if (!val) return '';
        return parseInt(val).toLocaleString('id-ID');
    }

    function unformatNumber(val) {
        return val.replace(/[^0-9]/g, '');
    }

    function updateButtonState() {
        let allFilled = true;
        requiredSelectors.forEach(function (selector) {
            const el = form.querySelector(selector);
            if (!el || !el.value.trim()) allFilled = false;
        });
        btnSave.disabled = !allFilled;
    }

    form.addEventListener('input', updateButtonState);
    form.addEventListener('change', updateButtonState);
    updateButtonState();

    inputs.forEach(function (input) {
        input.addEventListener('focus', function () {
            this.value = unformatNumber(this.value);
            this.setSelectionRange(this.value.length, this.value.length);
        });

        input.addEventListener('input', function () {
            const pos = this.selectionStart;
            const oldLen = this.value.length;
            this.value = formatNumber(this.value);
            const diff = this.value.length - oldLen;
            this.setSelectionRange(pos + diff, pos + diff);
            updateButtonState();
        });

        input.addEventListener('blur', function () {
            this.value = formatNumber(this.value);
        });
    });

    form.addEventListener('submit', function () {
        inputs.forEach(function (input) {
            input.value = unformatNumber(input.value);
        });
    });
});
</script>
@endpush