@extends('front.layouts.front')
@section('content')
<section class="landing-section">
    <div class="right-side">
        <ul class="social">
            <li>
                <a href="{{ setting('linkedin') }}">
                    <span> Linkedin </span>
                    <img src="{{ asset('interface-asset/images') }}/social-1.png" alt="social image" />
                </a>
            </li>
            <li>
                <a href="{{ setting('twitter') }}">
                    <span> Twitter </span>
                    <img src="{{ asset('interface-asset/images') }}/social-2.png" alt="social image" />
                </a>
            </li>
            <li>
                <a href="{{ setting('facebook') }}">
                    <span> Facebook </span>
                    <img src="{{ asset('interface-asset/images') }}/social-3.png" class="mt-2" alt="social image" />
                </a>
            </li>
        </ul>
    </div>
    <div class="landing-content">
        <div class="row g-3">
            <div class="col-12 col-md-7 mt-0">
                <div class="landing-text">
                    <h4 class="title">{{ setting('slider_title') }}</h4>
                    <p class="des">
                        {{ setting('slider_content') }}
                    </p>

                </div>
            </div>
            <div class="col-12 col-md-5 mt-0">
                <div class="landing-img">
                    <img src="{{ setting('slider_photo') ? display_file(setting('slider_photo')) : asset('interface-asset/images/landing-img.png') }}"
                        alt="landing image" />
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Landing -->
<!-- Start Section -->
<section class="py-4 padding-x">
    <div class="container">
        <div class="row g-4">
            <div class="col-12 col-md-12">
                <div class="box-search mb-4 ms-0 ms-xl-4">
                    <div class="inp-holder">
                        <img src="{{ asset('interface-asset/images') }}/icon/search.png" alt="search" class="search" />
                        <input type="search" name="" id="search-cus" placeholder="بحث الوظائف السريع..........." />
                    </div>
                    <div class="btn-holder">
                        <button class="btn-search">بحث</button>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-8 col-xl-8">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <h5 class="heading mb-0">الوظائف الحكومية</h5>
                    <div class="btn-holder d-flex align-items-center justify-content-end">
                        <a href="{{ route('administrative-jobs') }}" class="btn btn-outline-secondary fs-13px">
                            عرض جميع الوظائف الحكومية
                        </a>
                    </div>
                </div>
                <div class="row g-2">
                    @foreach ($governmentsJobs as $job)
                    <div class="col-12 col-md-12">
                        <a href="{{route('JobGovernmentShow',$job->id)}}" class="box-job">
                            <div class="icon">
                                <i class="fa-solid fa-circle {{ $job->status == 1 ? 'open' : 'close' }}"></i>
                            </div>
                            <p class="name">
                                {{ $job->title }}
                            </p>
                            <h6 class="status">{{ $job->status == 1 ? '(التقديم مفتوح)' : '(التقديم مغلق)' }}</h6>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="col-12 col-lg-4 col-xl-4">
                @php
                $banner = \App\Models\Banner::first();
                @endphp
                <div class="img-full-place d-none d-md-block">
                    <img src="{{ display_file($banner?->image) }}" alt="image" />
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Section -->
<!-- Start Section -->
<section class="py-4 padding-x">
    <div class="container">
        <div class="row g-4">
            <div class="col-12 col-lg-8 col-xl-8">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <h5 class="heading mb-0">آخر الوظائف المتاحة</h5>
                    <div class="btn-holder d-flex align-items-center justify-content-end">
                        <a href="{{ route('all-jobs') }}" class="btn btn-outline-secondary fs-13px">
                            عرض جميع الوظائف المتاحة
                        </a>
                    </div>
                </div>
                <div class="box-gray">
                    <h6 class="sm-heading">
                        قائمة أحدث وظائف أصحاب العمل
                    </h6>
                    <div class="table-responsive">
                        <table class="main-table table table-striped">
                            <thead>
                                <tr>
                                    <th class="text-nowrap">
                                        تاريخ الإضافة
                                    </th>
                                    <th class="text-nowrap">
                                        المسمى الوظيفي
                                    </th>
                                    <th class="text-nowrap">
                                        الفئة المستهدفة
                                    </th>
                                    <th class="text-nowrap">
                                        مكان العمل
                                    </th>
                                    <th class="text-nowrap">زيارات</th>
                                    <th class="text-nowrap">زيارة</th>
                                </tr>
                            </thead>
                            <tbody>

                                @forelse($jobs as $job)
                                <tr>
                                    <td class="text-nowrap">
                                        {{ $job->created_at->format('d/m/Y') }}
                                    </td>
                                    <td>
                                        <i class="fa-solid fa-circle green-color me-3"></i>
                                        <a href="{{ route('jobs.show',$job) }}">
                                            <b>{{ $job->departmentParent?->name ?? $job->department?->name }}</b>
                                        </a>
                                    </td>
                                    <td class="text-nowrap">
                                        {{ __($job->gender) }}
                                        @if($countries = $job->countries()->pluck('name')->toArray())
                                        -
                                        @foreach ($countries as $country)
                                        {{ $country }} ,
                                        @endforeach
                                        @endif

                                    </td>
                                    <td class="text-nowrap">
                                        {{ $job->job_location }}
                                    </td>
                                    <td class="text-danger text-nowrap">
                                        <b>{{ $job->views }}</b>
                                    </td>
                                    <td class=" text-nowrap">
                                        <a href="{{ route('jobs.show',$job) }}" class="btn btn-sm btn-dark">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center">لا يوجد وظائف</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-xl-4">
                <h5 class="heading">أبرز شركات العمل</h5>
                <div class="blocks-img mb-4">
                    @php
                    $owners = \App\Models\User::where('type', 'user')
                    ->where('membership', 'company')
                    ->get();
                    @endphp
                    @foreach ($owners as $item)
                    <div class="img-holder">
                        <img src="{{ display_file($item->photo) }}" alt="image" />
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Section -->
<!-- Start Section -->
<section class="pt-4 pb-5 padding-x">
    <div class="container">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <h5 class="heading mb-0">الدورات</h5>
            <div class="btn-holder d-flex align-items-center justify-content-end">
                <a href="{{ route('front.courses.allCourses') }}" class="btn btn-outline-secondary fs-13px">
                    عرض جميع الدورات
                </a>
            </div>
        </div>
        <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-xl-4">
            @forelse($courses as $item)
            @include('front.layouts.parts.home.training',['item' => $item])
            @empty
            <div class="alert alert-ingo">
                لا يوجد دورات تدريبية
            </div>
            @endforelse
        </div>
    </div>
