@extends('frontend.mediknode.layout.mainlayout')
@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            Création de compte
        @endslot
        @slot('li_1')
            Inscription
        @endslot
    @endcomponent
    <div class="login-content">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-8 mx-auto">
                    <div class="login-wrap register-form">
                        <div class="login-header">
                            <h3>Création de compte</h3>
                        </div>
                        <form method="POST" id="account-create-step-one" action="{{ route('account.create.step.one.post') }}"
                            class="needs-validation" novalidate>
                            @csrf
                            <div class="form-group group-img">
                                <label class="col-form-label">Email : <span class="asterisk">*</span></label>
                                <div class="group-img">
                                    <i class="feather-mail"></i>
                                    <input type="text" value="{{ old('email') }}" class="form-control" name="email"
                                        id="email" autocomplete="off" required>
                                    <div class="invalid-feedback">L'email est obligatoire
                                    </div>
                                    <div id="error" class="text-danger"></div>
                                    @error('email')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group group-img">
                                <label class="col-form-label">Téléphone : <span class="asterisk">*</span></label>
                                <div class="group-img">
                                    <i class="feather-phone"></i>
                                    <input type="tel" value="{{ old('phone') }}" class="form-control" name="phone"
                                        id="phone" autocomplete="off" required>
                                    <div class="phone-invalid-feedback invalid-feedback">Le téléphone est obligatoire.</div>
                                    @error('phone')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row justify-content-md-center">
                                <div class="col-lg-3 col-md-4 col-md-auto">
                                    <button class="btn btn-success w-100 mt-2 login-btn" type="submit">Suivant</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('account-create-step-one').addEventListener('submit', function(event) {
            const emailInput = document.getElementById('email').value;
            const errorDiv = document.getElementById('error');
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (!emailPattern.test(emailInput)) {
                errorDiv.textContent = "Veuillez saisir une adresse e-mail valide.";
                event.preventDefault();
            } else {
                errorDiv.textContent = "";
            }
        });
    </script>
    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent
@endsection