{{-- <div class="formContact bg-gray py-4">
    <div class="container mt-5 mb-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <form action="{{ '' }}" method="POST">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6 form-floating mb-3">
                            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="{{ __('concept.form.name') }}" required>
                            <label for="first_name">{{ __('concept.form.name') }}</label>
                        </div>

                        <div class="col-md-6 form-floating mb-3">
                            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="{{ __('concept.form.lastname') }}" required>
                            <label for="last_name">{{ __('concept.form.lastname') }}</label>
                        </div>

                        <div class="col-md-6 form-floating mb-3">
                            <input type="email" class="form-control" id="email" name="email" placeholder="{{ __('concept.form.email') }}" required>
                            <label for="email">{{ __('concept.form.email') }}</label>
                        </div>

                        <div class="col-md-6 form-floating mb-3">
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="{{ __('concept.form.phone') }}">
                            <label for="phone">{{ __('concept.form.phone') }}</label>
                        </div>

                        <div class="col-md-6 form-floating mb-3">
                            <input type="text" class="form-control" id="city" name="city" placeholder="{{ __('concept.form.city') }}">
                            <label for="city">{{ __('concept.form.city') }}</label>
                        </div>

                        @if (Route::currentRouteName() !== 'contact' )
                            <div class="col-md-6 form-floating mb-3">
                                <input type="time" class="form-control time-fix" id="contact_time" name="contact_time" min="" max="" placeholder="{{ __('concept.form.time') }}" required>
                                <label for="contact_time">{{ __('concept.form.time') }}</label>
                                <div class="invalid-feedback" id="time-error" style="display:none;">
                                    {{ __('concept.form.message_error') }}
                                </div>
                            </div>
                        @endif

                        <div class="col-md-6 form-floating mb-6">
                            <input type="number" class="form-control" id="travel_count" name="travel_count" placeholder="{{ __('concept.form.travels') }}" min="0">
                            <label for="travel_count">{{ __('concept.form.travels') }}</label>
                        </div>

                        <div class="@if (!Route::currentRouteName() == 'contact' ) col-md-6 @else col-md-12 @endif form-floating mb-6 position-relative" onclick="document.getElementById('travel_date').showPicker && document.getElementById('travel_date').showPicker()">
                            <input type="date" class="form-control date-fix" id="travel_date" name="travel_date" placeholder="dd/mm/yyyy" required>
                            <label for="travel_date">{{ __('concept.form.date') }}</label>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label d-block">{{ __('concept.form.parnet.question') }}</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="is_partner" id="partner_yes" value="yes" required>
                                <label class="form-check-label" for="partner_yes">{{ __('concept.form.parnet.1') }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="is_partner" id="partner_no" value="no" required>
                                <label class="form-check-label" for="partner_no">{{ __('concept.form.parnet.2') }}</label>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-check privacy">
                                <input class="form-check-input" type="checkbox" value="1" id="privacy" name="privacy" required>
                                <label class="form-check-label" for="privacy">
                                    {{ __('concept.form.privacy') }} <a href="{{ route('notice') }}">{{ __('concept.form.privacy_link') }} </a>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Botón flotante -->
                    <div class="position-relative bottom-0 mt-4">
                        <button type="submit" class="btn btn-travel btn-lg shadow">{{ __('concept.form.btn_form') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div> --}}

<livewire-contact></livewire-contact>

@push('scripts')
    {{-- <script>
        // Asegura que al hacer clic en cualquier parte del input, se active el selector de hora
        document.querySelectorAll('.time-fix').forEach(input => {
            input.addEventListener('click', () => {
                input.showPicker && input.showPicker(); // para navegadores compatibles
            });
        });
    </script> --}}

    <script>
        const inputTime = document.getElementById('contact_time');
        const errorDiv = document.getElementById('time-error');

        // Muestra el selector al hacer clic en cualquier parte del input
        inputTime.addEventListener('click', () => {
            inputTime.showPicker && inputTime.showPicker();
        });

        // Validar el rango al cambiar el valor
        inputTime.addEventListener('input', () => {
            const timeValue = inputTime.value;
            if (!timeValue) {
            // No hay valor, oculta error
            inputTime.classList.remove('is-invalid');
            errorDiv.style.display = 'none';
            return;
            }

            // Convertir a minutos para comparar fácilmente
            const [hours, minutes] = timeValue.split(':').map(Number);
            const totalMinutes = hours * 60 + minutes;

            // Definir min y max en minutos
            const minMinutes = 8 * 60;  // 08:00
            const maxMinutes = 20 * 60; // 20:00

            if (totalMinutes < minMinutes || totalMinutes > maxMinutes) {
            // Fuera de rango
            inputTime.classList.add('is-invalid');
            errorDiv.style.display = 'block';
            inputTime.setCustomValidity('Invalid time');
            } else {
            // Dentro del rango
            inputTime.classList.remove('is-invalid');
            errorDiv.style.display = 'none';
            inputTime.setCustomValidity('');
            }
        });
    </script>

    <script>
        document.getElementById('travel_date').addEventListener('click', function () {
            this.showPicker && this.showPicker(); // compatible con navegadores modernos
        });
    </script>
@endpush