@extends('layouts.splash')

@section('content')
<style>

            /* Conteneur principal */
    .main_view {
        position: relative; /* Permet au footer de se positionner à l’intérieur */
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        padding-bottom: 140px; /* Espace pour le footer */
    }
        /* Footer à l'intérieur du bloc principal */
    .footer-inside {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .footer-inside img {
        width: 100%;

    }
</style>

<link href="{{ asset('css/main2.css') }}" rel="stylesheet">

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-xl-5 col-12 main_view">

            <!-- Header -->
            <img src="{{ asset('images/espacesud/header.png') }}" class="img-fluid" alt="Header">

            <!-- Formulaire -->
            <div class="row justify-content-center mg-top-40">
                <div class="col-10 text-center">
                    <div class="blockQuestion">
                        <h2><strong>Remplis le formulaire</strong></h2>
                        <p>suivant pour avoir accès au quiz :</p>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center mg-top-50">
                <div class="col-10">

                    @if(session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif

                    <form method="POST" action="{{ route('splash.save') }}" id="quizForm" class="form-quiz">
                        @csrf

                        <input type="hidden" name="is_over_12" value="{{ session('is_over_12', 0) }}">

                        <!-- Prénom -->
                        <div class="mb-3 text-start">
                            <label for="firstname" class="form-label form-label-custom"><strong>Prénom <span class="text-danger">*</span></strong></label>
                            <input type="text" class="form-control form-input-custom" id="firstname" name="firstname" value="{{ old('firstname') }}" placeholder="Entrez votre prénom" required>
                        </div>

                        <!-- Nom -->
                        <div class="mb-3 text-start">
                            <label for="lastname" class="form-label form-label-custom"><strong>Nom <span class="text-danger">*</span></strong></label>
                            <input type="text" class="form-control form-input-custom" id="lastname" name="lastname" value="{{ old('lastname') }}" placeholder="Entrez votre nom" required>
                        </div>

                        @if(session('is_over_12', 0))
                        <!-- Champs pour +12 ans -->
                        <div class="mb-3 text-start">
                            <label for="email" class="form-label form-label-custom"><strong>Email</strong></label>
                            <input type="email" class="form-control form-input-custom" id="email" name="email" value="{{ old('email') }}" placeholder="exemple@email.com" required>
                        </div>

                        <div class="mb-3 text-start">
                            <label for="telephone" class="form-label form-label-custom"><strong>Téléphone</strong></label>
                            <input type="tel" class="form-control form-input-custom" id="telephone" name="telephone" value="{{ old('telephone') }}" placeholder="06 12 34 56 78" required>
                        </div>

                      <div class="mb-3 text-start">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="terms" name="terms" required>
        <label class="form-check-label" for="terms" style="color: #275E67;">
            <strong>
                Je déclare avoir plus de 18 ans et j’accepte 
                <a href="{{ asset('pdf/reglement.pdf') }}" target="_blank" style="color: #2CA3A0; text-decoration: underline;">
                    le règlement du jeu concours
                </a>
                <span class="text-danger">*</span>
            </strong>
        </label>
    </div>
</div>

                        <div class="mb-3 text-start">
                            <label for="optin" class="form-label form-label-custom"><strong>Souhaites-tu recevoir des informations de la part de l'Office du Tourisme du Sud Martinique ?</strong></label>
                            <select class="form-select form-select-custom" id="optin" name="optin" required>
                                <option value="">Choisir</option>
                                <option value="1" {{ old('optin') == '1' ? 'selected' : '' }}>Oui</option>
                                <option value="0" {{ old('optin') == '0' ? 'selected' : '' }}>Non</option>
                            </select>
                        </div>

                        <div class="mb-3 text-start" id="canalField" style="display: {{ old('optin') == '1' ? 'block' : 'none' }};">
                            <label for="canal" class="form-label form-label-custom"><strong>Canal de communication préféré</strong></label>
                            <select class="form-select form-select-custom" id="canal" name="canal">
                                <option value="">Choisir</option>
                                <option value="1" {{ old('canal') == 1 ? 'selected' : '' }}>Email</option>
                                <option value="2" {{ old('canal') == 2 ? 'selected' : '' }}>SMS</option>
                                <option value="3" {{ old('canal') == 3 ? 'selected' : '' }}>SMS & Email</option>
                            </select>
                        </div>

                        @endif

                        <!-- Bouton -->
                        <div class="text-center mg-top-30">
                            <button type="submit" class="btn btn-primary1" aria-label="Commencer le quiz">
                                <img src="{{ asset('images/espacesud/Valider.png') }}" alt="Commencer le quiz" class="img-fluid mb-3" style="max-width: 200px;"/>
                            </button>
                        </div>
                    </form>

                </div>
            </div>

            <!-- Footer à l'intérieur du bloc principal -->
            <div class="footer-inside">
                <img src="{{ asset('images/espacesud/Rocher.png') }}" alt="Footer Rocher">
            </div>

        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const optinSelect = document.getElementById('optin');
    const canalField = document.getElementById('canalField');

    if (optinSelect && canalField) {
        optinSelect.addEventListener('change', function() {
            canalField.style.display = this.value === '1' ? 'block' : 'none';
            if (this.value !== '1') {
                document.getElementById('canal').value = '';
            }
        });
    }

    // Validation de base du formulaire
    const form = document.getElementById('quizForm');
    if (form) {
        form.addEventListener('submit', function(event) {
            const firstname = document.getElementById('firstname').value.trim();
            const lastname = document.getElementById('lastname').value.trim();
            
            if (!firstname || !lastname) {
                event.preventDefault();
                alert('Veuillez remplir tous les champs obligatoires.');
            }
        });
    }
});
</script>


@endsection