@extends('layouts.admin')
@section('content')
<div class="card admin-card"><div class="card-body p-4"><div class="admin-toolbar"><div><h1 class="h3 mb-1">{{ $zone->exists ? 'Edit shipping zone' : 'Create shipping zone' }}</h1><div class="small text-muted">Only needed if delivery pricing or methods change by region. Leave this section alone if you run one store-wide shipping setup.</div></div>@if($zone->exists)<form method="post" action="{{ route('admin.shipping-zones.destroy',$zone) }}" onsubmit="return confirm('Delete this shipping zone?');">@csrf @method('DELETE')<button class="btn admin-btn admin-btn-danger"><i class="fa-solid fa-trash"></i><span>Delete zone</span></button></form>@endif</div><form method="post" action="{{ $zone->exists ? route('admin.shipping-zones.update',$zone) : route('admin.shipping-zones.store') }}" class="row g-3 admin-form-grid">@csrf @if($zone->exists) @method('PUT') @endif
<div class="col-12"><div class="admin-section-title">Zone details</div></div>
<div class="col-md-6"><label class="form-label" for="zone_name">Zone name</label><input id="zone_name" name="name" value="{{ old('name',$zone->name) }}" class="form-control"><div class="small text-muted mt-1">Example: Mainland UK, Highlands & Islands, Northern Ireland.</div></div>
<div class="col-md-3"><label class="form-label" for="zone_code">Zone code</label><input id="zone_code" name="code" value="{{ old('code',$zone->code) }}" class="form-control" data-autofill="{{ $zone->exists ? 'false' : 'true' }}"><div class="small text-muted mt-1">Auto generates, but can be modified.</div></div>
<div class="col-md-3"><label class="form-label" for="country_code">Country code</label><select id="country_code" name="country_code" class="form-select">@php($countryCode = old('country_code',$zone->country_code ?: 'GB'))<option value="GB" @selected($countryCode === 'GB')>United Kingdom (GB)</option><option value="IE" @selected($countryCode === 'IE')>Ireland (IE)</option><option value="FR" @selected($countryCode === 'FR')>France (FR)</option><option value="DE" @selected($countryCode === 'DE')>Germany (DE)</option><option value="NL" @selected($countryCode === 'NL')>Netherlands (NL)</option><option value="BE" @selected($countryCode === 'BE')>Belgium (BE)</option><option value="ES" @selected($countryCode === 'ES')>Spain (ES)</option><option value="PT" @selected($countryCode === 'PT')>Portugal (PT)</option><option value="IT" @selected($countryCode === 'IT')>Italy (IT)</option><option value="US" @selected($countryCode === 'US')>United States (US)</option>@if(! in_array($countryCode, ['GB', 'IE', 'FR', 'DE', 'NL', 'BE', 'ES', 'PT', 'IT', 'US'], true))<option value="{{ $countryCode }}" selected>{{ $countryCode }}</option>@endif</select><div class="small text-muted mt-1">Use `GB` for UK shipping.</div></div>
<div class="col-12"><label class="form-label" for="zone_postcodes">Postcode rules</label><textarea id="zone_postcodes" name="postcodes" class="form-control" rows="6" placeholder="One postcode rule per line, e.g. BT*&#10;IM*&#10;JE*">{{ old('postcodes', $zone->postcodes ? implode("\n", $zone->postcodes) : '') }}</textarea><div class="small text-muted mt-1">Leave blank to make the zone apply to the whole country. Use one rule per line for regional matching.</div></div>
<div class="col-12"><div class="form-check"><input type="checkbox" class="form-check-input" id="zone_active" name="is_active" value="1" @checked(old('is_active', $zone->is_active ?? true))><label class="form-check-label" for="zone_active">Active zone</label></div></div>
<div class="col-12 d-flex gap-2"><button class="btn admin-btn admin-btn-primary"><i class="fa-solid fa-floppy-disk"></i><span>Save zone</span></button><a href="{{ route('admin.shipping-zones.index') }}" class="btn admin-btn admin-btn-secondary"><i class="fa-solid fa-arrow-left"></i><span>Back</span></a></div></form></div></div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const nameInput = document.getElementById('zone_name');
        const codeInput = document.getElementById('zone_code');

        if (!nameInput || !codeInput) {
            return;
        }

        const isAutoFillEnabled = (input) => input.dataset.autofill !== 'false';
        const codeify = (value) => value
            .toUpperCase()
            .trim()
            .replace(/[^A-Z0-9]+/g, '-')
            .replace(/^-+|-+$/g, '')
            .slice(0, 100);

        nameInput.addEventListener('input', () => {
            if (isAutoFillEnabled(codeInput)) {
                codeInput.value = codeify(nameInput.value);
            }
        });

        codeInput.addEventListener('input', () => {
            codeInput.dataset.autofill = codeInput.value.trim() === '' ? 'true' : 'false';
        });
    });
</script>
@endsection