@extends('layouts.app')
@section('title', 'Services')

@section('content')
    <div class="page-head">
        <div><h1>Subscriptions</h1><p>Every provisioned service across the estate.</p></div>
        <div class="page-actions">
            <a href="{{ route('services.index', ['due' => 1]) }}" class="btn secondary">Due for billing</a>
            <a href="{{ route('services.create') }}" class="btn">+ Provision service</a>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @foreach (['active' => 'Active', 'pending' => 'Pending', 'suspended' => 'Suspended', 'grace' => 'Grace', 'cancelled' => 'Cancelled', 'terminated' => 'Terminated'] as $key => $label)
            @include('components.kpi', ['label' => $label, 'value' => number_format($counts[$key] ?? 0),
                'variant' => $key === 'active' ? 'good' : ($key === 'suspended' || $key === 'terminated' ? 'bad' : ($key === 'grace' ? 'warn' : '')),
                'href' => route('services.index', ['status' => $key])])
        @endforeach
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Service no., RADIUS user, IP, MAC, address…">
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach (['pending','provisioning','active','grace','suspended','expired','cancelled','terminated'] as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Plan</label>
            <select name="plan" data-auto-submit>
                <option value="">All plans</option>
                @foreach ($plans as $plan)
                    <option value="{{ $plan->id }}" @selected(($filters['plan'] ?? '') == $plan->id)>{{ $plan->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="field"><label>&nbsp;</label>
            <label class="check"><input type="checkbox" name="due" value="1" @checked(request()->boolean('due'))> Billing date reached</label></div>
        <div class="field" style="flex:0 0 auto;"><label>&nbsp;</label><button type="submit" class="btn secondary">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Service</th><th>Customer</th><th>Plan</th><th>RADIUS</th><th>Session</th>
                        <th class="num">Price</th><th>Status</th><th>Next bill</th><th>Due</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($services as $service)
                        <tr>
                            <td>
                                <a href="{{ route('services.show', $service) }}" class="mono strong">{{ $service->service_number }}</a>
                                <div class="tiny muted truncate" style="max-width:200px;">{{ $service->installation_address }}</div>
                            </td>
                            <td><a href="{{ route('customers.show', $service->customer) }}">{{ $service->customer->display_name }}</a>
                                <div class="tiny muted mono">{{ $service->customer->phone }}</div></td>
                            <td class="small">{{ $service->plan?->name }}
                                <div class="tiny muted">{{ $service->plan?->speed_label }}</div></td>
                            <td class="mono tiny">{{ $service->username }}
                                @if ($service->radius_synced)
                                    <div class="tiny" style="color:var(--success);">synced</div>
                                @else
                                    <div class="tiny" style="color:var(--warning);">not synced</div>
                                @endif</td>
                            <td>
                                @if ($service->is_online)
                                    <span class="pulse"></span> <span class="tiny">online</span>
                                @else
                                    <span class="tiny muted">offline</span>
                                @endif
                            </td>
                            <td class="num strong">{{ money($service->effective_price, $service->customer->currency) }}</td>
                            <td><span class="badge {{ status_color($service->status) }}"><span class="dot"></span>{{ $service->status }}</span></td>
                            <td class="small nowrap">{{ $service->next_billing_date?->format('d M Y') ?: '—' }}</td>
                            <td class="small nowrap">
                                @if ($service->next_due_date && $service->next_due_date->isPast() && $service->outstanding > 0)
                                    <span class="badge danger">{{ (int) $service->next_due_date->diffInDays(now()) }}d</span>
                                @else
                                    {{ $service->next_due_date?->format('d M') ?: '—' }}
                                @endif
                            </td>
                            <td class="right nowrap">
                                <a href="{{ route('services.show', $service) }}" class="btn xs secondary">Open</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="10">
                            @include('components.empty-state', ['icon' => '&#8644;', 'title' => 'No services found',
                                'message' => 'Provision a subscription to begin.',
                                'action' => '<a href="'.route('services.create').'" class="btn sm">+ Provision service</a>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($services->hasPages())<div class="card-foot">{{ $services->links('partials.pagination') }}</div>@endif
    </div>
@endsection