@extends('layouts.app')
@section('title', 'Coverage zones')

@section('content')
    <div class="page-head">
        <div><h1>Coverage zones</h1><p>{{ $zones->count() }} zone(s) defined.</p></div>
        <div class="page-actions">
            <a href="{{ route('crm.coverage.index') }}" class="btn secondary">Coverage requests</a>
        </div>
    </div>

    <div class="card">
        <table class="table">
            <thead>
                <tr>
                    <th>Zone</th>
                    <th>Code</th>
                    <th>Technology</th>
                    <th>Status</th>
                    <th>Centre</th>
                    <th>Radius</th>
                    <th>Homes passed</th>
                    <th>Ports available</th>
                    <th>Live date</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($zones as $zone)
                    <tr>
                        <td>{{ $zone->name }}</td>
                        <td class="mono">{{ $zone->code }}</td>
                        <td>{{ title_case_words($zone->technology) }}</td>
                        <td>
                            <span class="badge {{ $zone->status === 'live' ? 'good' : ($zone->status === 'retired' ? 'bad' : 'warn') }}">
                                {{ title_case_words($zone->status) }}
                            </span>
                        </td>
                        <td>
                            @if ($zone->center_lat !== null && $zone->center_lng !== null)
                                <span class="mono">{{ number_format((float) $zone->center_lat, 5) }}, {{ number_format((float) $zone->center_lng, 5) }}</span>
                            @else
                                —
                            @endif
                        </td>
                        <td>{{ $zone->radius_m !== null ? number_format((int) $zone->radius_m).' m' : '—' }}</td>
                        <td>{{ $zone->homes_passed !== null ? number_format((int) $zone->homes_passed) : '—' }}</td>
                        <td>{{ $zone->ports_available !== null ? number_format((int) $zone->ports_available) : '—' }}</td>
                        <td>{{ $zone->live_date ? \Illuminate\Support\Carbon::parse($zone->live_date)->format('d M Y') : '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="9" class="empty">No coverage zones yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="card">
        <h2>New zone</h2>
        <form method="POST" action="{{ route('crm.coverage.zones.store') }}" class="form-grid">
            @csrf
            <div class="field">
                <label>Name</label>
                <input type="text" name="name" value="{{ old('name') }}" required maxlength="140">
            </div>
            <div class="field">
                <label>Code</label>
                <input type="text" name="code" value="{{ old('code') }}" required maxlength="40">
            </div>
            <div class="field">
                <label>Technology</label>
                <select name="technology" required>
                    @foreach (['fibre', 'wireless', 'satellite', 'ftth', 'fttx', 'hotspot'] as $tech)
                        <option value="{{ $tech }}" @selected(old('technology') === $tech)>{{ title_case_words($tech) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Status</label>
                <select name="status" required>
                    @foreach (['planned', 'building', 'live', 'retired'] as $status)
                        <option value="{{ $status }}" @selected(old('status', 'planned') === $status)>{{ title_case_words($status) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Centre latitude</label>
                <input type="number" step="any" name="center_lat" value="{{ old('center_lat') }}" min="-90" max="90">
            </div>
            <div class="field">
                <label>Centre longitude</label>
                <input type="number" step="any" name="center_lng" value="{{ old('center_lng') }}" min="-180" max="180">
            </div>
            <div class="field">
                <label>Radius (m)</label>
                <input type="number" name="radius_m" value="{{ old('radius_m') }}" min="0">
            </div>
            <div class="field">
                <label>Homes passed</label>
                <input type="number" name="homes_passed" value="{{ old('homes_passed') }}" min="0">
            </div>
            <div class="field">
                <label>Ports available</label>
                <input type="number" name="ports_available" value="{{ old('ports_available') }}" min="0">
            </div>
            <div class="field">
                <label>Live date</label>
                <input type="date" name="live_date" value="{{ old('live_date') }}">
            </div>
            <div class="field" style="flex:1 1 100%;">
                <label>Polygon — <span class="muted">lat,lng pairs separated by semicolons</span></label>
                <textarea name="polygon" rows="2" placeholder="5.6037,-0.1870;5.6100,-0.1800;5.5980,-0.1750">{{ old('polygon') }}</textarea>
            </div>
            <div class="field" style="flex:1 1 100%;">
                <label>Notes</label>
                <textarea name="notes" rows="2" maxlength="2000">{{ old('notes') }}</textarea>
            </div>
            <div class="field">
                <label>&nbsp;</label>
                <button type="submit" class="btn">Create zone</button>
            </div>
        </form>
    </div>
@endsection