@extends('layouts.app-shell')
@section('title', 'Areas')
@section('sidebar')
    @include('admin._sidebar')
@endsection
@section('bottomnav')
    <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard*') ? 'active' : '' }}"><x-icon name="home" :size="20" /><span>Home</span></a>
    <a href="{{ route('admin.bookings') }}" class="{{ request()->routeIs('admin.bookings*') ? 'active' : '' }}"><x-icon name="bookings" :size="20" /><span>Subs</span></a>
    <a href="{{ route('admin.services.index') }}" class="{{ request()->routeIs('admin.services*') ? 'active' : '' }}"><x-icon name="services" :size="20" /><span>Catalogue</span></a>
    <a href="{{ route('admin.areas') }}" class="{{ request()->routeIs('admin.areas*') ? 'active' : '' }}"><x-icon name="pin" :size="20" /><span>Areas</span></a>
@endsection

@section('content')
<div class="flex-between mb-3">
    <div>
        <h2 style="font-size: 22px; font-weight: 700;">Service areas</h2>
        <p class="muted" style="font-size: 13px;">Locations where customers can book subscriptions.</p>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="grid-2">
    <div class="panel">
        <div class="panel-head">
            <h3><span class="ic"><x-icon name="pin" :size="14" /></span> {{ $areas->count() }} area{{ $areas->count() === 1 ? '' : 's' }}</h3>
            <span class="meta">Alphabetical</span>
        </div>
        <div class="table-wrap">
            <table class="table">
                <thead>
                    <tr><th>Name</th><th>City</th><th>Pincode</th><th>Status</th><th></th></tr>
                </thead>
                <tbody>
                    @forelse($areas as $a)
                        <tr>
                            <td data-label="Name">
                                <strong>{{ $a->name }}</strong>
                                <div class="muted" style="font-size: 11.5px;">{{ $a->slug }}</div>
                            </td>
                            <td data-label="City">{{ $a->city }}</td>
                            <td data-label="Pincode">{{ $a->pincode ?: '—' }}</td>
                            <td data-label="Status">{!! $a->is_active ? '<span class="pill pill-green">active</span>' : '<span class="pill pill-grey">off</span>' !!}</td>
                            <td data-label="">
                                <button class="ic-btn" title="Edit" onclick="editArea({{ $a->id }}, '{{ addslashes($a->name) }}', '{{ addslashes($a->slug ?? '') }}', '{{ addslashes($a->city) }}', '{{ addslashes($a->pincode ?? '') }}', {{ $a->lat ?? 'null' }}, {{ $a->lng ?? 'null' }}, {{ $a->is_active ? 'true' : 'false' }})"><x-icon name="edit" :size="14" /></button>
                                <form method="POST" action="{{ route('admin.areas.destroy', $a) }}" style="display:inline" onsubmit="return confirm('Delete this area?');">
                                    @csrf @method('DELETE')
                                    <button class="ic-btn red" title="Delete"><x-icon name="trash" :size="14" /></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5"><div class="empty">No areas yet. Add one →</div></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel">
        <div class="panel-head">
            <h3><span class="ic"><x-icon name="plus" :size="14" /></span> <span id="formTitle">Add area</span></h3>
            <button class="btn btn-ghost btn-sm" type="button" onclick="resetAreaForm()" id="resetBtn" style="display:none;">
                <x-icon name="plus" :size="12" /> New
            </button>
        </div>
        @if($errors->any())
            <div class="alert alert-error">
                <ul style="margin: 0 0 0 16px;">@foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach</ul>
            </div>
        @endif

        <form method="POST" action="{{ route('admin.areas.save') }}" id="areaForm">
            @csrf
            <input type="hidden" name="id" id="area-id" value="">

            <div class="form-section">
                <div class="ic"><x-icon name="info" :size="14" /></div>
                <h4>Basic info</h4>
                <span class="sub">Name and slug</span>
            </div>
            <div class="field">
                <label>Area name <span class="req">*</span></label>
                <input name="name" id="area-name" required placeholder="e.g. Sector 137, Noida">
            </div>
            <div class="field">
                <label>Slug</label>
                <input name="slug" id="area-slug" placeholder="auto-generated">
                <span class="hint">Lowercase letters, numbers, dashes.</span>
            </div>

            <div class="form-section">
                <div class="ic"><x-icon name="building" :size="14" /></div>
                <h4>Location</h4>
                <span class="sub">City, pincode, map coordinates</span>
            </div>
            <div class="form-grid">
                <div class="field">
                    <label>City <span class="req">*</span></label>
                    <input name="city" id="area-city" required value="{{ old('city', 'Noida') }}">
                </div>
                <div class="field">
                    <label>Pincode</label>
                    <input name="pincode" id="area-pincode" inputmode="numeric" maxlength="6" placeholder="201301">
                </div>
            </div>
            <div class="form-grid">
                <div class="field">
                    <label>Latitude</label>
                    <input type="number" step="0.000001" name="lat" id="area-lat" placeholder="28.5167">
                </div>
                <div class="field">
                    <label>Longitude</label>
                    <input type="number" step="0.000001" name="lng" id="area-lng" placeholder="77.4119">
                </div>
            </div>

            <div class="form-section">
                <div class="ic"><x-icon name="settings" :size="14" /></div>
                <h4>Visibility</h4>
                <span class="sub">Active flag</span>
            </div>
            <div class="field">
                <label class="pill-toggle">
                    <input type="checkbox" name="is_active" id="area-active" value="1" checked>
                    <span class="sw"></span>
                    <span class="lbl">Active</span>
                </label>
                <span class="hint">Show in customer booking dropdown.</span>
            </div>

            <div class="flex" style="gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--bfk-border-2);">
                <button class="btn btn-primary" type="submit"><x-icon name="check" :size="14" /> <span id="saveBtnText">Save area</span></button>
                <button class="btn btn-outline" type="button" onclick="resetAreaForm()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script>
function editArea(id, name, slug, city, pincode, lat, lng, isActive) {
    document.getElementById('area-id').value = id;
    document.getElementById('area-name').value = name;
    document.getElementById('area-slug').value = slug;
    document.getElementById('area-city').value = city;
    document.getElementById('area-pincode').value = pincode;
    document.getElementById('area-lat').value = lat === null ? '' : lat;
    document.getElementById('area-lng').value = lng === null ? '' : lng;
    document.getElementById('area-active').checked = isActive;
    document.getElementById('formTitle').textContent = 'Edit area';
    document.getElementById('saveBtnText').textContent = 'Update area';
    document.getElementById('resetBtn').style.display = '';
    document.getElementById('areaForm').scrollIntoView({behavior:'smooth', block:'center'});
}
function resetAreaForm() {
    document.getElementById('areaForm').reset();
    document.getElementById('area-id').value = '';
    document.getElementById('area-city').value = 'Noida';
    document.getElementById('formTitle').textContent = 'Add area';
    document.getElementById('saveBtnText').textContent = 'Save area';
    document.getElementById('resetBtn').style.display = 'none';
}
</script>

@endsection