@extends('layouts.app')

@section('content')
<div class="container">
    <div class="container py-3 px-0">
        <div class="mx-auto wow fadeInDown" data-wow-delay="0s">
            <h4 class="text-black-or-white">Mon compte</h4>
            <p class="txt-grey m-0 p-0">Vous pouvez modifier le formulaire ci-dessous pour changer vos informations personnelles.</p>
            <hr />
        </div>
        <div class="row">
            <div class="col-md-12 bg-grey border-radius-10">
                <div class="row">
                    <div class="col-12 col-md-6 px-5">
                        <h3 class="mt-3 mb-0 py-0 text-black-or-white">Mes informations</h3>
                        <hr />

                        <form id="modifier_compte">
                            @csrf
                            <div class="form-group my-4">
                                <label class="control-label" for="societe">Votre société</label>
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="fa-regular fa-location-dot text-white-or-black"></i></div>
                                    <input type="text" class="form-control ps-2" id="societe" name="societe" placeholder="Saisissez votre nom de société..." value="{{ $user->companies->first()->name ?? '' }}" autocomplete="company" />
                                </div>
                            </div>

                            <div class="row my-4">
                                <div class="form-group col-12 col-md-6">
                                    <label class="control-label" for="firstname">Prénom</label>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa-regular fa-user text-white-or-black"></i></div>
                                        <input type="text" class="form-control ps-2" id="firstname" name="firstname" placeholder="Saisissez votre prénom..." value="{{ $user->firstname ?? '' }}" required autocomplete="given-name" />
                                    </div>
                                </div>

                                <div class="form-group col-12 col-md-6">
                                    <label class="control-label" for="lastname">Nom</label>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa-regular fa-user text-white-or-black"></i></div>
                                        <input type="text" class="form-control ps-2" id="lastname" name="lastname" placeholder="Saisissez votre nom..." value="{{ $user->lastname ?? '' }}" required autocomplete="family-name" />
                                    </div>
                                </div>
                            </div>

                            <div class="row my-4">
                                <div class="form-group col-12 col-md-6">
                                    <label class="control-label" for="telephone">Numéro de téléphone</label>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa-regular fa-mobile text-white-or-black"></i></div>
                                        <input type="text" class="form-control ps-2" id="telephone" name="telephone" placeholder="Saisissez votre numéro de téléphone..." value="{{ $user->phones->first()->name ?? '' }}" required autocomplete="tel" />
                                    </div>
                                </div>

                                <div class="form-group col-12 col-md-6">
                                    <label class="control-label" for="zip_code">Code postal</label>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa-regular fa-location-dot text-white-or-black"></i></div>
                                        <input type="text" class="form-control ps-2" id="zip_code" name="zip_code" placeholder="Saisissez votre code postal..." value="{{ $user->address->zip_code ?? '' }}" required autocomplete="postal-code" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group my-4">
                                <label class="control-label" for="email_inscription">Email</label>
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="fa-regular fa-user text-white-or-black"></i></div>
                                    <input type="text" class="form-control ps-2" id="email_inscription" name="email" placeholder="Saisissez votre email..." value="{{ $user->email ?? '' }}" required autocomplete="off" />
                                </div>
                                <div class="alert"></div>
                            </div>

                            <div class="row my-4">
                                <div class="form-group my-4 d-grid gap-2 d-sd-block">
                                    <button type="submit" class="btn btn-primary py-2 px-4 animated slideInDown">Enregistrer</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="col-12 col-md-6 px-5">
                        <h3 class="mt-3 mb-0 py-0 text-black-or-white">Modifier mon mot de passe</h3>
                        <hr />
                        <form id="modifier_mot_de_passe">
                            @csrf
                            <div class="form-group my-4">
                                <label class="control-label" for="password">Mot de passe actuel</label>
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="fa-regular fa-lock-keyhole text-white-or-black"></i><div class="unmask_password"><i class="fa-solid fa-eye"></i></div></div>
                                    <input type="password" class="form-control password ps-2" id="password" name="password" placeholder="Saisissez votre mot de passe.." required autocomplete="off" />
                                </div>
                            </div>

                            <div class="row my-4">
                                <div class="form-group col-12 col-md-6">
                                    <label class="control-label" for="nouveau_mot_de_passe">Nouveau mot de passe</label>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa-regular fa-lock-keyhole text-white-or-black"></i><div class="unmask_password"><i class="fa-solid fa-eye"></i></div></div>
                                        <input type="password" class="form-control password ps-2" id="nouveau_mot_de_passe" name="nouveau_mot_de_passe" placeholder="Saisissez votre mot de passe.." required autocomplete="off" />
                                    </div>
                                </div>

                                <div class="form-group col-12 col-md-6">
                                    <label class="control-label" for="confirmer_nouveau_mot_de_passe">Confirmez le nouveau mot de passe</label>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa-regular fa-lock-keyhole text-white-or-black"></i><div class="unmask_password"><i class="fa-solid fa-eye"></i></div></div>
                                        <input type="password" class="form-control password ps-2" id="confirmer_nouveau_mot_de_passe" name="nouveau_mot_de_passe_confirmation" placeholder="Saisissez votre mot de passe.." required autocomplete="off" />
                                    </div>
                                </div>
                            </div>

                            <div class="row my-4">
                            <div class="form-group my-4 d-grid gap-2 d-sd-block">
                                    <button type="submit" class="btn btn-primary py-2 px-4 animated slideInDown">Enregistrer</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade pt-5" tabindex="-1" role="dialog" id="modal-modification-mon-compte" aria-labelledby="modal-modification-mon-compte" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-lg-4 col-md-8 col-12 mx-auto margin-top-modal">
            <div class="row bg-grey border-radius-10">

                <div class="col-12 mx-auto">
                    <div class="col-12 text-right mb-2" style="float: right; left:15px;top:10px">
                        <span style="cursor: pointer;right:0" class="icon-close text-white-or-black" data-bs-dismiss="modal" aria-label="Close"><i class="fa-solid fa-xmark"></i></span>
                    </div>

                    <div class="modal-body col-md-10 col-12 p-0 mx-auto text-center">

                        <div class="col-12 mb-4 p-0 pt-4">
                            <div class="text-center text-font-default">
                                <div class="mb-4 double-circle-gold" style="margin: auto;">
                                    <span><i class="fa-solid fa-check"></i></span>
                                </div>
                                <h4 id="modal-modification-mon-compte-titre" class="text-white"></h4>
                            </div>
                        </div>

                        <p id="modal-modification-mon-compte-message" class="text-white"></p>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection