@extends('front.layouts.master')
@section('content')
<section class="sign-page">
    <div class="form-half-cont">
        <div class="form-half">
            <a href="{{route('home')}}" class="logo">
                <img src="{{asset('front/images/logo.svg')}}" 
                     class="img-fluid" 
                     alt="منصة ربحي - شعار الموقع"
                     width="120" height="40"
                     decoding="async">
            </a>
            <h2>تحقق من الرمز</h2>
            <p>
                أدخل رمز التحقق المرسل إلى بريدك الإلكتروني
            </p>
            
            @if(env('APP_ENV') !== 'production' && session()->has('reset_otp'))
                <div class="alert alert-info" style="margin-bottom: 20px; padding: 15px; background: #d1ecf1; border: 1px solid #bee5eb; border-radius: 5px; color: #0c5460;">
                    <strong>Development Mode:</strong> رمز التحقق هو: <strong>{{ session('reset_otp') }}</strong>
                </div>
            @endif
            
            <form class="login-form" action="{{route('front.check.otp')}}" method="post">
                @csrf
                <div class="form-group">
                    <input type="text" class="form-control" name="otp" placeholder="رمز التحقق (4 أرقام)" maxlength="4" pattern="[0-9]{4}" value="{{ old('otp') }}" required>
                    @error('otp')
                    <span class="invalid-feedback" role="alert" style="display: flex">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <button class="form-submit">
                    تحقق من الرمز
                </button>
                <p class="have-account">
                    لم تستلم الرمز؟
                    <a href="{{route('front.forget.password')}}">إعادة إرسال</a>
                </p>
            </form>
        </div>
    </div>
    <div class="img-half-cont">
        <a href="{{route('home')}}" class="back-home">
            رجوع للصفحة الرئيسية
            <svg xmlns="http://www.w3.org/2000/svg" width="19.346" height="19.346" viewBox="0 0 19.346 19.346">
                <path data-name="Icon ionic-md-arrow-back"
                      d="M25.322 14.44h-14.69L17.4 7.669l-1.751-1.692-9.672 9.672 9.673 9.673 1.693-1.693-6.71-6.771h14.689z"
                      transform="translate(-5.977 -5.977)" />
            </svg>
        </a>
        <img src="{{asset('front/images/sign/in.png')}}" class="img-fluid" decoding="async" width="500" height="600">

        <div class="sign-slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="sign-slide">
                            <h4 class="sign-title">
                                التحقق من الرمز
                            </h4>
                            <p class="sign-desc">
                                أدخل الرمز المكون من 4 أرقام المرسل إلى بريدك
                            </p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="sign-slide">
                            <h4 class="sign-title">
                                أمان إضافي
                            </h4>
                            <p class="sign-desc">
                                نتحقق من هويتك قبل تغيير كلمة المرور
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-btn-prev swiper-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="15.263" height="26.283" viewBox="0 0 15.263 26.283">
                    <path data-name="Path 2" d="m94.718 846.268 12.082 12.081-12.082 12.081"
                          transform="translate(-93.657 -845.208)" />
                </svg>
            </div>
            <div class="swiper-btn-next swiper-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="15.263" height="26.283" viewBox="0 0 15.263 26.283">
                    <path data-name="Path 1" d="m106.8 846.268-12.082 12.081L106.8 870.43"
                          transform="translate(-92.596 -845.208)" />
                </svg>
            </div>
        </div>
    </div>
</section>
@endsection