@extends('layouts.app')

@section('title', 'Add Activity - 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 Activity</h1>
            <p class="text-gray-500 text-sm">Input new activity details and budget allocations</p>
        </div>
        <a href="{{ route('activities.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">
        <script>
            window.BUDGET_FIELDS = { 2025: 'budget_2025', 2026: 'budget_2026', 2027: 'budget_plan_2027', 2028: 'budget_plan_2028' };
        </script>
        <form action="{{ route('activities.store') }}" method="POST" class="space-y-6"
            x-data="{
                year: {{ old('execution_year', date('Y')) }},
                values: {
                    budget_2025: {{ old('budget_2025', 0) }},
                    budget_2026: {{ old('budget_2026', 0) }},
                    budget_plan_2027: {{ old('budget_plan_2027', 0) }},
                    budget_plan_2028: {{ old('budget_plan_2028', 0) }}
                },
                get field() { return window.BUDGET_FIELDS[this.year] || 'budget_2026'; }
            }">
            @csrf

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

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Activity Name *</label>
                        <input type="text" name="activity_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. Workshop Monitoring & Evaluasi">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Execution Year *</label>
                        <input type="number" name="execution_year" x-model.number="year" value="{{ old('execution_year', date('Y')) }}" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    </div>

                    <!-- Activity Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Activity Type</label>
                        <select name="activity_type" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Activity Type --</option>
                            @foreach($activityTypes as $type)
                                <option value="{{ $type->activity_name }}" {{ old('activity_type') == $type->activity_name ? 'selected' : '' }}>
                                    {{ $type->activity_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- Section 2: Budget & Classification -->
            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">2. Classification & Budget</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                    
                    <!-- Program Code -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Program Code</label>
                        <select id="program_code_select" name="program_code" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Program --</option>
                            @foreach($programs->unique('program_code') as $prog)
                                <option value="{{ $prog->program_code }}" {{ old('program_code') == $prog->program_code ? 'selected' : '' }}>
                                    {{ $prog->program_code }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Responsible Team -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Responsible Team</label>
                        <select id="responsible_team_select" name="responsible_team" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Responsible Team --</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
                        <input type="text" name="location" value="{{ old('location') }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500" placeholder="e.g. Jakarta / Nasional">
                    </div>

                    <div class="bg-teal-50 p-4 rounded-lg border border-teal-100">
                        <label class="block text-sm font-bold text-teal-900 mb-1">
                            Budget <span x-text="year"></span> (Rp) *
                        </label>
                        <input type="number" step="0.01" required x-model.number="values[field]" :name="field"
                            class="w-full border-teal-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                        <p class="text-[11px] text-teal-700/70 mt-1.5">Nomor disimpan ke kolom <span class="font-mono" x-text="field"></span> sesuai tahun eksekusi.</p>
                    </div>

                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Budget Plan 2027 (Rp)</label>
                        <input type="number" step="0.01" name="budget_plan_2027" value="{{ old('budget_plan_2027', 0) }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    </div>

                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Budget Plan 2028 (Rp)</label>
                        <input type="number" step="0.01" name="budget_plan_2028" value="{{ old('budget_plan_2028', 0) }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    </div>
                </div>
            </div>

            <!-- Section 3: Indicators & Target -->
            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">3. Indicators & Targets</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Target Volume</label>
                        <input type="number" step="0.01" name="target_volume" value="{{ old('target_volume', 0) }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    </div>

                    <!-- Target Unit (Dropdown Dinamis m_unit_of_measure) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Target Unit</label>
                        <select name="target_unit" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Unit --</option>
                            @foreach($targetUnits as $unit)
                                <option value="{{ $unit->satuan }}" {{ old('target_unit') == $unit->satuan ? 'selected' : '' }}>
                                    {{ $unit->satuan }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Thematic APBN (Dropdown Dinamis m_thematic_apbn) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Thematic APBN</label>
                        <select name="thematic_apbn" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Thematic APBN --</option>
                            @foreach($thematicApbns as $thematic)
                                <option value="{{ $thematic->name }}" {{ old('thematic_apbn') == $thematic->name ? 'selected' : '' }}>
                                    {{ $thematic->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Status Kegiatan (Dropdown Dinamis m_activity_status) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                        <select name="status_id" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Status --</option>
                            @foreach($activityStatuses as $status)
                                <option value="{{ $status->id }}" {{ old('status_id') == $status->id ? 'selected' : '' }}>
                                    {{ $status->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">IKK Code</label>
                        <select name="ikk_code" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select IKK --</option>
                            @foreach($indicatorGroups['ikk'] as $ind)
                                <option value="{{ $ind->code }}" {{ old('ikk_code') == $ind->code ? 'selected' : '' }}>
                                    {{ $ind->code }} - {{ $ind->description }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">IKP Code</label>
                        <select name="ikp_code" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select IKP --</option>
                            @foreach($indicatorGroups['ikp'] as $ind)
                                <option value="{{ $ind->code }}" {{ old('ikp_code') == $ind->code ? 'selected' : '' }}>
                                    {{ $ind->code }} - {{ $ind->description }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">ISS Code</label>
                        <select name="iss_code" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select ISS --</option>
                            @foreach($indicatorGroups['iss'] as $ind)
                                <option value="{{ $ind->code }}" {{ old('iss_code') == $ind->code ? 'selected' : '' }}>
                                    {{ $ind->code }} - {{ $ind->description }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Transformation Pillar</label>
                        <select name="transformation_pillar" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Pillar --</option>
                            @foreach($transformationPillars as $pillar)
                                <option value="{{ $pillar->name }}" {{ old('transformation_pillar') == $pillar->name ? 'selected' : '' }}>
                                    {{ $pillar->code ? "($pillar->code) " : '' }}{{ $pillar->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="mt-5">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Output Description</label>
                    <textarea name="output_description" rows="3" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500" placeholder="Deskripsi output kegiatan...">{{ old('output_description') }}</textarea>
                </div>
            </div>

            <!-- Submit Button -->
            <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 Activity
                </button>
            </div>
        </form>
    </div>

</div>

<!-- Script Cascading Dropdown Program -> Responsible Team -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const programTeamMap = @json($programs->groupBy('program_code')->map(fn($group) => $group->pluck('responsible_unit')->filter()->unique()->values()));
        
        const programSelect = document.getElementById('program_code_select');
        const responsibleSelect = document.getElementById('responsible_team_select');
        const oldResponsible = @js(old('responsible_team'));

        function updateResponsibleTeams() {
            const selectedProgram = programSelect.value;
            responsibleSelect.innerHTML = '<option value="">-- Select Responsible Team --</option>';

            if (selectedProgram && programTeamMap[selectedProgram]) {
                const teams = programTeamMap[selectedProgram];
                teams.forEach(team => {
                    const option = document.createElement('option');
                    option.value = team;
                    option.textContent = team;
                    if (oldResponsible === team) {
                        option.selected = true;
                    }
                    responsibleSelect.appendChild(option);
                });

                if (teams.length === 1) {
                    responsibleSelect.selectedIndex = 1;
                }
            }
        }

        programSelect.addEventListener('change', updateResponsibleTeams);

        if (programSelect.value) {
            updateResponsibleTeams();
        }
    });
</script>
@endsection