@php use App\Models\LoginBanner;use App\Models\Setting; @endphp
@extends('auth.layouts.master')
@section('content')
    @php
        $loginBanner = LoginBanner::where('date', verta()->format('m/d'))->first();
        if(!$loginBanner){
            $loginBanner = LoginBanner::whereNull('date')->inRandomOrder()->first();
        }

        $loginWithPass = Setting::getValue('password_login');
        $loginWithOtp = Setting::getValue('otp_login');
    @endphp
    <div class="grid grid-cols-12" style="width: 100%">
        <div class="col-span-4 flex items-center justify-center min-h-screen">
            <div class="">

                <!-- Header -->
                <div class="text-center mb-6 sm:mb-8 lg:mb-10">
                    <div class="flex items-center justify-center mx-auto mb-4 bounce-in">
{{--                        <img src="{{ asset('assets/images/logo.jpeg') }}" alt="Day Insurance Logo" width="180"--}}
{{--                             height="50">--}}
                    </div>
                    @if($loginWithPass)
                        <p class="text-sm sm:text-base lg:text-lg text-gray-600 fade-in">برای ورود به سامانه لطفا شماره موبال
                            و کلمه عبور خود را وارد کنید</p>
                    @elseif($loginWithOtp)
                        <p class="text-sm sm:text-base lg:text-lg text-gray-600 fade-in">برای ورود به سامانه لطفا شماره
                            موبایل
                            خود را وارد کنید</p>
                    @else
                        <p class="text-sm sm:text-base lg:text-lg text-gray-600 fade-in">{{ Setting::getValue('support') }}</p>
                    @endif
                </div>
                @if($loginWithPass)
                    <div id="emailForm" class=" rounded-2xl p-6 sm:p-8 lg:p-10 fade-in form-container">
                        <form id="loginForm" class="space-y-4 sm:space-y-6" method="POSt" action="{{ route('login') }}">
                            @csrf

                            <div class="slide-up">
                                <input type="text" id="phone" name="phone"
                                       class="@error('phone') is-invalid @enderror w-full my-2 px-4 py-3 sm:py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 input-field text-sm sm:text-base"
                                       placeholder="شماره موبایل" value="{{ old('phone') }}" required>
                                @error('phone')
                                <span id="emailError"
                                      class="text-red-500 text-xs sm:text-sm shake">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="slide-up">
                                <input type="password" id="password" name="password"
                                       class="w-full px-4 py-3 sm:py-4 border my-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 input-field text-sm sm:text-base"
                                       placeholder="رمز عبور" required>
                                @error('password')
                                <span id="passwordError"
                                      class="text-red-500 text-xs sm:text-sm shake">{{ $message }}</span>
                                @enderror
                            </div>
                            <button type="submit"
                                    class="w-full main-color text-white py-3 sm:py-4 rounded-lg font-medium text-sm sm:text-base btn-primary slide-up">
                                ورود
                            </button>
                        </form>
                    </div>
                @elseif($loginWithOtp)
                    <!-- Mobile Form -->
                    <div id="mobileForm"
                         class="p-6 sm:p-8 lg:p-10 form-container">
                        <form id="mobileLoginForm" action="{{ route('sendCode') }}" method="post"
                              class="space-y-4 sm:space-y-6">
                            @csrf
                            <div class="slide-left mb-3">
                                <label class="block text-sm sm:text-base font-medium text-gray-700 mb-2">شماره
                                    موبایل</label>
                                <input type="tel" id="phone" name="phone"
                                       class="w-full px-4 py-3 sm:py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 input-field text-sm sm:text-base"
                                       placeholder="09123456789">
                                @error('')
                                {{ $message }}
                                @enderror
                                <span id="mobileError" class="text-red-500 text-xs sm:text-sm hidden shake">لطفاً شماره موبایل معتبر وارد کنید</span>
                            </div>

                            <button type="submit"
                                    class="w-full main-color text-white py-3 sm:py-4 rounded-lg font-medium text-sm sm:text-base btn-primary slide-left">
                                ارسال رمز یکبار مصرف
                            </button>
                        </form>
                    </div>
                @endif
            </div>
        </div>
        <div class="col-span-8 blue-sec text-white" style="position: relative">
            @if(Setting::getValue('news_ticker_show'))
                <div class="news-ticker-wrapper">
                    <div class="news-ticker-content">
                        {{ Setting::getValue('news_ticker') }}
                    </div>
                </div>
            @endif
            @if($loginBanner)
                @if(!empty($loginBanner->link))
                    <a href="{{ $loginBanner->link }}">
                        @endif
                        <img src="{{ asset($loginBanner->image) }}" alt="" width="300" class="mb-5">
                        <p class="my-1" style="font-size: 36px; font-weight: bold">{{ $loginBanner->name }}</p>
                        <p style="font-size: 16px; width: 40%; text-align: justify" class="mt-5">
                        {!! $loginBanner->desc !!}
                        @if(!empty($loginBanner->link))
                    </a>
                @endif
            @endif
        </div>
    </div>
@endsection