@extends('layouts.guest')
@section('title','Recuperation du mot de passe')
@section('css')
    <style>
        .ps-breadcrumb .breadcrumb a {
            font-weight: 600;
            line-height: 20px;
            color: #0a8f1c;
        }
        .ps-breadcrumb .breadcrumb a:hover {
            font-weight: 700;
            line-height: 25px;
            color: #ffbc05;
        }
        .forgot-password {
            font-weight: 600;
            line-height: 20px;
            color: #0a8f1c;
        }
        .forgot-password:hover {
            font-weight: 700;
            line-height: 20px;
            color: #ffbc05;
        }
        .ps-my-account {
            min-height: 75vh;
            background-color: #ffffff;
        }
        .ps-breadcrumb {
            padding: 20px 25px;
            background-color: #ffffff;
        }
        .ps-form--account .form-forgot i {
            position: absolute;
            font-size: 180%;
            top: 55%;
            transform: translateY(-50%);
            left: 22px;
            color: #878787;
        }
        .ps-form--account .form-forgot > span {
            position: absolute;
            font-size: 150%;
            font-weight: 500;
            top: 50%;
            cursor: pointer;
            transform: translateY(-50%);
            right: 20px;
            color: #878787;
        }
        .ps-form--account .form-forgot input {
            padding-right: 30px;
            padding-left: 70px;
            border-radius: 0.6rem;
        }

        .form-control {
            outline: none;
            font-size: 20px;
            padding: 0 20px;
            background-color: transparent;
            border: 1px solid #dddddd;
        }
        .form-control:focus {
            outline: none;
            font-size: 20px;
            padding: 0 20px;
            background-color: transparent;
            border: 1px solid #0a8f1c;
        }
        .ps-checkbox label:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            height: 20px;
            width: 20px;
            border-radius: 2px;
            z-index: 10;
            border: 1px solid #dddddd;
            transition: all .4s ease;
        }
        .ps-checkbox input[type=checkbox]:checked ~ label:before {
            background-color: #047112;
            border-color: #047112;
        }
        h3 {
           color: #047112;
        }
        .ps-btn, button.ps-btn {
            display: inline-block;
            padding: 13px 25px;
            font-size: 20px;
            font-weight: 600;
            line-height: 20px;
            color: #fff;
            border: none;
            border-radius: 50px;
            background-color: #047112;
            transition: all .4s ease;
            cursor:pointer;
        }
        .ps-btn:hover, .ps-btn:active, button.ps-btn:hover, button.ps-btn:active {
            background-color: #ffbc05;
            color: #fff;
        }
        .ps-form--account {
            max-width: inherit;
            margin: 0 auto;
            padding-top: 0px;
        }
        .ps-form--account .ps-form__content {
            padding: 100px 30px 0;
        }
        @media (min-width: 1200px){
            .container {
                min-width: inherit;
            }
        }

        .header--standard .header__content-left .ps-logo {
            margin-right: 30px;
            margin-left: 77px;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="ps-breadcrumb">
                <div class="container">
                    <ul class="breadcrumb">
                        <li><a href="{{route('welcome')}}"><i class="bi bi-arrow-left-short"></i>Retourner à l'accueil</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6 offset-md-3">
            <div class="ps-page--my-account">
                <div class="ps-my-account">
                    <div class="container">
                        <form class="ps-form--account ps-tab-root" action="{{ route('recovery.account') }}" method="post">
                            @csrf
                            <x-alert/>
                            <div class="ps-tabs">
                                <div class="ps-tab active" id="sign-in">
                                    <div class="ps-form__content">
                                        <h3 class="mb-4 text-sm text-gray-600 text-justified">
                                            Entrez votre nouveau mot de passe, confirmez-le et soumettez les modifications.
                                        </h3>
                                        <div class="form-group form-forgot {!! $errors->has('email') ? 'has-error' : '' !!}">
                                            <i class="bi bi-lock"></i>
                                            <input class="form-control" name="email" type="text" value="{{$email}}" readonly>
                                            {!! $errors->first('email', '<small class="help-block">Le champ email est requis.</small>') !!}
                                        </div>
                                        <div class="form-group form-forgot {!! $errors->has('password') ? 'has-error' : '' !!}">
                                            <i class="bi bi-lock"></i>
                                            <input class="form-control" name="password" type="password" placeholder="Nouveau mot de passe" >
                                            {!! $errors->first('password', '<small class="help-block">Le champ password est requis.</small>') !!}
                                        </div>
                                        <div class="form-group form-forgot {!! $errors->has('password_confirmation') ? 'has-error' : '' !!}">
                                            <i class="bi bi-lock"></i>
                                            <input class="form-control" name="password_confirmation" type="password" placeholder="Confirmer le mot de passe" >
                                            {!! $errors->first('password_confirmation', '<small class="help-block">Le champ confirmer le password.</small>') !!}
                                        </div>
                                        <div class="form-group submtit" style="text-align: center">
                                            <button class="ps-btn" type="submit">Soumettre</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="ps-footer ps-footer--3">
        <div class="ps-footer__copyright">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <p>&copy; 2021 Afroshop. All Rights Reserved</p>
                    </div>
                    <div class="col-md-6 text-right">
                        <p>
                            <a href="#"><i class="fa fa-facebook"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-youtube"></i></a>
                            <a href="#"><i class="fa fa-instagram"></i></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
@endsection