@extends('layouts.app')

@section('content')

@php
    $locale = app()->getLocale();
    $dir = $locale === 'ar' ? 'rtl' : 'ltr';
@endphp

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

<div class="min-vh-100 d-flex align-items-center py-5" dir="{{ $dir }}" lang="{{ $locale }}" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">

    <div class="container">

        <div class="row g-0 bg-white shadow-lg rounded-4 overflow-hidden" style="max-width: 1200px; margin: 0 auto;">

            <!-- Colonne de gauche avec l'image -->

            <div class="col-lg-6 d-none d-lg-block position-relative">

                <div class="h-100" style="background: linear-gradient(rgb(109 130 222 / 15%), rgb(109 130 222 / 15%)), url('{{ asset('assets/img/hero/images.jpg') }}'); background-size: cover; background-position: center; min-height: 600px;">

                    <div class="position-absolute bottom-0 start-0 p-5 text-white">

                        

                    </div>

                </div>

            </div>



            <!-- Colonne de droite avec le formulaire -->

            <div class="col-lg-6">

                <div class="p-4 p-md-5">

                    <div class="text-center mb-4">

                        <h2 class="h3 mb-3">{{ __('site.auth.reset_title') }}</h2>

                        <p class="text-muted">{{ __('site.auth.reset_instructions') }}</p>

                    </div>



                    @if(session('success'))

                        <div class="alert alert-success rounded-3 border-0 shadow-sm">

                            {{ session('success') }}

                        </div>

                    @endif



                    @if($errors->any())

                        <div class="alert alert-danger rounded-3 border-0 shadow-sm">

                            {{ $errors->first() }}

                        </div>

                    @endif



                    <form action="{{ route('password.update') }}" method="POST" novalidate>

                        @csrf

                        <input type="hidden" name="token" value="{{ $token }}">



                        <div class="mb-4">

                            <label class="form-label fw-bold">{{ __('site.auth.email_label') }}</label>

                            <input type="email" name="email" class="form-control form-control-lg rounded-3 shadow-sm" 

                                style="direction: {{ $dir === 'rtl' ? 'rtl' : 'ltr' }};" 

                                value="{{ $email ?? old('email') }}" 

                                readonly>

                        </div>



                        <div class="mb-4 position-relative">

                            <label class="form-label fw-bold">{{ __('site.auth.new_password_label') }}</label>

                            <input type="password"

                                   id="password"

                                   name="mdp"

                                   class="form-control form-control-lg rounded-3 shadow-sm"

                                   placeholder="{{ __('site.auth.new_password_placeholder') }}"

                                   style="text-transform:none; direction: {{ $dir === 'rtl' ? 'rtl' : 'ltr' }}; padding-{{ $dir === 'rtl' ? 'right' : 'left' }}:45px;"

                                   pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#]).{8,}"

                                   required>

                            <span onclick="togglePassword('password', this)"

                                  class="position-absolute top-50 {{ $dir === 'rtl' ? 'end' : 'start' }}-0 translate-middle-y {{ $dir === 'rtl' ? 'pe' : 'ps' }}-3"

                                  style="cursor:pointer; margin-top: 12px;">

                                <i class="bi bi-eye-slash"></i>

                            </span>

                            @error('mdp')

                                <small class="text-danger d-block mt-1">{{ $message }}</small>

                            @enderror

                        </div>



                        <div class="mb-4 position-relative">

                            <label class="form-label fw-bold">{{ __('site.auth.confirm_password_label') }}</label>

                            <input type="password"

                                   id="password_confirmation"

                                   name="mdp_confirmation"

                                   class="form-control form-control-lg rounded-3 shadow-sm"

                                   placeholder="{{ __('site.auth.confirm_password_placeholder') }}"

                                   style="text-transform:none; direction: {{ $dir === 'rtl' ? 'rtl' : 'ltr' }}; padding-{{ $dir === 'rtl' ? 'right' : 'left' }}:45px;"

                                   required>

                            <span onclick="togglePassword('password_confirmation', this)"

                                  class="position-absolute top-50 {{ $dir === 'rtl' ? 'end' : 'start' }}-0 translate-middle-y {{ $dir === 'rtl' ? 'pe' : 'ps' }}-3"

                                  style="cursor:pointer; margin-top: 12px;">

                                <i class="bi bi-eye-slash"></i>

                            </span>

                            <small id="confirmHelp" class="d-block mt-1"></small>

                        </div>



                        <div class="d-grid gap-2 mb-4">

                            <button class="btn btn-lg it-btn-orange rounded-3" type="submit">

                                <span class="d-flex align-items-center justify-content-center">

                                    {{ __('site.auth.reset_button') }}

                                    <svg width="16" height="16" viewBox="0 0 12 13" fill="none" class="ms-2"

                                        xmlns="http://www.w3.org/2000/svg">

                                        <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z"

                                            fill="white" />

                                    </svg>

                                </span>

                            </button>

                        </div>



                        <div class="text-center">

                            <span>{{ __('site.auth.remembered_password') }} <a href="{{ route('login') }}" class="text-decoration-none fw-bold">{{ __('site.auth.login') }}</a></span>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

<script>
function togglePassword(id, el) {
    const input = document.getElementById(id);
    const icon = el.querySelector('i');
    if (input.type === "password") {
        input.type = "text";
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    } else {
        input.type = "password";
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('password').addEventListener('input', function () {
        const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#]).{8,}$/;
        this.style.borderColor = strongRegex.test(this.value) ? 'green' : 'red';
    });
    
    document.getElementById('password_confirmation').addEventListener('input', function () {
        const msg = document.getElementById('confirmHelp');
        if (this.value !== document.getElementById('password').value) {
            msg.textContent = "{{ __('site.auth.validation.password_confirmed') }}";
            msg.style.color = 'red';
        } else {
            msg.textContent = "✔";
            msg.style.color = 'green';
        }
    });
});
</script>



@endsection