@extends('frontend.layouts.app')

@section('title', 'Career')

@php
    use Carbon\Carbon;
    use App\Helpers\Helper;
    use App\Enum\TimingTypeEnum;
    use Anuzpandey\LaravelNepaliDate\LaravelNepaliDate;
@endphp

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('pages.career'),
        'subHeading' => Helper::contentText('pages.career_description'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('route.career'),
            'route' => route('career'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    <section class="section-y bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 space-y-4">

            @if (isset($careers) && count($careers) > 0)

                @foreach ($careers as $career)
                    <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
                        <div class="flex-1">
                            <h3 class="text-xl font-bold text-primary mt-2">
                                {{ app()->getLocale() == 'en' ? $career->name_en ?? '' : $career->name_np ?? ($career->name_en ?? '') }}
                            </h3>

                            <div class="text-gray-600 mt-1 text-sm text-justify line-clamp-5">
                                {!! Helper::stripInlineStyle(
                                    app()->getLocale() == 'en'
                                        ? $career->requirement_en ?? ''
                                        : $career->requirement_np ?? ($career->requirement_en ?? ''),
                                ) !!}
                            </div>

                            <div class="flex flex-wrap justify-between text-gray-500 text-sm mt-2 space-x-4">
                                <span>
                                    <span class="text-2xl">📅</span>
                                    {{ app()->getLocale() == 'en'
                                        ? $career->valid_date
                                        : LaravelNepaliDate::from($career->valid_date)->toNepaliDate(format: 'j F Y', locale: 'np') }}
                                </span>

                                <span>
                                    <span class="text-2xl">⏰</span>
                                    {{ app()->getLocale() == 'en'
                                        ? TimingTypeEnum::map($career->timing) ?? ''
                                        : TimingTypeEnum::mapNp($career->timing) ?? (TimingTypeEnum::map($career->timing) ?? '') }}
                                </span>

                                <span>
                                    <span class="text-2xl">📬</span>
                                    {{ app()->getLocale() == 'en'
                                        ? $career->number_of_post ?? ''
                                        : Helper::convertEnglishToNepaliNumbers($career->number_of_post) ?? ($career->number_of_post ?? '') }}
                                </span>

                                <a href="{{ route('career-details.show', $career->slug) }}"
                                    class="block text-center text-sm font-semibold text-primary border border-primary rounded hover:bg-primary hover:text-white transition-all px-4 py-2">
                                    {{ __('pages.career_details') }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <!-- No Jobs Available Message -->
                <div class="text-center py-12 md:py-20 px-6 bg-white border border-gray-100 rounded-2xl shadow-sm max-w-3xl mx-auto">

                    <!-- Icon / Visual Indicator -->
                    <div class="flex justify-center mb-5">
                        <div class="w-16 h-16 rounded-full bg-[#044335]/10 flex items-center justify-center">
                            <i class="fa-solid fa-briefcase text-[#044335] text-2xl"></i>
                        </div>
                    </div>

                    <!-- Title -->
                    <h2 class="text-2xl md:text-3xl font-bold text-[#044335] mb-3">
                        {!! Helper::content('pages.career_no_openings_heading') !!}
                    </h2>

                    <!-- Description -->
                    <p class="text-gray-600 text-base leading-relaxed max-w-xl mx-auto">
                        {!! Helper::content('pages.career_no_openings_description') !!}
                    </p>

                    <!-- Divider -->
                    <div class="my-6 flex justify-center">
                        <div class="w-16 h-px bg-gray-200"></div>
                    </div>

                    <!-- CTA / Email -->
                    @if (!empty($setting->career_notify_email))
                        <p class="text-gray-600 text-sm">
                            {!! Helper::content('pages.career_send_cv') !!}
                        </p>

                        <a href="mailto:{{ $setting->career_notify_email }}"
                            class="mt-2 inline-flex items-center justify-center gap-2 text-[#044335] font-semibold hover:underline transition">
                            <i class="fa-regular fa-envelope"></i>
                            <span>{{ $setting->career_notify_email }}</span>
                        </a>
                    @endif

                </div>
            @endif

        </div>
    </section>

@endsection