@php
    $owners      = $owners ?? collect();
    $totalPct    = $owners->sum('ownership_pct');
    $storeOwnerUrl  = $lead ? route('turbo-app.owners.store', $lead->id) : '#';
@endphp

{{-- Info banner --}}
<div class="alert alert-info d-flex align-items-center gap-2 mb-3">
    <i class="bx bx-info-circle fs-5"></i>
    <span>The first owner/officer marked as an App Signer will be the primary signer for the application.</span>
</div>

{{-- Total & Add button --}}
<div class="d-flex justify-content-between align-items-center mb-3">
    <span class="fw-semibold">
        Total Ownership Percentage —
        <span id="ownerTotalPct" class="{{ $totalPct > 100 ? 'text-danger' : ($totalPct == 100 ? 'text-success' : '') }}">
            {{ number_format($totalPct, 2) }}%
        </span>
    </span>
    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal"
            data-bs-target="#modalAddOwner" id="btnAddOwner">
        Add Owner/Officer
    </button>
</div>

{{-- Owners list --}}
<div id="ownersList">
    @forelse($owners as $owner)
    <div class="card mb-2 border shadow-sm owner-card" data-owner-id="{{ $owner->id }}">
        <div class="card-body py-2">
            <div class="row align-items-center">
                <div class="col-md-5">
                    <strong>{{ $owner->first_name }} {{ $owner->last_name }}</strong>
                    @if($owner->title) <span class="text-muted">({{ ucfirst($owner->title) }})</span> @endif
                    <div class="small text-muted">{{ $owner->email }}</div>
                </div>
                <div class="col-md-3">
                    <span class="badge bg-secondary me-1">{{ $owner->ownership_pct }}%</span>
                    @if($owner->is_app_signer)    <span class="badge bg-primary me-1">App Signer</span>    @endif
                    @if($owner->is_beneficial_owner) <span class="badge bg-info me-1">Beneficial Owner</span> @endif
                </div>
                <div class="col-md-4 text-end">
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-edit-owner me-1"
                            data-owner='@json($owner)'>
                        <i class="bx bx-edit"></i> Edit
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-owner"
                            data-owner-id="{{ $owner->id }}"
                            data-url="{{ $lead ? route('turbo-app.owners.destroy', [$lead->id, $owner->id]) : '#' }}">
                        <i class="bx bx-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="text-center text-muted py-4" id="noOwnersMsg">
        <i class="bx bx-user-x fs-3 d-block mb-2"></i>
        No owners added yet. Click <strong>Add Owner/Officer</strong> to begin.
    </div>
    @endforelse
</div>

@push('page_script')
<script>
(function () {
    var $list      = $('#ownersList');
    var $totalPct  = $('#ownerTotalPct');
    var $noMsg     = $('#noOwnersMsg');

    /* ─── Remove owner ─── */
    $list.on('click', '.btn-remove-owner', function () {
        if (!confirm('Remove this owner/officer?')) return;
        var $btn = $(this);
        var url  = $btn.data('url');
        $.ajax({
            url: url, type: 'POST',
            data: { _token: '{{ csrf_token() }}', _method: 'DELETE' },
            success: function (res) {
                $btn.closest('.owner-card').remove();
                $totalPct.text(parseFloat(res.data.total_pct || 0).toFixed(2) + '%');
                if ($list.find('.owner-card').length === 0) {
                    $list.append($noMsg.clone().removeAttr('style'));
                }
            },
            error: function () { alert('Could not remove owner. Please try again.'); }
        });
    });

    /* ─── Set a <select>'s value, adding a fallback option first if the value predates the fixed
       option list (e.g. state/country were free-text columns before), so a previously saved
       value that isn't one of the fixed options is preserved/visible instead of silently
       reverting to blank; then trigger('change') so select2's displayed label refreshes. ─── */
    function setSelectValue($select, value) {
        if (value && !$select.find('option[value="' + $.escapeSelector(String(value)) + '"]').length) {
            $select.append($('<option></option>').val(value).text(value));
        }
        $select.val(value).trigger('change');
    }

    /* ─── Edit owner: pre-fill modal ─── */
    $list.on('click', '.btn-edit-owner', function () {
        var owner = $(this).data('owner');
        var $modal = $('#modalAddOwner');
        $modal.find('[name="owner_id"]').val(owner.id);
        $modal.find('[name="first_name"]').val(owner.first_name);
        $modal.find('[name="last_name"]').val(owner.last_name);
        $modal.find('[name="title"]').val(owner.title);
        $modal.find('[name="email"]').val(owner.email);
        $modal.find('[name="phone"]').val(owner.phone);
        $modal.find('[name="ownership_pct"]').val(owner.ownership_pct);
        $modal.find('[name="ssn"]').val(owner.ssn);
        $modal.find('[name="date_of_birth"]').val(owner.date_of_birth);
        setSelectValue($modal.find('[name="country"]'), owner.country || 'US');
        $modal.find('[name="street_number"]').val(owner.street_number);
        $modal.find('[name="street_name"]').val(owner.street_name);
        $modal.find('[name="postal_code"]').val(owner.postal_code);
        $modal.find('[name="city"]').val(owner.city);
        setSelectValue($modal.find('[name="state"]'), owner.state);
        $modal.find('[name="unit_suite"]').val(owner.unit_suite);
        ['is_app_signer','is_personal_guarantor','is_beneficial_owner','is_individual_with_control'].forEach(function(k){
            $modal.find('[name="'+k+'"]').prop('checked', !!owner[k]);
        });
        if (owner.us_citizen !== undefined) {
            $modal.find('[name="us_citizen"][value="'+(owner.us_citizen ? 'yes' : 'no')+'"]').prop('checked', true);
        }
        $modal.modal('show');
    });

    /* ─── Clear modal on hide ─── */
    $('#modalAddOwner').on('hidden.bs.modal', function () {
        $(this).find('form')[0].reset();
        $(this).find('[name="owner_id"]').val('');
    });

    /* ─── Save owner via AJAX ─── */
    $('#formAddOwner').on('submit', function (e) {
        e.preventDefault();
        var $form  = $(this);
        var $btn   = $form.find('[type="submit"]');
        $btn.prop('disabled', true).text('Saving…');

        $.ajax({
            url:  '{{ $storeOwnerUrl }}',
            type: 'POST',
            data: $form.serialize(),
            success: function (res) {
                $('#modalAddOwner').modal('hide');
                $totalPct.text(parseFloat(res.data.total_pct || 0).toFixed(2) + '%');
                location.reload(); // simplest refresh after save
            },
            error: function (xhr) {
                var msg = xhr.responseJSON ? xhr.responseJSON.message : 'Error saving owner.';
                alert(msg);
            },
            complete: function () { $btn.prop('disabled', false).text('Save'); }
        });
    });

    /* ─── Save Draft ─── */
    $('#formAddOwner').find('[data-action="draft"]').on('click', function () {
        $('#formAddOwner').find('[name="is_draft"]').val('1');
        $('#formAddOwner').submit();
    });
})();
</script>
@endpush