@extends('layouts.auth')

@section('title', 'Reset Password')

@push('styles')
<style>
    html, body {
        height: 100%;
        font-family: 'Poppins', sans-serif;
        background-color: #fff;
    }
    
    .password-toggle {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        cursor: pointer;
        color: #aaa;
    }
    

    .auth-card {
        border: 1px solid #FEBD21;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .logo-text span:last-child {
        color: #FEBD21;
    }
    


</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-center h-100">
    <div class="auth-card p-4 p-md-5 bg-white" style="max-width: 550px; width: 100%;">

        <div class="text-center mb-4">
            <h4 class="fw-bold">Reset your password</h4>
            <p class="text-muted small mb-0">
                Enter your new password below to regain access to your account.
            </p>
        </div>

        {{-- Alerts --}}
        @foreach (['success', 'error'] as $msg)
            @if (session($msg))
                <div class="alert alert-{{ $msg === 'success' ? 'success' : 'danger' }}">
                    {{ session($msg) }}
                </div>
            @endif
        @endforeach

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Reset Password Form --}}
        <form action="{{ route('password.update') }}" method="POST">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">

            <div class="mb-3 position-relative">
                <input
                    type="password"
                    name="password"
                    class="form-control password-field @error('password') is-invalid @enderror"
                    placeholder="New password"
                    required
                >
                <i class="fas fa-eye password-toggle" id="togglePassword"></i>
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3 position-relative">
                <input
                    type="password"
                    name="password_confirmation"
                    class="form-control password-field"
                    placeholder="Confirm new password"
                    required
                >
                <i class="fas fa-eye password-toggle" id="toggleConfirmPassword"></i>
            </div>



            <button type="submit" class="btn w-100 text-white" style="background-color: #FEBD21;">
                Reset password
            </button>

            <p class="text-center small mt-3 mb-0">
                <a href="{{ route('login') }}" class="text-decoration-none fw-semibold" style="color: #4b4945;">
                    <span class="fa fa-arrow-left"></span> Back to login
                </a>
            </p>
        </form>
    </div>
</div>
@endsection