@props(['form' => null])

@php
    $owners = \App\Models\Owner::orderBy('name')->get();
@endphp

<div class="card border shadow-none mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-label-secondary rounded-2 p-2 lh-1"><i class="ti tabler-user-square-rounded ti-sm"></i></span>
            <h6 class="mb-0 fw-bold text-uppercase text-secondary">{{ __('Owner') }}</h6>
        </div>
        <p class="text-muted small mb-4 ms-1">{{ __('Internal record of the actual owner of this machine. Not visible to customers.') }}</p>

        <div class="row g-4 align-items-end">
            <div class="col-md-10">
                <label class="form-label" for="owner_id">{{ __('Owner') }}</label>
                <div
                    wire:ignore
                    x-data="{
                        model: 'form.owner_id',
                        init() {
                            const el = this.$refs.select;
                            const $el = window.jQuery(el);
                            const $modal = $el.closest('.modal');

                            $el.select2({
                                width: '100%',
                                placeholder: @js(__('Select owner')),
                                allowClear: true,
                                dropdownParent: $modal.length ? $modal : window.jQuery(document.body),
                            });

                            $el.val(this.$wire.get(this.model) ?? '').trigger('change.select2');
                            $el.on('change', () => { this.$wire.set(this.model, $el.val(), false); });

                            try {
                                this.$wire.$watch(this.model, v => {
                                    if (String(v ?? '') !== String($el.val() ?? '')) {
                                        $el.val(v ?? '').trigger('change.select2');
                                    }
                                });
                            } catch (e) { /* $watch puede no soportar la ruta anidada; no es crítico */ }
                        },
                        handleOwnerCreated(e) {
                            const $el = window.jQuery(this.$refs.select);
                            const label = e.detail.country ? `${e.detail.name} (${e.detail.country})` : e.detail.name;
                            const opt = new Option(label, e.detail.id, true, true);
                            $el.append(opt).trigger('change.select2');
                            this.$wire.set(this.model, e.detail.id, false);
                            // El panel se cierra solo: OwnerQuickCreateForm llama closeModal() tras guardar.
                        }
                    }"
                    x-on:owner-created.window="handleOwnerCreated($event)"
                >
                    <select id="owner_id" x-ref="select"
                        class="form-select @error('form.owner_id') is-invalid @enderror">
                        <option value="">{{ __('No owner assigned') }}</option>
                        @foreach ($owners as $owner)
                            <option value="{{ $owner->id }}">{{ $owner->name }}{{ $owner->country ? " ({$owner->country})" : '' }}</option>
                        @endforeach
                    </select>
                </div>
                @error('form.owner_id') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>

            {{-- x-data requerido: sin un scope Alpine, $dispatch('openModal') es ignorado (ver CLAUDE / memoria). --}}
            <div class="col-md-2" x-data="{}">
                <button type="button" class="btn btn-label-primary w-100"
                    x-on:click="$dispatch('openModal', { component: 'owner.owner-quick-create-form' })">
                    <i class="ti tabler-plus me-1"></i>{{ __('New') }}
                </button>
            </div>
        </div>
    </div>
</div>