@extends('layouts.admin.app')

@section('title', 'Profil')

@section('content')

    <div class="row justify-content-md-center">

        <x-banner>
            <x-slot name="title">
                Mon Profil
            </x-slot>
        </x-banner>

        <div class="col-md-10 col-lg-8">
            <div class="dashbord-main bg-light my-4 p-5">
                <div class="alert alert-danger d-none" role="alert">
                    <ul></ul>
                </div>
                <div class="dashbord-table">
                    <p class="fs-3 fst-italic">
                        <span id="firstName"></span>
                        <span id="lastName"></span>
                    </p>
                    <h5 class="text-primary fw-bold">Modifiez mot de passe</h5>
                    <form class="row g-3" id="passwordEditForm">
                        <div class="col-md-4">
                            <label for="oldPassword" class="form-label">Mot de passe actuel</label>
                            <input type="password" class="form-control" id="oldPassword" required>
                        </div>
                        <div class="col-md-4">
                            <label for="newPassword" class="form-label">Nouveau Mot de passe</label>
                            <input type="password" class="form-control" id="newPassword" required>
                        </div>
                        <div class="col-md-4">
                            <label for="newPasswordConfirmation" class="form-label">Confirmez Nouveau Mot de
                                passe</label>
                            <input type="password" class="form-control" id="newPasswordConfirmation" required>
                            <div class="invalid-feedback d-none">
                                Les mots de passe ne correspondent pas.
                            </div>
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary mb-3">Modifiez le mot de passe</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <!-- custom script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('js/admin/profile.js') }}"></script>
@endpush