@extends('layouts.app')

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

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

        {{-- Success Message --}}
        @if (session('success'))
            <div class="mb-4 p-3 bg-green-100 text-green-700 rounded">
                {{ session('success') }}
            </div>
        @endif

        {{-- Add New Default Type Form --}}
        <form action="{{ route('default_types.store') }}" method="POST" class="mb-6">
            @csrf
            <div class="mb-4">
                <label class="block font-semibold">Variable Name</label>
                <input type="text" name="var_name" class="w-full border rounded p-2" required>
                @error('var_name')
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
            </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 }}">{{ $typeName }}</option>
                    @endforeach
                    <option value="other">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 hidden" placeholder="Enter new Default Type Name">

                @error('default_type_name')
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
                @error('custom_default_type_name')
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label class="block font-semibold">Name</label>
                <input type="text" name="name" class="w-full border rounded p-2" required>
                @error('name')
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label class="block font-semibold">Value</label>
                <input type="text" name="value" class="w-full border rounded p-2" required>
                @error('value')
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
            </div>

            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Add Default Type</button>
        </form>

        {{-- List of Default Types --}}
        {{-- List of Default Types --}}
        <div class="grid grid-cols-2 gap-10">
            @forelse($defaultTypes as $defaultTypeName => $types)
                <div>
                    <h3 class="text-xl font-semibold mt-6 mb-2">{{ $defaultTypeName }}</h3>

                    <table class="w-full border mb-6">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="border px-4 py-2">ID</th>
                                <th class="border px-4 py-2">Name</th>

                                <th class="border px-4 py-2">Formula Variable Name</th>
                                <th class="border px-4 py-2">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($types as $defaultType)
                                <tr>
                                    <td class="border px-4 py-2">{{ $defaultType->id }}</td>
                                    <td class="border px-4 py-2">{{ $defaultType->name }}</td>
                                    <td class="border px-4 py-2">{{ $defaultType->var_name }}</td>
                                    <td class="border px-4 py-2 text-center flex justify-center gap-2">
                                        <a href="{{ route('default_types.edit', $defaultType) }}"
                                            class="bg-yellow-500 text-white px-3 py-1 rounded">Edit</a>
                                        <form action="{{ route('default_types.destroy', $defaultType) }}" method="POST"
                                            onsubmit="return confirm('Are you sure you want to delete this?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                class="bg-red-600 text-white px-3 py-1 rounded">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @empty
                <p class="text-center py-4">No default types found.</p>
            @endforelse
        </div>
    </div>


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

        select.addEventListener('change', function() {
            if (this.value === 'other') {
                customInput.classList.remove('hidden');
                customInput.required = true;
            } else {
                customInput.classList.add('hidden');
                customInput.required = false;
                customInput.value = '';
            }
        });
    </script>
@endsection