@extends('layouts.site')

@section('title', 'التوظيف | XRD LAB')

@push('styles')
<style>
    .hiring-page .hiring-intro {
        max-width: 880px;
        margin: 0 auto 26px;
        text-align: center;
    }

    .hiring-page .hiring-intro p {
        margin-bottom: 0;
        color: var(--theme-text-muted);
        line-height: 1.9;
    }

    .hiring-notice {
        border: 1px solid color-mix(in srgb, var(--theme-primary) 45%, #d4d4d8);
        border-radius: 10px;
        background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff);
        color: #4b5563;
        padding: 12px 14px;
        margin: 0 auto 20px;
        max-width: 880px;
    }

    .hiring-page .icon-box {
        height: 100%;
        text-align: right;
        box-shadow: var(--theme-shadow);
        border-radius: 0 !important;
        transform: none !important;
        transition: none !important;
    }

    .hiring-page .icon-box:hover {
        transform: none !important;
        background: inherit !important;
        border-color: inherit !important;
        box-shadow: var(--theme-shadow) !important;
    }

    .hiring-page .icon-box:hover h4,
    .hiring-page .icon-box:hover h4 a,
    .hiring-page .icon-box:hover p,
    .hiring-page .icon-box:hover li,
    .hiring-page .icon-box:hover i {
        color: inherit !important;
    }

    .hiring-cards-stack {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hiring-cards-stack > div {
        width: 100%;
    }

    .hiring-cards-stack .icon-box {
        width: 100%;
    }

    .hiring-page .icon-box h4 {
        margin-bottom: 14px;
        color: #1f2937;
    }

    .hiring-card-header {
        margin: -80px -20px 18px;
        padding: 14px 18px;
        border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 22%, #d1d5db);
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--theme-primary) 12%, #ffffff),
            color-mix(in srgb, var(--theme-accent) 35%, #ffffff)
        );
        border-radius: 0;
    }

    .hiring-card-header h4 {
        margin: 0;
        color: #1f2937;
        font-size: 1.1rem;
        font-weight: 700;
    }

    .hiring-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .hiring-list li {
        margin-bottom: 10px;
        line-height: 1.8;
        color: var(--theme-text-muted);
    }

    .hiring-list li i {
        color: var(--theme-primary);
        margin-left: 6px;
    }

    .hiring-cta {
        margin-top: 30px;
        text-align: center;
    }

    .hiring-cta-note {
        color: var(--theme-text-muted);
        margin-bottom: 12px;
    }

    .hiring-btn {
        display: inline-block;
        padding: 11px 24px;
        border-radius: 999px;
        background: var(--theme-primary);
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .hiring-btn:hover {
        background: var(--theme-primary-dark);
        color: #fff;
        transform: translateY(-1px);
    }

    #hiringClosedChoiceModal .modal-content {
        position: relative;
    }

    #hiringClosedChoiceModal .btn-close {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 3;
    }

</style>
@endpush

