@extends('member-fetch-admin.layouts.app')

@section('title', 'Member Fetch Admin Login')

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card shadow-lg border-0 rounded-3">
                <div class="card-header card-header-theme text-center py-3">
                    <h4 class="m-0 fw-bold"><i class="fa-solid fa-lock me-2"></i>Member Fetch Admin</h4>
                    <small class="opacity-90">Secure Login Verification</small>
                </div>
                <div class="card-body p-4">

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

                    <form action="{{ route('member-fetch-admin.login.post') }}" method="POST" id="loginForm">
                        @csrf

                        <!-- Email -->
                        <div class="mb-3">
                            <label for="email" class="form-label fw-semibold">Email Address</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa-solid fa-envelope"></i></span>
                                <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required autofocus placeholder="admin@example.com">
                            </div>
                            @error('email')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Password -->
                        <div class="mb-3">
                            <label for="password" class="form-label fw-semibold">Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa-solid fa-key"></i></span>
                                <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" required placeholder="••••••••">
                            </div>
                            @error('password')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- CAPTCHA -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">CAPTCHA Verification</label>
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div class="captcha-img-box flex-grow-1 text-center">
                                    <img src="{{ route('member-fetch-admin.captcha') }}?type=login&t={{ time() }}" id="loginCaptchaImg" alt="CAPTCHA Image" style="height: 44px; border-radius: 4px;">
                                </div>
                                <button type="button" class="btn btn-outline-secondary btn-sm h-100 py-2" onclick="refreshCaptcha('loginCaptchaImg')" title="Refresh CAPTCHA">
                                    <i class="fa-solid fa-rotate-right fs-5"></i>
                                </button>
                            </div>
                            <input type="text" name="captcha" id="captcha" class="form-control @error('captcha') is-invalid @enderror" required placeholder="Enter characters shown above" autocomplete="off">
                            @error('captcha')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-theme-primary py-2 fw-bold fs-6">
                                <i class="fa-solid fa-right-to-bracket me-2"></i> Login
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection