@extends('layouts.app')
@section('title', $job->title . ' at ' . ($job->company->name ?? 'Company') . ' — JobPortal')

@section('styles')
    <style>
        /* Scoped overrides to bypass strict global typography weight limits in parent layouts */
        .job-detail-page-container {
            font-family: 'DM Sans', sans-serif;
            color: #1e293b;
        }

        .job-detail-page-container h1,
        .job-detail-page-container h2,
        .job-detail-page-container h3,
        .job-detail-page-container h4,
        .job-detail-page-container h5,
        .job-detail-page-container h6,
        .job-detail-page-container .fw-900,
        .job-detail-page-container .fw-800 {
            font-weight: 850 !important;
            color: #0f172a !important;
        }

        .job-detail-page-container .fw-700 {
            font-weight: 750 !important;
        }

        .job-detail-page-container .fw-600 {
            font-weight: 650 !important;
        }

        .job-detail-page-container .text-muted {
            color: #64748b !important;
        }

        /* Banner styling - Dark navy matching screenshot */
        .job-detail-banner {
            background: linear-gradient(135deg, #09122c 0%, #0d1e3d 100%) !important;
            border-radius: 16px;
            padding: 2.2rem 2.5rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
            margin-bottom: 2rem;
            text-align: left;
        }

        /* Explicit white overrides for all dark banner text elements */
        .job-detail-page-container .job-detail-banner * {
            color: #ffffff !important;
        }

        .job-detail-page-container .job-detail-banner .text-white-50,
        .job-detail-page-container .job-detail-banner .text-white-50 * {
            color: rgba(255, 255, 255, 0.65) !important;
        }

        .job-detail-page-container .job-detail-banner .company-link:hover {
            color: #2dd4bf !important;
        }

        /* Subtle TCS style watermark in background */
        .job-detail-banner::after {
            content: 'tcs';
            position: absolute;
            right: 4%;
            bottom: -15%;
            font-size: 8rem;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.025) !important;
            font-style: italic;
            pointer-events: none;
            letter-spacing: -2px;
        }

        .header-logo-container {
            width: 120px;
            height: 120px;
            border-radius: 14px;
            background: #ffffff;
            padding: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            flex-shrink: 0;
            border: 2px solid rgba(255, 255, 255, 0.15);
        }

        .header-logo {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 10px;
        }

        .btn-outline-share-white {
            border: 1px solid rgba(255, 255, 255, 0.35) !important;
            background-color: transparent !important;
            border-radius: 10px;
            padding: 0.65rem 1.4rem;
            font-size: 0.88rem;
            transition: all 0.2s ease;
        }

        .btn-outline-share-white:hover {
            background-color: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.6) !important;
        }

        .btn-green-cta {
            background-color: #0d9488 !important;
            border: none !important;
            border-radius: 10px;
            padding: 0.65rem 1.6rem;
            font-size: 0.88rem;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px rgba(13, 148, 136, 0.25);
        }

        .btn-green-cta:hover {
            background-color: #0f766e !important;
            box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
            transform: translateY(-1px);
        }

        /* Attribute Pills Grid */
        .tag-pill {
            font-size: 0.82rem;
            font-weight: 800;
            padding: 0.55rem 1.1rem;
            border-radius: 30px;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }

        .tag-pill-teal {
            background-color: #d1fae5;
            color: #065f46;
        }

        .tag-pill-blue {
            background-color: #e0f2fe;
            color: #0284c7;
        }

        .tag-pill-purple {
            background-color: #f3e8ff;
            color: #7e22ce;
        }

        .tag-pill-amber {
            background-color: #fef3c7;
            color: #d97706;
        }

        .tag-pill-rose {
            background-color: #ffe4e6;
            color: #e11d48;
        }

        /* Tab bar redesign */
        .nav-tabs {
            border-bottom: 1px solid #e2e8f0 !important;
            margin-bottom: 2rem;
        }

        .nav-tabs .nav-link {
            background: none !important;
            border: none !important;
            border-bottom: 3px solid transparent !important;
            color: #64748b !important;
            font-weight: 750 !important;
            padding: 0.85rem 1.2rem !important;
            transition: all 0.2s ease;
            font-size: 0.94rem;
        }

        .nav-tabs .nav-link.active {
            color: #0d9488 !important;
            border-bottom-color: #0d9488 !important;
        }

        .nav-tabs .nav-link:hover {
            color: #0d9488 !important;
        }

        /* Content section card */
        .content-section {
            background: #ffffff;
            border-radius: 16px;
            padding: 2.2rem;
            margin-bottom: 2rem;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 18px rgba(15, 23, 42, 0.01);
            text-align: left;
        }

        .content-section-title {
            font-size: 1.15rem;
            font-weight: 850 !important;
            color: #0f172a !important;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .icon-box {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
        }

        .icon-box-teal { background-color: #e6fdf5; color: #0d9488; }
        .icon-box-blue { background-color: #f0f9ff; color: #0284c7; }
        .icon-box-purple { background-color: #faf5ff; color: #7e22ce; }

        /* Custom Checkmark Lists */
        .checklist-ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }

        .checklist-ul li {
            position: relative;
            padding-left: 1.85rem;
            margin-bottom: 0.85rem;
            font-size: 0.9rem;
            color: #475569;
            font-weight: 700;
        }

        .checklist-ul li::before {
            content: "\f058"; /* FA Check Circle Solid */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 2px;
            color: #10b981;
            font-size: 0.98rem;
        }

        /* Tech pill tags inside blue card */
        .tech-pill {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            padding: 0.5rem 1rem;
            border-radius: 12px;
            font-size: 0.82rem;
            font-weight: 800;
            color: #475569;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
        }

        .tech-pill:hover {
            border-color: #0d9488;
            color: #0d9488;
            transform: translateY(-2px);
        }

        .tech-pill i {
            margin-right: 0.35rem;
        }

        /* Experience Slider Visualization */
        .slider-card {
            border-radius: 16px;
            background-color: #f8fafc;
            border: 1px solid #cbd5e1;
            padding: 1.5rem;
        }

        /* Benefits perks grid */
        .perk-card {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 1.25rem;
            transition: all 0.25s ease;
            height: 100%;
        }

        .perk-card:hover {
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
            transform: translateY(-2px);
        }

        .perk-icon-container {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        /* Sidebar overview styles */
        .sidebar-overview-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }

        .sidebar-overview-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.85rem 0;
            border-bottom: 1px solid #f1f5f9;
        }

        .sidebar-overview-item:last-child {
            border-bottom: none;
        }

        .sidebar-item-icon {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        /* Already Applied Green Banner */
        .applied-banner {
            background-color: #ecfdf5;
            border: 1px solid #a7f3d0;
            border-radius: 14px;
            padding: 1.4rem;
            text-align: center;
        }

        .btn-view-application {
            background-color: #ffffff;
            border: 1px solid #a7f3d0;
            color: #065f46;
            font-weight: 800;
            border-radius: 10px;
            padding: 0.6rem;
            font-size: 0.85rem;
            transition: all 0.2s ease;
        }

        .btn-view-application:hover {
            background-color: #d1fae5;
        }

        /* Circular share links */
        .share-circle {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f1f5f9;
            color: #475569;
            transition: all 0.2s ease;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .share-circle:hover {
            background-color: #0d9488;
            color: #ffffff;
            transform: scale(1.1);
        }

        /* Rating stars */
        .star-rating i {
            color: #f59e0b !important;
            font-size: 0.8rem;
        }

        /* Metrics grid */
        .metrics-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.85rem;
            margin-bottom: 1.25rem;
        }

        .metric-box {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 0.75rem;
            background-color: #ffffff;
        }

        /* Similar jobs horizontal styling */
        .similar-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 1.2rem;
            transition: all 0.3s ease;
            text-decoration: none;
            display: block;
            position: relative;
            text-align: left;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
        }

        .similar-card:hover {
            border-color: #0d9488;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
            transform: translateY(-2px);
        }

        .similar-logo {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: contain;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            padding: 4px;
        }

        .similar-carousel-btn {
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 1px solid #cbd5e1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #475569;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
            z-index: 10;
            transition: all 0.2s ease;
        }

        .similar-carousel-btn:hover {
            background-color: #0d9488;
            color: #ffffff;
            border-color: #0d9488;
        }

        @media (max-width: 991px) {
            .job-detail-banner {
                padding: 1.5rem;
            }
            .job-detail-banner .d-flex {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 1rem;
            }
            .header-buttons-col {
                width: 100%;
                justify-content: flex-start !important;
                margin-top: 1rem;
            }
            .similar-carousel-btn {
                display: none;
            }
        }
    </style>
@endsection

@section('content')

<div class="job-detail-page-container">

    <!-- ═══════════════════════════ BREADCRUMB HEADER ═══════════════════════════ -->
    <section class="py-3" style="background: #ffffff; border-bottom: 1px solid #f1f5f9;">
        <div class="container text-start">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0" style="font-size:0.8rem; font-weight:800; letter-spacing:0.2px;">
                    <li class="breadcrumb-item">
                        <a href="{{ route('home') }}" class="text-muted text-decoration-none hover-teal">
                            <i class="fas fa-home me-1"></i>Home
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('jobs.index') }}" class="text-muted text-decoration-none hover-teal">Jobs</a>
                    </li>
                    <li class="breadcrumb-item active text-teal-accent" aria-current="page">{{ $job->title }}</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- ═══════════════════════════ MAIN JOB DETAILS AREA ═══════════════════════════ -->
    <section class="py-4" style="background:#fafafb; min-height:100vh;">
        <div class="container">
            
            <!-- Job Header Dark Banner -->
            <div class="job-detail-banner">
                <div class="d-flex align-items-start gap-4 flex-column flex-md-row justify-content-between">
                    
                    <!-- Left Details -->
                    <div class="d-flex align-items-start flex-column flex-sm-row" style="gap: 1.25rem;">
                        <div class="header-logo-container">
                            <img src="{{ $job->company->logo_url ?? 'https://ui-avatars.com/api/?name='.urlencode($job->company->name ?? 'C').'&background=0d9488&color=fff&size=80' }}" alt="{{ $job->company->name ?? 'Company' }}" class="header-logo">
                        </div>
                        
                        <div class="pt-1">
                            <div class="d-flex align-items-center flex-wrap" style="gap: 0.5rem;">
                                <a href="{{ route('companies.show', $job->company->slug) }}" class="fw-800 text-white company-link text-decoration-none" style="font-size: 1.05rem; font-weight:800 !important;">
                                    {{ $job->company->name ?? 'Company' }}
                                </a>
                                <i class="fas fa-check-circle text-primary" style="color: #3b82f6 !important; font-size: 0.95rem;" title="Verified Employer"></i>
                                <span class="text-white-50 small fs-7 ms-2">· {{ $job->company->industry ?? 'Information Technology' }} · 1,000+ employees</span>
                            </div>
                            
                            <h1 class="text-white fw-900 mt-2 mb-3" style="font-size: 2.1rem; letter-spacing: -0.5px; font-weight:900 !important; color:#ffffff !important;">{{ $job->title }}</h1>
                            
                            <!-- Metadata Stats Row -->
                            <div class="d-flex flex-wrap align-items-center text-white-50 small fw-800" style="gap: 1.25rem;">
                                <span class="d-flex align-items-center gap-2">
                                    <i class="fas fa-map-marker-alt" style="color: #cbd5e1;"></i> {{ $job->is_remote ? 'Remote (India)' : ($job->city ?? 'Remote') }}
                                </span>
                                <span class="d-flex align-items-center gap-2">
                                    <i class="far fa-clock" style="color: #cbd5e1;"></i> Posted {{ $job->created_at->diffForHumans() }}
                                </span>
                                <span class="d-flex align-items-center gap-2">
                                    <i class="fas fa-briefcase" style="color: #cbd5e1;"></i> {{ ucwords(str_replace('-',' ',$job->job_type)) }}
                                </span>
                                <span class="d-flex align-items-center gap-2">
                                    <i class="fas fa-users" style="color: #cbd5e1;"></i> {{ $job->vacancies ?? '3' }} Vacancies
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Right Action Buttons -->
                    <div class="d-flex align-items-center header-buttons-col justify-content-end align-self-md-center" style="gap: 0.75rem;">
                        <button class="btn btn-outline-share-white btn-save-job d-flex align-items-center gap-2" data-id="{{ $job->id }}">
                            @auth
                                @if(auth()->user()->savedJobs && auth()->user()->savedJobs()->where('job_listing_id', $job->id)->exists())
                                    <i class="fas fa-heart text-danger" style="color:#ef4444 !important;"></i>
                                @else
                                    <i class="far fa-heart"></i>
                                @endif
                            @else
                                <i class="far fa-heart"></i>
                            @endauth
                            <span>Save Job</span>
                        </button>
                        
                        @if($hasApplied)
                            <button class="btn btn-green-cta px-4" style="background-color: #0d9488 !important; opacity:0.85;" disabled>
                                <i class="fas fa-check" style="margin-right: 0.4rem;"></i> Applied
                            </button>
                        @else
                            @auth
                                <button class="btn btn-green-cta d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#applyModal">
                                    <span>Apply Now</span> <i class="fas fa-arrow-right fs-7"></i>
                                </button>
                            @else
                                <a href="{{ route('login') }}" class="btn btn-green-cta d-flex align-items-center gap-2 text-decoration-none">
                                    <span>Apply Now</span> <i class="fas fa-arrow-right fs-7"></i>
                                </a>
                            @endauth
                        @endif
                    </div>

                </div>
            </div>

            <!-- ═══════════════════ Attribute Pills Row ═══════════════════ -->
            <div class="d-flex flex-wrap mb-4 justify-content-start text-start" style="gap: 0.65rem;">
                <span class="tag-pill tag-pill-purple">
                    <i class="fas fa-layer-group"></i> {{ ucfirst($job->experience_level) }} Level
                </span>
                <span class="tag-pill tag-pill-amber">
                    <i class="fas fa-wallet"></i> {{ $job->salary_range }}
                </span>
                <span class="tag-pill tag-pill-blue">
                    <i class="fas fa-briefcase"></i> {{ ucwords(str_replace('-',' ',$job->job_type)) }}
                </span>
                <span class="tag-pill tag-pill-teal">
                    <i class="fas fa-users"></i> {{ $job->vacancies ?? '3' }} Vacancies
                </span>
                @if($job->is_urgent)
                    <span class="tag-pill tag-pill-rose">
                        <i class="fas fa-fire"></i> Urgent Hiring
                    </span>
                @endif
            </div>

            <!-- ═══════════════════ Tab Navigation Bar ═══════════════════ -->
            <ul class="nav nav-tabs text-start" id="jobTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" href="javascript:void(0);" onclick="document.getElementById('job-details-sec').scrollIntoView({behavior: 'smooth', block: 'center'})">
                        <i class="far fa-file-alt me-1.5 text-teal-accent"></i> Job Details
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);" onclick="document.getElementById('requirements-sec').scrollIntoView({behavior: 'smooth', block: 'center'})">
                        <i class="fas fa-tasks me-1.5"></i> Requirements
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);" onclick="document.getElementById('benefits-sec').scrollIntoView({behavior: 'smooth', block: 'center'})">
                        <i class="fas fa-gift me-1.5"></i> Benefits
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);" onclick="document.getElementById('company-sec').scrollIntoView({behavior: 'smooth', block: 'center'})">
                        <i class="far fa-building me-1.5"></i> Company
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);" onclick="document.getElementById('reviews-sec').scrollIntoView({behavior: 'smooth', block: 'center'})">
                        <i class="far fa-star me-1.5"></i> Reviews (24)
                    </a>
                </li>
            </ul>

            <div class="row g-4">
                
                <!-- Left Column Main Details -->
                <div class="col-lg-8">
                    
                    <!-- Card 1: Job Details / Job Description -->
                    <div class="content-section" id="job-details-sec">
                        <h5 class="content-section-title">
                            <div class="icon-box icon-box-teal"><i class="far fa-file-alt"></i></div>
                            Job Description
                        </h5>
                        
                        <!-- Parse raw markdown lists to keep only the introduction paragraph clean -->
                        @php
                            $intro = $job->description;
                            $splitters = ['###', '##', '**Responsibilities**', '**Key Responsibilities**', '- ', '* '];
                            foreach ($splitters as $splitter) {
                                if (strpos($intro, $splitter) !== false) {
                                    $intro = explode($splitter, $intro)[0];
                                }
                            }
                            $intro = trim($intro);
                        @endphp

                        <!-- Description content -->
                        <div class="text-muted fw-600 mb-4" style="line-height:1.8; font-size:0.94rem; font-weight: 500 !important; color:#475569 !important;">
                            {!! nl2br(e($intro)) !!}
                        </div>

                        <!-- Key Responsibilities & Cartoon Illustration Row -->
                        <div class="row align-items-center g-4 border-top pt-4" style="border-top-color: #f1f5f9 !important;">
                            <div class="col-md-7 text-start">
                                <h6 class="fw-800 text-dark mb-3" style="font-size: 0.95rem; font-weight:800 !important;">Key Responsibilities</h6>
                                <ul class="checklist-ul">
                                    <li>Architect modular database architectures</li>
                                    <li>Write optimized Eloquent scripts</li>
                                    <li>Integrate Razorpay payment pipelines</li>
                                    <li>Coordinate APIs with external tools</li>
                                    <li>Collaborate with cross-functional teams</li>
                                </ul>
                            </div>
                            <div class="col-md-5 text-center">
                                <img src="{{ asset('images/developer_illustration.png') }}" class="img-fluid" style="max-height: 175px; object-fit: contain;" alt="Developer illustration">
                            </div>
                        </div>

                        <!-- Technologies segment -->
                        <div class="rounded-4 p-3 mt-4" style="background-color: #f0f9ff; border: 1px solid #e0f2fe; border-radius: 12px;">
                            <span class="d-flex align-items-center gap-1.5 fw-750 text-dark mb-3" style="font-size: 0.88rem; font-weight:800 !important;">
                                <i class="fas fa-laptop-code text-teal-accent"></i> Technologies You'll Work With
                            </span>
                            
                            <div class="d-flex flex-wrap gap-2">
                                <span class="tech-pill"><i class="fab fa-php text-primary" style="color: #6c7eb7 !important;"></i> PHP</span>
                                <span class="tech-pill"><i class="fab fa-laravel text-danger"></i> Laravel</span>
                                <span class="tech-pill"><i class="fab fa-vuejs text-success"></i> Vue.js</span>
                                <span class="tech-pill"><i class="fab fa-js text-warning"></i> JavaScript</span>
                                <span class="tech-pill"><i class="fas fa-database text-muted"></i> MySQL</span>
                                <span class="tech-pill"><i class="fab fa-git-alt text-danger"></i> Git</span>
                            </div>
                        </div>
                    </div>

                    <!-- Card 2: Requirements -->
                    <div class="content-section" id="requirements-sec">
                        <h5 class="content-section-title">
                            <div class="icon-box icon-box-blue"><i class="fas fa-tasks"></i></div>
                            Requirements
                        </h5>

                        <div class="row g-4 align-items-center">
                            <div class="col-md-7 text-start">
                                <ul class="checklist-ul">
                                    @if($job->requirements)
                                        {!! collect(explode("\n", str_replace(["\r", "- ", "* "], "", $job->requirements)))->filter()->map(fn($item) => "<li>" . e($item) . "</li>")->implode('') !!}
                                    @else
                                        <li>4+ Years Laravel production experience</li>
                                        <li>Expertise in HTML5, CSS3, JavaScript ES6+</li>
                                        <li>Experience with Redis and job queues</li>
                                        <li>Strong problem solving & debugging skills</li>
                                    @endif
                                </ul>
                            </div>
                            
                            <div class="col-md-5">
                                <!-- Visual Experience Slider Card -->
                                <div class="slider-card text-start">
                                    <div class="fw-800 text-dark mb-1.5" style="font-size: 0.85rem; font-weight:800 !important;">Experience Level</div>
                                    
                                    <div class="position-relative my-4" style="height: 6px; background-color: #cbd5e1; border-radius: 3px;">
                                        <!-- Green highlight track -->
                                        <div class="position-absolute h-100 bg-success" style="left: 0; width: 50%; border-radius: 3px; background-color: #10b981 !important;"></div>
                                        
                                        <!-- Marker Dot -->
                                        <div class="position-absolute rounded-circle border border-white" style="left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background-color: #10b981 !important; border-width: 3px !important; box-shadow: 0 0 0 4px rgba(16,185,129,0.15);"></div>
                                        
                                        <!-- Active Label Tooltip -->
                                        <div class="position-absolute text-success fw-800 small text-nowrap" style="left: 50%; top: -25px; transform: translateX(-50%); font-size: 0.78rem; font-weight: 800 !important;">4+ Years</div>
                                    </div>
                                    
                                    <div class="d-flex justify-content-between text-muted fw-700" style="font-size: 0.72rem; font-weight: 700 !important;">
                                        <span>0 Yrs</span>
                                        <span>8+ Yrs</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card 3: Benefits & Perks -->
                    <div class="content-section" id="benefits-sec">
                        <h5 class="content-section-title">
                            <div class="icon-box icon-box-purple"><i class="fas fa-gift"></i></div>
                            Benefits & Perks
                        </h5>

                        <div class="row g-3">
                            <div class="col-md-4 col-sm-6">
                                <div class="perk-card text-start">
                                    <div class="perk-icon-container" style="background-color: #faf5ff; color: #7e22ce;">
                                        <i class="far fa-calendar-alt"></i>
                                    </div>
                                    <h6 class="fw-800 text-dark mb-1" style="font-size: 0.88rem; font-weight:800 !important;">Flexible Schedule</h6>
                                    <p class="text-muted mb-0" style="font-size: 0.76rem; font-weight: 550; line-height: 1.4;">Work at your own convenience & hours.</p>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="perk-card text-start">
                                    <div class="perk-icon-container" style="background-color: #e6fdf5; color: #0d9488;">
                                        <i class="fas fa-shield-heart"></i>
                                    </div>
                                    <h6 class="fw-800 text-dark mb-1" style="font-size: 0.88rem; font-weight:800 !important;">Health Insurance</h6>
                                    <p class="text-muted mb-0" style="font-size: 0.76rem; font-weight: 550; line-height: 1.4;">Complete medical cover for family.</p>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="perk-card text-start">
                                    <div class="perk-icon-container" style="background-color: #fffbeb; color: #d97706;">
                                        <i class="fas fa-wallet"></i>
                                    </div>
                                    <h6 class="fw-800 text-dark mb-1" style="font-size: 0.88rem; font-weight:800 !important;">Annual Tech Budget</h6>
                                    <p class="text-muted mb-0" style="font-size: 0.76rem; font-weight: 550; line-height: 1.4;">Get gadgets of your own choice.</p>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="perk-card text-start">
                                    <div class="perk-icon-container" style="background-color: #faf5ff; color: #7e22ce;">
                                        <i class="fas fa-graduation-cap"></i>
                                    </div>
                                    <h6 class="fw-800 text-dark mb-1" style="font-size: 0.88rem; font-weight:800 !important;">Learning Allowance</h6>
                                    <p class="text-muted mb-0" style="font-size: 0.76rem; font-weight: 550; line-height: 1.4;">Access premium training & material.</p>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="perk-card text-start">
                                    <div class="perk-icon-container" style="background-color: #ffe4e6; color: #e11d48;">
                                        <i class="fas fa-plane"></i>
                                    </div>
                                    <h6 class="fw-800 text-dark mb-1" style="font-size: 0.88rem; font-weight:800 !important;">Paid Time Off</h6>
                                    <p class="text-muted mb-0" style="font-size: 0.76rem; font-weight: 550; line-height: 1.4;">Plenty of leaves & vacation days.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card 4: Reviews -->
                    <div class="content-section" id="reviews-sec">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="content-section-title mb-0 border-0 pb-0">
                                <div class="icon-box icon-box-warm" style="background-color: #fef3c7; color: #f59e0b;"><i class="fas fa-star"></i></div>
                                Employee Reviews
                            </h5>
                            <button class="btn btn-teal-gradient px-4 py-2 text-white fw-800" style="border-radius: 10px; font-size: 0.85rem;" data-bs-toggle="modal" data-bs-target="#addReviewModal">
                                <i class="fas fa-pen me-1.5"></i> Add Review
                            </button>
                        </div>

                        <div class="d-flex flex-column gap-3">
                            <!-- Review 1 -->
                            <div class="review-card p-4 rounded-4" style="background-color: #ffffff; border: 1px solid #e2e8f0;">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div class="d-flex align-items-center gap-3">
                                        <img src="https://ui-avatars.com/api/?name=A+S&background=0d9488&color=fff" alt="" class="rounded-circle" width="42" height="42">
                                        <div>
                                            <div class="fw-800 text-dark mb-0.5" style="font-size: 0.9rem;">Software Engineer</div>
                                            <div class="text-muted small fw-600">Current Employee · 2 years</div>
                                        </div>
                                    </div>
                                    <div class="star-rating d-flex align-items-center gap-1">
                                        <i class="fas fa-star text-warning"></i>
                                        <i class="fas fa-star text-warning"></i>
                                        <i class="fas fa-star text-warning"></i>
                                        <i class="fas fa-star text-warning"></i>
                                        <i class="fas fa-star text-warning"></i>
                                        <span class="text-muted fw-800 ms-1" style="font-size:0.75rem;">5.0</span>
                                    </div>
                                </div>
                                <h6 class="fw-800 text-dark" style="font-size: 0.95rem;">"Great work-life balance and amazing culture"</h6>
                                <p class="text-muted fw-500 mb-0" style="font-size: 0.85rem; line-height: 1.5;">The company really cares about its employees. Flexible hours, great benefits, and a lot of opportunities to learn new technologies. Management is supportive and always open to new ideas.</p>
                            </div>
                            
                            <!-- Review 2 -->
                            <div class="review-card p-4 rounded-4" style="background-color: #ffffff; border: 1px solid #e2e8f0;">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div class="d-flex align-items-center gap-3">
                                        <img src="https://ui-avatars.com/api/?name=J+D&background=f59e0b&color=fff" alt="" class="rounded-circle" width="42" height="42">
                                        <div>
                                            <div class="fw-800 text-dark mb-0.5" style="font-size: 0.9rem;">Product Manager</div>
                                            <div class="text-muted small fw-600">Former Employee · 3 years</div>
                                        </div>
                                    </div>
                                    <div class="star-rating d-flex align-items-center gap-1">
                                        <i class="fas fa-star text-warning"></i>
                                        <i class="fas fa-star text-warning"></i>
                                        <i class="fas fa-star text-warning"></i>
                                        <i class="fas fa-star text-warning"></i>
                                        <i class="far fa-star text-warning"></i>
                                        <span class="text-muted fw-800 ms-1" style="font-size:0.75rem;">4.0</span>
                                    </div>
                                </div>
                                <h6 class="fw-800 text-dark" style="font-size: 0.95rem;">"Solid place to build your career"</h6>
                                <p class="text-muted fw-500 mb-0" style="font-size: 0.85rem; line-height: 1.5;">Good projects and smart people. The pace can be fast sometimes, but you definitely grow a lot here. The only downside is that processes can sometimes be a bit bureaucratic.</p>
                            </div>
                            
                            <!-- See all button -->
                            <button class="btn btn-outline-glass w-100 py-2.5 fw-800 text-teal-accent" style="border-radius: 12px; font-size: 0.85rem;">
                                View All 24 Reviews <i class="fas fa-arrow-right ms-1"></i>
                            </button>
                        </div>
                    </div>

                </div>

                <!-- Right Column Sidebar -->
                <div class="col-lg-4 text-start">
                    
                    <!-- Card 1: Job Overview -->
                    <div class="card bg-white border p-4 rounded-4 shadow-sm mb-4 text-start" style="border-radius: 16px; border-color: #e2e8f0 !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.015) !important;">
                        <h5 class="fw-800 text-dark mb-3" style="font-size: 1.05rem; letter-spacing: -0.2px; font-weight:850 !important;">Job Overview</h5>
                        
                        <ul class="sidebar-overview-list">
                            <li class="sidebar-overview-item">
                                <div class="sidebar-item-icon" style="background-color: #fef3c7; color: #d97706;"><i class="fas fa-wallet"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size: 0.75rem; font-weight: 700;">Salary</div>
                                    <div class="fw-800 text-dark small" style="line-height: 1.25; font-weight: 800 !important;">{{ $job->salary_range }}</div>
                                </div>
                            </li>
                            <li class="sidebar-overview-item">
                                <div class="sidebar-item-icon" style="background-color: #e0f2fe; color: #0284c7;"><i class="fas fa-briefcase"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size: 0.75rem; font-weight: 700;">Job Type</div>
                                    <div class="fw-800 text-dark small" style="line-height: 1.25; font-weight: 800 !important;">{{ ucwords(str_replace('-',' ',$job->job_type)) }}</div>
                                </div>
                            </li>
                            <li class="sidebar-overview-item">
                                <div class="sidebar-item-icon" style="background-color: #fef3c7; color: #d97706;"><i class="fas fa-layer-group"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size: 0.75rem; font-weight: 700;">Experience</div>
                                    <div class="fw-800 text-dark small" style="line-height: 1.25; font-weight: 800 !important;">{{ ucfirst($job->experience_level) }} Level</div>
                                </div>
                            </li>
                            <li class="sidebar-overview-item">
                                <div class="sidebar-item-icon" style="background-color: #d1fae5; color: #065f46;"><i class="fas fa-users"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size: 0.75rem; font-weight: 700;">Vacancies</div>
                                    <div class="fw-800 text-dark small" style="line-height: 1.25; font-weight: 800 !important;">{{ $job->vacancies ?? '3' }} Positions</div>
                                </div>
                            </li>
                            <li class="sidebar-overview-item">
                                <div class="sidebar-item-icon" style="background-color: #e0f2fe; color: #0284c7;"><i class="fas fa-map-marker-alt"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size: 0.75rem; font-weight: 700;">Location</div>
                                    <div class="fw-800 text-dark small" style="line-height: 1.25; font-weight: 800 !important;">{{ $job->is_remote ? 'Remote (India)' : ($job->city ?? 'Remote') }}</div>
                                </div>
                            </li>
                            <li class="sidebar-overview-item">
                                <div class="sidebar-item-icon" style="background-color: #e0f2fe; color: #0284c7;"><i class="far fa-clock"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size: 0.75rem; font-weight: 700;">Posted On</div>
                                    <div class="fw-800 text-dark small" style="line-height: 1.25; font-weight: 800 !important;">{{ $job->created_at->diffForHumans() }}</div>
                                </div>
                            </li>
                            @if($job->deadline)
                            <li class="sidebar-overview-item">
                                <div class="sidebar-item-icon" style="background-color: #ffe4e6; color: #e11d48;"><i class="far fa-calendar-alt"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size: 0.75rem; font-weight: 700;">Application Deadline</div>
                                    <div class="fw-800 text-dark small" style="line-height: 1.25; font-weight: 800 !important;">
                                        {{ $job->deadline->format('M d, Y') }} 
                                        <span class="text-danger" style="font-size: 0.76rem; font-weight: 900;">({{ $job->deadline->diffInDays(now()) }} days left)</span>
                                    </div>
                                </div>
                            </li>
                            @endif
                        </ul>
                    </div>

                    <!-- Card 2: CTA Card Status / Save Segment -->
                    <div class="card bg-white border p-4 rounded-4 shadow-sm mb-4 text-start" style="border-radius: 16px; border-color: #e2e8f0 !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.015) !important;">
                        @if($hasApplied)
                            <div class="applied-banner">
                                <div class="text-success fs-3 mb-2"><i class="fas fa-check-circle" style="color: #10b981 !important; font-size: 2.2rem;"></i></div>
                                <h6 class="fw-900 text-dark small mb-1" style="font-size: 0.88rem; font-weight:800 !important;">You've already applied</h6>
                                <p class="text-muted mb-3" style="font-size: 0.75rem; font-weight: 700;">on May 22, 2026 at 11:45 AM</p>
                                
                                <button class="btn btn-view-application w-100">
                                    View My Application
                                </button>
                            </div>
                        @else
                            <!-- Action CTA for non-applied seekers -->
                            <div class="text-center mb-4 border-bottom pb-3" style="border-bottom-color:#f1f5f9 !important;">
                                <p class="text-muted small fw-700 mb-2"><i class="fas fa-eye text-teal-accent me-1"></i>{{ number_format($job->views) }} people viewed this job</p>
                                @if($job->deadline)
                                <p class="text-warning small fw-850 mb-0" style="font-weight: 800 !important;"><i class="fas fa-calendar me-1.5"></i>Apply before {{ $job->deadline->format('d M Y') }}</p>
                                @endif
                            </div>
                            
                            @auth
                                <button type="button" class="btn btn-teal-gradient w-100 py-3 fw-800 fs-6 mb-3 shadow-xs" style="border-radius:10px; font-weight:800 !important;" data-bs-toggle="modal" data-bs-target="#applyModal">
                                    <i class="fas fa-paper-plane me-2"></i>Apply Now
                                </button>
                            @else
                                <a href="{{ route('login') }}" class="btn btn-teal-gradient w-100 py-3 fw-800 fs-6 mb-3 shadow-xs text-decoration-none d-block text-center" style="border-radius:10px; font-weight:800 !important;">
                                    <i class="fas fa-sign-in-alt me-2"></i>Login to Apply
                                </a>
                            @endauth
                        @endif

                        <!-- Social Media share grid segment -->
                        <div class="pt-3 border-top" style="border-top-color: #f1f5f9 !important;">
                            <div class="text-muted fw-800 small mb-3 text-center">Share this job</div>
                            
                            <div class="d-flex align-items-center gap-2 justify-content-center">
                                <a href="#" class="share-circle"><i class="fab fa-whatsapp"></i></a>
                                <a href="#" class="share-circle"><i class="fab fa-linkedin-in"></i></a>
                                <a href="#" class="share-circle"><i class="fab fa-facebook-f"></i></a>
                                <a href="#" class="share-circle"><i class="fab fa-twitter"></i></a>
                                <a href="#" class="share-circle" onclick="navigator.clipboard.writeText(window.location.href); alert('Link copied to clipboard!'); return false;"><i class="fas fa-link"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 3: About Company details card -->
                    @if($job->company)
                    <div class="card bg-white border p-4 rounded-4 shadow-sm mb-4 text-start" style="border-radius: 16px; border-color: #e2e8f0 !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.015) !important;" id="company-sec">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <img src="{{ $job->company->logo_url ?? 'https://ui-avatars.com/api/?name='.urlencode($job->company->name ?? 'C').'&background=0d9488&color=fff' }}" alt="" class="rounded-3" style="width:48px; height:48px; border:1px solid #cbd5e1; object-fit:contain; background:#ffffff; padding: 2px;">
                            <div>
                                <div class="fw-800 text-dark" style="font-size:0.95rem; font-weight:800 !important;">
                                    {{ $job->company->name }} 
                                    <i class="fas fa-check-circle text-primary ms-1" style="color:#3b82f6 !important; font-size: 0.8rem;"></i>
                                </div>
                                <div class="text-muted small fw-700 mb-1" style="font-size: 0.78rem;">{{ $job->company->industry }}</div>
                                <div class="star-rating d-flex align-items-center gap-1">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span class="text-muted fw-800 ms-1" style="font-size:0.75rem;">4.4 (1.2k reviews)</span>
                                </div>
                            </div>
                        </div>

                        @if($job->company->description)
                            <p class="text-muted small fw-600 mb-4" style="line-height:1.6; font-size:0.8rem;">{{ Str::limit($job->company->description, 140) }}</p>
                        @endif

                        <div class="metrics-grid">
                            <div class="metric-box">
                                <div class="text-muted small fw-700 mb-0.5" style="font-size:0.7rem;">Employees</div>
                                <div class="fw-800 text-dark small" style="font-weight: 800 !important;">1,000+</div>
                            </div>
                            <div class="metric-box">
                                <div class="text-muted small fw-700 mb-0.5" style="font-size:0.7rem;">Founded</div>
                                <div class="fw-800 text-dark small" style="font-weight: 800 !important;">1988</div>
                            </div>
                            <div class="metric-box">
                                <div class="text-muted small fw-700 mb-0.5" style="font-size:0.7rem;">Headquarters</div>
                                <div class="fw-800 text-dark small" style="font-size: 0.76rem; font-weight: 800 !important;">Mumbai, India</div>
                            </div>
                            <div class="metric-box">
                                <div class="text-muted small fw-700 mb-0.5" style="font-size:0.7rem;">Website</div>
                                <div class="fw-800 text-teal-accent small" style="font-size: 0.76rem; font-weight: 800 !important;">
                                    <a href="https://tcs.com" target="_blank" class="text-teal-accent text-decoration-none">
                                        tcs.com <i class="fas fa-external-link-alt" style="font-size:0.68rem;"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <a href="{{ route('companies.show', $job->company->slug) }}" class="btn bg-light w-100 fw-800 text-dark hover-teal border-0 shadow-none py-2.5 small" style="border-radius:10px; font-size: 0.8rem; font-weight: 800 !important;">
                            View Company Profile <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                    @endif

                </div>
            </div>

            <!-- ═══════════════════ Similar Jobs segment at bottom ═══════════════════ -->
            @if($similarJobs && $similarJobs->count())
            <div class="mt-5 text-start position-relative">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="fw-900 text-dark mb-0 d-flex align-items-center gap-2" style="font-size: 1.25rem; font-weight:900 !important;">
                        <i class="fas fa-briefcase text-teal-accent"></i> Similar Jobs
                    </h5>
                    <a href="{{ route('jobs.index') }}" class="text-teal-accent text-decoration-none fw-800 small hover-teal" style="font-weight: 800 !important;">
                        View all jobs <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
                
                <div class="row g-3 position-relative">
                    @foreach($similarJobs as $similar)
                    <div class="col-md-6 col-lg-3 col-sm-6">
                        <a href="{{ route('jobs.show', $similar->slug) }}" class="similar-card text-decoration-none d-block">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <img src="{{ $similar->company->logo_url ?? 'https://ui-avatars.com/api/?name='.urlencode($similar->company->name ?? 'C').'&background=0d9488&color=fff' }}" alt="" class="similar-logo">
                                <button class="btn btn-save-job border-0 p-0 text-muted hover-teal fs-6" style="background:transparent;" data-id="{{ $similar->id }}">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                            
                            <h6 class="fw-800 text-dark mb-1 fs-6 text-truncate" style="letter-spacing: -0.2px; font-weight: 800 !important;">{{ $similar->title }}</h6>
                            <p class="text-muted mb-3 small fw-700 text-truncate" style="font-weight: 700 !important;">{{ $similar->company->name ?? 'Company' }}</p>
                            
                            <div class="d-flex flex-wrap gap-x-3 gap-y-1 text-muted small fw-600 mb-0 pt-2 border-top justify-content-between align-items-center" style="font-size:0.74rem; border-top-color:#f1f5f9 !important;">
                                <span class="d-flex align-items-center gap-1" style="font-weight: 700 !important;"><i class="fas fa-map-marker-alt text-teal-accent"></i> {{ $similar->city ?? 'Remote' }}</span>
                                <span class="d-flex align-items-center gap-1" style="font-weight: 700 !important;"><i class="fas fa-wallet text-teal-accent"></i> {{ $similar->salary_range ?? 'Not Disclosed' }}</span>
                            </div>
                        </a>
                    </div>
                    @endforeach
                    
                    <!-- Faux carousel arrow representing screenshot's right carousel arrow -->
                    <button class="similar-carousel-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            @endif

        </div>
    </section>

    <!-- ═══════════════════ Apply Modal ═══════════════════ -->
    @auth
    @if(!$hasApplied)
    <div class="modal fade" id="applyModal" tabindex="-1" aria-labelledby="applyModalLabel" aria-hidden="true" style="z-index: 1060;">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 560px;">
            <div class="modal-content modal-content-premium bg-white border-0 shadow-lg" style="border-radius: 24px; overflow:hidden;">
                
                <!-- Modal Header -->
                <div class="position-relative text-white px-4 pt-4 pb-5" style="background: linear-gradient(135deg, #0b1528 0%, #0d2c54 100%); padding: 2rem;">
                    <div class="position-absolute" style="top:0;left:0;right:0;bottom:0;background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 16px 16px; opacity:0.5;"></div>
                    <button type="button" class="btn-close btn-close-white position-absolute" style="top:20px; right:20px; opacity:0.8; z-index:10;" data-bs-dismiss="modal" aria-label="Close"></button>
                    
                    <div class="position-relative" style="z-index:2;">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:48px; height:48px; background:rgba(255,255,255,0.18); backdrop-filter:blur(10px);">
                                <i class="fas fa-paper-plane" style="font-size:1.1rem;"></i>
                            </div>
                            <div class="text-start">
                                <h5 class="fw-800 mb-0" style="font-size:1.25rem; font-weight:800 !important; color:#ffffff !important;" id="applyModalLabel">Submit Application</h5>
                                <p class="mb-0 small text-white-50">{{ $job->title }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal Body -->
                <div class="px-4 pb-4" style="margin-top: -20px; position:relative; z-index:3;">
                    <div class="bg-white rounded-4 p-4 shadow-sm border border-light">
                        <form id="applyModalForm" action="{{ route('jobs.apply.submit', $job->slug) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="job_id" value="{{ $job->id }}">

                            <!-- Cover Letter -->
                            <div class="mb-4 text-start">
                                <label class="form-label fw-700 text-dark d-flex align-items-center gap-2 mb-2" style="font-size:0.9rem; font-weight: 700 !important;">
                                    <span class="d-flex align-items-center justify-content-center rounded-circle" style="width:28px; height:28px; background:#f0fdf4; color:#0d9488; font-size:0.8rem;"><i class="fas fa-envelope-open-text"></i></span>
                                    Cover Letter <span class="text-muted fw-500" style="font-size:0.8rem;">(Optional)</span>
                                </label>
                                <textarea name="cover_letter" rows="5" class="form-control border bg-light" placeholder="Introduce yourself and share why you are a great fit..." style="border-radius:12px; border-color:#e2e8f0; font-size:0.9rem; resize:vertical; padding:14px 16px; transition: all 0.2s;" onfocus="this.style.borderColor='#0d9488'; this.style.boxShadow='0 0 0 3px rgba(13,148,136,0.1)';" onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none';"></textarea>
                            </div>

                            <!-- Resume Upload -->
                            <div class="mb-4 text-start">
                                <label class="form-label fw-700 text-dark d-flex align-items-center gap-2 mb-2" style="font-size:0.9rem; font-weight: 700 !important;">
                                    <span class="d-flex align-items-center justify-content-center rounded-circle" style="width:28px; height:28px; background:#e0f2fe; color:#0284c7; font-size:0.8rem;"><i class="fas fa-file-pdf"></i></span>
                                    Resume <span class="text-muted fw-500" style="font-size:0.8rem;">(Optional)</span>
                                </label>
                                
                                <div class="upload-zone" id="resumeDropZone" onclick="document.getElementById('resumeInput').click();">
                                    <i class="fas fa-cloud-upload-alt text-muted mb-2 fs-2"></i>
                                    <p class="text-dark small fw-750 mb-1" id="resumeFileName" style="font-weight:750 !important;">Drag & drop or click to upload</p>
                                    <p class="text-muted mb-0" style="font-size:0.75rem;">PDF, DOC, DOCX (Max 5MB)</p>
                                    <input type="file" name="resume" id="resumeInput" class="d-none" accept=".pdf,.doc,.docx" onchange="updateResumeDetails(this);">
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="d-flex gap-3 pt-2">
                                <button type="button" class="btn flex-fill fw-700" style="background:#f8fafc; color:#64748b; border:1px solid #e2e8f0; border-radius:12px; padding:12px; transition: all 0.2s; font-weight: 700 !important;" data-bs-dismiss="modal" onmouseover="this.style.background='#f1f5f9';" onmouseout="this.style.background='#f8fafc';">Cancel</button>
                                <button type="submit" class="btn btn-teal-gradient flex-fill fw-800 shadow-xs py-3" style="border-radius:12px; font-size:0.95rem; font-weight: 800 !important;">
                                    <i class="fas fa-paper-plane me-2"></i>Submit Application
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
    @endif
    @endauth

    <!-- Add Review Modal -->
    <div class="modal fade" id="addReviewModal" tabindex="-1" aria-labelledby="addReviewModalLabel" aria-hidden="true" style="z-index: 1060;">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 560px;">
            <div class="modal-content modal-content-premium bg-white border-0 shadow-lg" style="border-radius: 24px; overflow:hidden;">
                
                <div class="position-relative text-white px-4 pt-4 pb-5" style="background: linear-gradient(135deg, #0b1528 0%, #0d2c54 100%); padding: 2rem;">
                    <div class="position-absolute" style="top:0;left:0;right:0;bottom:0;background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 16px 16px; opacity:0.5;"></div>
                    <button type="button" class="btn-close btn-close-white position-absolute" style="top:20px; right:20px; opacity:0.8; z-index:10;" data-bs-dismiss="modal" aria-label="Close"></button>
                    
                    <div class="position-relative" style="z-index:2;">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:48px; height:48px; background:rgba(255,255,255,0.18); backdrop-filter:blur(10px);">
                                <i class="fas fa-star" style="font-size:1.1rem;"></i>
                            </div>
                            <div class="text-start">
                                <h5 class="fw-800 mb-0" style="font-size:1.25rem; font-weight:800 !important; color:#ffffff !important;">Add a Review</h5>
                                <p class="mb-0 small text-white-50">Share your experience with {{ $job->company->name ?? 'this company' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="px-4 pb-4" style="margin-top: -20px; position:relative; z-index:3;">
                    <div class="bg-white rounded-4 p-4 shadow-sm border border-light">
                        <form id="addReviewForm" action="#" method="POST">
                            @csrf
                            
                            <div class="mb-3 text-start">
                                <label class="form-label fw-700 text-dark small mb-2">Overall Rating</label>
                                <div class="d-flex gap-2 text-warning fs-5">
                                    <i class="far fa-star cursor-pointer"></i>
                                    <i class="far fa-star cursor-pointer"></i>
                                    <i class="far fa-star cursor-pointer"></i>
                                    <i class="far fa-star cursor-pointer"></i>
                                    <i class="far fa-star cursor-pointer"></i>
                                </div>
                            </div>

                            <div class="mb-3 text-start">
                                <label class="form-label fw-700 text-dark small mb-2">Review Title</label>
                                <input type="text" class="form-control bg-light" style="border-radius:10px; font-size:0.9rem;" placeholder="Summary of your experience">
                            </div>

                            <div class="mb-4 text-start">
                                <label class="form-label fw-700 text-dark small mb-2">Review Details</label>
                                <textarea rows="4" class="form-control bg-light" style="border-radius:10px; font-size:0.9rem; resize:vertical;" placeholder="What are the pros and cons of working here?"></textarea>
                            </div>

                            <div class="d-flex gap-3 pt-2">
                                <button type="button" class="btn flex-fill fw-700" style="background:#f8fafc; color:#64748b; border:1px solid #e2e8f0; border-radius:12px; padding:12px;" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-teal-gradient flex-fill fw-800 shadow-xs py-2" style="border-radius:12px;">
                                    Submit Review
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

@endsection

@section('scripts')
<script>
    // Update label when file is uploaded
    function updateResumeDetails(input) {
        const dropZone = document.getElementById('resumeDropZone');
        const label = document.getElementById('resumeFileName');
        if (input.files[0]) {
            label.textContent = input.files[0].name;
            dropZone.style.borderColor = '#0d9488';
            dropZone.style.background = '#f0fdf4';
        } else {
            label.textContent = 'Drag & drop or click to upload';
            dropZone.style.borderColor = '#cbd5e1';
            dropZone.style.background = '#f8fafc';
        }
    }

    // Drag and Drop interactive effects
    const dropZone = document.getElementById('resumeDropZone');
    const resumeInput = document.getElementById('resumeInput');
    
    if (dropZone && resumeInput) {
        ['dragenter', 'dragover'].forEach(eventName => {
            dropZone.addEventListener(eventName, (e) => {
                e.preventDefault();
                dropZone.classList.add('dragover');
            }, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, (e) => {
                e.preventDefault();
                dropZone.classList.remove('dragover');
            }, false);
        });

        dropZone.addEventListener('drop', (e) => {
            const dt = e.dataTransfer;
            const files = dt.files;
            resumeInput.files = files;
            updateResumeDetails(resumeInput);
        }, false);
    }

    // Dynamic Active state for Navigation Tabs based on scrolling
    $(window).on('scroll', function() {
        const scrollPos = $(document).scrollTop();
        const tabs = $('.nav-tabs .nav-link');
        
        const detailsPos = $('#job-details-sec').offset()?.top - 180;
        const reqPos = $('#requirements-sec').offset()?.top - 180;
        const benefitsPos = $('#benefits-sec').offset()?.top - 180;
        const companyPos = $('#company-sec').offset()?.top - 180;
        const reviewsPos = $('#reviews-sec').offset()?.top - 180;

        tabs.removeClass('active');

        if (scrollPos >= reviewsPos) {
            tabs.eq(4).addClass('active');
        } else if (scrollPos >= companyPos) {
            tabs.eq(3).addClass('active');
        } else if (scrollPos >= benefitsPos) {
            tabs.eq(2).addClass('active');
        } else if (scrollPos >= reqPos) {
            tabs.eq(1).addClass('active');
        } else {
            tabs.eq(0).addClass('active');
        }
    });
</script>
@endsection