@php
    $fieldPrefix = $fieldPrefix ?? 'wh';
    $warehouseField = $warehouseField ?? 'garage_warehouse_id';
    $sectionField = $sectionField ?? 'garage_warehouse_section_id';
    $selectedWarehouseId = (int) old($warehouseField, $defaultWarehouseId ?? 0);
    $selectedSectionId = (int) old($sectionField, $defaultSectionId ?? 0);
    $useBootstrap = !empty($useBootstrap);
    $gridClass = $gridClass ?? ($useBootstrap ? 'row g-2 mb-2 grg-wh-location' : 'gpo-form-grid cols-4 mb-2 grg-wh-location');
    $labelClass = $labelClass ?? ($useBootstrap ? 'form-label' : 'gpo-lbl');
    $selectClass = $selectClass ?? ($useBootstrap ? 'form-select js-chosen' : 'gpo-sel js-chosen');
    $colClass = $colClass ?? ($useBootstrap ? 'col-md-6' : '');
    $embedInRow = ! empty($embedInRow);
@endphp

@if(!$embedInRow)
<div class="{{ $gridClass }} grg-wh-location"
     data-wh-prefix="{{ $fieldPrefix }}"
     data-sections='@json($sectionsByWarehouse ?? [])'>
@endif
    <div class="{{ $colClass }}">
        <label class="{{ $labelClass }}">Warehouse</label>
        <select class="{{ $selectClass }} grg-wh-warehouse" name="{{ $warehouseField }}" id="{{ $fieldPrefix }}Warehouse">
            <option value="">— None —</option>
            @foreach(($warehouses ?? []) as $wh)
                <option value="{{ $wh->id }}" @selected($selectedWarehouseId === (int) $wh->id)>
                    {{ $wh->name }}{{ $wh->is_default ? ' (Default)' : '' }}
                </option>
            @endforeach
        </select>
        @error($warehouseField) <div class="text-danger small">{{ $message }}</div> @enderror
    </div>
    <div class="{{ $colClass }}">
        <label class="{{ $labelClass }}">Section</label>
        <select class="{{ $selectClass }} grg-wh-section" name="{{ $sectionField }}" id="{{ $fieldPrefix }}Section" data-selected="{{ $selectedSectionId }}">
            <option value="">— None —</option>
        </select>
        @error($sectionField) <div class="text-danger small">{{ $message }}</div> @enderror
    </div>
    @if(!empty($applyDefaults))
        <div class="d-flex align-items-end {{ $useBootstrap ? ($embedInRow ? 'col-12 col-lg-6' : 'col-12') : '' }}" @if(!$useBootstrap) style="grid-column: span 2;" @endif>
            <span class="badge bg-light text-dark border small">Defaults from <a href="{{ route('garage.warehouse-settings.edit') }}" class="text-decoration-none">warehouse settings</a></span>
        </div>
    @endif
@if(!$embedInRow)
</div>
@endif

@push('scripts')
<script>
(function () {
    if (window.__grgWhLocationInit) return;
    window.__grgWhLocationInit = true;

    function initWhLocation(root) {
        if (!root || root.dataset.whBound === '1') return;
        root.dataset.whBound = '1';
        var sectionsByWarehouse = {};
        try {
            sectionsByWarehouse = JSON.parse(root.getAttribute('data-sections') || '{}');
        } catch (e) { sectionsByWarehouse = {}; }
        var whSelect = root.querySelector('.grg-wh-warehouse');
        var secSelect = root.querySelector('.grg-wh-section');
        if (!whSelect || !secSelect) return;

        function refillSections() {
            var wid = parseInt(whSelect.value, 10) || 0;
            var selected = parseInt(secSelect.getAttribute('data-selected') || '0', 10) || 0;
            var list = sectionsByWarehouse[wid] || sectionsByWarehouse[String(wid)] || [];
            secSelect.innerHTML = '<option value="">— None —</option>';
            list.forEach(function (s) {
                var opt = document.createElement('option');
                opt.value = s.id;
                opt.textContent = s.name + (s.is_default ? ' (Default)' : '');
                if (parseInt(s.id, 10) === selected) opt.selected = true;
                secSelect.appendChild(opt);
            });
            if (window.jQuery && jQuery(secSelect).data('chosen')) {
                jQuery(secSelect).trigger('chosen:updated');
            }
        }

        whSelect.addEventListener('change', function () {
            secSelect.setAttribute('data-selected', '');
            refillSections();
        });
        refillSections();
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.grg-wh-location').forEach(initWhLocation);
    });
})();
</script>
@endpush