@extends('front.layouts.master')
@section('css')
<style>
    .input-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #444;
        margin-bottom: 6px;
        font-family: var(--font-body);
    }
</style>
@endsection
@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>
            <form class="login-form" action="{{route('front.send.reset.code')}}" method="post">
                @csrf
                <div class="form-group">
                    <label class="input-label" for="email">البريد الإلكتروني</label>
                    <input type="email" id="email" class="form-control" name="email" placeholder="البريد الالكترونى" value="{{ old('email') }}" required>
                    @error('email')
                    <span class="invalid-feedback" role="alert" style="display: flex">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <!-- Cloudflare Turnstile -->
                <div class="form-group">
                    <div class="cf-turnstile" data-sitekey="{{ $turnstile_site_key }}" data-callback="onTurnstileSuccess"></div>
                    @error('cf-turnstile-response')
                    <span class="invalid-feedback" role="alert" style="display: flex">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <button class="form-submit" id="submit-btn" disabled>
                    إرسال رمز التحقق
                </button>
                <p class="have-account">
                    تذكرت كلمة المرور؟
                    <a href="{{route('view.login')}}">تسجيل الدخول</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">
                                سنرسل لك رمز تحقق عبر البريد الإلكتروني
                            </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
@section('js-body')
    <script>

        // Cloudflare Turnstile callback
        function onTurnstileSuccess(token) {
            // Add the token to a hidden input
            if (!$('input[name="cf-turnstile-response"]').length) {
                $('<input>').attr({
                    type: 'hidden',
                    name: 'cf-turnstile-response',
                    value: token
                }).appendTo('.register-form');
            } else {
                $('input[name="cf-turnstile-response"]').val(token);
            }

            // Enable the submit button
            $('#submit-btn').prop('disabled', false);
        }
    </script>

@endsection