@extends('layouts.authLayout')
@section('title', 'Reset password')

@section('content')
    <div class="d-flex justify-content-center align-items-center mb-5" style="min-height: 60vh;">
        <div class="p-5 loginModal" style="width: 100%; max-width: 400px;">
            <!-- Logo centrado con tamaño controlado -->
            <div class="text-center mb-4">
                <a href="{{ route('mainPage') }}">
                    <img src="{{ asset('img/dailyStudyLogo.png') }}" alt="DailyStudy Logo" class="img-fluid" style="max-height: 100px;">
                </a>
            </div>
            <h2 class="text-center mb-4">Reset password</h2>
            <form action="{{ route('password.reset.submit') }}" method="POST">
                @csrf

                <!-- Campo oculto con el token de la URL -->
                <input type="hidden" name="token" value="{{ $token }}">

                <div class="mb-4">
                    <!-- Nueva contraseña -->
                    <label for="password" class="form-label">New Password</label>
                    <input type="password" class="auth-input w-100" id="password" name="password">
                    <i class="bi bi-eye-slash" id="togglePassword4"></i>
                    @error('password')
                        <p class="error" style="color: red;">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Confirmación -->
                <div class="mb-4">
                    <label for="password_confirmation" class="form-label">Repeat password</label>
                    <input type="password" class="auth-input w-100" id="password_confirmation" name="password confirmation">
                    <i class="bi bi-eye-slash" id="togglePassword5"></i>
                    @error('password_confirmation')
                        <p class="error" style="color: red;">{{ $message }}</p>
                    @enderror
                </div>

                <div class="text-center pt-4 mb-3">
                    <button type="submit" class="btn btn1">Update Password</button>
                </div>
            </form>
            <p class="pt-2 mb-0">Don't have an account? Register <a href="{{ route('registerPage') }}">here</a></p>
            <p>Already have an account? Log in <a href="{{ route('login') }}">here</a></p>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/restart_password.js') }}"></script>

    @if(session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: "{{ session('success') }}",
                confirmButtonColor: '#6f42c1'
            });
        </script>
    @endif
@endsection
