@extends('layouts.app')
@section('title', 'Dispatch board')

@section('content')
    <div class="page-head">
        <div><h1>Dispatch board</h1><p>Technician capacity and job assignments.</p></div>
        <div class="page-actions">
            <a href="{{ route('work-orders.index') }}" class="btn secondary">List view</a>
            <a href="{{ route('work-orders.create') }}" class="btn">+ New work order</a>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;">
        @foreach ($columns as $column)
            <div class="card">
                <div class="card-head">
                    <h3>{{ title_case_words($column['status']) }}</h3>
                    <span class="badge {{ status_color($column['status']) }}">{{ $column['jobs']->count() }}</span>
                </div>
                <div class="card-body">
                    @forelse ($column['jobs'] as $job)
                        <a href="{{ route('work-orders.show', $job) }}"
                           style="display:block;border:1px solid var(--ink-200);border-left:3px solid {{ $job->priority === 'urgent' ? 'var(--danger)' : ($job->priority === 'high' ? 'var(--warning)' : 'var(--ink-300)') }};
                                  border-radius:8px;padding:.6rem .75rem;margin-bottom:.5rem;text-decoration:none;color:inherit;">
                            <div class="mono tiny muted">{{ $job->work_order_number }}</div>
                            <div class="small strong">{{ $job->customer->display_name }}</div>
                            <div class="tiny muted truncate" style="max-width:220px;">{{ $job->site_address }}</div>
                            <div class="flex-between mt-1">
                                <span class="badge info">{{ title_case_words($job->type) }}</span>
                                <span class="tiny muted">{{ $job->technician?->initials() ?? '—' }}</span>
                            </div>
                        </a>
                    @empty
                        <p class="small muted" style="text-align:center;padding:1.5rem 0;">Nothing here</p>
                    @endforelse
                </div>
            </div>
        @endforeach
    </div>

    <div class="card mt-2">
        <div class="card-head"><h3>Technician capacity today</h3></div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead><tr><th>Technician</th><th class="num">Jobs today</th><th class="num">Capacity</th><th>Availability</th><th class="num">Rating</th></tr></thead>
                    <tbody>
                    @forelse ($technicians as $technician)
                        <tr>
                            <td><strong>{{ $technician->name }}</strong>
                                <div class="tiny muted">{{ $technician->speciality }}</div></td>
                            <td class="num">{{ $technician->jobs_today_count }}</td>
                            <td class="num">{{ $technician->max_jobs_per_day }}</td>
                            <td><span class="badge {{ $technician->is_available ? 'success' : 'warning' }}">
                                {{ $technician->is_available ? 'available' : 'at capacity' }}</span></td>
                            <td class="num">{{ $technician->rating ? number_format($technician->rating, 1).' ★' : '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#128104;&#8205;&#128295;', 'title' => 'No technicians registered'])</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection