@extends('layouts.app')

@section('title', 'Job Orders')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2><i class="fas fa-clipboard-list"></i> Job Orders</h2>
            <p class="text-muted mb-0">
                @if($isOffice)
                    Field work raised against a connection. A job is not closed until the office verifies it.
                @else
                    Your jobs, plus anything nobody has claimed yet.
                @endif
            </p>
        </div>
        @if($isOffice)
        <div class="col-md-4 text-end">
            <a href="{{ route('work-orders.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Raise Job Order
            </a>
        </div>
        @endif
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Awaiting verification is deliberately first and amber: a completed job
         looks finished on a list but is the one thing the office still has to
         act on. --}}
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <a href="{{ route('work-orders.index', ['status' => 'completed']) }}" class="text-decoration-none">
                <div class="card border-warning h-100">
                    <div class="card-body">
                        <div class="text-muted small text-uppercase">Awaiting verification</div>
                        <div class="h3 mb-0 text-warning">{{ $counts['awaiting_verification'] }}</div>
                        <div class="small text-muted">Reader is done — not closed</div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="{{ route('work-orders.index', ['status' => 'requested']) }}" class="text-decoration-none">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="text-muted small text-uppercase">Unclaimed</div>
                        <div class="h3 mb-0">{{ $counts['unclaimed'] }}</div>
                        <div class="small text-muted">Nobody has taken it</div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="{{ route('work-orders.index', ['status' => 'in_progress']) }}" class="text-decoration-none">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="text-muted small text-uppercase">In the field</div>
                        <div class="h3 mb-0">{{ $counts['in_flight'] }}</div>
                        <div class="small text-muted">Accepted or being worked</div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="{{ route('work-orders.index', ['status' => 'rejected']) }}" class="text-decoration-none">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="text-muted small text-uppercase">Sent back</div>
                        <div class="h3 mb-0">{{ $counts['sent_back'] }}</div>
                        <div class="small text-muted">Waiting to be redone</div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-body">
            <form method="GET" class="row g-2">
                <div class="col-md-4">
                    <input type="text" name="search" class="form-control"
                           placeholder="Order number, client name or account number"
                           value="{{ request('search') }}">
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-select">
                        <option value="">All statuses</option>
                        @foreach($statuses as $status)
                            <option value="{{ $status }}" {{ request('status') === $status ? 'selected' : '' }}>
                                {{ ucfirst(str_replace('_', ' ', $status)) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="type" class="form-select">
                        <option value="">All types</option>
                        @foreach($types as $slug => $label)
                            <option value="{{ $slug }}" {{ request('type') === $slug ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="assigned" class="form-select">
                        <option value="">Anyone</option>
                        <option value="me" {{ request('assigned') === 'me' ? 'selected' : '' }}>Assigned to me</option>
                        <option value="unassigned" {{ request('assigned') === 'unassigned' ? 'selected' : '' }}>Unassigned</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex gap-2">
                    <button type="submit" class="btn btn-outline-primary flex-fill">Filter</button>
                    <a href="{{ route('work-orders.index') }}" class="btn btn-outline-secondary">Clear</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Order</th>
                        <th>Type</th>
                        <th>Client</th>
                        <th>Scheduled</th>
                        <th>Assigned to</th>
                        <th>Status</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($orders as $order)
                    <tr>
                        <td>
                            <strong>{{ $order->order_number }}</strong>
                            @if($order->priority !== 'normal')
                                <span class="badge bg-{{ $order->priority === 'urgent' ? 'danger' : ($order->priority === 'high' ? 'warning text-dark' : 'secondary') }}">
                                    {{ ucfirst($order->priority) }}
                                </span>
                            @endif
                            <br><small class="text-muted">Raised {{ optional($order->requested_at ?? $order->created_at)->format('M d, Y') }}</small>
                        </td>
                        <td>
                            {{ $order->typeLabel() }}
                            @if($order->requiresFinalReading())
                                <br><small class="text-muted"><i class="fas fa-tachometer-alt"></i> needs final reading</small>
                            @endif
                        </td>
                        <td>
                            @if($order->client)
                                <strong>{{ $order->client->name }}</strong><br>
                                <small class="text-muted">{{ $order->client->account_number }}</small>
                                @if($order->client->status === 'disconnected')
                                    <span class="badge bg-danger">Disconnected</span>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>
                            {{ $order->scheduled_date ? $order->scheduled_date->format('M d, Y') : '—' }}
                        </td>
                        <td>
                            @if($order->assignee)
                                {{ $order->assignee->name }}
                            @else
                                <span class="badge bg-light text-dark border">Unassigned</span>
                            @endif
                        </td>
                        <td>
                            @include('work-orders.partials.status-badge', ['order' => $order])
                        </td>
                        <td class="text-end">
                            <a href="{{ route('work-orders.show', $order) }}" class="btn btn-sm btn-outline-primary">
                                Open
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted py-5">
                            <i class="fas fa-clipboard-list fa-2x mb-2 d-block"></i>
                            No job orders match this filter.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($orders->hasPages())
            <div class="card-footer">
                {{ $orders->links() }}
            </div>
        @endif
    </div>
</div>
@endsection