@php
$key = $moduleMap->key;
@endphp

@include('layouts.components.section-marker', ['section_name' => $moduleMap->description])

<div class="card py-4 px-4">
    <div class="row mb-3">
        <div class="col">
            <div class="form-check">
                <input type="hidden" name="{{ $key }}[active]" value="0">
                <input
                    type="checkbox"
                    name="{{ $key }}[active]"
                    class="form-check-input"
                    id="{{ $key }}[active]"
                    {{ old("{$key}.active", $moduleMap->value['active'] ?? false) ? 'checked' : '' }}>
                <label class="form-check-label" for="{{ $key }}[active]">Ativo</label>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label class="mb-2" for="{{ $key }}[center][lat]">Latitude do centro</label>
            <input
                type="number"
                step="any"
                name="{{ $key }}[center][lat]"
                id="{{ $key }}[center][lat]"
                class="form-control"
                value="{{ old("{$key}.center.lat", $moduleMap->value['center']['lat'] ?? '') }}">

            @if ($errors->has("{$key}.center.lat"))
                <div class="error handle-error">{{ $errors->first("{$key}.center.lat") }}</div>
            @endif
        </div>
        <div class="col-md-6">
            <label class="mb-2" for="{{ $key }}[center][lng]">Longitude do centro</label>
            <input
                type="number"
                step="any"
                name="{{ $key }}[center][lng]"
                id="{{ $key }}[center][lng]"
                class="form-control"
                value="{{ old("{$key}.center.lng", $moduleMap->value['center']['lng'] ?? '') }}">

            @if ($errors->has("{$key}.center.lng"))
                <div class="error handle-error">{{ $errors->first("{$key}.center.lng") }}</div>
            @endif
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label class="mb-2" for="{{ $key }}[zoom]">Nível de zoom <small>(Pré-definido: 13)</small></label>
            <input
                type="number"
                min="0"
                name="{{ $key }}[zoom]"
                id="{{ $key }}[zoom]"
                class="form-control"
                value="{{ old("{$key}.zoom", $moduleMap->value['zoom'] ?? '') }}">

            @if ($errors->has("{$key}.zoom"))
                <div class="error handle-error">{{ $errors->first("{$key}.zoom") }}</div>
            @endif
        </div>
        <div class="col-md-6 d-flex align-items-end">
            <div class="form-check">
                <input type="hidden" name="{{ $key }}[autoFitBounds]" value="0">
                <input
                    type="checkbox"
                    name="{{ $key }}[autoFitBounds]"
                    class="form-check-input"
                    id="{{ $key }}[autoFitBounds]"
                    value="1"
                    {{ old("{$key}.autoFitBounds", $moduleMap->value['autoFitBounds'] ?? false) ? 'checked' : '' }}>
                <label class="form-check-label" for="{{ $key }}[autoFitBounds]">Ajuste automático aos limites</label>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const activeCheckbox = document.getElementById('{{ $key }}[active]');
        const latInput = document.getElementById('{{ $key }}[center][lat]');
        const lngInput = document.getElementById('{{ $key }}[center][lng]');
        const zoomInput = document.getElementById('{{ $key }}[zoom]');
        const autoFitCheckbox = document.getElementById('{{ $key }}[autoFitBounds]');

        const toggleFields = () => {
            const isActive = activeCheckbox.checked;
            const autoFitEnabled = autoFitCheckbox.checked;

            if (latInput) latInput.readOnly = !isActive || autoFitEnabled;
            if (lngInput) lngInput.readOnly = !isActive || autoFitEnabled;
            if (zoomInput) zoomInput.readOnly = !isActive || autoFitEnabled;
        };

        toggleFields();

        activeCheckbox.addEventListener('change', toggleFields);
        autoFitCheckbox.addEventListener('change', toggleFields);
    });
</script>