@extends('custom.layouts.app')

<style>
    @media (min-width: 1024px) {
        .lg\:w-4\/10 { width: 40%; }
        .lg\:w-6\/10 { width: 60%; }
    }
</style>

@section('content')
    <div class="min-h-screen flex">
        <!-- Left side with branding -->
        <div class="hidden lg:block lg:w-4/10 relative">
            <div class="h-full bg-cover bg-center" style="background-image: url('{{ asset('img/bg-login-left.jpg') }}')"></div>
            <div class="absolute inset-0 flex flex-col items-start justify-center pl-24">
                <div class="w-fit">
                    <img src="{{ asset('img/seizy-logo.png') }}" alt="Seizy Logo" class="h-auto w-auto mb-4">
                    <h3 class="text-3xl font-medium">Making things easier.</h3>
                    <div class="mt-20">
                        <h4 class="text-xl font-medium"><a href="#" class="hover:underline">www.seizylife.com</a></h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right side with search functionality -->
        <div class="w-full lg:w-6/10 flex items-center justify-center relative">
            <div class="absolute inset-0 bg-cover bg-center z-0 opacity-60" style="background-image: url('{{ asset('img/bg-login-right.jpg') }}')"></div>

            <div class="z-10 w-full max-w-2xl px-4 sm:px-6">
                <div class="bg-white/50 backdrop-blur-sm py-8 px-4 shadow sm:rounded-lg sm:px-10">

                    <div class="mb-6 text-center">
                        <h2 class="mt-6 text-3xl font-medium">{{ __('Find Your Syndrome') }}</h2>
                        <p class="mt-2 text-sm text-gray-600">{{ __('Search for a specific syndrome to get more information') }}</p>
                    </div>

                    <div>
                        <label for="syndrome" class="block text-sm font-medium text-gray-700 mb-1">Search Syndrome</label>
                        <div class="relative">
                            <input
                                id="syndrome"
                                type="text"
                                placeholder="Enter syndrome name (e.g., Migraine, Epilepsy)"
                                class="block w-full px-4 py-3 border border-white rounded-md shadow-sm focus:ring-[#1A3D50] focus:border-[#1A3D50] sm:text-sm"
                                autocomplete="off"
                            >
                            <div id="syndrome-results" class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg hidden"></div>
                        </div>
                    </div>

                    <input type="hidden" id="selected-syndrome-id">
                    <input type="hidden" id="selected-syndrome-name">

                    <div class="mt-6">
                        <button
                            id="submit-syndrome"
                            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-black hover:bg-[#1A3D50] focus:ring-2 focus:ring-gray-800"
                            disabled
                        >
                            {{ __('View Symptoms') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const syndromeInput = document.getElementById('syndrome');
            const resultsContainer = document.getElementById('syndrome-results');
            const selectedSyndromeIdInput = document.getElementById('selected-syndrome-id');
            const selectedSyndromeNameInput = document.getElementById('selected-syndrome-name');
            const submitButton = document.getElementById('submit-syndrome');

            syndromeInput.addEventListener('input', function() {
                const query = this.value.trim();
                submitButton.disabled = true;

                if (query.length >= 2) {
                    fetch(`/list/syndromes/search?query=${encodeURIComponent(query)}`)
                        .then(response => response.json())
                        .then(data => {
                            resultsContainer.innerHTML = '';
                            resultsContainer.classList.remove('hidden');

                            if (data.length > 0) {
                                data.forEach(syndrome => {
                                    const item = document.createElement('div');
                                    item.classList.add('px-4', 'py-2', 'hover:bg-gray-100', 'cursor-pointer');
                                    item.textContent = syndrome.name;

                                    item.addEventListener('click', () => {
                                        syndromeInput.value = syndrome.name;
                                        selectedSyndromeIdInput.value = syndrome.id;
                                        selectedSyndromeNameInput.value = syndrome.name;
                                        submitButton.disabled = false;
                                        resultsContainer.classList.add('hidden');
                                    });

                                    resultsContainer.appendChild(item);
                                });
                            } else {
                                const noResults = document.createElement('div');
                                noResults.classList.add('px-4', 'py-2', 'text-gray-500');
                                noResults.textContent = 'No matching syndromes found';
                                resultsContainer.appendChild(noResults);
                            }
                        });
                } else {
                    resultsContainer.classList.add('hidden');
                }
            });

            submitButton.addEventListener('click', function() {
                if (selectedSyndromeIdInput.value) {
                    window.location.href = `/symptoms?syndrome_id=${selectedSyndromeIdInput.value}&syndrome_name=${encodeURIComponent(selectedSyndromeNameInput.value)}`;
                }
            });
        });
    </script>
@endsection