@extends('layouts.webpage.main_two')

@section('page-title', 'Career')

@section('content')

    <!-- Hero Banner -->
    <section class="hero-section about-ban" style="background-image: url('{{ $hero_career && $hero_career->image_url
    ? asset('uploads/hero_career/' . $hero_career->image_url)
    : asset('uploads/Products_banner.png') }}')">
        <div class="hero-content about-inner">
            <h1 class="service-title">{{ $hero_career->title ?? 'Career' }}</h1>
            <a href="{{ route('request') }}">
                <button class="btn main-butn mt-2">Get a Quote <i class="bi bi-chevron-right"></i></button>
            </a>
        </div>
    </section>

    <!-- Current Openings -->
    <section data-aos="fade-up">
        <div class="container py-5">

            <p class="text-uppercase fw-semibold text-muted small mb-1" style="letter-spacing: .08em;">Opportunities</p>
            <h2 class="display-5 fw-bold mb-1">Current Openings</h2>
            <p class="text-muted mb-5">Join our team — view open roles below</p>

            @if($careers->isNotEmpty())
                <div class="row g-4">
                    @foreach($careers as $index => $career)
                        <div class="col-lg-4 col-md-6">
                            <div class="card border rounded-3 shadow-sm h-100 p-4 d-flex flex-column">

                                {{-- Top: badge + number --}}
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="badge rounded-pill text-bg-primary fw-normal">
                                        {{ $career->job_type ?? 'Full-Time' }}
                                    </span>
                                    <span class="text-muted small fw-semibold">
                                        {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
                                    </span>
                                </div>

                                {{-- Title --}}
                                <h5 class="fw-bold mb-1">{{ $career->job_title ?? 'Job Title' }}</h5>

                                {{-- Industry --}}
                                @if($career->industry)
                                    <p class="text-primary small fw-semibold mb-3">{{ $career->industry }}</p>
                                @endif

                                {{-- Meta --}}
                                <ul class="list-unstyled text-muted small mb-3">
                                    @if($career->location)
                                        <li class="mb-2">
                                            <i class="bi bi-geo-alt me-2 text-primary"></i>{{ $career->location }}
                                        </li>
                                    @endif
                                    @if($career->experience)
                                        <li class="mb-2">
                                            <i class="bi bi-briefcase me-2 text-primary"></i>{{ $career->experience }} experience
                                        </li>
                                    @endif
                                    @if($career->apply_email)
                                        <li>
                                            <i class="bi bi-envelope me-2 text-primary"></i>{{ $career->apply_email }}
                                        </li>
                                    @endif
                                </ul>

                                <hr class="my-2">


                                {{-- Description --}}
                                @if($career->description)
                                    <p class="text-uppercase fw-semibold text-muted mb-1"
                                        style="font-size: 11px; letter-spacing: .08em;">Description</p>
                                    <p class="text-muted small mb-3">
                                        {!! Str::limit(strip_tags($career->description), 120) !!}
                                    </p>

                                @elseif($career->requirements)
                                    <p class="text-uppercase fw-semibold text-muted mb-1"
                                        style="font-size: 11px; letter-spacing: .08em;">Requirements</p>
                                    <p class="text-muted small mb-3">
                                        {!! Str::limit(strip_tags($career->requirements), 120) !!}
                                    </p>
                                @endif


                                {{-- Apply Button --}}
                                <div class="mt-auto pt-3">
                                    <a href="{{ route('career.apply', $career->id) }}"
                                        class="btn btn-outline-dark rounded-pill px-4 d-inline-flex align-items-center gap-2">
                                        Apply Now <i class="bi bi-arrow-up-right"></i>
                                    </a>
                                </div>

                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center text-muted py-5 border rounded-3">
                    <i class="bi bi-briefcase fs-2 d-block mb-2"></i>
                    No current openings available right now.
                </div>
            @endif

        </div>
    </section>

@endsection