@extends('layouts.master')

@section('title', $data['pageTitle'] ?? 'Careers | Farmers For Forests')

@push('custom-css')
<style>
    /* Dynamic max-width matching footer and home-redesign container */
    .careers-page .container {
        max-width: 1680px;
        width: 100%;
        padding-left: 36px;
        padding-right: 36px;
    }

    @media (min-width: 1600px) {
        .careers-page .container {
            max-width: 1760px;
        }
    }

    @media (max-width: 767.98px) {
        .careers-page .container {
            padding-left: 18px;
            padding-right: 18px;
        }
    }

    /* Modern Filter Bar */
    .career-filter-bar {
        background: #ffffff;
        border: 1px solid #DFE7D8;
        border-radius: 20px;
        padding: 20px 24px;
        margin-bottom: 28px;
        box-shadow: 0 4px 20px rgba(9, 56, 58, 0.04);
    }

    .career-search-wrap {
        position: relative;
    }

    .career-search-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #7D8E81;
        pointer-events: none;
        font-size: 15px;
    }

    .career-input {
        height: 48px;
        border-radius: 24px;
        border: 1px solid #D1DCC8;
        background-color: #F8FAF6;
        font-size: 14.5px;
        padding-left: 44px;
        padding-right: 16px;
        color: #1F3325;
        transition: all 0.2s ease;
    }

    .career-input:focus {
        background-color: #ffffff;
        border-color: #86A34D;
        box-shadow: 0 0 0 3px rgba(134, 163, 77, 0.2);
        outline: none;
    }

    .career-select {
        height: 48px;
        border-radius: 24px;
        border: 1px solid #D1DCC8;
        background-color: #F8FAF6;
        font-size: 14px;
        color: #27382D;
        padding: 0 16px;
        transition: all 0.2s ease;
    }

    .career-select:focus {
        background-color: #ffffff;
        border-color: #86A34D;
        box-shadow: 0 0 0 3px rgba(134, 163, 77, 0.2);
        outline: none;
    }

    .btn-career-reset {
        height: 48px;
        border-radius: 24px;
        border: 1px solid #D1DCC8;
        background: #F8FAF6;
        color: #4D6151;
        font-weight: 600;
        font-size: 14px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-career-reset:hover {
        background: #09383A;
        color: #ffffff;
        border-color: #09383A;
    }

    .btn-career-reset:hover i {
        color: #ffffff !important;
    }

    /* Sub-bar live counts */
    .career-count-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 700;
        color: #09383A;
    }

    .career-live-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #ffffff;
        border: 1px solid #E1E8DA;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12.5px;
        color: #4B5E52;
        font-weight: 500;
    }

    /* Modern Job Card */
    .career-card-modern {
        background: #ffffff;
        border: 1px solid #E2EADB;
        border-radius: 20px;
        padding: 26px 26px 22px 26px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 3px 12px rgba(9, 56, 58, 0.03);
    }

    .career-card-modern:hover {
        transform: translateY(-5px);
        border-color: #86A34D;
        box-shadow: 0 16px 36px rgba(9, 56, 58, 0.09);
    }

    .career-badge-dept {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #2E5C31;
        background: #EAF3DF;
        padding: 4px 12px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
    }

    .career-badge-dept i {
        color: #6C9438;
        font-size: 11px;
    }

    .career-date-text {
        font-size: 12.5px;
        color: #7B8E81;
        display: inline-flex;
        align-items: center;
    }

    .career-card-heading {
        margin-top: 10px;
        margin-bottom: 14px;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.35;
    }

    .career-card-heading a {
        color: #09383A;
        text-decoration: none !important;
        transition: color 0.2s ease;
    }

    .career-card-modern:hover .career-card-heading a {
        color: #2F6D38;
    }

    .career-tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
    }

    .career-tag-item {
        display: inline-flex;
        align-items: center;
        background: #F4F7F1;
        border: 1px solid #E4EDE0;
        color: #384F3F;
        font-size: 13px;
        font-weight: 500;
        padding: 5px 12px;
        border-radius: 8px;
    }

    .career-card-summary {
        color: #556B5D;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 22px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .career-card-action {
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid #EEF4EB;
    }

    .career-apply-link {
        position: relative;
        overflow: hidden;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #86A34D;
        color: #ffffff !important;
        font-weight: 600;
        font-size: 14px;
        padding: 11px 22px;
        border-radius: 30px;
        text-decoration: none !important;
        border: 1px solid #86A34D;
        transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }

    .career-apply-text {
        position: relative;
        z-index: 2;
    }

    /* Left-to-right color fill animation */
    .career-apply-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #09383A;
        z-index: 1;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
        border-radius: inherit;
    }

    .career-apply-link:hover::before,
    .career-card-modern:hover .career-apply-link::before {
        transform: scaleX(1);
    }

    .career-apply-link:hover,
    .career-card-modern:hover .career-apply-link {
        border-color: #09383A;
        box-shadow: 0 6px 18px rgba(9, 56, 58, 0.22);
    }

    .career-apply-arrow {
        position: relative;
        z-index: 2;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.22);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11.5px;
        color: #ffffff;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s ease;
    }

    .career-apply-link:hover .career-apply-arrow,
    .career-card-modern:hover .career-apply-arrow {
        transform: translateX(4px);
        background: rgba(255, 255, 255, 0.35);
    }

    /* Empty state */
    .f4f-empty-jobs {
        background: #ffffff;
        border: 2px dashed #D6E2CE;
        border-radius: 20px;
        padding: 60px 24px;
        text-align: center;
    }

    .f4f-btn-empty-reset {
        display: inline-flex;
        align-items: center;
        background: #09383A;
        color: #ffffff !important;
        font-weight: 600;
        font-size: 14px;
        padding: 11px 26px;
        border-radius: 30px;
        text-decoration: none !important;
        border: none;
        transition: all 0.25s ease;
    }

    .f4f-btn-empty-reset:hover {
        background: #86A34D;
        transform: translateY(-1px);
    }
