@extends('layouts.app')

@section('content')
    <div class="max-w-2xl mx-auto mt-10 bg-white shadow rounded p-6">

        <h2 class="text-2xl font-bold mb-4">Edit Default Type</h2>

        {{-- Validation Errors --}}
        @if ($errors->any())
            <div class="mb-4 p-3 bg-red-100 text-red-700 rounded">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>- {{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('default_types.update', $defaultType) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-4">
                <label class="block font-semibold">Variable Name</label>
                <input type="text" name="var_name" value="{{ old('var_name', $defaultType->var_name) }}"
                    class="w-full border rounded p-2" required>
            </div>

            <div class="mb-4">
                <label class="block font-semibold">Default Type Name</label>
                <select id="defaultTypeSelect" name="default_type_name" class="w-full border rounded p-2">
                    <option value="">-- Select Default Type Name --</option>
                    @foreach ($defaultTypeNames as $typeName)
                        <option value="{{ $typeName }}"
                            {{ old('default_type_name', $defaultType->default_type_name) == $typeName ? 'selected' : '' }}>
                            {{ $typeName }}
                        </option>
                    @endforeach
                    <option value="other" {{ old('default_type_name') == 'other' ? 'selected' : '' }}>Other</option>
                </select>

                {{-- Hidden input for custom type name --}}
                <input type="text" id="customTypeInput" name="custom_default_type_name"
                    class="w-full border rounded p-2 mt-2 {{ old('default_type_name', $defaultType->default_type_name) == 'other' ? '' : 'hidden' }}"
                    placeholder="Enter new Default Type Name" value="{{ old('custom_default_type_name') }}">
            </div>

            <div class="mb-4">
                <label class="block font-semibold">Name</label>
                <input type="text" name="name" value="{{ old('name', $defaultType->name) }}"
                    class="w-full border rounded p-2" required>
            </div>

            <div class="mb-4">
                <label class="block font-semibold">Value</label>
                <input type="text" name="value" value="{{ old('value', $defaultType->value) }}"
                    class="w-full border rounded p-2" required>
            </div>

            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Update</button>
            <a href="{{ route('default_types.manage') }}" class="ml-2 text-gray-600">Cancel</a>
        </form>
    </div>

    <script>
        const select = document.getElementById('defaultTypeSelect');
        const customInput = document.getElementById('customTypeInput');

        function toggleCustomInput() {
            if (select.value === 'other') {
                customInput.classList.remove('hidden');
                customInput.required = true;
            } else {
                customInput.classList.add('hidden');
                customInput.required = false;
                customInput.value = '';
            }
        }

        select.addEventListener('change', toggleCustomInput);
        toggleCustomInput(); // run on page load
    </script>
@endsection