@extends('admin.layouts.app')
@section('title', isset($zoneRule) ? 'Edit Zone Rule' : 'Add Zone Rule')
@section('breadcrumb')
    <a href="{{ route('admin.zone-rules.index') }}" class="breadcrumb-link">Zone Rules</a>
    <span class="breadcrumb-sep">/</span>
    <span class="current">{{ isset($zoneRule) ? 'Edit' : 'Add' }}</span>
@endsection
@section('content')
<div class="page-header">
    <h1 class="page-title">
        <span class="title-icon"><i data-lucide="sliders" style="width:20px;height:20px;"></i></span>
        {{ isset($zoneRule) ? 'Edit Zone Rule' : 'Add Zone Rule' }}
    </h1>
</div>

<div class="admin-table-wrap" style="max-width:800px;">
    <form method="POST" action="{{ isset($zoneRule) ? route('admin.zone-rules.update', $zoneRule) : route('admin.zone-rules.store') }}">
        @csrf
        @if(isset($zoneRule)) @method('PUT') @endif

        <div style="padding:20px;">
            {{-- Section: Zone + City --}}
            <div style="background:rgba(37,99,235,.06);border-left:3px solid rgba(37,99,235,.5);padding:6px 12px;margin-bottom:14px;border-radius:0 4px 4px 0;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vsc-text-secondary);">1. Zone Identification</div>
                <div style="font-size:10px;color:var(--vsc-text-secondary);margin-top:2px;">Which zone and city does this rule apply to?</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;">
                <div class="form-group">
                    <label class="form-label">Zone <span style="color:var(--vsc-red);">*</span></label>
                    <select name="zone_id" class="form-control @error('zone_id') is-invalid @enderror" required>
                        <option value="">Select Zone</option>
                        @foreach($zones as $zone)
                            <option value="{{ $zone->id }}" {{ old('zone_id', $zoneRule->zone_id ?? '') == $zone->id ? 'selected' : '' }}>
                                {{ $zone->name }} ({{ $zone->state?->code ?? '' }})
                            </option>
                        @endforeach
                    </select>
                    @error('zone_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="form-label">City (optional)</label>
                    <select name="city_id" class="form-control @error('city_id') is-invalid @enderror">
                        <option value="">Any City</option>
                        @foreach($cities as $city)
                            <option value="{{ $city->id }}" {{ old('city_id', $zoneRule->city_id ?? '') == $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                        @endforeach
                    </select>
                    @error('city_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- Section: Road Width --}}
            <div style="background:rgba(37,99,235,.06);border-left:3px solid rgba(37,99,235,.5);padding:6px 12px;margin-bottom:14px;border-radius:0 4px 4px 0;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vsc-text-secondary);">2. Road Width Range</div>
                <div style="font-size:10px;color:var(--vsc-text-secondary);margin-top:2px;">Rules apply when the plot's abutting road falls within this range</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;">
                <div class="form-group">
                    <label class="form-label">Min Road Width (m)</label>
                    <input type="number" name="road_width_min_m" step="0.1" class="form-control"
                        value="{{ old('road_width_min_m', $zoneRule->road_width_min_m ?? '') }}" placeholder="e.g. 9">
                </div>
                <div class="form-group">
                    <label class="form-label">Max Road Width (m)</label>
                    <input type="number" name="road_width_max_m" step="0.1" class="form-control"
                        value="{{ old('road_width_max_m', $zoneRule->road_width_max_m ?? '') }}" placeholder="e.g. 12 (blank = no upper limit)">
                </div>
            </div>

            {{-- Section: Building Parameters --}}
            <div style="background:rgba(34,197,94,.06);border-left:3px solid rgba(34,197,94,.5);padding:6px 12px;margin-bottom:14px;border-radius:0 4px 4px 0;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vsc-text-secondary);">3. Building Parameters</div>
                <div style="font-size:10px;color:var(--vsc-text-secondary);margin-top:2px;">Core development control values: FAR, height, coverage, parking</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px;">
                <div class="form-group">
                    <label class="form-label">Max FAR <span style="color:var(--vsc-red);">*</span></label>
                    <input type="number" name="max_far" step="0.01" class="form-control @error('max_far') is-invalid @enderror"
                        value="{{ old('max_far', $zoneRule->max_far ?? '') }}" required placeholder="e.g. 2.5">
                    @error('max_far')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="form-label">Max Height (m)</label>
                    <input type="number" name="max_height_m" step="0.1" class="form-control"
                        value="{{ old('max_height_m', $zoneRule->max_height_m ?? '') }}" placeholder="e.g. 70">
                </div>
                <div class="form-group">
                    <label class="form-label">Max Ground Coverage</label>
                    <input type="number" name="max_ground_coverage" step="0.01" min="0" max="1" class="form-control"
                        value="{{ old('max_ground_coverage', $zoneRule->max_ground_coverage ?? '') }}" placeholder="0–1, e.g. 0.40">
                    <small style="color:var(--vsc-text-secondary);font-size:11px;">Decimal (0.40 = 40%)</small>
                </div>
                <div class="form-group">
                    <label class="form-label">Open Space %</label>
                    <input type="number" name="open_space_pct" step="0.01" min="0" max="100" class="form-control"
                        value="{{ old('open_space_pct', $zoneRule->open_space_pct ?? '') }}" placeholder="e.g. 10">
                </div>
                <div class="form-group">
                    <label class="form-label">Parking Ratio (ECS/sqm)</label>
                    <input type="number" name="parking_ratio_ecs" step="0.0001" class="form-control"
                        value="{{ old('parking_ratio_ecs', $zoneRule->parking_ratio_ecs ?? '') }}" placeholder="e.g. 0.0028">
                </div>
            </div>

            {{-- Section: Height Rule --}}
            <div style="background:rgba(167,139,250,.06);border-left:3px solid rgba(167,139,250,.5);padding:6px 12px;margin-bottom:14px;border-radius:0 4px 4px 0;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vsc-text-secondary);">4. Height Calculation Rule</div>
                <div style="font-size:10px;color:var(--vsc-text-secondary);margin-top:2px;">Fixed = uses Max Height above. Road-Width Based = height computed from road width × multiplier</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px;">
                <div class="form-group">
                    <label class="form-label">Height Rule Type</label>
                    <select name="height_rule_type" class="form-control @error('height_rule_type') is-invalid @enderror"
                            onchange="document.getElementById('roadWidthHeightFields').style.display = this.value === 'road_width_based' ? 'grid' : 'none';">
                        <option value="fixed" {{ old('height_rule_type', $zoneRule->height_rule_type ?? 'fixed') === 'fixed' ? 'selected' : '' }}>Fixed (use Max Height above)</option>
                        <option value="road_width_based" {{ old('height_rule_type', $zoneRule->height_rule_type ?? 'fixed') === 'road_width_based' ? 'selected' : '' }}>Road-Width Based</option>
                    </select>
                    @error('height_rule_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <small style="color:var(--vsc-text-secondary);font-size:11px;">Road-Width Based: height = road_width × multiplier + setback bonus</small>
                </div>
            </div>
            <div id="roadWidthHeightFields" style="display:{{ old('height_rule_type', $zoneRule->height_rule_type ?? 'fixed') === 'road_width_based' ? 'grid' : 'none' }};grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;margin-bottom:24px;">
                <div class="form-group">
                    <label class="form-label">Road Width Multiplier</label>
                    <input type="number" name="height_road_width_multiplier" step="0.01" class="form-control"
                        value="{{ old('height_road_width_multiplier', $zoneRule->height_road_width_multiplier ?? '') }}" placeholder="e.g. 1.5">
                    <small style="color:var(--vsc-text-secondary);font-size:11px;">Height = road_width × this</small>
                </div>
                <div class="form-group">
                    <label class="form-label">Setback Bonus (per m)</label>
                    <input type="number" name="setback_height_bonus_per_m" step="0.01" class="form-control"
                        value="{{ old('setback_height_bonus_per_m', $zoneRule->setback_height_bonus_per_m ?? '') }}" placeholder="e.g. 0.5">
                    <small style="color:var(--vsc-text-secondary);font-size:11px;">Extra m height per m additional setback</small>
                </div>
                <div class="form-group">
                    <label class="form-label">Min Height (m)</label>
                    <input type="number" name="min_height_m" step="0.1" class="form-control"
                        value="{{ old('min_height_m', $zoneRule->min_height_m ?? '') }}" placeholder="e.g. 7">
                    <small style="color:var(--vsc-text-secondary);font-size:11px;">Floor for calculated height</small>
                </div>
                <div class="form-group">
                    <label class="form-label">Absolute Max Height (m)</label>
                    <input type="number" name="absolute_max_height_m" step="0.1" class="form-control"
                        value="{{ old('absolute_max_height_m', $zoneRule->absolute_max_height_m ?? '') }}" placeholder="e.g. 70">
                    <small style="color:var(--vsc-text-secondary);font-size:11px;">Hard cap on calculated height</small>
                </div>
            </div>

            {{-- Section: Setbacks --}}
            <div style="background:rgba(45,212,191,.06);border-left:3px solid rgba(45,212,191,.5);padding:6px 12px;margin-bottom:14px;border-radius:0 4px 4px 0;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vsc-text-secondary);">5. Setbacks (metres)</div>
                <div style="font-size:10px;color:var(--vsc-text-secondary);margin-top:2px;">Minimum distance from plot boundary to building</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px;">
                <div class="form-group">
                    <label class="form-label">Front Setback (m)</label>
                    <input type="number" name="front_setback_m" step="0.1" class="form-control"
                        value="{{ old('front_setback_m', $zoneRule->front_setback_m ?? '') }}" placeholder="e.g. 3">
                </div>
                <div class="form-group">
                    <label class="form-label">Side Setback (m)</label>
                    <input type="number" name="side_setback_m" step="0.1" class="form-control"
                        value="{{ old('side_setback_m', $zoneRule->side_setback_m ?? '') }}" placeholder="e.g. 1.5">
                </div>
                <div class="form-group">
                    <label class="form-label">Rear Setback (m)</label>
                    <input type="number" name="rear_setback_m" step="0.1" class="form-control"
                        value="{{ old('rear_setback_m', $zoneRule->rear_setback_m ?? '') }}" placeholder="e.g. 3">
                </div>
            </div>

            {{-- Section: Metadata --}}
            <div style="background:rgba(255,255,255,.04);border-left:3px solid rgba(255,255,255,.2);padding:6px 12px;margin-bottom:14px;border-radius:0 4px 4px 0;">
                <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vsc-text-secondary);">6. Source & Notes</div>
                <div style="font-size:10px;color:var(--vsc-text-secondary);margin-top:2px;">Reference the DCR/UDCPR document and section</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
                <div class="form-group">
                    <label class="form-label">Rule Source</label>
                    <input type="text" name="rule_source" class="form-control"
                        value="{{ old('rule_source', $zoneRule->rule_source ?? '') }}" placeholder="e.g. DCPR 2034 Table 12">
                </div>
                <div class="form-group">
                    <label class="form-label">Version / Amendment</label>
                    <input type="text" name="version" class="form-control"
                        value="{{ old('version', $zoneRule->version ?? '') }}" placeholder="e.g. 2024-A">
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label class="form-label">Special Conditions / Notes</label>
                    <textarea name="special_conditions" class="form-control" rows="2"
                        placeholder="e.g. Applicable only for plots > 1000 sqm">{{ old('special_conditions', $zoneRule->special_conditions ?? '') }}</textarea>
                </div>
            </div>

            <div class="form-group">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $zoneRule->is_active ?? true) ? 'checked' : '' }}>
                    <span class="form-label" style="margin:0;">Active</span>
                </label>
            </div>
        </div>

        <div style="padding:16px 20px;border-top:1px solid var(--vsc-border-light);display:flex;gap:8px;">
            <button type="submit" class="btn btn-primary"><i data-lucide="save" style="width:14px;height:14px;"></i> {{ isset($zoneRule) ? 'Update' : 'Create' }}</button>
            <a href="{{ route('admin.zone-rules.index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection