@extends('site.layouts.auth-layout')

@section('title', 'ورود')

@section('content')
<div class="digi-auth-wrap">

    <div class="digi-auth-logo">
        <a href="{{ route('home') }}">
            <img src="{{ $siteLogo }}" width="160" alt="">
        </a>
    </div>

    <div class="digi-auth-card">
        <p class="digi-auth-card-title">ورود به حساب کاربری</p>
        <p class="digi-auth-card-desc">شماره موبایل و رمز عبور خود را وارد کنید.</p>

        @if ($errors->any())
            <div class="alert alert-danger digi-auth-alert" role="alert">
                <ul class="mb-0 pe-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf

            <div class="digi-auth-input-wrap">
                <label class="digi-auth-input-label">شماره موبایل</label>
                <input type="text" name="mobile" value="{{ old('mobile') }}"
                    class="digi-auth-input @error('mobile') is-invalid @enderror"
                    placeholder="09xxxxxxxxx" autocomplete="tel">
            </div>

            <div class="digi-auth-input-wrap">
                <label class="digi-auth-input-label">رمز عبور</label>
                <input type="password" name="password"
                    class="digi-auth-input @error('password') is-invalid @enderror"
                    placeholder="رمز عبور" autocomplete="current-password">
            </div>

            <button type="submit" class="digi-auth-btn">ورود</button>
        </form>

        <a href="{{ route('otp.login') }}" class="digi-auth-secondary-link">ورود با رمز یکبار مصرف</a>
    </div>

    <div class="digi-auth-bottom mt-3">
        حساب کاربری ندارید؟ <a href="{{ route('register') }}">ثبت نام</a>
    </div>

    <p class="digi-auth-terms">
        با ورود به سایت، <a href="#">شرایط و قوانین</a> و <a href="#">قوانین حریم خصوصی</a> را می‌پذیرید.
    </p>

</div>
@endsection
