@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; }
    }
</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>
            @if(($google_user['intended_type'] ?? null) == '2')
                @include('front.project._pending_project_card')
            @endif
            <h2>إكمال التسجيل</h2>
            <p>
                مرحباً {{ $google_user['first_name'] }}، أكمل بياناتك للبدء في استخدام المنصة
            </p>
            <form class="register-form" action="{{ route('auth.google.save-profile') }}" method="post">
                @csrf
                <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" name="first_name" placeholder="الاسم الأول" value="{{ old('first_name', $google_user['first_name']) }}">
                        @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" name="last_name" placeholder="اسم العائلة" value="{{ old('last_name', $google_user['last_name']) }}">
                        @error('last_name')
                        <span class="invalid-feedback" role="alert" style="display: flex">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                @php $selectedType = old('type', $google_user['intended_type'] ?? null); @endphp
                <p class="role-label">ما دورك على المنصة؟</p>
                <div class="role-selection">
                    <label class="role-card role-client">
                        <input type="radio" name="type" value="2" @if($selectedType == 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($selectedType == 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 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="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>{{ $message }}</strong>
                </span>
                @enderror

                <button class="form-submit" type="submit" id="submit-btn">
                    إكمال التسجيل
                </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/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>
    .input-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #444;
        margin-bottom: 6px;
        font-family: var(--font-body);
    }

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

    .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;
        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;
    }

    .role-freelancer input[type="radio"]:checked ~ .role-card-inner {
        border-color: #19B36B;
        background: #19B36B;
    }

    .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);
    }

    .role-client:hover .role-card-inner {
        border-color: #14965a;
        background: #ffffff;
    }

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

    .role-card--disabled {
        opacity: 0.38;
        pointer-events: none;
        cursor: not-allowed;
    }
    .role-card--disabled .role-card-inner {
        filter: grayscale(60%);
    }

    @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-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
        });
    });

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

    // ── Pending Project Card (Google flow) ───────────────────────────────────
    (function () {
        var intendedType = @json($google_user['intended_type'] ?? null);
        if (intendedType != '2') return;

        // Only activate when pendingProjectData exists in localStorage
        // (so clearing it via cancel + reload restores the normal form)
        var raw, data;
        try {
            raw  = localStorage.getItem('pendingProjectData');
            data = raw ? JSON.parse(raw) : null;
        } catch (e) { return; }

        if (!data || !data.title) return;

        // Populate and show the project card
        var card    = document.getElementById('pending-project-card');
        var titleEl = document.getElementById('pending-project-title');
        var descEl  = document.getElementById('pending-project-desc');
        if (titleEl) titleEl.textContent = data.title;
        if (descEl)  descEl.textContent  = data.description
            ? data.description.trim().substring(0, 160) : '';
        if (card) card.style.display = 'block';

        // Disable the freelancer card
        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: clear localStorage and reload THIS page (stay in complete-profile)
        var cancelBtn = document.getElementById('cancel-pending-project-btn');
        if (cancelBtn) {
            cancelBtn.addEventListener('click', function () {
                localStorage.removeItem('pendingProjectData');
                window.location.reload();
            });
        }
    })();
</script>
@endsection