@extends('admin.layouts.app')
@section('title', 'Skill Demand Map')
@section('page-title', 'Skill Demand Map')
@section('content')
@php
    $levels = [
        'shortage' => ['No local supply', 'badge-danger'],
        'very_high' => ['Very high demand', 'badge-danger'],
        'high' => ['High demand', 'badge-warning'],
        'balanced' => ['Balanced', 'badge-success'],
        'low' => ['Oversupplied', 'badge-muted'],
    ];
@endphp
<p class="resource-subtitle">Job requests versus active professionals per city and skill. Use shortages to target recruitment, Academy training and agent onboarding.</p>

<div class="toolbar">
    <form class="filters" method="GET">
        <select class="input" name="days">
            @foreach($periods as $value => $label)
                <option value="{{ $value }}" @selected($days === $value)>{{ $label }}</option>
            @endforeach
        </select>
        <select class="input" name="state">
            <option value="">All states</option>
            @foreach($states as $s)
                <option value="{{ $s }}" @selected($state === $s)>{{ $s }}</option>
            @endforeach
        </select>
        <select class="input" name="skill_id">
            <option value="">All skills</option>
            @foreach($skillOptions as $id => $name)
                <option value="{{ $id }}" @selected($skillId === $id)>{{ $name }}</option>
            @endforeach
        </select>
        <button class="btn" type="submit">@include('admin.partials.icon', ['name' => 'filter']) Filter</button>
    </form>
</div>

<div class="demand-stats">
    <div class="card"><span>Jobs requested</span><strong>{{ number_format($summary['jobs']) }}</strong></div>
    <div class="card"><span>Still unfilled</span><strong>{{ number_format($summary['unfilled']) }}</strong></div>
    <div class="card"><span>Shortage markets</span><strong>{{ $summary['shortages'] }}</strong></div>
    <div class="card"><span>Cities with demand</span><strong>{{ $summary['markets'] }}</strong></div>
</div>

<div class="card table-wrap">
<table class="data">
    <thead>
        <tr><th>City</th><th>State</th><th>Skill</th><th>Jobs</th><th>Unfilled</th><th>Emergency</th><th>Active pros</th><th>Available now</th><th>Jobs per pro</th><th>Avg budget</th><th>Demand</th></tr>
    </thead>
    <tbody>
    @forelse($rows as $row)
        <tr>
            <td><strong>{{ $row->city }}</strong></td>
            <td>{{ $row->state ?: '—' }}</td>
            <td>{{ $row->skill }}</td>
            <td>{{ $row->jobs }}</td>
            <td>{{ $row->unfilled }}</td>
            <td>{{ $row->emergencies ?: '—' }}</td>
            <td>{{ $row->pros }}</td>
            <td>{{ $row->available }}</td>
            <td>{{ $row->ratio ?? '∞' }}</td>
            <td>{{ $row->avg_budget ? '₦'.number_format($row->avg_budget) : '—' }}</td>
            <td><span class="badge {{ $levels[$row->level][1] }}">{{ $levels[$row->level][0] }}</span></td>
        </tr>
    @empty
        <tr><td colspan="11">No job demand recorded for this period.</td></tr>
    @endforelse
    </tbody>
</table>
</div>
@endsection