@php
    $permOptions = ['no' => 'No', 'caller' => 'Caller', 'callee' => 'Parked party', 'both' => 'Both'];
@endphp

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0 ps-3">
            @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
        </ul>
    </div>
@endif

<div class="card mb-3">
    <div class="card-header fw-semibold">General</div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" value="{{ old('name', $lot->name) }}" required>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-semibold">Description</label>
                <input type="text" name="description" class="form-control" value="{{ old('description', $lot->description) }}">
            </div>

            <div class="col-md-3">
                <label class="form-label fw-semibold">Park Code <span class="text-danger">*</span></label>
                <input type="text" name="park_code" class="form-control font-monospace" value="{{ old('park_code', $lot->park_code) }}" required>
                <div class="form-text">Dialled/transferred to park a call. Numbers only.</div>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">First Slot <span class="text-danger">*</span></label>
                <input type="number" name="slot_start" class="form-control font-monospace" value="{{ old('slot_start', $lot->slot_start) }}" required>
                <div class="form-text">Start of the retrieval range.</div>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">Parking Positions <span class="text-danger">*</span></label>
                <input type="number" name="num_slots" class="form-control" min="1" max="100" value="{{ old('num_slots', $lot->num_slots) }}" required>
                <div class="form-text">How many slots.</div>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">Find Slot</label>
                <select name="find_slot" class="form-select">
                    <option value="first" {{ old('find_slot', $lot->find_slot) === 'first' ? 'selected' : '' }}>First available</option>
                    <option value="next" {{ old('find_slot', $lot->find_slot) === 'next' ? 'selected' : '' }}>Next (round-robin)</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label fw-semibold">Parking Time (s)</label>
                <input type="number" name="parking_time" class="form-control" min="5" max="3600" value="{{ old('parking_time', $lot->parking_time) }}" required>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">Comeback Dial Time (s)</label>
                <input type="number" name="comeback_dial_time" class="form-control" min="5" max="600" value="{{ old('comeback_dial_time', $lot->comeback_dial_time) }}" required>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">Courtesy Tone</label>
                <select name="courtesy_tone" class="form-select">
                    <option value="no"     {{ old('courtesy_tone', $lot->courtesy_tone) === 'no' ? 'selected' : '' }}>No tone</option>
                    <option value="caller" {{ old('courtesy_tone', $lot->courtesy_tone) === 'caller' ? 'selected' : '' }}>Caller</option>
                    <option value="parked" {{ old('courtesy_tone', $lot->courtesy_tone) === 'parked' ? 'selected' : '' }}>Parked party</option>
                    <option value="both"   {{ old('courtesy_tone', $lot->courtesy_tone) === 'both' ? 'selected' : '' }}>Both</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">Music on Hold</label>
                <select name="music_on_hold" class="form-select">
                    <option value="">Default</option>
                    @foreach($mohClasses as $c)
                        <option value="{{ $c }}" {{ old('music_on_hold', $lot->music_on_hold) === $c ? 'selected' : '' }}>{{ $c }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <hr class="my-4">

        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label fw-semibold">Call Transfer</label>
                <select name="allow_transfer" class="form-select">
                    @foreach($permOptions as $v => $label)<option value="{{ $v }}" {{ old('allow_transfer', $lot->allow_transfer) === $v ? 'selected' : '' }}>{{ $label }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold">Call Reparking</label>
                <select name="allow_reparking" class="form-select">
                    @foreach($permOptions as $v => $label)<option value="{{ $v }}" {{ old('allow_reparking', $lot->allow_reparking) === $v ? 'selected' : '' }}>{{ $label }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold">Call Hangup</label>
                <select name="allow_hangup" class="form-select">
                    @foreach($permOptions as $v => $label)<option value="{{ $v }}" {{ old('allow_hangup', $lot->allow_hangup) === $v ? 'selected' : '' }}>{{ $label }}</option>@endforeach
                </select>
            </div>

            <div class="col-md-4">
                <div class="form-check form-switch mt-2">
                    <input class="form-check-input" type="checkbox" name="comeback_to_origin" value="1" id="cto"
                        {{ old('comeback_to_origin', $lot->comeback_to_origin) ? 'checked' : '' }}>
                    <label class="form-check-label" for="cto">Return to Originator</label>
                    <div class="form-text">When time runs out, ring the person who parked it.</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-check form-switch mt-2">
                    <input class="form-check-input" type="checkbox" name="announce_slot" value="1" id="ann"
                        {{ old('announce_slot', $lot->announce_slot) ? 'checked' : '' }}>
                    <label class="form-check-label" for="ann">Announce Space Number</label>
                    <div class="form-text">Speak the slot number when a call is parked.</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-check form-switch mt-2">
                    <input class="form-check-input" type="checkbox" name="record" value="1" id="rec"
                        {{ old('record', $lot->record) ? 'checked' : '' }}>
                    <label class="form-check-label" for="rec">Record</label>
                </div>
            </div>
        </div>

        <hr class="my-4">

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-semibold">Recall Label</label>
                <input type="text" name="recall_label" class="form-control" maxlength="24"
                    value="{{ old('recall_label', $lot->recall_label ?? 'Parked') }}" placeholder="Parked">
                <div class="form-text">
                    Shown on the caller ID when a parked call rings back, e.g.
                    <code>{{ old('recall_label', $lot->recall_label ?? 'Parked') }} 9001: Stuart</code> — so staff instantly see it's a returning parked call and who's waiting.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3" id="timeoutCard" style="{{ old('comeback_to_origin', $lot->comeback_to_origin) ? 'display:none;' : '' }}">
    <div class="card-header fw-semibold">Timeout Destination</div>
    <div class="card-body">
        <p class="text-secondary small">Where the call goes if it isn't picked up in time (used when "Return to Originator" is off). Enter any reachable number — an extension, queue, IVR or ring group.</p>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-semibold">Destination Number</label>
                <input type="text" name="timeout_value" class="form-control font-monospace" value="{{ old('timeout_value', $lot->timeout_value) }}" placeholder="e.g. 3000 or an extension">
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="active"
                {{ old('is_active', $lot->is_active) ? 'checked' : '' }}>
            <label class="form-check-label fw-semibold" for="active">Active</label>
        </div>
    </div>
</div>

<div class="d-flex justify-content-end gap-2">
    <a href="{{ route('apps.parking.index') }}" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">{{ $submitLabel ?? 'Save' }}</button>
</div>

<script>
    document.getElementById('cto')?.addEventListener('change', function () {
        document.getElementById('timeoutCard').style.display = this.checked ? 'none' : 'block';
    });
</script>