@extends('layouts.auth')

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

@section('content')
<div class="card shadow-sm border-0 rounded-4">
    <div class="card-body p-4">
        <h5 class="card-title fw-bold text-dark mb-3">Sign In to Admin Panel</h5>

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

            <div class="mb-3">
                <label for="login" class="form-label text-secondary small fw-medium">Username or Email</label>
                <div class="input-group">
                    <span class="input-group-text bg-light"><i class="bi bi-person text-muted"></i></span>
                    <input type="text" class="form-control bg-light" id="login" name="login" placeholder="admin or admin@example.com" required autofocus>
                </div>
            </div>

            <div class="mb-3">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <label for="password" class="form-label text-secondary small fw-medium mb-0">Password</label>
                    <a href="{{ route('admin.forgot-password') }}" class="text-primary small text-decoration-none">Forgot password?</a>
                </div>
                <div class="input-group">
                    <span class="input-group-text bg-light"><i class="bi bi-lock text-muted"></i></span>
                    <input type="password" class="form-control bg-light" id="password" name="password" placeholder="••••••••" required>
                    <button class="btn btn-light border" type="button" id="togglePassword"><i class="bi bi-eye text-muted"></i></button>
                </div>
            </div>

            <div class="mb-4 form-check">
                <input type="checkbox" class="form-check-input" id="remember" name="remember" value="1">
                <label class="form-check-label small text-secondary" for="remember">Remember me on this device</label>
            </div>

            <button type="submit" class="btn btn-primary w-100 py-2 rounded-3 fw-semibold">Sign In</button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script type="module">
    $(document).ready(function () {
        $('#togglePassword').on('click', function () {
            const input = $('#password');
            const icon = $(this).find('i');
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                icon.removeClass('bi-eye').addClass('bi-eye-slash');
            } else {
                input.attr('type', 'password');
                icon.removeClass('bi-eye-slash').addClass('bi-eye');
            }
        });

        $('#loginForm').validate({
            rules: {
                login: { required: true },
                password: { required: true }
            },
            messages: {
                login: { required: 'Please enter your username or email address.' },
                password: { required: 'Please enter your password.' }
            },
            errorElement: 'div',
            errorClass: 'invalid-feedback invalid-feedback-custom text-danger small mt-1',
            errorPlacement: function (error, element) {
                if (element.closest('.input-group').length) {
                    error.insertAfter(element.closest('.input-group'));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function(element) {
                $(element).addClass('is-invalid');
                $(element).closest('.input-group').addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
                const group = $(element).closest('.input-group');
                if (group.length && !group.find('.is-invalid').length) {
                    group.removeClass('is-invalid');
                }
            },
            submitHandler: function (form) {
                AdminAjax.submit({
                    form: form
                });
            }
        });
    });
</script>
@endpush