@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Edit Badge: {{ $badge->name }}</h1>
        <x-ui.buttons.secondary href="{{ route('admin.badges.index') }}" class="w-full sm:w-auto text-center">
            Back to Badges
        </x-ui.buttons.secondary>
    </div>
    
    <x-ui.layout.card>
        <form method="POST" action="{{ route('admin.badges.update', $badge) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <x-ui.form.label for="name" value="Name" />
                    <x-ui.form.input id="name" name="name" type="text" value="{{ old('name', $badge->name) }}" required autofocus />
                    <x-ui.form.error :messages="$errors->get('name')" />
                </div>
                
                <div>
                    <x-ui.form.label for="criteria_type" value="Criteria Type" />
                    <select id="criteria_type" name="criteria_type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">Select Criteria Type</option>
                        <option value="tier" {{ old('criteria_type', $badge->criteria_type) == 'tier' ? 'selected' : '' }}>Tier</option>
                        <option value="module" {{ old('criteria_type', $badge->criteria_type) == 'module' ? 'selected' : '' }}>Module</option>
                        <option value="assessment" {{ old('criteria_type', $badge->criteria_type) == 'assessment' ? 'selected' : '' }}>Assessment</option>
                    </select>
                    <x-ui.form.error :messages="$errors->get('criteria_type')" />
                </div>
            </div>
            
            <div class="mb-6">
                <x-ui.form.label for="criteria_id" value="Criteria Item" />
                <select id="criteria_id" name="criteria_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Select Criteria Item</option>
                    @if(old('criteria_type', $badge->criteria_type) == 'tier')
                        @foreach($tiers as $tier)
                            <option value="{{ $tier->id }}" {{ old('tier_id', $badge->tier_id) == $tier->id ? 'selected' : '' }}>{{ $tier->name }}</option>
                        @endforeach
                    @elseif(old('criteria_type', $badge->criteria_type) == 'module')
                        @foreach($modules as $module)
                            <option value="{{ $module->id }}" {{ old('module_id', $badge->module_id) == $module->id ? 'selected' : '' }}>{{ $module->name }}</option>
                        @endforeach
                    @elseif(old('criteria_type', $badge->criteria_type) == 'assessment')
                        @foreach($assessments as $assessment)
                            <option value="{{ $assessment->id }}" {{ old('assessment_id', $badge->assessment_id) == $assessment->id ? 'selected' : '' }}>{{ $assessment->name }}</option>
                        @endforeach
                    @endif
                </select>
                <x-ui.form.error :messages="$errors->get('criteria_id')" />
                <x-ui.form.error :messages="$errors->get('module_id')" />
                <x-ui.form.error :messages="$errors->get('tier_id')" />
                <x-ui.form.error :messages="$errors->get('assessment_id')" />
                
                <!-- Hidden fields for specific criteria types -->
                <input type="hidden" id="module_id" name="module_id" value="{{ old('module_id', $badge->module_id) }}">
                <input type="hidden" id="tier_id" name="tier_id" value="{{ old('tier_id', $badge->tier_id) }}">
                <input type="hidden" id="assessment_id" name="assessment_id" value="{{ old('assessment_id', $badge->assessment_id) }}">
            </div>
            
            <div class="mb-6">
                <x-ui.form.label for="description" value="Description" />
                <x-ui.form.textarea id="description" name="description" rows="3">{{ old('description', $badge->description) }}</x-ui.form.textarea>
                <x-ui.form.error :messages="$errors->get('description')" />
            </div>
            
            <div class="mb-6">
                <x-ui.form.label for="icon" value="Icon (Image or SVG)" />
                <x-ui.form.input id="icon" name="icon" type="file" accept="image/*,.svg" />
                <x-ui.form.error :messages="$errors->get('icon')" />
                
                @if($badge->icon)
                    <div class="mt-2">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Current Icon:</p>
                        <img src="{{ asset('storage/' . $badge->icon) }}" alt="{{ $badge->name }} icon" class="h-16 w-16 object-contain mt-1">
                    </div>
                @endif
            </div>
            
            <div class="flex justify-end space-x-4">
                <x-ui.buttons.secondary href="{{ route('admin.badges.index') }}">
                    Cancel
                </x-ui.buttons.secondary>
                <x-ui.buttons.primary type="submit">
                    Update Badge
                </x-ui.buttons.primary>
            </div>
        </form>
    </x-ui.layout.card>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const criteriaTypeSelect = document.getElementById('criteria_type');
        const criteriaIdSelect = document.getElementById('criteria_id');
        const moduleIdInput = document.getElementById('module_id');
        const tierIdInput = document.getElementById('tier_id');
        const assessmentIdInput = document.getElementById('assessment_id');
        
        // Use pre-processed arrays from controller
        const tierOptions = @json($tierOptions);
        const moduleOptions = @json($moduleOptions);
        const assessmentOptions = @json($assessmentOptions);
        
        // Function to update criteria items based on selected type
        function updateCriteriaItems() {
            // Clear current options
            criteriaIdSelect.innerHTML = '<option value="">Select Criteria Item</option>';
            
            // Add new options based on selected type
            if (criteriaTypeSelect.value === 'tier') {
                tierOptions.forEach(function(option) {
                    const optionElement = document.createElement('option');
                    optionElement.value = option.id;
                    optionElement.textContent = option.name;
                    optionElement.selected = option.selected;
                    criteriaIdSelect.appendChild(optionElement);
                });
            } else if (criteriaTypeSelect.value === 'module') {
                moduleOptions.forEach(function(option) {
                    const optionElement = document.createElement('option');
                    optionElement.value = option.id;
                    optionElement.textContent = option.name;
                    optionElement.selected = option.selected;
                    criteriaIdSelect.appendChild(optionElement);
                });
            } else if (criteriaTypeSelect.value === 'assessment') {
                assessmentOptions.forEach(function(option) {
                    const optionElement = document.createElement('option');
                    optionElement.value = option.id;
                    optionElement.textContent = option.name;
                    optionElement.selected = option.selected;
                    criteriaIdSelect.appendChild(optionElement);
                });
            }
        }
        
        // Function to update hidden fields based on selection
        function updateHiddenFields() {
            // Clear all hidden fields
            moduleIdInput.value = '';
            tierIdInput.value = '';
            assessmentIdInput.value = '';
            
            // Set the appropriate hidden field based on criteria type
            const selectedValue = criteriaIdSelect.value;
            if (selectedValue && criteriaTypeSelect.value === 'module') {
                moduleIdInput.value = selectedValue;
            } else if (selectedValue && criteriaTypeSelect.value === 'tier') {
                tierIdInput.value = selectedValue;
            } else if (selectedValue && criteriaTypeSelect.value === 'assessment') {
                assessmentIdInput.value = selectedValue;
            }
        }
        
        // Update on change
        criteriaTypeSelect.addEventListener('change', function() {
            updateCriteriaItems();
            updateHiddenFields();
        });
        
        criteriaIdSelect.addEventListener('change', updateHiddenFields);
        
        // Initial update
        updateCriteriaItems();
        updateHiddenFields();
    });
</script>
@endpush
@endsection