@extends('layouts.admin')

@section('title', 'Quick Add Zones')
@section('page-title', 'Zone Master — Quick Add Zones')
@section('page-subtitle', 'Click the map to drop a zone — no boundary drawing needed')

@push('scripts')
@vite(['resources/js/gis/quick-zone-editor.js'])
@endpush

@section('content')
<form method="POST" action="{{ route('admin.zones.quick.store') }}" id="quickAddForm">
    @csrf
    <div class="row g-3">
        <div class="col-lg-4">
            <div class="panel p-3">
                <div class="mb-3">
                    <label class="form-label small text-navy-300">Name for next zone</label>
                    <input type="text" id="zoneName" value="Zone 1" class="form-control">
                    <div class="form-text">Set this before each click — it advances automatically after you place one.</div>
                </div>
                <div class="mb-3">
                    <label class="form-label small text-navy-300">Radius for next zone (km)</label>
                    <input type="number" id="radiusKm" value="5" step="any" class="form-control">
                    <div class="form-text">Change this before each click to vary zone sizes.</div>
                </div>

                <input type="hidden" name="zones_payload" id="zones_payload" value="">
                @error('zones')<div class="text-danger small mb-2">{{ $message }}</div>@enderror
                @error('zones_payload')<div class="text-danger small mb-2">{{ $message }}</div>@enderror

                <button type="submit" id="saveAllBtn" class="btn btn-primary w-100" disabled><i class="bi bi-check2"></i> Save All (<span id="pendingCount">0</span>)</button>
                <button type="button" id="clearAllBtn" class="btn btn-outline-secondary w-100 mt-2">Clear All</button>
                <a href="{{ route('admin.zones.index') }}" class="btn btn-outline-secondary w-100 mt-2">Cancel</a>
            </div>

            <div class="panel p-3 mt-3">
                <div class="fw-semibold text-heading small mb-2"><i class="bi bi-collection"></i> Pending Zones</div>
                <div class="zone-shape-list" id="pendingZoneList">
                    <div class="text-navy-300 small p-2">No zones placed yet — click the map to drop one.</div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="gis-workspace">
                <div id="quickZoneMap" class="gis-map-canvas" data-other-zones="{{ json_encode($otherZones ?? []) }}"></div>
            </div>
            <p class="text-navy-300 small mt-2 mb-0">
                <i class="bi bi-info-circle"></i> Set the name and radius above, then click anywhere on the map to place a zone centered on that point. Each click adds a new zone to the list — a line connects them in the order you placed them — rename or remove any of them before saving.
            </p>
        </div>
    </div>
</form>
@endsection