{{-- Quick-create Owner modal --}}
<div class="modal fade" id="ownerModal" tabindex="-1" aria-labelledby="ownerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold" id="ownerModalLabel">Add New Owner</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <div id="owner-modal-alert" class="alert alert-danger d-none small py-2"></div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-medium">Full Name <span class="text-danger">*</span></label>
                        <input type="text" id="om-name" class="form-control" placeholder="Owner's full name">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium">Mobile <span class="text-danger">*</span></label>
                        <input type="text" id="om-mobile" class="form-control" maxlength="10" placeholder="10-digit number">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium">Email</label>
                        <input type="email" id="om-email" class="form-control" placeholder="Optional">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium">City</label>
                        <input type="text" id="om-city" class="form-control" placeholder="Optional">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-medium">Address</label>
                        <textarea id="om-address" class="form-control" rows="2" placeholder="Optional"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="om-save-btn">
                    <span id="om-spinner" class="spinner-border spinner-border-sm d-none me-1"></span>
                    Save Owner
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var saveBtn   = document.getElementById('om-save-btn');
    var spinner   = document.getElementById('om-spinner');
    var alertBox  = document.getElementById('owner-modal-alert');
    var ownerHidden = document.getElementById('owner_id');
    var ownerDisplay = document.getElementById('owner-display');

    if (! saveBtn) return;

    saveBtn.addEventListener('click', function () {
        alertBox.classList.add('d-none');
        alertBox.textContent = '';

        var name    = document.getElementById('om-name').value.trim();
        var mobile  = document.getElementById('om-mobile').value.trim();
        var email   = document.getElementById('om-email').value.trim();
        var city    = document.getElementById('om-city').value.trim();
        var address = document.getElementById('om-address').value.trim();

        if (! name || ! mobile) {
            alertBox.textContent = 'Name and mobile are required.';
            alertBox.classList.remove('d-none');
            return;
        }

        saveBtn.disabled = true;
        spinner.classList.remove('d-none');

        fetch('{{ route('admin.ajax.owners.store') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ name: name, mobile: mobile, email: email || null, city: city || null, address: address || null }),
        })
        .then(function (res) { return res.json().then(function (data) { return { ok: res.ok, data: data }; }); })
        .then(function (res) {
            if (! res.ok) {
                var messages = res.data.errors
                    ? Object.values(res.data.errors).flat().join(' ')
                    : (res.data.message || 'Something went wrong.');
                alertBox.textContent = messages;
                alertBox.classList.remove('d-none');
                return;
            }

            var owner = res.data;
            ownerHidden.value = owner.id;
            if (ownerDisplay) {
                ownerDisplay.value = owner.name + ' — ' + owner.mobile;
            }

            // Reset form
            ['om-name','om-mobile','om-email','om-city','om-address'].forEach(function (id) {
                document.getElementById(id).value = '';
            });

            bootstrap.Modal.getInstance(document.getElementById('ownerModal')).hide();
        })
        .catch(function () {
            alertBox.textContent = 'Network error. Please try again.';
            alertBox.classList.remove('d-none');
        })
        .finally(function () {
            saveBtn.disabled = false;
            spinner.classList.add('d-none');
        });
    });
}());
</script>
@endpush