@extends('partial.authLayout')
@section('content')
    {!! 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

                    @if(session('success'))
                        <div class="alert alert-success mb-0" role="alert">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form method="POST" action="{{ route('customer.sms.login.send') }}">
                        @csrf
                        <input type="hidden" name="basket" value="{{isset($basket) ? $basket : null}}">

                        <div class="auth-form mt-5">
                            <label class="h5" for="mobile">
                                <i class="fas fa-mobile-alt me-2"></i>
                                شماره موبایل *
                            </label>
                            <input type="text"
                                   name="mobile"
                                   class="form-control auth-input"
                                   id="mobile"
                                   value="{{old('mobile')}}"
                                   placeholder="*********09"
                                   maxlength="11"
                                   pattern="09[0-9]{9}"
                                   required>
                            <small class="form-text text-muted mt-2">
                                <i class="fas fa-info-circle me-1"></i>
                                شماره موبایل باید با 09 شروع شود و 11 رقم باشد
                            </small>
                        </div>

                        <div class="col-12 mt-3 text-center">
                            {!! NoCaptcha::display() !!}
                        </div>

                        <div class="auth-form mt-4 w-100">
                            <button type="submit" class="w-100 btn btn-auth btn-block">
                                <i class="fas fa-paper-plane me-2"></i>
                                ارسال کد تایید
                            </button>
                        </div>
                    </form>


                    <div class="auth-links mt-4">
                        <p class="primary__color mb-2">روش‌های دیگر ورود:</p>
                        <div class="auth-methods">
                            <a href="{{route('customer.login')}}" class="btn btn-outline-auth me-2">
                                <i class="fas fa-key me-1"></i>
                                ورود با رمز عبور
                            </a>
                            <a href="{{route('customer.register')}}" class="btn btn-outline-auth">
                                <i class="fas fa-user-plus me-1"></i>
                                ثبت نام
                            </a>
                        </div>
                    </div>

                    <div class="auth-help mt-4">
                        <p class="text-muted small">
                            <i class="fas fa-question-circle me-1"></i>
                            اگر شماره موبایل شما در سیستم ثبت نشده است، ابتدا ثبت نام کنید.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .auth-section {
        max-width: 500px;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .auth-gray-text {
        color: #666;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .auth-input {
        border: 2px solid #e9ecef;
        border-radius: 10px;
        padding: 12px 15px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: #f8f9fa;
    }

    .auth-input:focus {
        border-color: var(--primaryColor, #d4af37);
        background: #fff;
        box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
    }

    .btn-auth {
        background: linear-gradient(135deg, var(--primaryColor, #d4af37), #b8941f);
        border: none;
        border-radius: 10px;
        padding: 12px 20px;
        font-weight: 600;
        color: #fff;
        transition: all 0.3s ease;
        text-transform: none;
    }

    .btn-auth:hover {
        background: linear-gradient(135deg, #b8941f, #9a7a1a);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
    }

    .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;
    }

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

    .auth-help {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 10px;
        border-left: 4px solid var(--primaryColor, #d4af37);
    }

    .form-text {
        font-size: 0.85rem;
    }

    .alert {
        border-radius: 10px;
        border: none;
        padding: 12px 15px;
    }

    .alert-danger {
        background: #f8d7da;
        color: #721c24;
    }

    .alert-success {
        background: #d1edff;
        color: #0c5460;
    }

    @media (max-width: 576px) {
        .auth-section {
            padding: 1.5rem;
            margin: 0 15px;
        }

        .auth-methods {
            flex-direction: column;
        }

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

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const mobileInput = document.getElementById('mobile');

        // Format mobile number as user types
        mobileInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');

            // Limit to 11 digits
            if (value.length > 11) {
                value = value.substring(0, 11);
            }

            e.target.value = value;
        });

        // Validate mobile number format
        mobileInput.addEventListener('blur', function(e) {
            const value = e.target.value;
            if (value && !/^09[0-9]{9}$/.test(value)) {
                e.target.setCustomValidity('شماره موبایل باید با 09 شروع شود و 11 رقم باشد');
            } else {
                e.target.setCustomValidity('');
            }
        });
    });
</script>
@endpush