@php
    $Authuser = Auth::user();
    $canContactEdit = $Authuser && (
        ($module_type === 'admin' && $Authuser->hasPermission('admin.users.contacts.edit')) ||
        ($module_type === 'vendor' && $Authuser->hasPermission('vendor.users.contacts.edit')) ||
        ($module_type === 'customer' && $Authuser->hasPermission('customer.users.contacts.edit'))
    );

    // Check delete permission
    $canContactDelete = $Authuser && (
        ($module_type === 'admin' && $Authuser->hasPermission('admin.users.contacts.delete')) ||
        ($module_type === 'vendor' && $Authuser->hasPermission('vendor.users.contacts.delete')) ||
        ($module_type === 'customer' && $Authuser->hasPermission('customer.users.contacts.delete'))
    );
@endphp

<table class="table table-bordered table-hover">
    <thead class="bg-light">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone</th>
            <th>Email</th>
            <th width="120">Actions</th>
        </tr>
    </thead>
    <tbody>
        @forelse($contacts as $index => $c)
            <tr>
                <td>{{ $contacts->firstItem() + $index }}</td>
                <td>{{ $c->first_name }}</td>
                <td>{{ $c->last_name }}</td>
                <td>{{ $c->phone }}</td>
                <td>{{ $c->email }}</td>
                <td class="text-center">

                    @if ($canContactEdit)
                        <a href="javascript:void(0)"
                            onclick="editDistContactdetail({{ $c->id }}, '{{ $c->first_name }} {{ $c->last_name }}')"
                            title="Edit" class="text-primary me-2">
                            <i class="las la-edit" style="font-size: 17px"></i>
                        </a>
                    @endif

                    @if ($canContactDelete)
                        <a href="javascript:void(0)"
                            onclick="openDeleteContactModal({{ $c->id }}, '{{ addslashes($c->first_name . ' ' . $c->last_name) }}')"
                            title="Delete" class="text-danger">
                            <i class="las la-trash" style="font-size: 17px"></i>
                        </a>
                    @endif


                </td>
            </tr>
        @empty
            <tr>
                <td colspan="6" class="text-center text-muted py-4">
                    No contacts found.
                </td>
            </tr>
        @endforelse
    </tbody>
</table>

<div class="d-flex justify-content-between align-items-center mt-3">
    <div>
        Showing {{ $contacts->firstItem() }} to {{ $contacts->lastItem() }} of {{ $contacts->total() }} entries
    </div>
    <div>
        {!! $contacts->appends(request()->query())->links('pagination::bootstrap-5') !!}
    </div>
</div>

<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="deleteContactModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-status bg-danger"></div>

            <div class="modal-body text-center py-4">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                <div class="mb-2">
                    <svg class="icon icon-lg text-danger" xmlns="http://www.w3.org/2000/svg" width="48" height="48"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M18 6L6 18"></path>
                        <path d="M6 6l12 12"></path>
                    </svg>
                </div>

                <h3 class="mt-3">Delete Contact?</h3>

                <div class="text-muted text-break">
                    Are you sure you want to <strong>permanently delete</strong>
                    contact <strong id="deleteContactName"></strong>?<br>
                    <small class="text-danger">This action cannot be undone.</small>
                </div>
            </div>

            <div class="modal-footer">
                <div class="w-100">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="w-100 btn btn-danger" id="confirmDeleteContactBtn">
                                Yes, Delete
                            </button>
                        </div>
                        <div class="col">
                            <button type="button" class="w-100 btn btn-secondary" data-bs-dismiss="modal">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>