@extends('web.layouts.auth')
@section('titre')
    Création d'un compte
@endsection


@section('content')
    <div class="auth-page-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-center mt-sm-3 mb-0 text-white-50">
                        <div>
                            <a href="{{ url('/') }}" class="d-inline-block auth-logo">
                                <img src="{{ asset('../img/logos/logo-medd-dark.png') }}" class="card-logo card-logo-dark"
                                    alt="logo dark" height="60" width="185">
                                {{-- <img src="{{ asset('assets/images/logo-light.png') }}" alt="" height="20"> --}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->
            <br>

            <!-- Static Backdrop -->
            {{-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
            Static Backdrop Modal
        </button> --}}

            @if (count($errors) > 0)
                <!-- staticBackdrop Modal -->
                <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-body text-center p-5">
                                <lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop"
                                    colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
                                </lord-icon>

                                <div class="mt-4">
                                    <h4 class="mb-3">Erreur lors de l'enregistrement</h4>
                                    <p class="text-muted mb-4"></p>
                                    @foreach ($errors->all() as $error)
                                        <div class="d-flex mt-2">
                                            <div class="flex-shrink-0">
                                                <i class="ri-checkbox-circle-fill text-danger"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-2 ">
                                                <p class="text-muted mb-0"><code>{{ $error }}</code></p>
                                            </div>
                                        </div>
                                    @endforeach
                                    <div class="hstack gap-2 justify-content-center">
                                        <a href="javascript:void(0);" class="btn btn-link link-success fw-medium"
                                            data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i>
                                            Fermer</a>
                                        <a href="javascript:void(0);" class="btn btn-success">Completed</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-5">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="text-center">
                                        <h5 class="card-title text-primary">Création d'un compte</h5>
                                        <p class="text-muted">Créer votre compte gratuitement maintenant. </br>
                                            <marquee behavior="" direction="left" style="color: red">
                                                Tous champs sont obligatoires. Rassurez de les avoir remplis avant de
                                                valider vos informations.
                                            </marquee>
                                        </p>

                                    </div>
                                </div><!-- end card header -->
                                <div class="card-body">
                                    {{-- <form action="#" class="form-steps" autocomplete="off"> --}}
                                    <form method="POST" action="{{ route('inscription.new') }}"
                                        class="form-steps save-form" autocomplete="off">
                                        @csrf
                                        {{-- <div class="text-center pt-3 pb-4 mb-1">
                                            <h5>Signup Your Account</h5>
                                        </div> --}}
                                        <div id="custom-progress-bar" class="progress-nav mb-4">
                                            <div class="progress" style="height: 1px;">
                                                <div class="progress-bar" role="progressbar" style="width: 0%;"
                                                    aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>

                                            <ul class="nav nav-pills progress-bar-tab custom-nav" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link rounded-pill active"
                                                        data-progressbar="custom-progress-bar" id="pills-gen-info-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-gen-info"
                                                        type="button" role="tab" aria-controls="pills-gen-info"
                                                        aria-selected="true">1</button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link rounded-pill"
                                                        data-progressbar="custom-progress-bar" id="pills-info-desc-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-info-desc"
                                                        type="button" role="tab" aria-controls="pills-info-desc"
                                                        aria-selected="false">2</button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link rounded-pill"
                                                        data-progressbar="custom-progress-bar" id="pills-success-tab"
                                                        data-bs-toggle="pill" data-bs-target="#pills-success"
                                                        type="button" role="tab" aria-controls="pills-success"
                                                        aria-selected="false">3</button>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="tab-content">
                                            <div class="tab-pane fade show active" id="pills-gen-info" role="tabpanel"
                                                aria-labelledby="pills-gen-info-tab">
                                                <div>
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="email">Adresse Email
                                                                    <span style="color: red">*</span></label>
                                                                <input id="email" type="email"
                                                                    class="form-control @error('email') is-invalid @enderror"
                                                                    name="email" value="{{ old('email') }}"
                                                                    required="" autofocus
                                                                    placeholder="prenom.nom@exemple.com">

                                                                @error('email')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="telephone">Téléphone
                                                                    <span style="color: red">*</span></label>
                                                                <input type="phone"
                                                                    class="form-control @error('telephone') is-invalid @enderror"
                                                                    name="telephone" value="{{ old('telephone') }}"
                                                                    required="" autofocus id="cleave-phone"
                                                                    placeholder="(+xxx)xxx-xxx-xxx">

                                                                @error('telephone')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="password">Mot de passe
                                                                    <span style="color: red">*</span></label>
                                                                <div class="position-relative auth-pass-inputgroup">
                                                                    <input name="password" type="password"
                                                                        class="form-control pe-5  password-input @error('password') is-invalid @enderror"
                                                                        placeholder="Entrer un mot de passe au maximum 8 caractères"
                                                                        id="password" required="">
                                                                    <button
                                                                        class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
                                                                        type="button" id="password-addon"><i
                                                                            class="ri-eye-fill align-middle"></i></button>

                                                                    @error('password')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                    @enderror
                                                                </div>
                                                                <div class="invalid-feedback">Entrer un mot de
                                                                    passe au maximum 8 caractères</div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label"
                                                                    for="password-confirm">Confirmation Mot de passe
                                                                    <span class="text-danger">*</span></label>
                                                                <div class="position-relative auth-pass-inputgroup">
                                                                    <input id="password-confirm" type="password"
                                                                        name="password_confirmation"
                                                                        class="form-control pe-5  password-input"
                                                                        placeholder="Confirmer (répéter) votre mot de passe"
                                                                        required="">
                                                                    <button
                                                                        class=" btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
                                                                        type="button" id="password-addon"><i
                                                                            class="ri-eye-fill align-middle"></i></button>

                                                                    @error('password')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> --}}
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label"
                                                                    for="gen-info-password-input">Type de compte
                                                                    <span style="color: red">*</span></label>
                                                                <select
                                                                    class="form-select mb-3 @error('type') is-invalid @enderror"
                                                                    aria-label="Default select example" name="type"
                                                                    id="type" autofocus required>
                                                                    <option value="" selected disabled>Choisir une
                                                                        option</option>
                                                                    <option value="Personne physique"
                                                                        {{ old('Personne physique') == 1 ? 'selected' : '' }}>
                                                                        Personne physique</option>
                                                                    <option value="Personne morale"
                                                                        {{ old('Personne morale') == 2 ? 'selected' : '' }}>
                                                                        Personne morale</option>
                                                                    <option value="Fournisseur"
                                                                        {{ old('Fournisseur') == 3 ? 'selected' : '' }}>
                                                                        Fournisseur</option>

                                                                    {{-- <option value="0">Autres</option> --}}
                                                                </select>

                                                                @error('type')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="pays_id">Pays
                                                                    d'origine (Nationalité) <span
                                                                        style="color: red">*</span></label>

                                                                <select name="pays_id" id="pays_id"
                                                                    class="form-select @error('pays_id') is-invalid @enderror"
                                                                    required>
                                                                    <option value="" selected disabled>Choisir un
                                                                        pays</option>
                                                                    @foreach ($pays as $pay)
                                                                        <option value="{{ $pay->id }}"
                                                                            {{ old('pays_id') == $pay->id ? 'selected' : '' }}>
                                                                            {{ $pay->pays }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>

                                                                @error('pays_id')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-start gap-3 mt-4">
                                                    <button type="button"
                                                        class="btn btn-primary btn-label right ms-auto nexttab nexttab"
                                                        data-nexttab="pills-info-desc-tab">Etape 2<i
                                                            class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i></button>
                                                </div>
                                            </div>
                                            <!-- end tab pane -->

                                            <div class="tab-pane fade" id="pills-info-desc" role="tabpanel"
                                                aria-labelledby="pills-info-desc-tab">
                                                <div>
                                                    {{-- <div class="text-center">
                                                        <div
                                                            class="profile-user position-relative d-inline-block mx-auto mb-2">
                                                            <img src="{{ asset('assets/images/users/user-dummy-img.jpg') }}"
                                                                class="rounded-circle avatar-lg img-thumbnail user-profile-image"
                                                                alt="user-profile-image">
                                                            <div
                                                                class="avatar-xs p-0 rounded-circle profile-photo-edit">
                                                                <input id="profile-img-file-input" type="file"
                                                                    class="profile-img-file-input"
                                                                    accept="image/png, image/jpeg">
                                                                <label for="profile-img-file-input"
                                                                    class="profile-photo-edit avatar-xs">
                                                                    <span
                                                                        class="avatar-title rounded-circle bg-light text-body">
                                                                        <i class="ri-camera-fill"></i>
                                                                    </span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <h5 class="fs-14">Add Image</h5>
                                                    </div> --}}

                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="name">Nom <span
                                                                        style="color: red">*</span></label>
                                                                <input name="name" type="text"
                                                                    class="form-control @error('name') is-invalid @enderror"
                                                                    value="{{ old('name') }}" required autofocus
                                                                    placeholder="Enter un  nom d'utilisateur">

                                                                @error('name')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="postnom">Post-nom <span
                                                                        style="color: red">*</span></label>
                                                                <input id="postnom" type="text"
                                                                    class="form-control @error('postnom') is-invalid @enderror"
                                                                    name="postnom" value="{{ old('postnom') }}" required
                                                                    autofocus placeholder="Enter un post-nom">

                                                                @error('postnom')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="prenom">Prénom <span
                                                                        style="color: red">*</span></label>
                                                                <input id="prenom" type="text"
                                                                    class="form-control @error('prenom') is-invalid @enderror"
                                                                    name="prenom" value="{{ old('prenom') }}" required
                                                                    autofocus placeholder="Enter un post-nom">

                                                                @error('prenom')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>

                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="profession">Profession
                                                                    <span style="color: red">*</span></label>
                                                                <input id="profession" type="text"
                                                                    class="form-control @error('profession') is-invalid @enderror"
                                                                    name="profession" value="{{ old('profession') }}"
                                                                    required autofocus
                                                                    placeholder="Enter votre profession">

                                                                @error('profession')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div>
                                                                <label class="form-label" for="adresse">Adresse physique
                                                                    <span style="color: red">*</span></label>
                                                                <textarea id="adresse" type="text" class="form-control @error('adresse') is-invalid @enderror" name="adresse"
                                                                    placeholder="Entrer une Adresse physique" id="adresse" rows="2" required autofocus
                                                                    placeholder="Enter une adresse physique">{{ old('adresse') }}</textarea>
                                                                <div class="invalid-feedback">Entrer une adresse physique
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>
                                                <div class="d-flex align-items-start gap-3 mt-4">
                                                    <button type="button"
                                                        class="btn btn-warning text-decoration-none btn-label previestab"
                                                        data-previous="pills-gen-info-tab"><i
                                                            class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>
                                                        Etape 1</button>
                                                    <button type="button"
                                                        class="btn btn-primary btn-label right ms-auto nexttab nexttab"
                                                        data-nexttab="pills-success-tab"><i
                                                            class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>Valider</button>
                                                </div>
                                            </div>
                                            <!-- end tab pane -->

                                            <div class="tab-pane fade" id="pills-success" role="tabpanel"
                                                aria-labelledby="pills-success-tab">
                                                <div>
                                                    <div class="text-center">

                                                        <div class="avatar-md mt-5 mb-4 mx-auto">
                                                            <div
                                                                class="avatar-title bg-light text-success display-4 rounded-circle">
                                                                <i class="ri-checkbox-circle-fill"></i>
                                                            </div>
                                                        </div>
                                                        <h5>Verification</h5>
                                                        <p class="text-muted">Nous vous prions de vérifier avec soin l'exactitude de vos informations avant de procéder à l'enregistrement. Une fois votre inscription complétée, veuillez patienter au moins 10 minutes pour recevoir un code d'activation. Merci pour votre coopération.</p>

                                                        <br>
                                                        <div class="mt-1">
                                                            <button class="btn btn-primary w-50" type="submit"
                                                                id="submitBtn">S'enregistrer</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end tab pane -->
                                        </div>
                                        <!-- end tab content -->
                                    </form>
                                </div>
                                <!-- end card body -->
                            </div>
                            <!-- end card -->
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div><!-- end row -->


            <!-- end card -->

            <div class="mt-4 text-center">
                <p class="mb-0">Avez-vous déjà un compte? <a href="{{ route('login') }}"
                        class="fw-semibold text-primary text-decoration-underline"> Se connecter </a> </p>
            </div>
        </div>
    </div>
    <!-- end row -->
@endsection
@section('scripts')
    <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            //store form
            $('.save-form').on('submit', function(e) {
                e.preventDefault();
                $("#submitBtn").prop('disabled', true)

                var spinner =
                    'En cours &nbsp;<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>\n' +
                    '          <span class="sr-only">Loading...</span>'

                var formObj = $(this);
                var url = formObj.attr('action');

                $.each(formObj.find('input', 'select'), function(key, field) {
                    var element = $('[name="' + field.name + '"]');
                    element.removeClass('is-invalid');
                    element.siblings('p.error').remove();
                });

                $("#submitBtn").html(spinner);
                var formData = new FormData(formObj[0]);

                $.ajax({
                        url: url,
                        dataType: 'JSON',
                        type: 'POST',
                        cache: false,
                        data: formData,
                        processData: false,
                        contentType: false,
                        mimeType: 'multipart/form-data',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function() {
                            formData.append('_token', $('meta[name="csrf-token"]').attr('content'))
                        }
                    })
                    .done(function(data) {
                        //console.log('DONE :: ', data);
                        if (data.redirect) {
                            window.location.href = data.redirect
                        }
                    })
                    .fail((jqXHR, options, error) => {
                        $("#submitBtn").text("Valider");
                        $("#submitBtn").prop('disabled', false);
                        // console.log('FAIL :: ', jqXHR)
                        if (!jqXHR.responseJSON) {
                            return;
                        }
                        status = jqXHR.responseJSON.status;
                        error = jqXHR.responseJSON.error;

                        $.each(error, function(key, val) {
                            var element = $('[name="' + key + '"]', formObj);

                            //console.log('ELEMENT :: ', element);
                            element.addClass('is-invalid');
                            if ($.isArray(val)) {
                                val.forEach((data) => {
                                    element.parent().append(
                                        `<p class="error text-danger">${data}</p>`);
                                })
                            } else {
                                element.parent().append(
                                    `<p class="error text-danger">${data}</p>`);
                            }
                        });
                    });
            });
            //endstore

        });
    </script>
@endsection