</section>
<!-- End Section -->
<!-- Start Section -->
<section class="section-num padding-x">
    <div class="container">
        <div class="box">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                <div class="col text-center">
                    <img src="{{ asset('interface-asset/images') }}/group.png" alt="" class="img" />
                    <div class="number">{{ App\Models\Job::count() }}+</div>
                    <div class="text">الوظائف</div>
                </div>
                <div class="col text-center">
                    <img src="{{ asset('interface-asset/images') }}/group1.png" alt="" class="img" />
                    <div class="number red">{{
                        App\Models\User::where('type','user')->whereIn('membership',['individual','company'])->count()
                        }}+</div>
                    <div class="text">عضو نشط حالياً</div>
                </div>
                <div class="col text-center">
                    <img src="{{ asset('interface-asset/images') }}/group2.png" alt="" class="img" />
                    <div class="number black">{{
                        App\Models\User::where('type','user')->where('membership','company')->count() }}+</div>
                    <div class="text">الشركات</div>
                </div>
                <div class="col text-center">
                    <img src="{{ asset('interface-asset/images') }}/group3.png" alt="" class="img" />
                    <div class="number green">{{
                        App\Models\User::where('type','user')->where('membership','individual')->count() }}+</div>
                    <div class="text">الباحثين عن عمل</div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Section -->
<!-- Start Section -->
<section class="py-5 padding-x">
    <div class="container">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <h5 class="heading mb-0">الباحثين عن العمل</h5>
            <div class="btn-holder d-flex align-items-center justify-content-end">
                <a href="{{ route('Job-seekers') }}" class="btn btn-outline-secondary fs-13px">
                    عرض كل الباحثين عن عمل
                </a>
            </div>
        </div>
        <div class="row g-4 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 row-cols-xxl-5">
            @forelse($jobSearches as $item)
            @include('front.layouts.parts.home.employees',['item'=>$item])
            @empty
            <div class="alert alert-ingo">
                لا يوجد باحثين عن عمل
            </div>
            @endforelse
        </div>
    </div>
</section>
<!-- End Section -->
<!-- Start Section -->
<section class="section-mobile mb-4 padding-x">
    <div class="container">
        <div class="d-flex flex-column flex-xl-row align-items-center">
            <div class="text flex-fill">
                <div class="title">احصل على التطبيق الخاص بك</div>
                <div class="title-two">
                    يمكنك العثور بسهولة على هذا التطبيق…!
                </div>
                <div class="text">
                    هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء
                    لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي
                    للنص أو شكل توضع الفقرات في الصفحة التي يقرأها.
                    ولذلك يتم استخدام طريقة لوريم إيبسوم لأنها تعطي
                    توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام
                    "هنا يوجد محتوى نصي، هنا يوجد محتوى نصي" فتجعلها
                    تبدو (أي الأحرف) وكأنها نص مقروء
                </div>
                <div class="btns">
                    <a href="" class="btn-app">
                        <img src="{{ asset('interface-asset/images') }}/app-store.png" alt="" class="img" />
                    </a>
                    <a href="" class="btn-app">
                        <img src="{{ asset('interface-asset/images') }}/play-store.png" alt="" class="img" />
                    </a>
                </div>
            </div>
            <img src="{{ asset('interface-asset/images') }}/mobile-muckup.png" alt="" class="img" />
        </div>
    </div>
</section>
@endsection