@extends('front.layouts.master')

@section('css')
<style>
    footer { display: none !important; }
    .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; }
    }
</style>
@endsection

@section('content')
<section class="sign-page">
    <div class="form-half-cont">
        <a href="{{ request('type') == 2 ? route('user.project.create') : 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>
            {{ request('type') == 2 ? 'رجوع لطلب تنفيذ مشروع' : 'رجوع للصفحة الرئيسية' }}
        </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>
            @if(!isset($invitation) || !$invitation)
                @include('front.project._pending_project_card')
            @endif
            <h2>تسجيل جديد</h2>
            <p>
                أنشئ حسابك الآن وابدأ بنشر مشاريعك أو تصفّح الفرص المتاحة
            </p>
            @if(!isset($invitation) || !$invitation)
            <a href="{{ route('auth.google') . (request('type') ? '?type=' . request('type') : '') }}" 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>
            @endif
            <form class="register-form" action="{{route('save.register')}}" method="post">
                @csrf
                @if(isset($invitation) && $invitation)
                    <input type="hidden" name="invitation_token" value="{{ $invitation['token'] }}">
                    <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #bbf7d0; border-radius: 12px; padding: 15px; margin-bottom: 20px; text-align: center;">
                        <p style="margin: 0; color: #166534; font-size: 14px;">تم دعوتك للانضمام للمنصة كعميل. أكمل بياناتك للمتابعة.</p>
                    </div>
                @endif
                <div class="group-line">
                    <div class="form-group">
                        <label class="input-label" for="first_name">الاسم الأول</label>
                        <input type="text" id="first_name" class="form-control" placeholder="{{trans('First Name')}}" name="first_name" value="{{ (isset($invitation) && $invitation) ? $invitation['first_name'] : old('first_name') }}" {{ (isset($invitation) && $invitation) ? 'readonly' : '' }}>
                        @error('first_name')
                        <span class="invalid-feedback" role="alert" style="display: flex">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label class="input-label" for="last_name">اسم العائلة</label>
                        <input type="text" id="last_name" class="form-control" placeholder="{{trans('Last Name')}}" name="last_name" value="{{ (isset($invitation) && $invitation) ? $invitation['last_name'] : old('last_name') }}" {{ (isset($invitation) && $invitation) ? 'readonly' : '' }}>
                        @error('last_name')
                        <span class="invalid-feedback" role="alert" style="display: flex">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group">
                    <label class="input-label" for="email">البريد الإلكتروني</label>
                    <input type="email" id="email" class="form-control" placeholder="{{trans('Email')}}" name="email" value="{{ (isset($invitation) && $invitation) ? $invitation['email'] : old('email') }}" {{ (isset($invitation) && $invitation) ? 'readonly' : '' }}>
                    @error('email')
                    <span class="invalid-feedback" role="alert" style="display: flex">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                @if(isset($invitation) && $invitation)
                    {{-- Force client type for invited users --}}
                    <input type="hidden" name="type" value="2">
                @else
                <div id="role-selection-block">
                <p class="role-label">ما دورك على المنصة؟</p>
                <div class="role-selection">
                    <label class="role-card role-client">
                        <input type="radio" name="type" value="2" @if(old('type', request('type')) == 2 || request('type') == 2) checked @endif>
                        <div class="role-card-inner">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
                            <strong>صاحب مشروع</strong>
                            <small>صاحب عمل أو شركة لديه مشاريع ويوظّف مستقلين لتنفيذها</small>
                        </div>
                    </label>
                    <label class="role-card role-freelancer">
                        <input type="radio" name="type" value="1" @if(old('type', request('type')) == 1) checked @endif>
                        <div class="role-card-inner">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.582-7 8-7s8 3 8 7"/></svg>
                            <strong>مستقل</strong>
                            <small>موظف حر يبحث عن عمل ومشاريع لتنفيذها ويزيد من دخله</small>
                        </div>
                    </label>
                </div>
                @error('type')
                <span class="invalid-feedback" role="alert" style="display: flex; margin-bottom: 12px;">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
                </div>{{-- #role-selection-block --}}
                @endif
                <div class="form-group">
                    <label class="input-label" for="country_id">الدولة</label>
                    <select id="country_id" name="country_id" class="form-control select2">
                        <option hidden disabled selected>اختر الدولة</option>
                        @foreach($countries as $country)
                        <option value="{{$country->id}}" @if(old('country_id')==$country->id) selected @endif>{{$country->name}}</option>
                        @endforeach
                    </select>
                    @error('country_id')
                    <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" name="password" class="form-control" 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>
                    @error('password')
                    <span class="invalid-feedback" role="alert" style="display: flex">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <div class="terms">
                    <input type="checkbox" name="agree" value="1">
                    أوافق على
                    <a href="{{route('front.terms')}}" target="_blank">الشروط والأحكام</a>

                </div>
                @error('agree')
                <span class="invalid-feedback" role="alert" style="display: flex">
                    <strong>@lang('messages.terms_agree') </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>

                <button class="form-submit" type="submit" id="submit-btn" disabled>
                    تسجيل
                </button>
            </form>
            <p class="have-account">
                لديك حساب بالفعل ؟
                <a href="{{route('view.login')}}">تسجيل الدخول</a>
            </p>
        </div>
    </div>
    <div class="img-half-cont">
        <a href="{{ request('type') == 2 ? route('user.project.create') : route('home') }}" class="back-home">
            {{ request('type') == 2 ? 'رجوع لطلب تنفيذ مشروع' : 'رجوع للصفحة الرئيسية' }}
            <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/up.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')
<style>
    /* Social Login */
    .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;
    }

    /* Input Labels */
    .input-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #444;
        margin-bottom: 6px;
        font-family: var(--font-body);
    }

    /* Role Label */
    .role-label {
        font-size: 13px;
        font-weight: 600;
        color: #444;
        margin-bottom: 10px;
        font-family: var(--font-body);
    }

    /* Role Selection Cards */
    .role-selection {
        display: flex;
        gap: 12px;
        margin-bottom: 8px;
    }

    .role-card {
        flex: 1;
        cursor: pointer;
        position: relative;
        display: flex;
    }

    .role-card input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .role-card-inner {
        border: 1px solid #ced4da;
    /* border-radius: 10px; */
        padding: 14px 10px;
        text-align: center;
        transition: all 0.25s ease;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        width: 100%;
    }

    .role-card-inner svg {
        color: #14965a;
        transition: color 0.25s ease;
    }

    .role-card-inner strong {
        font-size: 15px;
        color: #333;
        font-family: var(--font-body);
        display: block;
    }

    .role-card-inner small {
        font-size: 11.5px;
        color: #888;
        font-family: var(--font-body);
        font-weight: 400;
        line-height: 1.6;
        display: block;
    }

    /* صاحب أعمال - بنفسجي عند التحديد */
    .role-client input[type="radio"]:checked ~ .role-card-inner {
        border-color: #19B36B;
        background: #19B36B;
        /* box-shadow: 0 3px 12px rgba(109, 40, 217, 0.25); */
    }

    /* مستقل - أزرق عند التحديد */
    .role-freelancer input[type="radio"]:checked ~ .role-card-inner {
        border-color: #19B36B;
        background: #19B36B;
        /* box-shadow: 0 3px 12px rgba(29, 78, 216, 0.25); */
    }

    .role-card input[type="radio"]:checked ~ .role-card-inner svg {
        color: #fff;
    }

    .role-card input[type="radio"]:checked ~ .role-card-inner strong {
        color: #fff;
    }

    .role-card input[type="radio"]:checked ~ .role-card-inner small {
        color: rgba(255, 255, 255, 0.8);
    }

    /* Hover للبطاقة غير المحددة */
    .role-client:hover .role-card-inner {
        border-color: #14965a;
        background: #ffffff;
    }

    .role-freelancer:hover .role-card-inner {
        border-color: #93c5fd;
        background: #eff6ff;
    }

    /* Disabled state when project card is active */
    .role-card--disabled {
        opacity: 0.38;
        pointer-events: none;
        cursor: not-allowed;
    }
    .role-card--disabled .role-card-inner {
        filter: grayscale(60%);
    }

    /* .role-client input[type="radio"]:checked ~ .role-card-inner:hover,
    .role-freelancer input[type="radio"]:checked ~ .role-card-inner:hover {
        background: inherit;
    } */

    @media (max-width: 480px) {
        .role-selection {
            gap: 8px;
        }
        .role-card-inner {
            padding: 12px 8px;
        }
        .role-card-inner strong {
            font-size: 14px;
        }
        .role-card-inner small {
            font-size: 11px;
        }
    }

    /* Select2 Custom Height - Override default */
    .select2-container .select2-selection--single {
        height: 40px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
    }

    .select2-container--default .select2-selection--single {
        height: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
        top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        margin-top: 0 !important;
        margin-left: 0 !important;
        border-width: 5px 4px 0 4px !important;
        position: static !important;
        transform: none !important;
    }
