<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inscription Multi-Étapes</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{{ asset('auth/vendor/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('auth/vendor/font-awesome-4.7.0/css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('auth/css/main.css') }}">
    <link rel="stylesheet" href="{{asset('app-assets/vendor/bootstrap/css/bootstrap.min.css')}}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="{{ asset('vendor/font-awesome/css/font-awesome.min.css') }}">
    <!-- Fontastic CSS-->
    <link rel="stylesheet" href="{{asset('app-assets/css/font.css')}}">
    <!-- Google fonts - Open Sans-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <!-- Swiper carousel-->
    <link rel="stylesheet" href="{{asset('app-assets/vendor/swiper/css/swiper.css')}}">
    <!-- Lity-->
    <link rel="stylesheet" href="{{asset('app-assets/vendor/lity/lity.css')}}">
    <!-- Bootstrap Select-->
    <link rel="stylesheet" href="{{asset('app-assets/vendor/bootstrap-select/css/bootstrap-select.css')}}">
    <!-- Theme stylesheet-->
    <link rel="stylesheet" href="{{asset('app-assets/css/style.default.css')}}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="{{asset('app-assets/css/custom.css')}}">
    <!--===============================================================================================-->
    <link rel="icon" type="image/png" href="{{ asset('app-assets/img/favicon.ico') }}">
</head>
<body>

    <header class="header">
		<!-- top bar-->
		<div class="top-bar d-none d-md-block">
		  <div class="container">
			<div class="row">
			  <div class="col-md-6">
				<p class="mb-0" style="color: white"> <i class="fa fa-map-marker"></i>Abomey-Calavi, Bénin</p>
			  </div>
			  <div class="col-md-6 text-right">
				<ul class="list-inline mb-0">
				  <li class="list-inline-item"><a href="mailto:info@university.com"><i class="fa fa-envelope"></i>info@c2ea.ine-uac.net </a></li>
				  <li class="list-inline-item"><a href="#"><i class="fa fa-phone"></i>+229 0196638124</a></li>
				</ul>
			  </div>
			</div>
		  </div>
		</div>
		<!-- navbar-->
		<nav class="navbar navbar-expand-lg">
		  <div class="search">
			<div class="search-inner d-flex align-items-center justify-content-center">
			  <div class="close-btn"><i class="icon-close"></i></div>
			</div>
		  </div>
		  <div class="container"><a href="index.html" class="navbar-brand"><strong><img src="https://c2ea.ine-uac.net/upload/ACCUEIL_logo.gif" style="max-height:65px; overflow: hidden; " alt="..." class="img-fluid rounded-circle"></strong><small></small></a>
			<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right mt-0"><span></span><span></span><span></span></button>
			<div id="navbarSupportedContent" class="collapse navbar-collapse">
			  <div class="navbar-nav ml-auto">
				<div class="nav-item"><a href="{{ route('welcome') }}"   class="nav-link active">ACCUEIL</a></div>
				<a href="{{ route('login') }}" class="nav-link">Connexion </a>
				<a href="{{ route('register') }}" class="nav-link">Inscription <span class="sr-only">(current)</span> </a>
			  </div>
			</div>
		  </div>
		</nav>


	</header>
<div class="limiter">
    <div class="container-login100">
        <div class="wrap-login1000">
            <form id="multiStepForm" action="{{ route('register') }}" method="POST" enctype="multipart/form-data" class="login100-form validate-form">
                @csrf

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

                @error('error')
                    <div class="alert alert-danger">
                        {{ $message }}
                    </div>
                @enderror
                <div class="alert alert-success">
                    <ul class="mb-0">
                            <li> Attention! Cet espace est reservé aux anciens etudiants de l'INE </li>
                    </ul>
                </div>
                <span class="login100-form-title">Inscription</span>

                <!-- Étape 1 -->
                <div class="step" id="step-1">
                    <div class="wrap-input1000 validate-input">
                        <input class="input100" type="text" name="name" placeholder="Nom" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-user" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <input class="input100" type="text" name="surname" placeholder="Prénoms" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-user" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <select class="input100" name="code_pays" required>
                            <option value="">Code pays*</option>
                            @foreach ($code_pays as $code)
                                <option value="{{$code->country_code}}">{{$code->intitulePays}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <input class="input100" type="text" name="phone" placeholder="Téléphone" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-phone" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <input class="input100" type="email" name="email" placeholder="Email" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                        </span>
                    </div>
                    <button type="button" class="login100-form-btn" onclick="nextStep()">Suivant</button>
                </div>

                                <!-- Étape 2 -->
                <div class="step" id="step-2" style="display: none;">
                    {{-- <div class="wrap-input1000 validate-input">
                        <select class="input100" name="annee_academique">
                            <option value="">Année académique</option>
                            <script>
                                const currentYear = new Date().getFullYear();
                                for (let year = currentYear; year >= 2000; year--) {
                                    document.write(`<option value="${year}">${year}</option>`);
                                }
                            </script>
                        </select>
                    </div> --}}
                    <div class="wrap-input1000 validate-input">
                        <select class="input100" name="sexe" required>
                            <option value="">Sexe</option>
                            <option value="M">Masculin</option>
                            <option value="F">Féminin</option>
                        </select>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <select class="input100" name="statutAlumnis" required>
                            <option value="">Choisir un statut</option>
                            @foreach ($statuts as $statut)
                                <option value="{{$statut->idStatut}}">{{$statut->intitule}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <select class="input100" name="niveau" required>
                            <option value="">Choisir un niveau d'étude</option>
                            @foreach ($niveaux as $niveau)
                                <option value="{{$niveau->id}}">{{$niveau->niveauFormation}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <select class="input100" name="filiere" required>
                            <option value="">Choisir une filière</option>
                            @foreach ($filieres as $filiere)
                                <option value="{{$filiere->idFiliere}}">{{$filiere->intituleFilieres}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <input class="input100" type="text" name="birthplace" placeholder="Lieu de naissance" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <input class="input100" type="text" name="nationalite" placeholder="Nationalité" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="button-container">
                        <button type="button" class="login100-form-btn" onclick="prevStep()">Précédent</button>
                        <button type="button" class="login100-form-btn" onclick="nextStep()">Suivant</button>
                    </div>
                </div>

                <!-- Étape 3 -->
                <div class="step" id="step-3" style="display: none;">
                     <div class="wrap-input1000 validate-input">
                     <label for="attestation" class="input-label">Date de naissance</label>
                        <input class="input100" type="date" name="birthday" placeholder="Date de naissance" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-calendar" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="wrap-input1000 validate-input">
                        <label for="attestation" class="input-label">Attestation du diplome obtenu</label>
                        <input class="input100" type="file" name="attestation" id="attestation" accept=".pdf,.jpg,.jpeg,.png" required>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-file" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="button-container">
                        <button type="button" class="login100-form-btn" onclick="prevStep()">Précédent</button>
                        <button type="submit" class="login100-form-btn">S'inscrire</button>
                    </div>
                </div>

            </form>
            <!-- Image -->
            <div class="login1000-pic js-tilt" data-tilt>
                    <img src="{{ asset('auth/images/img2.svg') }}" alt="IMG">
                </div>
        </div>
    </div>
</div>

<script>
    let currentStep = 1;

    function nextStep() {
        document.getElementById(`step-${currentStep}`).style.display = 'none';
        currentStep++;
        document.getElementById(`step-${currentStep}`).style.display = 'block';
    }

    function prevStep() {
        document.getElementById(`step-${currentStep}`).style.display = 'none';
        currentStep--;
        document.getElementById(`step-${currentStep}`).style.display = 'block';
    }
</script>
</body>
</html>
