@extends('front.layouts.master')

@section('css')
<style>
    .mobile-back-btn {
        display: none;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        text-decoration: none;
        font-family: var(--font-body);
        transition: color 0.2s ease;
        position: absolute;
        top: 20px;
        left: 20px;
    }
    .mobile-back-btn:hover { color: #19B36B; text-decoration: none; }
    .mobile-back-btn svg { flex-shrink: 0; }
    @media (max-width: 991px) {
        .mobile-back-btn { display: flex; }
        .form-half-cont { position: relative; }
    }
    .input-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #444;
        margin-bottom: 6px;
        font-family: var(--font-body);
    }
    .form-group .show{
        top: 38.5px;
    }
    .social-divider {
        display: flex;
        align-items: center;
        margin: 20px 0;
        gap: 12px;
    }
    .social-divider::before,
    .social-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #ddd;
    }
    .social-divider span {
        font-size: 13px;
        color: #999;
        font-family: var(--font-body);
        white-space: nowrap;
    }
    .google-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 12px 20px;
        border: 1px solid #ddd;
        /* border-radius: 4px; */
        background: #fff;
        color: #444;
        font-size: 14px;
        font-weight: 600;
        font-family: var(--font-body);
        text-decoration: none;
        transition: all 0.25s ease;
        cursor: pointer;
    }
    .google-btn:hover {
        background: #f8f9fa;
        border-color: #ccc;
        color: #333;
        text-decoration: none;
    }
    footer { display: none !important; }
</style>
@endsection

@section('content')
<section class="sign-page">
    <div class="form-half-cont">
        <a href="{{route('home')}}" class="mobile-back-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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)" fill="currentColor"/>
            </svg>
            رجوع للصفحة الرئيسية
        </a>
        <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>
            <a href="{{ route('auth.google') }}" class="google-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 48 48">
                    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
                    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
                    <path fill="#FBBC05" d="M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.0 24.0 0 0 0 0 21.56l7.98-6.19z"/>
                    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
                    <path fill="none" d="M0 0h48v48H0z"/>
                </svg>
                تسجيل الدخول بحساب جوجل
            </a>
            <div class="social-divider">
                <span>أو</span>
            </div>
            <form class="login-form" action="{{route('save.login')}}" method="post">
                @csrf
                <div class="form-group">
                    <label class="input-label" for="email">البريد الإلكتروني</label>
                    <input type="email" id="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="البريد الالكترونى">
                    @error('email')
                    <span class="invalid-feedback" role="alert" style="display: flex">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <div class="form-group">
                    <label class="input-label" for="password">كلمة المرور</label>
                    <input type="password" id="password" class="form-control" name="password" placeholder="كلمة المرور">
                    <span class="show">
                            <svg xmlns="http://www.w3.org/2000/svg" width="35.35" height="23.567"
                                 viewBox="0 0 35.35 23.567">
                                <path data-name="Icon awesome-eye"
                                      d="M35.136 15.387A19.684 19.684 0 0 0 17.675 4.5 19.687 19.687 0 0 0 .214 15.388a1.985 1.985 0 0 0 0 1.791 19.684 19.684 0 0 0 17.461 10.888 19.687 19.687 0 0 0 17.461-10.888 1.985 1.985 0 0 0 0-1.792zm-17.461 9.734a8.837 8.837 0 1 1 8.837-8.837 8.837 8.837 0 0 1-8.837 8.837zm0-14.729a5.849 5.849 0 0 0-1.553.233 2.937 2.937 0 0 1-4.106 4.106 5.878 5.878 0 1 0 5.659-4.338z"
                                      transform="translate(0 -4.5)" />
                            </svg>
                        </span>
                </div>
                @error('password')
                <span class="invalid-feedback" role="alert" style="display: flex">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
                
                <!-- 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>
                
                <a href="{{route('front.forget.password')}}" class="forget">نسيت كلمة المرور ؟</a>
                <button class="form-submit" type="submit" id="submit-btn" disabled>
                    تسجيل الدخول
                </button>
            </form>
            <p class="have-account">
                ليس لديك حساب بالفعل؟
                <a href="{{route('view.register')}}">تسجيل جديد</a>
            </p>
        </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('.login-form');
            } else {
                $('input[name="cf-turnstile-response"]').val(token);
            }
            
            // Enable the submit button
            $('#submit-btn').prop('disabled', false);
        }
    </script>
@endsection