@extends('layouts.website.app')
@section('title', 'Admin Login')

@section('content')
    <div
        class="min-h-screen flex items-center justify-center px-4 py-12
                bg-gradient-to-b from-[#f8fafc] to-[#e0e7ff]">

        <div class="w-full max-w-sm bg-white rounded-3xl shadow-2xl
                   p-7 md:p-9 border border-gray-200">

            <!-- Logo + Title -->
            <div class="flex flex-col items-center mb-8">
                <img src="{{ asset('icon/sao-nghe.jpg') }}" alt="Logo Admin"
                    class="w-16 h-16 mb-4 rounded-full
                            shadow-md ring-2 ring-[#1e40af]/20">

                <h1 class="text-2xl font-bold tracking-wide text-gray-900">
                    Đăng nhập trang quản trị
                </h1>
            </div>

            <!-- Form -->
            <form id="loginForm" method="POST" action="{{ route('login') }}" class="space-y-5">
                @csrf

                <!-- Phone -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Tài khoản
                    </label>

                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                            <i class="ri-user-line"></i>
                        </span>

                        <input type="text" name="phone" value="{{ old('phone') }}" placeholder="Nhập số điện thoại"
                            class="w-full pl-10 pr-4 py-2.5 rounded-xl
                                   border border-gray-300
                                   focus:outline-none focus:ring-2
                                   focus:ring-[#1e40af]
                                   focus:border-[#1e40af]
                                   text-sm"
                            required autofocus>
                    </div>

                    @error('phone')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Password -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Mật khẩu
                    </label>

                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                            <i class="ri-lock-line"></i>
                        </span>

                        <input type="password" name="password" placeholder="Nhập mật khẩu"
                            class="w-full pl-10 pr-4 py-2.5 rounded-xl
                                   border border-gray-300
                                   focus:outline-none focus:ring-2
                                   focus:ring-[#1e40af]
                                   focus:border-[#1e40af]
                                   text-sm"
                            required>
                    </div>

                    @error('password')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Button -->
                <button type="submit"
                    class="w-full bg-[#1e40af] text-white py-2.5 rounded-xl
                           hover:bg-[#1e3a8a]
                           transition font-semibold tracking-wide
                           shadow-lg flex items-center justify-center gap-2">

                    <i class="ri-login-box-line"></i>
                    Đăng nhập
                </button>
            </form>
        </div>
    </div>

    {{-- CSRF --}}
    <script>
        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
        const csrfInput = document.querySelector('#loginForm input[name="_token"]');
        const csrfToken = csrfMeta?.getAttribute('content') || csrfInput?.value || '';

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });
    </script>

    {{-- Ajax Login --}}
    <script>
        $('#loginForm').on('submit', function(e) {
            e.preventDefault();

            const btn = $(this).find('button[type="submit"]');
            btn.prop('disabled', true)
                .html('<i class="ri-loader-4-line animate-spin"></i> Đang đăng nhập...');

            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: $(this).serialize(),
                success: function() {
                    window.location.href = '/admin';
                },
                error: function(xhr) {
                    btn.prop('disabled', false)
                        .html('<i class="ri-login-box-line"></i> Đăng nhập');
                    handleAjaxError(xhr);
                }
            });
        });
    </script>
@endsection