@extends('layouts.login')
@section('title', 'Réinitialiser le mot de passe')   
@section('content')
<div class="row justify-content-center align-items-center" style="height: 100vh">
    
    <div class="col-md-8">
        
        <div class="card card-body border-0 p-0 border-radius-0 shadow-sm">
            <div class="row justify-content-center align-items-center" style="height: 100%">
                
                <div class="col-md-6 mb-3 px-5">     
                    <div class="row mb-4">
                        <div class="col-md-6 d-flex align-items-center">
                            <img class="img-fluid" src="{{ asset('images/tfv-logo.png') }}" alt="tfv">
                        </div>
                        <div class="col-md-6 d-flex align-items-center">
                            <img class="img-fluid" src="{{ asset('images/soprop-logo.png') }}" alt="soprop">
                        </div>
                    </div>
                    
                    <form class="form-signin" method="POST" action="{{ route('password.store') }}">
                        @csrf
                        <!-- Password Reset Token -->
                        <input type="hidden" name="token" value="{{ $request->route('token') }}">

                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="email" name="email" placeholder="johndoe@site.ab" value="{{ old('email', $request->email) }}" autofocus required autocomplete="username">
                            <label for="email">Adresse Email</label>
                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-floating mb-3">
                            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required autocomplete="new-password">
                            <label for="password">Mot de passe</label>
                            @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-floating mb-3">
                            <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Password" required autocomplete="new-password">
                            <label for="password">Confirmer le mot de passe</label>
                            @error('password_confirmation')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        
                        <button class="btn btn-primary w-100 mt-3" type="submit">
                            Réinitialiser le mot de passe
                        </button>  
                        
                    </form>
                </div>  
                
                <div class="col-md-6 p-0 overflow-hidden d-none d-lg-block" style="height: 65vh;">
                    <img style="height: 100%; width: 100%; object-fit: cover; object-position: center" src="{{ asset('images/home-banner-3.jpeg') }}" alt="Home banner">
                </div>
            </div>
        </div>        
        
    </div>
</div>
@endsection