@push('title')
    Customer Management
@endpush
<x-app-layout>

    @can('view_customer_management')
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Customers ({{count($customers)}})</h3>
            </div>
            <div class="card-body">

                <div class="table-responsive text-wrap">

                    <table class="table table-striped table-borderless">
                        <thead class="table-dark">
                            <tr>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Spent</th>
                                <th>Orders Count</th>
                                <th>Status</th>
                                <th class="text-align-right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($customers as $customer)
                                <tr>
                                    <td>
                                        @if ($customer->profile_picture)
                                            <img src="{{ asset('assets/img/avatars/' . $customer->profile_picture) }}" alt
                                                class="w-px-40 h-auto rounded-circle" />
                                        @else
                                            <img src="{{ asset('assets/img/avatars/avt2.png') }}" alt
                                                class="w-px-40 h-auto rounded-circle" />
                                        @endif
                                    </td>
                                    <td>{{ $customer->name ?? 'System' }}</td> <!-- Show user name -->
                                    <td>{{ $customer->email }}</td>
                                    <td>{{ $customer->customerInfo->phone ?? 'N/A' }}</td>
                                    <td>{{ number_format($customer->orders->sum('total_amount'), 2) }} {{$config->currancy}}</td>
                                    <td>{{ $customer->orders->count()}}</td>
                                    <td>
                                        @if ($customer->is_blocked)
                                            <span class="badge bg-label-danger">Blocked</span>
                                        @else
                                            <span class="badge bg-label-success">Active</span>
                                        @endif
                                    </td>
                                    <td class="text-right text-nowrap justify-content-end pr-0"
                                        style="display: table-cell !important;text-align: right !important;">
                                        @can('view_customer_management')
                                            <a href="{{ route('customers.show', ['id' => $customer->id]) }}"
                                                class="btn btn-icon btn-info mr-1 mb-1">
                                                <i class="bx bx-show"></i>
                                            </a>
                                        @endcan
                                        @can('block_customer_management')
                                            
                                            <a href="{{ route('customers.block.unblock', ['id' => $customer->id]) }}"
                                                class="btn btn-icon @if($customer->is_blocked) btn-danger @else btn-success  @endif mr-1 mb-1">
                                                @if(!$customer->is_blocked) <i class='bx bxs-lock-open-alt'></i> @else <i class='bx bxs-lock-alt'></i>  @endif
                                                
                                            </a>
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">No customers found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                    <div class="mt-4">
                        {{ $customers->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <script>
        if ($.fn.select2) {
            $('#select2Primary').select2({
                theme: 'classic'
            });
        } else {
            console.error("Select2 is not loaded");
        }
        $("#success-alert").fadeTo(5000, 500).slideUp(500, function() {
            $("#success-alert").slideUp(500);
        });
    </script>
</x-app-layout>