</style>
@endpush

@section('content')
    <div class="main-container careers-page">
        <!-- Standard Banner across all pages (No custom banner CSS) -->
        <section class="banner-container ">
            <div class="banner-title ">
                <div style="line-height: 1.1;">
                    <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
                </div>
            </div>
            <div style="height: 400px;" class="banner-image">
                <img src="{{ cms_image($page->image) }}" decoding="async" loading="lazy" alt="Careers" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
            </div>
        </section>

        <!-- Dynamic CMS Page Body from Pages Table -->
        @if($page && !empty($page->body))
            <div class="container my-4">
                {!! $page->body !!}
            </div>
        @endif

        <!-- Careers Filter & Job List Container (Dynamic max-width same as footer) -->
        <div class="container pb-5 mb-5">
            <!-- Filter Bar -->
            <div class="career-filter-bar">
                <div class="row align-items-center">
                    <!-- Search Input -->
                    <div class="col-lg-5 col-md-12 mb-3 mb-lg-0">
                        <div class="career-search-wrap">
                            <!-- <i class="fa fa-search career-search-icon"></i> -->
                            <input type="text" id="jobSearch" class="form-control career-input"
                                   placeholder="Search by title, role, skill, or keyword...">
                        </div>
                    </div>

                    <!-- City Filter -->
                    <div class="col-lg-3 col-md-5 col-sm-6 mb-3 mb-lg-0">
                        <select id="cityFilter" class="form-control career-select">
                            <option value="">All Locations ({{ count($cities) }})</option>
                            @foreach($cities as $city)
                                <option value="{{ $city }}">{{ $city }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Job Type Filter -->
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3 mb-lg-0">
                        <select id="typeFilter" class="form-control career-select">
                            <option value="">All Job Types</option>
                            @foreach($jobTypes as $type)
                                <option value="{{ $type }}">{{ $type }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Reset Button -->
                    <div class="col-lg-2 col-md-3 col-sm-12">
                        <button id="resetFilters" type="button" class="btn btn-career-reset w-100">
                            <i class="fa fa-redo mr-1 text-muted"></i> Reset
                        </button>
                    </div>
                </div>
            </div>

            <!-- Result Count Sub-bar -->
            <div class="d-flex flex-wrap align-items-center justify-content-between mb-4 px-1">
                <div>
                    <span id="jobCountLabel" class="career-count-pill">
                        <i class="fa fa-layer-group text-success"></i> Showing {{ count($jobs) }} Open Positions
                    </span>
                </div>
                <div class="mt-2 mt-sm-0">
                    <span class="career-live-badge">
                        <i class="fa fa-sync-alt text-success"></i> Live via Zoho Recruit
                    </span>
                </div>
            </div>

            <!-- Job Grid: 3 columns on large desktop, 2 on tablet, 1 on mobile -->
            <div class="row" id="jobCardsContainer">
                @forelse($jobs as $index => $job)
                    @php
                        $title = $job['Posting_Title'] ?? ($job['Job_Opening_Name'] ?? 'Position Opening');
                        $city = trim($job['City'] ?? '');
                        $state = trim($job['State'] ?? '');
                        $location = implode(', ', array_filter([$city, $state]));
                        $jobType = $job['Job_Type'] ?? 'Full time';
                        $experience = $job['Work_Experience'] ?? '';
                        $dateOpened = $job['Date_Opened'] ?? '';
                        $desc = $job['Job_Description'] ?? '';
                        $industry = $job['Industry'] ?? 'Environmental';
                        $applyUrl = $job['$url'] ?? 'https://farmersforforests.zohorecruit.in/jobs/Careers';
                    @endphp
                    <div class="col-xl-4 col-lg-4 col-md-6 col-12 mb-4 job-item-col"
                         data-title="{{ strtolower($title) }}"
                         data-city="{{ strtolower($city) }}"
                         data-type="{{ strtolower($jobType) }}"
                         data-desc="{{ strtolower($desc) }}">
                        <div class="career-card-modern">
                            <div>
                                <!-- Top Info -->
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                    <span class="career-badge-dept">
                                        <i class="fa fa-leaf mr-1"></i> {{ $industry }}
                                    </span>
                                    @if($dateOpened)
                                        <span class="career-date-text">
                                            <i class="far fa-calendar-alt mr-1"></i> {{ $dateOpened }}
                                        </span>
                                    @endif
                                </div>

                                <!-- Job Title -->
                                <h3 class="career-card-heading">
                                    <a href="{{ $applyUrl }}" target="_blank" rel="noopener noreferrer">
                                        {{ $title }}
                                    </a>
                                </h3>

                                <!-- Pill Badges -->
                                <div class="career-tags-row">
                                    @if($location)
                                        <span class="career-tag-item">
                                            <i class="fa fa-map-marker-alt text-success mr-1"></i> {{ $location }}
                                        </span>
                                    @endif
                                    @if($jobType)
                                        <span class="career-tag-item">
                                            <i class="fa fa-briefcase text-primary mr-1"></i> {{ $jobType }}
                                        </span>
                                    @endif
                                    @if($experience)
                                        <span class="career-tag-item">
                                            <i class="fa fa-user-clock text-warning mr-1"></i> {{ $experience }}
                                        </span>
                                    @endif
                                </div>

                                <!-- Description Snippet -->
                                <p class="career-card-summary">
                                    {{ Str::limit(strip_tags($desc), 150) }}
                                </p>
                            </div>

                            <!-- Single Apply Action -->
                            <div class="career-card-action">
                                <a href="{{ $applyUrl }}" target="_blank" rel="noopener noreferrer" class="career-apply-link">
                                    <span class="career-apply-text">Apply for this role</span>
                                    <span class="career-apply-arrow"><i class="fa fa-arrow-right"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="f4f-empty-jobs">
                            <i class="fa fa-briefcase fa-3x text-muted mb-3"></i>
                            <h4 style="color: #09383A; font-weight: 700;">No Open Positions Right Now</h4>
                            <p class="text-muted mb-4">We do not have any active openings at this moment. Please check back soon or follow our updates.</p>
                            <a href="{{ route('home') }}" class="btn f4f-btn-empty-reset">
                                <i class="fa fa-home mr-2"></i> Return Home
                            </a>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- Dynamic Empty State (Filter 0 matches) -->
            <div id="noResultsState" class="f4f-empty-jobs" style="display: none;">
                <i class="fa fa-search fa-3x text-muted mb-3"></i>
                <h4 style="color: #09383A; font-weight: 700;">No Job Openings Match Your Criteria</h4>
                <p class="text-muted mb-4">Try clearing or adjusting your search keyword and filters to see more opportunities.</p>
                <button type="button" id="btnResetNoResults" class="btn f4f-btn-empty-reset">
                    <i class="fa fa-redo mr-2"></i> Reset Filters
                </button>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        const $searchInput = $('#jobSearch');
        const $cityFilter = $('#cityFilter');
        const $typeFilter = $('#typeFilter');
        const $resetBtn = $('#resetFilters');
        const $resetNoResultsBtn = $('#btnResetNoResults');
        const $cardsContainer = $('#jobCardsContainer');
        const $noResultsState = $('#noResultsState');
        const $jobCountLabel = $('#jobCountLabel');
        const $jobCards = $('.job-item-col');
        const totalJobs = $jobCards.length;

        function filterJobs() {
            const query = ($searchInput.val() || '').toLowerCase().trim();
            const selectedCity = ($cityFilter.val() || '').toLowerCase().trim();
            const selectedType = ($typeFilter.val() || '').toLowerCase().trim();

            let visibleCount = 0;

            $jobCards.each(function() {
                const $card = $(this);
                const title = $card.data('title') || '';
                const city = $card.data('city') || '';
                const type = $card.data('type') || '';
                const desc = $card.data('desc') || '';

                const matchesQuery = !query || title.includes(query) || desc.includes(query) || city.includes(query);
                const matchesCity = !selectedCity || city === selectedCity;
                const matchesType = !selectedType || type === selectedType;

                if (matchesQuery && matchesCity && matchesType) {
                    $card.show();
                    visibleCount++;
                } else {
                    $card.hide();
                }
            });

            // Update counter
            if (visibleCount === totalJobs) {
                $jobCountLabel.html(`<i class="fa fa-layer-group text-success"></i> Showing ${visibleCount} Open Positions`);
            } else {
                $jobCountLabel.html(`<i class="fa fa-layer-group text-success"></i> Showing ${visibleCount} of ${totalJobs} Open Positions`);
            }

            // Show empty state if 0 matches
            if (visibleCount === 0) {
                $cardsContainer.hide();
                $noResultsState.show();
            } else {
                $cardsContainer.show();
                $noResultsState.hide();
            }
        }

        // Live input & change listeners
        $searchInput.on('input', filterJobs);
        $cityFilter.on('change', filterJobs);
        $typeFilter.on('change', filterJobs);

        // Reset handlers
        function resetAll() {
            $searchInput.val('');
            $cityFilter.val('');
            $typeFilter.val('');
            filterJobs();
        }

        $resetBtn.on('click', resetAll);
        $resetNoResultsBtn.on('click', resetAll);
    });
</script>
@endsection