@extends('layouts.auth')

@section('title', 'تسجيل الدخول')
@section('subtitle', 'تسجيل الدخول إلى لوحة العيادة')

@section('content')
<div class="card card-md">
    <div class="card-body">
        <h2 class="h3 text-center mb-4">تسجيل الدخول</h2>

        <form id="loginForm" action="{{ route('login.attempt') }}" method="POST" autocomplete="off" novalidate>
            @csrf
            <div class="mb-3">
                <label class="form-label" for="email">البريد الإلكتروني</label>
                <input id="email" name="email" type="email" class="form-control" placeholder="user@example.com" required autofocus value="{{ old('email') }}">
                <div class="invalid-feedback" data-field-error="email"></div>
            </div>
            <div class="mb-2">
                <label class="form-label" for="password">
                    كلمة المرور
                    <span class="form-label-description">
                        <a href="{{ route('password.request') }}" tabindex="-1">نسيت كلمة المرور؟</a>
                    </span>
                </label>
                <div class="input-group input-group-flat">
                    <input id="password" name="password" type="password" class="form-control" placeholder="••••••••" required autocomplete="current-password">
                    <span class="input-group-text">
                        <a href="#" class="link-secondary" data-toggle-password tabindex="-1"><i class="ti ti-eye"></i></a>
                    </span>
                </div>
                <div class="invalid-feedback d-block" data-field-error="password"></div>
            </div>
            <div class="mb-3">
                <label class="form-check">
                    <input type="checkbox" name="remember" value="1" class="form-check-input">
                    <span class="form-check-label">تذكرني على هذا الجهاز</span>
                </label>
            </div>
            <div class="form-footer">
                <button id="loginSubmit" type="submit" class="btn btn-primary w-100">
                    <span class="btn-label">تسجيل الدخول</span>
                    <span class="spinner-border spinner-border-sm d-none ms-2" role="status"></span>
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        const $form = $('#loginForm');
        const $btn = $('#loginSubmit');

        $('[data-toggle-password]').on('click', function (e) {
            e.preventDefault();
            const $pw = $('#password');
            const $icon = $(this).find('i');
            if ($pw.attr('type') === 'password') {
                $pw.attr('type', 'text');
                $icon.removeClass('ti-eye').addClass('ti-eye-off');
            } else {
                $pw.attr('type', 'password');
                $icon.removeClass('ti-eye-off').addClass('ti-eye');
            }
        });

        function clearErrors() {
            $('[data-field-error]').text('').removeClass('d-block');
            $form.find('.is-invalid').removeClass('is-invalid');
        }

        function showErrors(errors) {
            Object.keys(errors).forEach(field => {
                const $field = $form.find(`[name="${field}"]`);
                $field.addClass('is-invalid');
                $form.find(`[data-field-error="${field}"]`).text(errors[field][0]).addClass('d-block');
            });
        }

        $form.on('submit', function (e) {
            e.preventDefault();
            clearErrors();
            $btn.prop('disabled', true).find('.spinner-border').removeClass('d-none');

            $.ajax({
                url: $form.attr('action'),
                method: 'POST',
                data: $form.serialize(),
            }).done(res => {
                window.location.href = res.redirect;
            }).fail(xhr => {
                $btn.prop('disabled', false).find('.spinner-border').addClass('d-none');
                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    showErrors(xhr.responseJSON.errors);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'تعذر تسجيل الدخول',
                        text: xhr.responseJSON?.message || 'حدث خطأ غير متوقع. حاول مرة أخرى.',
                    });
                }
            });
        });
    })();
</script>
@endpush