@extends('layouts.app', ['ver' => 2])

@section('content')
<style>
/* Styles principaux */
.selectedoption {
    background-color: #6c757d; /* Gris neutre, ajustable */
    color: #fff; /* Texte blanc pour contraste */
}

.selectedPlan {
    background-color: #000; /* Fond noir */
    color: #fff; /* Texte blanc */
}

/* Personnalisation du formulaire */
.form-group label {
    font-weight: bold; /* Met en évidence les labels */
}

.card-header {
    background-color: #343a40; /* Fond sombre */
    color: #fff; /* Texte blanc */
    text-align: center;
    font-size: 1.2rem;
}

.btn-dark {
    background-color: #000; /* Bouton noir */
    border: none;
    transition: background-color 0.3s ease;
}

.btn-dark:hover {
    background-color: #444; /* Effet survol */
}

/* Espacement entre les éléments */
.section-padding {
    padding: 50px 0; /* Ajuste l'espacement */
}
</style>

<section class="masterclass-area pricing-content section-padding">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    N'hésitez pas à nous contacter pour toute question ou demande de renseignements.
                </div>

                <div class="row text-center justify-content-center px-3">
                    <div class="mt-2 mb-2">
                        @if (session('error'))
                            <div class="alert alert-danger mb-2 mt-2">
                                {{ session('error') }}
                            </div>
                        @endif

                        @if (session('success'))
                            <div class="alert alert-success mb-2 mt-2">
                                {{ session('success') }}
                            </div>
                        @endif
                    </div>
                </div>

                <div class="card-body">
                    <form action="{{ route('contact.store') }}" method="POST" id="contactForm">
                        @csrf

                        <div class="form-group">
                            <label for="name">Nom (*)</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" required>
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="email">Email (*)</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" required>
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea class="form-control @error('message') is-invalid @enderror" id="message" name="message" rows="5"></textarea>
                            @error('message')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group form-check mt-3">
                            <input type="checkbox" class="form-check-input" id="privacyCheck" name="privacyCheck" required>
                            <label class="form-check-label" for="privacyCheck">
                                J'accepte que mes données soient traitées conformément à la <a href="#" class="text-primary">politique de confidentialité</a>.
                            </label>
                        </div>

                        <div class="text-center mt-5">
                            <button type="submit" class="btn btn-dark" id="submitButton">Envoyer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
$(document).ready(function() {
    // Ajoutez des scripts supplémentaires si nécessaire
});
</script>
@endpush
@endsection