@extends('custom.layouts.app')

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

    .symptom-checkbox:checked + label {
        background-color: #D1FAE5;
        border-color: #1A3D50;
    }

    .symptom-checkbox:checked + label .check-icon {
        display: block;
    }
</style>

@section('content')
    <div class="min-h-screen flex">
        <!-- Left side with background image -->
        <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 content -->
        <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">
                        <div class="w-fit mx-auto text-center">
                            <h2 class="mt-6 text-3xl font-medium leading-9 tracking-tight">
                                {{ $syndrome->name }}
                            </h2>
                            <p class="mt-2 text-sm text-gray-600">
                                {{ __('Select the symptoms you are experiencing') }}
                            </p>
                        </div>
                    </div>

                    <div class="mb-6">
                        <a href="{{ route('syndromes.search.page') }}" class="inline-flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                            </svg>
                            {{ __('Back to search') }}
                        </a>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-xl font-semibold mb-4">
                                Symptoms of {{ $syndrome->name }}
                        </h3>

                        <form id="user-symptoms-form" action="{{ route('user.symptoms.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="syndrome_id" value="{{ $syndrome->id ?? 0 }}">

                            <p class="mb-4 text-gray-600">Please check all symptoms that you are currently experiencing:</p>

                            <div class="space-y-2">
                                @foreach($symptoms as $symptom)
                                    <div class="flex items-center">
                                        <input type="checkbox" id="symptom-{{ $symptom->id }}"
                                                name="symptom_ids[]"
                                                value="{{ $symptom->id }}"
                                                class="symptom-checkbox hidden">
                                        <label for="symptom-{{ $symptom->id }}"
                                                class="flex justify-between items-center w-full p-3 border border-gray-200 rounded-lg cursor-pointer transition-colors hover:bg-gray-50">
                                            <div class="flex items-center">
                                                <span>{{ $symptom->name }}</span>
                                            </div>
                                            <div class="check-icon hidden text-[#1A3D50]">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                                </svg>
                                            </div>
                                        </label>
                                    </div>
                                @endforeach
                            </div>

                            <div class="mt-6">
                                <label for="other-symptoms" class="block text-sm font-medium text-gray-700 mb-2">Other symptoms not listed above:</label>
                                <textarea
                                    id="other-symptoms"
                                    name="other_symptoms"
                                    rows="3"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-[#1A3D50] focus:border-[#1A3D50]"
                                    placeholder="Please describe any additional symptoms you're experiencing"
                                ></textarea>
                            </div>

                            <div class="mt-8 flex justify-center">
                                <button type="submit" id="save-symptoms"
                                        class="px-4 py-2 bg-black text-white rounded-md hover:bg-[#1A3D50] focus:outline-none focus:ring-2 focus:ring-[#1A3D50] focus:ring-offset-2 transition-colors"
                                        disabled>
                                    Save My Symptoms
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const symptomCheckboxes = document.querySelectorAll('.symptom-checkbox');
            const otherSymptomsField = document.getElementById('other-symptoms');
            const saveButton = document.getElementById('save-symptoms');

            function updateButtonState() {
                const hasCheckedSymptoms = Array.from(symptomCheckboxes).some(cb => cb.checked);
                const hasOtherSymptoms = otherSymptomsField.value.trim().length > 0;

                saveButton.disabled = !(hasCheckedSymptoms || hasOtherSymptoms);
            }

            symptomCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateButtonState);
            });

            otherSymptomsField.addEventListener('input', updateButtonState);

            updateButtonState();
        });
    </script>
@endsection