</style>
<script>
    $(document).ready(function() {
        $('.select2').select2({
            width: '100%',
            placeholder: "اختر الدولة",
            language: {
                noResults: function() {
                    return "لا توجد نتائج";
                },
                searching: function() {
                    return "جاري البحث...";
                }
            },
            minimumResultsForSearch: 0
        });
    });

    // ── Pending Project Card ─────────────────────────────────────────────────
    (function () {
        try {
            var raw = localStorage.getItem('pendingProjectData');
            if (!raw) return;

            var data = JSON.parse(raw);
            if (!data || !data.title) return;

            // Only activate when coming from the add-project redirect (?type=2)
            if (window.location.search.indexOf('type=2') === -1) return;

            // Bail out if the invitation flow already owns the type input
            if (document.querySelector('.register-form input[name="invitation_token"]')) return;

            // Populate card content
            var titleEl = document.getElementById('pending-project-title');
            var descEl  = document.getElementById('pending-project-desc');
            var card    = document.getElementById('pending-project-card');

            if (titleEl) titleEl.textContent = data.title;
            if (descEl)  descEl.textContent  = data.description
                ? data.description.trim().substring(0, 160)
                : '';

            if (card) card.style.display = 'block';

            // Force "صاحب مشروع" radio checked and disable the freelancer card
            var clientRadio = document.querySelector('.register-form input[name="type"][value="2"]');
            if (clientRadio) clientRadio.checked = true;

            var freelancerLabel = document.querySelector('.role-card.role-freelancer');
            if (freelancerLabel) {
                freelancerLabel.classList.add('role-card--disabled');
                var freelancerRadio = freelancerLabel.querySelector('input[type="radio"]');
                if (freelancerRadio) freelancerRadio.disabled = true;
            }

            // Cancel button: clear localStorage and redirect to plain /register
            var cancelBtn = document.getElementById('cancel-pending-project-btn');
            if (cancelBtn) {
                cancelBtn.addEventListener('click', function () {
                    localStorage.removeItem('pendingProjectData');
                    window.location.href = '/register';
                });
            }
        } catch (e) {
            // JSON parse error or unexpected — silently ignore, show normal form
        }
    })();

    // Cloudflare Turnstile callback
    function onTurnstileSuccess(token) {
        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);
        }
        $('#submit-btn').prop('disabled', false);
    }

    // Prevent double form submission
    $('.register-form').on('submit', function() {
        var $btn = $('#submit-btn');
        if ($btn.data('submitted')) {
            return false;
        }
        $btn.data('submitted', true).prop('disabled', true).text('جاري التسجيل...');
    });
</script>

@endsection