@extends('layouts.dashboard')

@section('styles')
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<style>
    /* Premium Page Background */
    body, .main { background: #f4f6f9; }
    
    /* Elegant Header */
    .crm-header-wrapper {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        margin-bottom: 2rem;
        border: 1px solid rgba(226, 232, 240, 0.8);
        overflow: hidden;
    }
    .crm-banner {
        height: 120px;
        background: linear-gradient(135deg, #1e293b, #0f172a);
        position: relative;
    }
    .crm-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.3;
    }
    .crm-profile-section {
        padding: 0 2rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .crm-logo-box {
        width: 100px;
        height: 100px;
        background: #ffffff;
        border-radius: 16px;
        padding: 0.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        border: 3px solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -50px;
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }
    .crm-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
    
    .crm-info-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 15px;
    }

    /* Modern Nav Pills */
    .nav-pills-custom {
        gap: 0.5rem;
        margin-bottom: 2rem;
        border-bottom: 2px solid #f1f5f9;
        padding-bottom: 1rem;
    }
    .nav-pills-custom .nav-link {
        color: #64748b;
        font-weight: 600;
        padding: 0.6rem 1.25rem;
        border-radius: 8px;
        transition: all 0.2s ease;
        background: transparent;
    }
    .nav-pills-custom .nav-link:hover {
        color: var(--primary);
        background: rgba(13, 148, 136, 0.05);
    }
    .nav-pills-custom .nav-link.active {
        background: rgba(13, 148, 136, 0.1);
        color: var(--primary);
    }

    /* Premium Cards */
    .glass-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    }
    .card-header-elegant {
        padding: 1.5rem 1.5rem 0;
        border-bottom: none;
        background: transparent;
    }
    
    /* Progress Bars Custom */
    .progress-track {
        background: #f1f5f9;
        height: 6px;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 0.5rem;
    }
    .progress-fill {
        height: 100%;
        border-radius: 10px;
    }

    /* DataTable Overrides */
    table.dataTable.no-footer { border-bottom: none; }
    table.dataTable thead th { border-bottom: 1px solid #e2e8f0; color: #64748b; font-weight: 600; font-size: 0.85rem; }
    table.dataTable tbody td { padding: 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .dataTables_wrapper .dataTables_filter input { border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.35rem 0.75rem; outline: none; }
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-700 mb-0">Company Dashboard</h4>
    </div>
    <a href="{{ route('admin.companies.index') }}" class="btn btn-light border shadow-sm px-4 py-2 fw-600">
        <i class="fas fa-arrow-left me-2"></i> Back to Directory
    </a>
</div>

<!-- Header Section -->
<div class="crm-header-wrapper">
    <div class="crm-banner">
        @if($company->banner_url)
            <img src="{{ $company->banner_url }}" alt="Banner">
        @endif
    </div>
    <div class="crm-profile-section">
        <div class="d-flex gap-4 w-100">
            <div class="crm-logo-box">
                <img src="{{ $company->logo_url }}" alt="Logo">
            </div>
            <div class="crm-info-container flex-grow-1">
                <div class="d-flex justify-content-between align-items-center w-100">
                    <div>
                        <h4 class="fw-700 mb-1 d-flex align-items-center gap-2">
                            {{ $company->name }}
                            @if($company->is_verified) <span class="badge bg-primary bg-opacity-10 text-primary fs-7 px-2 py-1"><i class="fas fa-check-circle me-1"></i> Verified</span> @endif
                            @if($company->is_featured) <span class="badge bg-warning bg-opacity-10 text-warning fs-7 px-2 py-1"><i class="fas fa-star me-1"></i> Featured</span> @endif
                        </h4>
                        <div class="text-muted d-flex gap-4 small fw-500 mt-2">
                            <span><i class="fas fa-user-tie me-1 text-secondary"></i> {{ $company->user->name ?? 'No Recruiter' }}</span>
                            <span><i class="fas fa-envelope me-1 text-secondary"></i> {{ $company->user->email ?? 'N/A' }}</span>
                            <span><i class="fas fa-phone me-1 text-secondary"></i> {{ $company->phone ?? 'N/A' }}</span>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        @if($company->user)
                        <form method="POST" action="{{ route('admin.impersonate', $company->user) }}">
                            @csrf
                            <button class="btn btn-outline-success fw-600"><i class="fas fa-sign-in-alt me-2"></i>Login As</button>
                        </form>
                        @endif
                        <a href="{{ route('admin.companies.edit', $company) }}" class="btn btn-primary fw-600"><i class="fas fa-cog me-2"></i>Manage</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom Nav Pills -->
<ul class="nav nav-pills nav-pills-custom" id="crmTabs" role="tablist">
    <li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#overview"><i class="fas fa-info-circle me-2"></i>Overview & Plan</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobs"><i class="fas fa-briefcase me-2"></i>Job Analytics</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#candidates"><i class="fas fa-users me-2"></i>Candidates</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#billing"><i class="fas fa-file-invoice-dollar me-2"></i>Transactions</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#logs"><i class="fas fa-shield-alt me-2"></i>Audit Logs</button></li>
</ul>

<div class="tab-content" id="crmTabsContent">
    
    <!-- OVERVIEW TAB -->
    <div class="tab-pane fade show active" id="overview">
        <div class="row g-4">
            <!-- Company Info -->
            <div class="col-md-4">
                <div class="glass-card h-100">
                    <div class="card-header-elegant">
                        <h6 class="fw-800 text-dark mb-0">Company Details</h6>
                    </div>
                    <div class="card-body p-4">
                        <div class="d-flex flex-column gap-4">
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-industry me-3 text-primary opacity-50"></i> Industry</span> 
                                <span class="fw-700 text-dark">{{ $company->industry ?? '-' }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-users me-3 text-primary opacity-50"></i> Size</span> 
                                <span class="fw-700 text-dark">{{ $company->company_size ?? '-' }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-calendar-alt me-3 text-primary opacity-50"></i> Founded</span> 
                                <span class="fw-700 text-dark">{{ $company->founded_year ?? '-' }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-file-invoice me-3 text-primary opacity-50"></i> GST No.</span> 
                                <span class="fw-700 text-dark">{{ $company->gst_number ?? '-' }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-map-marker-alt me-3 text-primary opacity-50"></i> Location</span> 
                                <span class="fw-700 text-dark text-end">{{ $company->city ?? '-' }}, {{ $company->country ?? '-' }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pb-3 border-bottom border-light">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-clock me-3 text-primary opacity-50"></i> Registered</span> 
                                <span class="fw-700 text-dark">{{ $company->created_at->format('M d, Y') }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted fw-600 d-flex align-items-center"><i class="fas fa-power-off me-3 text-primary opacity-50"></i> Status</span> 
                                <span class="badge {{ $company->status === 'active' ? 'bg-success' : 'bg-danger' }} rounded-pill px-3">{{ ucfirst($company->status) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Subscription Analytics -->
            <div class="col-md-8">
                <div class="glass-card h-100">
                    <div class="card-header-elegant d-flex justify-content-between align-items-center">
                        <h6 class="fw-800 text-dark mb-0">Active Plan Overview</h6>
                        @if($company->user && $company->user->subscription && $company->user->subscription->plan)
                            <span class="badge bg-primary bg-gradient shadow-sm fs-6 px-4 py-2 rounded-pill">{{ $company->user->subscription->plan->name }} Plan</span>
                        @else
                            <span class="badge bg-secondary fs-6 rounded-pill">Free/Basic</span>
                        @endif
                    </div>
                    <div class="card-body p-4">
                        @if($company->user && $company->user->subscription && $company->user->subscription->plan)
                            @php 
                                $sub = $company->user->subscription; 
                                $plan = $sub->plan;
                                $jobPct = $plan->job_posts > 0 ? min(100, ($sub->job_posts_used / $plan->job_posts) * 100) : 0;
                                $featPct = $plan->featured_jobs > 0 ? min(100, ($sub->featured_jobs_used / $plan->featured_jobs) * 100) : 0;
                                $resPct = $plan->resume_downloads > 0 ? min(100, ($sub->resume_downloads_used / $plan->resume_downloads) * 100) : 0;
                            @endphp
                            
                            <div class="row g-3 mb-5">
                                <div class="col-md-4">
                                    <div class="bg-light rounded-4 p-4 text-center border">
                                        <div class="text-muted fw-600 small text-uppercase tracking-wide mb-2">Status</div>
                                        <div class="fs-4 fw-800 text-{{ $sub->status == 'active' ? 'success' : 'danger' }}">{{ ucfirst($sub->status) }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="bg-light rounded-4 p-4 text-center border">
                                        <div class="text-muted fw-600 small text-uppercase tracking-wide mb-2">Renews On</div>
                                        <div class="fs-4 fw-800 text-dark">{{ $sub->ends_at ? $sub->ends_at->format('M d, Y') : 'Lifetime' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="bg-light rounded-4 p-4 text-center border">
                                        <div class="text-muted fw-600 small text-uppercase tracking-wide mb-2">Total Value</div>
                                        <div class="fs-4 fw-800 text-dark">${{ number_format($plan->price) }}</div>
                                    </div>
                                </div>
                            </div>

                            <h6 class="fw-800 mb-4 text-dark">Resource Allocation</h6>
                            
                            <!-- Job Posts -->
                            <div class="mb-4">
                                <div class="d-flex justify-content-between align-items-end mb-2">
                                    <span class="fw-700 text-dark"><i class="fas fa-briefcase text-primary me-2"></i>Job Listings</span>
                                    <span class="fw-800 fs-5 text-primary">{{ $sub->job_posts_used }}<span class="text-muted fs-6 fw-600"> / {{ $plan->job_posts == 0 ? 'Unlimited' : $plan->job_posts }}</span></span>
                                </div>
                                <div class="progress-track">
                                    <div class="progress-fill bg-primary" style="width: {{ $plan->job_posts == 0 ? 10 : $jobPct }}%"></div>
                                </div>
                            </div>
                            
                            <!-- Featured Jobs -->
                            <div class="mb-4">
                                <div class="d-flex justify-content-between align-items-end mb-2">
                                    <span class="fw-700 text-dark"><i class="fas fa-star text-warning me-2"></i>Featured Highlights</span>
                                    <span class="fw-800 fs-5 text-warning">{{ $sub->featured_jobs_used }}<span class="text-muted fs-6 fw-600"> / {{ $plan->featured_jobs }}</span></span>
                                </div>
                                <div class="progress-track">
                                    <div class="progress-fill bg-warning" style="width: {{ $featPct }}%"></div>
                                </div>
                            </div>

                            <!-- Resume Downloads -->
                            <div class="mb-2">
                                <div class="d-flex justify-content-between align-items-end mb-2">
                                    <span class="fw-700 text-dark"><i class="fas fa-file-pdf text-danger me-2"></i>Candidate Unlocks</span>
                                    <span class="fw-800 fs-5 text-danger">{{ $sub->candidate_unlocks_used }}<span class="text-muted fs-6 fw-600"> / {{ $plan->candidate_unlock_limit == 0 ? 'Unlimited' : $plan->candidate_unlock_limit }}</span></span>
                                </div>
                                <div class="progress-track">
                                    <div class="progress-fill bg-danger" style="width: {{ $plan->candidate_unlock_limit > 0 ? min(100, ($sub->candidate_unlocks_used / $plan->candidate_unlock_limit) * 100) : 10 }}%"></div>
                                </div>
                            </div>

                        @else
                            <div class="text-center py-5">
                                <div class="icon-circle bg-light mx-auto mb-3" style="width:80px;height:80px;font-size:2rem;"><i class="fas fa-box-open text-muted opacity-50"></i></div>
                                <h5 class="fw-800 text-dark">No Active Subscription</h5>
                                <p class="text-muted">This company is operating on the default free tier limitations.</p>
                                <button class="btn btn-outline-primary rounded-pill mt-2 fw-600 px-4">Assign Plan Manually</button>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JOB ANALYTICS TAB -->
    <div class="tab-pane fade" id="jobs">
        <div class="row g-4 mb-4">
            <div class="col-md-3">
                <div class="glass-card p-4 text-center h-100">
                    <div class="icon-circle bg-primary bg-opacity-10 text-primary mx-auto mb-3" style="width:60px;height:60px;font-size:1.5rem;"><i class="fas fa-briefcase"></i></div>
                    <h2 class="fw-800 text-dark mb-1">{{ $company->jobs->count() }}</h2>
                    <div class="text-muted fw-600 small text-uppercase">Total Posted</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-card p-4 text-center h-100">
                    <div class="icon-circle bg-success bg-opacity-10 text-success mx-auto mb-3" style="width:60px;height:60px;font-size:1.5rem;"><i class="fas fa-play-circle"></i></div>
                    <h2 class="fw-800 text-dark mb-1">{{ $company->jobs->where('status','active')->count() }}</h2>
                    <div class="text-muted fw-600 small text-uppercase">Live & Active</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-card p-4 text-center h-100">
                    <div class="icon-circle bg-warning bg-opacity-10 text-warning mx-auto mb-3" style="width:60px;height:60px;font-size:1.5rem;"><i class="fas fa-star"></i></div>
                    <h2 class="fw-800 text-dark mb-1">{{ $company->jobs->where('is_featured', true)->count() }}</h2>
                    <div class="text-muted fw-600 small text-uppercase">Featured</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-card p-4 text-center h-100">
                    @php $totalApps = 0; foreach($company->jobs as $j) $totalApps += $j->applications->count(); @endphp
                    <div class="icon-circle bg-info bg-opacity-10 text-info mx-auto mb-3" style="width:60px;height:60px;font-size:1.5rem;"><i class="fas fa-users"></i></div>
                    <h2 class="fw-800 text-dark mb-1">{{ $totalApps }}</h2>
                    <div class="text-muted fw-600 small text-uppercase">Total Applications</div>
                </div>
            </div>
        </div>
        
        <div class="glass-card mb-4">
            <div class="card-header-elegant">
                <h6 class="fw-800 text-dark mb-0">Job Posting Trajectory</h6>
            </div>
            <div class="card-body p-4">
                <div id="companyJobsChart" style="height:300px;"></div>
            </div>
        </div>

        <div class="glass-card">
            <div class="card-header-elegant border-bottom pb-4 mb-2">
                <h6 class="fw-800 text-dark mb-0">Listing Inventory</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-4 pt-0">
                    <table class="table datatable w-100">
                        <thead>
                            <tr>
                                <th>Job Title</th>
                                <th>Category</th>
                                <th>Applications</th>
                                <th>Status</th>
                                <th>Posted Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($company->jobs as $job)
                            <tr>
                                <td class="fw-700 text-dark">{{ $job->title }}</td>
                                <td class="text-muted fw-600">{{ $job->category->name ?? '-' }}</td>
                                <td><span class="badge bg-light text-dark border px-3 rounded-pill">{{ $job->applications->count() }} <i class="fas fa-user ms-1 opacity-50"></i></span></td>
                                <td><span class="badge {{ $job->status == 'active' ? 'bg-success' : 'bg-secondary' }} bg-opacity-10 text-{{ $job->status == 'active' ? 'success' : 'secondary' }} px-3 rounded-pill">{{ ucfirst($job->status) }}</span></td>
                                <td class="text-muted fw-600">{{ $job->created_at->format('M d, Y') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- CANDIDATES TAB -->
    <div class="tab-pane fade" id="candidates">
        <div class="glass-card">
            <div class="card-header-elegant border-bottom pb-4 mb-2">
                <h6 class="fw-800 text-dark mb-0">Applicant Pool</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-4 pt-0">
                    <table class="table datatable w-100">
                        <thead>
                            <tr>
                                <th>Candidate</th>
                                <th>Applied For</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($company->jobs as $job)
                                @foreach($job->applications as $app)
                                <tr>
                                    <td>
                                        <div class="fw-700 text-dark">{{ $app->first_name }} {{ $app->last_name }}</div>
                                        <div class="text-muted small fw-600">{{ $app->email }}</div>
                                    </td>
                                    <td class="fw-600 text-primary">{{ $job->title }}</td>
                                    <td><span class="badge bg-light text-dark border px-3 rounded-pill">{{ ucfirst($app->status) }}</span></td>
                                    <td class="text-muted fw-600">{{ $app->created_at->format('M d, Y') }}</td>
                                    <td>
                                        @if($app->resume)
                                            <a href="{{ asset('storage/'.$app->resume) }}" target="_blank" class="btn btn-sm btn-light border fw-600 rounded-pill px-3 hover-lift text-primary"><i class="fas fa-download me-1"></i> CV</a>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- BILLING HISTORY TAB -->
    <div class="tab-pane fade" id="billing">
        <div class="glass-card">
            <div class="card-header-elegant border-bottom pb-4 mb-2">
                <h6 class="fw-800 text-dark mb-0">Financial Ledger</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-4 pt-0">
                    <table class="table datatable w-100">
                        <thead>
                            <tr>
                                <th>Reference ID</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Timestamp</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($company->user)
                                @foreach($company->user->payments as $payment)
                                <tr>
                                    <td class="fw-700 text-dark font-monospace">{{ $payment->razorpay_payment_id ?? 'SYS-GEN-'.$payment->id }}</td>
                                    <td class="fw-800 text-dark">${{ number_format($payment->amount, 2) }}</td>
                                    <td><span class="badge {{ $payment->status == 'completed' ? 'bg-success' : 'bg-danger' }} bg-opacity-10 text-{{ $payment->status == 'completed' ? 'success' : 'danger' }} px-3 rounded-pill">{{ ucfirst($payment->status) }}</span></td>
                                    <td class="text-muted fw-600">{{ $payment->created_at->format('M d, Y h:i A') }}</td>
                                </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- ACTIVITY LOGS TAB -->
    <div class="tab-pane fade" id="logs">
        <div class="glass-card">
            <div class="card-header-elegant border-bottom pb-4 mb-2">
                <h6 class="fw-800 text-dark mb-0">System Audit Trail</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-4 pt-0">
                    <table class="table datatable w-100">
                        <thead>
                            <tr>
                                <th>Event Action</th>
                                <th>Module</th>
                                <th>Network IP</th>
                                <th>Timestamp</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($company->user)
                                @foreach($company->user->activityLogs as $log)
                                <tr>
                                    <td class="fw-700 text-dark">{{ $log->action }}</td>
                                    <td class="fw-600 text-primary">{{ $log->module ?? '-' }}</td>
                                    <td class="text-muted font-monospace small">{{ $log->ip_address ?? 'Unknown' }}</td>
                                    <td class="text-muted fw-600">{{ $log->created_at->format('M d, Y h:i A') }}</td>
                                </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    $(document).ready(function() {
        $('.datatable').DataTable({
            "order": [],
            "pageLength": 10,
            "language": { "search": "", "searchPlaceholder": "Search records..." }
        });

        // ApexCharts for Job Posting Growth
        var jobData = {!! json_encode($monthlyJobs->pluck('count')) !!};
        var monthLabels = {!! json_encode($monthlyJobs->pluck('month')->map(function($m) { return date("M", mktime(0, 0, 0, $m, 1)); })) !!};
        
        if(jobData.length > 0) {
            var options = {
                series: [{ name: 'Jobs Posted', data: jobData }],
                chart: { type: 'area', height: 300, toolbar: { show: false }, fontFamily: "'DM Sans', 'Inter', sans-serif" },
                colors: ['#0d9488'],
                fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.0, stops: [0, 100] } },
                dataLabels: { enabled: false },
                stroke: { curve: 'smooth', width: 3 },
                xaxis: { 
                    categories: monthLabels,
                    axisBorder: { show: false },
                    axisTicks: { show: false },
                    labels: { style: { colors: '#64748b', fontWeight: 600 } }
                },
                yaxis: { 
                    labels: { style: { colors: '#64748b', fontWeight: 600 }, formatter: function (val) { return Math.floor(val); } }
                },
                grid: { borderColor: '#f1f5f9', strokeDashArray: 4 },
                tooltip: { theme: 'light' }
            };
            var chart = new ApexCharts(document.querySelector("#companyJobsChart"), options);
            chart.render();
        } else {
            document.querySelector("#companyJobsChart").innerHTML = '<div class="text-muted fw-600 text-center py-5"><i class="fas fa-chart-line fa-2x mb-3 opacity-25"></i><br>No historical job data available.</div>';
        }
    });
</script>
@endsection