@section('content')
<main id="main">
    @include('partials.breadcrumbs', [
        'title' => 'التوظيف',
        'items' => [
            ['label' => 'الرئيسية', 'url' => route('home')],
            ['label' => 'التوظيف'],
        ],
    ])

    <section class="services hiring-page" dir="rtl">
        <div class="container">
            <div class="hiring-intro">
                <p>
                    نرحب بالمهتمين بالعمل معنا ضمن بيئة بحثية مرنة. ستجد أدناه طبيعة العمل، المهارات المقترحة،
                    والمزايا الوظيفية بشكل واضح.
                </p>
            </div>

            @if(!($isHiringOpen ?? true))
                <div class="hiring-notice">
                    {{ $hiringClosedMessage ?? 'التوظيف غير متاح حالياً. إذا كنت ترى أنك تستطيع إضافة قيمة لفريقنا، يرجى التواصل معنا.' }}
                    <a href="{{ route('contact.show') }}">تواصل معنا</a>.
                </div>
            @else
                <div class="hiring-notice">
                    يرجى قراءة الوصف الوظيفي بعناية قبل التقديم، وإذا كانت لديك أي استفسارات يمكنك
                    <a href="{{ route('contact.show') }}">التواصل معنا</a>.
                </div>
            @endif

            <div class="hiring-cards-stack">
                <div class="d-flex align-items-stretch">
                    <div class="icon-box">
                        <div class="hiring-card-header">
                            <h4>طبيعة العمل</h4>
                        </div>
                        <ul class="hiring-list">
                            <li><i class="bi bi-check-circle"></i>سيكون العمل عن بعد.</li>
                            <li><i class="bi bi-check-circle"></i>تحرير المستندات البحثية تمهيداً لإرسالها إلى المجلات العلمية.</li>
                            <li><i class="bi bi-check-circle"></i>إعداد العروض التقديمية بناءً على متطلبات الفريق البحثي.</li>
                            <li><i class="bi bi-check-circle"></i>العمل على إعداد المخططات البيانية ومخططات الإنفوغراف حسب الاحتياج.</li>
                            <li><i class="bi bi-check-circle"></i>التواجد في الدورات التعليمية التي يقدمها المعمل للمجتمع، بما فيها الدورات المدفوعة.</li>
                            <li><i class="bi bi-check-circle"></i>المساهمة في تحرير الفيديوهات التي ينتجها المعمل تمهيداً لنشرها عبر المنصات المختلفة.</li>
                        </ul>
                    </div>
                </div>

                <div class="d-flex align-items-stretch">
                    <div class="icon-box">
                        <div class="hiring-card-header">
                            <h4>المهارات التي ننصح بتوفرها لدى المتقدم</h4>
                        </div>
                        <ul class="hiring-list">
                            <li><i class="bi bi-check-circle"></i>التفاني في العمل والاستعداد لتنفيذ المهمات حتى مع وجود تحديات.</li>
                            <li><i class="bi bi-check-circle"></i>الدقة في تسليم المهمات في وقتها.</li>
                            <li><i class="bi bi-check-circle"></i>الإيجابية في التعامل مع الفرق البحثية وإظهار روح التعاون المستمر.</li>
                            <li><i class="bi bi-check-circle"></i>الإلمام ببرامج مايكروسوفت المكتبية وأدوات التحرير مثل Canva.</li>
                            <li><i class="bi bi-check-circle"></i>القدرة على التعامل مع البريد الإلكتروني حيث سيكون وسيلة التواصل الأساسية حالياً.</li>
                            <li><i class="bi bi-check-circle"></i>يفضل وجود معرفة ببرامج التصميم وتحرير الفيديو؛ يتم توفير وصول مجاني إلى برمجيات Adobe.</li>
                            <li><i class="bi bi-check-circle"></i>يفضل توفر حاسوب شخصي مناسب للعمل عن بعد.</li>
                        </ul>
                    </div>
                </div>

                <div class="d-flex align-items-stretch">
                    <div class="icon-box">
                        <div class="hiring-card-header">
                            <h4>المزايا الوظيفية</h4>
                        </div>
                        <ul class="hiring-list">
                            <li><i class="bi bi-check-circle"></i>الدفع يكون بناءً على المهمات المنجزة.</li>
                            <li><i class="bi bi-check-circle"></i>عدد المهمات يزيد ويقل حسب النشاط البحثي.</li>
                            <li><i class="bi bi-check-circle"></i>تتراوح المدفوعات غالباً من 30 إلى 100 ريال لكل مهمة.</li>
                            <li><i class="bi bi-check-circle"></i>بعض المهمات تكون بقيمة أعلى حسب التعقيد والوقت اللازم للإنجاز.</li>
                            <li><i class="bi bi-check-circle"></i>الحصول على بريد إلكتروني مخصص للتعاملات الخاصة بالمعمل.</li>
                            <li><i class="bi bi-check-circle"></i>وصول مجاني إلى خدمات وتطبيقات إلكترونية مدفوعة عبر المعمل.</li>
                            <li><i class="bi bi-check-circle"></i>مكافأة مالية عند حصول المعمل على جوائز مقابل الأبحاث المنشورة.</li>
                        </ul>
                    </div>
                </div>
            </div>

            @if(($isHiringOpen ?? true))
                <div class="hiring-cta">
                    <p class="hiring-cta-note">المدة المتوقعة لتعبئة النموذج: 3 - 5 دقائق. الملف المطلوب: PDF.</p>
                    <a href="{{ route('hiring.apply.show') }}" class="hiring-btn">تقديم طلب التوظيف</a>
                </div>
            @endif
        </div>
    </section>

    @if(session('hiring_closed_choice_message'))
        <div class="modal fade" id="hiringClosedChoiceModal" tabindex="-1" aria-hidden="true" dir="rtl">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow">
                    <div class="modal-header">
                        <h5 class="modal-title">تنبيه بخصوص التوظيف</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-end">
                        {{ session('hiring_closed_choice_message') }}
                    </div>
                    <div class="modal-footer d-flex justify-content-start gap-2">
                        <a href="{{ route('contact.show') }}" class="hiring-btn">الذهاب إلى صفحة التواصل</a>
                        <a href="{{ route('home') }}" class="btn btn-outline-secondary">العودة إلى الرئيسية</a>
                    </div>
                </div>
            </div>
        </div>
    @endif
</main>
@endsection

@push('scripts')
@if(session('hiring_closed_choice_message'))
<script>
document.addEventListener('DOMContentLoaded', function () {
    var modalElement = document.getElementById('hiringClosedChoiceModal');
    if (modalElement && window.bootstrap) {
        var modal = new bootstrap.Modal(modalElement);
        modal.show();
    }
});
</script>
@endif
@endpush