@extends('frontend.jpt.layout.mainlayout')
@section('content')
    <section class="cover-background full-screens py-0 md-h-250px sm-h-250px"
        style="background-image:url({{ URL::asset('/assets/frontend/jpt/img/banner-1.jpg') }});">
        {{-- <div class="opacity-very-light bg-black"></div> --}}
        <div class="opacity-light bg-black"></div>
        <div class="container h-100">
            <div class="row align-items-center justify-content-center h-300px sm-h-300px">
                <div class="col-xl-10 col-lg-10 col-md-10 position-relative z-index-1 mt-5">
                    <div class="d-flex justify-content-center">
                        <h3 class="alt-font text-white fw-600 text-center letter-spacing-2px pt-2 pt-sm-0 mt-5">Inscription
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="cover-background pt-4 pb-4"
        style="background-image: url({{ URL::asset('/assets/frontend/jpt/img/inscription-bg.jpg') }});" id="inscription">
        <div class="opacity-very-light bg-white"></div>
        <div class="container position-relative z-index-1">
            {{-- <h3 class="alt-font text-dark-gray fw-600 text-center mb-4">Inscription</h3> --}}
            <p class="text-center mb-4">
                Remplissez le formulaire pour enregistrer votre demande de participation.
                <b>Confirmation</b> par l'équipe d'organisation.
            </p>

            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">

                            <form id="registrationForm" onsubmit="return handleSubmit(event)">
                                <div class="row">

                                    <!-- Prénom -->
                                    <div class="col-md-6 mb-3">
                                        <label for="firstname" class="form-label">Prénom *</label>
                                        <input type="text" class="form-control" id="firstname" name="firstname" required
                                            placeholder="Prénom">
                                    </div>

                                    <!-- Nom -->
                                    <div class="col-md-6 mb-3">
                                        <label for="lastname" class="form-label">Nom *</label>
                                        <input type="text" class="form-control" id="lastname" name="lastname" required
                                            placeholder="Nom">
                                    </div>

                                    <!-- Fonction -->
                                    <div class="col-md-6 mb-3">
                                        <label for="role" class="form-label">Fonction *</label>
                                        <select class="form-select" id="role" name="role" required>
                                            <option value="">Sélectionner</option>
                                            <option>Pharmacien(ne) titulaire</option>
                                            <option>Assistant(e) en pharmacie</option>
                                            <option>Gérant(e) parapharmacie</option>
                                            <option>Industriel / Laboratoire</option>
                                            <option>Distributeur / Grossiste</option>
                                            <option>Institution / Ministère / Ordre</option>
                                            <option>Autre</option>
                                        </select>
                                    </div>

                                    <!-- Structure -->
                                    <div class="col-md-6 mb-3">
                                        <label for="org" class="form-label">
                                            Pharmacie / Parapharmacie / Société *
                                        </label>
                                        <input type="text" class="form-control" id="org" name="org" required
                                            placeholder="Nom de la structure">
                                    </div>

                                    <!-- Ville -->
                                    <div class="col-md-6 mb-3">
                                        <label for="city" class="form-label">Ville *</label>
                                        <input type="text" class="form-control" id="city" name="city" required
                                            placeholder="Ville">
                                    </div>

                                    <!-- Pays -->
                                    <div class="col-md-6 mb-3">
                                        <label for="country" class="form-label">Pays *</label>
                                        <select class="form-select" id="country" name="country" required>
                                            <option value="">Sélectionner</option>
                                            <option value="Tunisie">Tunisie</option>
                                            <option value="Algérie">Algérie</option>
                                            <option value="Maroc">Maroc</option>
                                            <option value="Libye">Libye</option>
                                            <option value="France">France</option>
                                            <option value="Autre">Autre</option>
                                        </select>
                                    </div>

                                    <!-- Email -->
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">E-mail *</label>
                                        <input type="email" class="form-control" id="email" name="email" required
                                            placeholder="email@exemple.com">
                                    </div>

                                    <!-- Téléphone -->
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label">Téléphone / WhatsApp *</label>
                                        <input type="tel" class="form-control" id="phone" name="phone" required
                                            placeholder="+216 ...">
                                    </div>

                                    <!-- Transport -->
                                    <div class="col-md-6 mb-3">
                                        <label for="transport" class="form-label">Transport organisé ? *</label>
                                        <select class="form-select" id="transport" name="transport" required>
                                            <option value="">Sélectionner</option>
                                            <option>Oui</option>
                                            <option>Non</option>
                                        </select>
                                    </div>

                                    <!-- Ville de départ -->
                                    <div class="col-md-6 mb-3">
                                        <label for="depart" class="form-label">
                                            Ville de départ (si transport)
                                        </label>
                                        <input type="text" class="form-control" id="depart" name="depart"
                                            placeholder="Sousse, Sfax, Bizerte...">
                                    </div>

                                    <!-- Commentaire -->
                                    <div class="col-12 mb-4">
                                        <label for="note" class="form-label">Commentaire</label>
                                        <textarea class="form-control" id="note" name="note" rows="3"
                                            placeholder="Ex : accessibilité, contraintes horaires..."></textarea>
                                    </div>
                                </div>
                                <div class="row justify-content-md-center">
                                    <div class="col-lg-6 col-md-6 col-md-auto">
                                        <button type="submit"
                                            class="btn btn-large btn-rounded btn-blue-color w-100">Envoyer la
                                            demande</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection