{{-- Shared GIS drawing workspace used by create.blade.php and edit.blade.php --}}
<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">Zone Name</label>
                <input type="text" name="name" value="{{ old('name', $zone->name ?? '') }}" class="form-control @error('name') is-invalid @enderror" required>
                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label small text-navy-300">Description</label>
                <textarea name="description" rows="3" class="form-control">{{ old('description', $zone->description ?? '') }}</textarea>
            </div>
            <div class="mb-3">
                <label class="form-label small text-navy-300">Expected Patrol Duration (minutes)</label>
                <input type="number" name="expected_patrol_duration_minutes" value="{{ old('expected_patrol_duration_minutes', $zone->expected_patrol_duration_minutes ?? 240) }}" class="form-control">
            </div>
            <div class="row g-2 mb-3">
                <div class="col-6">
                    <label class="form-label small text-navy-300">Zone Color</label>
                    <input type="color" name="color" value="{{ old('color', $zone->color ?? '#1d5fa8') }}" class="form-control form-control-color w-100">
                </div>
                <div class="col-6">
                    <label class="form-label small text-navy-300">Status</label>
                    <select name="status" class="form-select">
                        @foreach (['draft' => 'Draft', 'active' => 'Active', 'inactive' => 'Inactive'] as $val => $label)
                            <option value="{{ $val }}" @selected(old('status', $zone->status ?? 'active') === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            @if(isset($zone))
            <div class="mb-3">
                <label class="form-label small text-navy-300">Change Note (for version history)</label>
                <input type="text" name="change_note" class="form-control" placeholder="e.g. Extended eastern boundary">
            </div>
            @endif

            {{-- Hidden field populated by zone-editor.js --}}
            <input type="hidden" id="shapes_payload" name="shapes_payload" value="">
            @error('shapes_payload')<div class="text-danger small mb-2">{{ $message }}</div>@enderror

            <button type="submit" class="btn btn-primary w-100"><i class="bi bi-check2"></i> {{ isset($zone) ? 'Save Zone Changes' : 'Save Zone' }}</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> Shapes in this Zone</div>
            <div class="zone-shape-list" id="zoneShapeList">
                <div class="text-navy-300 small p-2">No shapes drawn yet — pick a tool and start drawing.</div>
            </div>
        </div>

        @if(isset($zone) && $zone->versions->count())
        <div class="panel p-3 mt-3">
            <div class="fw-semibold text-heading small mb-2"><i class="bi bi-clock-history"></i> Version History</div>
            <ul class="list-group list-group-flush">
                @foreach ($zone->versions as $version)
                    <li class="list-group-item bg-transparent border-navy small d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-heading">v{{ $version->version }} — {{ $version->change_note }}</div>
                            <div class="text-navy-300" style="font-size:.7rem;">{{ $version->changedBy->name ?? 'System' }} · {{ $version->created_at->diffForHumans() }}</div>
                        </div>
                        @if ($version->version !== $zone->versions->max('version'))
                        <form action="{{ route('admin.zones.versions.restore', [$zone, $version]) }}" method="POST" data-confirm="Restore zone to version {{ $version->version }}?">
                            @csrf
                            <button class="btn btn-sm btn-outline-secondary" title="Restore this version"><i class="bi bi-arrow-counterclockwise"></i></button>
                        </form>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>

    <div class="col-lg-8">
        <div class="gis-workspace">
            <div class="d-flex gap-2 p-2 bg-navy-850">
                <input type="text" id="zoneMapSearch" class="form-control form-control-sm" placeholder="Search place name..." style="max-width:220px;">
                <input type="text" id="latLngSearchInput" class="form-control form-control-sm" placeholder="lat, lng" style="max-width:160px;">
                <button type="button" id="latLngSearchBtn" class="btn btn-sm btn-outline-secondary"><i class="bi bi-geo"></i></button>
                <button type="button" id="fitAllZonesBtn" class="btn btn-sm btn-outline-secondary ms-auto"><i class="bi bi-arrows-fullscreen"></i> Fit All Zones</button>
            </div>

            <div id="zoneMap" class="gis-map-canvas"
                 data-existing-geojson="{{ isset($zone) ? json_encode($zone->geojson) : '' }}"
                 data-other-zones="{{ json_encode($otherZones ?? []) }}"></div>

            <div class="gis-toolbar">
                <button type="button" class="gis-tool-btn" data-draw-tool="polygon" title="Draw Polygon"><i class="bi bi-pentagon"></i></button>
                <button type="button" class="gis-tool-btn" data-draw-tool="rectangle" title="Draw Rectangle"><i class="bi bi-square"></i></button>
                <button type="button" class="gis-tool-btn" data-draw-tool="circle" title="Draw Circle"><i class="bi bi-circle"></i></button>
                <button type="button" class="gis-tool-btn" data-draw-tool="marker" title="Place Marker (click map)"><i class="bi bi-geo-alt"></i></button>
                <button type="button" class="gis-tool-btn" data-draw-tool="polyline" title="Draw Polyline"><i class="bi bi-slash-lg"></i></button>
                <div class="gis-tool-sep"></div>
                <button type="button" class="gis-tool-btn" data-draw-tool="none" title="Pan / Select"><i class="bi bi-cursor"></i></button>
                <button type="button" class="gis-tool-btn" data-draw-tool="delete" title="Delete Shape"><i class="bi bi-trash"></i></button>
                <div class="gis-tool-sep"></div>
                <button type="button" class="gis-tool-btn" data-draw-tool="undo" title="Undo"><i class="bi bi-arrow-counterclockwise"></i></button>
                <button type="button" class="gis-tool-btn" data-draw-tool="redo" title="Redo"><i class="bi bi-arrow-clockwise"></i></button>
            </div>

            <div class="d-flex align-items-center gap-2 p-2 bg-navy-850 flex-wrap">
                <span class="text-navy-300 small"><i class="bi bi-geo-alt"></i> Add point by coordinates:</span>
                <input type="number" step="any" id="addPointLat" class="form-control form-control-sm" placeholder="Lat" style="max-width:110px;">
                <input type="number" step="any" id="addPointLng" class="form-control form-control-sm" placeholder="Lng" style="max-width:110px;">
                <button type="button" id="addPointBtn" class="btn btn-sm btn-outline-primary"><i class="bi bi-plus-lg"></i> Add Point</button>
                <span class="text-danger small d-none" id="addPointError"></span>
            </div>

            <div class="gis-panel-floating d-none" id="zoneInfoPanel">
                <div class="panel-header py-2 px-3"><span class="fw-semibold small">Zone Info</span></div>
                <div class="p-3 small">
                    <div class="d-flex justify-content-between mb-1"><span class="text-navy-300">Shapes</span><span class="text-heading" id="zoneInfoType">—</span></div>
                    <div class="d-flex justify-content-between mb-1"><span class="text-navy-300">Total Area</span><span class="text-heading" id="zoneInfoArea">—</span></div>
                    <div class="d-flex justify-content-between mb-1"><span class="text-navy-300">Total Perimeter</span><span class="text-heading" id="zoneInfoPerimeter">—</span></div>
                    <div class="d-flex justify-content-between"><span class="text-navy-300">Total Vertices</span><span class="text-heading" id="zoneInfoVertices">—</span></div>
                </div>
            </div>

            <div class="gis-coord-readout" id="coordReadout">Lat: —  Lng: —</div>
        </div>
        <p class="text-navy-300 small mt-2 mb-0">
            <i class="bi bi-info-circle"></i> Select a drawing tool, then click on the map to draw — or place a point marker exactly by typing its Lat/Lng above and clicking Add Point. Polygons connect automatically and close when you finish. Drawing another shape adds it to this zone — nothing already drawn is cleared. Click a shape (on the map or in the list) to select it, drag vertices to edit, and use Delete to remove the selected shape.
        </p>
    </div>
</div>