@extends('partial.authLayout')
@section('content')
    <style>
        .g-recaptcha div {
            width: 100% !important;
        }
    </style>
    {!! NoCaptcha::renderJs('fa') !!}
    <div class="container sp_top_50 sp_bottom_50">
        <div class="row">
            <div class="col-12">
                <div class="auth-section">
                    <div class="text-center sp_bottom_80">
                        <a href="/"><img src="{{ $config['logo'] ?? '/theme/img/logo/logo__3.png' }}" alt="{{ $config['site_title'] ?? '' }}"></a>
                    </div>
                    <p class="h3 text-end mb-3">ورود | ثبت نام</p>
                    <p class="auth-gray-text">خوش آمدید</p>
                    <p class="auth-gray-text">لطفا نام کاربری و گذرواژه خود را وارد کنید</p>
                    @if($errors->any())
                        <div class="alert alert-danger mb-0" role="alert">
                            {{ $errors->first() }}
                        </div>
                    @endif
                    <form method="POST" action="{{ route('customer.login') }}">
                        @csrf
                        <input type="hidden" name="basket" value="{{isset($basket) ? $basket : null}}">
                        <div class="auth-form mt-5">
                            <label class="h5" for="mobile">نام کاربری *</label>
                            <input type="text" name="mobile" class="form-control auth-input" id="mobile" value="{{old('mobile')}}"
                                   placeholder="شماره همراه خود را وارد نمائید">
                        </div>
                        <div class="auth-form mt-4">
                            <label class="h5" for="password">گذرواژه *</label>
                            <input type="password" name="password" class="form-control auth-input" id="password"
                                   placeholder="رمز عبور خود را وارد نمائید">
                        </div>
                        <div class="col-12 mt-2 text-center">
                            {!! NoCaptcha::display() !!}

                        </div>

                        <div class="auth-form mt-4 w-100">
                            <button type="submit" class="w-100 btn btn-auth btn-block"> وارد شوید</button>
                        </div>
                    </form>
                    <div class="auth-links mt-4">
                        <p class="primary__color mb-2">روش‌های دیگر ورود:</p>
                        <div class="auth-methods">
                            <a href="{{route('customer.sms.login')}}" class="btn btn-outline-auth me-2">
                                <i class="fas fa-mobile-alt me-1"></i>
                                ورود با پیامک
                            </a>
                            <a href="{{route('customer.password.reset')}}" class="btn btn-outline-auth me-2">
                                <i class="fas fa-key me-1"></i>
                                فراموشی رمز عبور
                            </a>
                        </div>
                    </div>

                    <p class="primary__color mt-3 mb-0">آیا در {{ $config['site_title'] ?? config('app.name') }} حساب کاربری
                        ندارید؟ </p>
                    <a href="{{route('customer.register')}}" class="secondary-color">ایجاد حساب کاربری </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .auth-links {
        margin-top: 1.5rem;
    }

    .auth-methods {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .btn-outline-auth {
        border: 2px solid var(--primaryColor, #d4af37);
        color: var(--primaryColor, #d4af37);
        background: transparent;
        border-radius: 10px;
        padding: 8px 16px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }

    .btn-outline-auth:hover {
        background: var(--primaryColor, #d4af37);
        color: #fff;
        transform: translateY(-1px);
    }

    .auth-divider {
        text-align: center;
        position: relative;
        margin: 1.5rem 0;
    }

    .auth-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #e9ecef;
    }

    .auth-divider span {
        background: #fff;
        padding: 0 15px;
        color: #666;
        font-size: 0.9rem;
    }

    @media (max-width: 576px) {
        .auth-methods {
            flex-direction: column;
        }

        .btn-outline-auth {
            text-align: center;
        }
    }
</style>
@endpush