@extends('layouts.admin')

@section('title', 'Customers')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Customers <span class="page-title-count">({{ $customers->total() ?? 0 }})</span></h1>
    </div>
    <div class="page-actions">
        <a href="{{ route('admin.customers.create') }}" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            Create Customer
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <form method="GET" action="{{ route('admin.customers') }}" class="filter-bar">
            <div class="filter-search">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M12 12l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name, email, username, account..." class="filter-search-input">
            </div>
            <div class="filter-group">
                <select name="status" class="filter-select">
                    <option value="">All Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="suspended" {{ request('status') === 'suspended' ? 'selected' : '' }}>Suspended</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
            @if(request('search') || request('status'))
            <a href="{{ route('admin.customers') }}" class="btn btn-outline btn-sm">Clear</a>
            @endif
        </form>
    </div>

    @if($customers->isNotEmpty())
    <form method="POST" action="{{ route('admin.customers.bulk') }}" id="bulk-delete-form">
        @csrf
        @method('DELETE')
        <div class="card-header" style="border-top: 1px solid var(--border, #e2e8f0);">
            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete all selected customers and all their data? This cannot be undone.')" disabled id="bulk-delete-btn">
                Delete Selected
            </button>
        </div>
    </form>
    @endif

    <x-data-table :emptyMessage="'No customers found.'" :paginator="$customers ?? null">
        <x-slot:thead>
            <th style="width: 40px;">
                @if($customers->isNotEmpty())
                <input type="checkbox" class="form-checkbox" id="select-all" title="Select all on page">
                @endif
            </th>
            <th>Customer</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Account #</th>
            <th>Status</th>
            <th>Role</th>
            <th>Joined</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($customers ?? [] as $customer)
            <tr>
                <td>
                    <input type="checkbox" class="form-checkbox bulk-check" name="ids[]" value="{{ $customer->id }}" form="bulk-delete-form">
                </td>
                <td>
                    <div class="table-user">
                        <div class="table-avatar table-avatar-sm">
                            @if($customer->avatar)
                            <img src="{{ $customer->avatar }}" alt="{{ $customer->name }}">
                            @else
                            <span>{{ strtoupper(substr($customer->name, 0, 1)) }}</span>
                            @endif
                        </div>
                        <span class="text-semibold">{{ $customer->name }}</span>
                    </div>
                </td>
                <td>{{ $customer->email }}</td>
                <td>{{ $customer->phone ?? 'N/A' }}</td>
                <td><span class="text-mono">{{ $customer->account_number ?? 'N/A' }}</span></td>
                <td>
                    <span class="badge badge-{{ $customer->status === 'active' ? 'green' : 'red' }}">
                        {{ ucfirst($customer->status) }}
                    </span>
                </td>
                <td><span class="badge badge-blue">{{ ucfirst($customer->role?->slug ?? 'customer') }}</span></td>
                <td>{{ $customer->created_at->format('M d, Y') }}</td>
                <td>
                    <div class="table-actions">
                        <a href="{{ route('admin.customers.show', $customer->id) }}" class="btn btn-sm btn-outline" title="View">
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4z" stroke="currentColor" stroke-width="1.5"/><circle cx="7" cy="7" r="2" stroke="currentColor" stroke-width="1.5"/></svg>
                        </a>
                        <a href="{{ route('admin.customers.edit', $customer->id) }}" class="btn btn-sm btn-outline" title="Edit">
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10 2l2 2-8 8H2v-2l8-8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </a>
                        <a href="{{ route('admin.messages.compose', ['customer' => $customer->id]) }}" class="btn btn-sm btn-outline" title="Send Message">
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1.5 10.5L13 1 8 12.5 6 8 1.5 10.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </a>
                        <form method="POST" action="{{ route('admin.customers.impersonate', $customer->id) }}" class="inline">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline" title="Login as {{ $customer->name }}">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7s2.2-3.5 5.5-3.5S12 7 12 7 9.8 10.5 6.5 10.5 1 7 1 7z" stroke="currentColor" stroke-width="1.5"/><circle cx="6.5" cy="7" r="1.7" stroke="currentColor" stroke-width="1.5"/></svg>
                            </button>
                        </form>
                        @if($customer->status === 'active')
                        <form method="POST" action="{{ route('admin.customers.suspend', $customer->id) }}" class="inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-sm btn-outline btn-danger" title="Suspend" onclick="return confirm('Are you sure you want to suspend this customer?')">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M4 7h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                            </button>
                        </form>
                        @else
                        <form method="POST" action="{{ route('admin.customers.activate', $customer->id) }}" class="inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-sm btn-outline btn-green" title="Activate" onclick="return confirm('Are you sure you want to activate this customer?')">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M5 7l2 2 3-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </button>
                        </form>
                        @endif
                        <form method="POST" action="{{ route('admin.customers.destroy', $customer->id) }}" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline btn-danger" title="Delete" onclick="return confirm('Are you sure you want to permanently delete this customer and all their data?')">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 4h8M6 4V2.5A.5.5 0 016.5 2h1A.5.5 0 018 2.5V4M4.5 4l.5 8h4l.5-8M5.5 6l.3 4M8.2 6l-.3 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="9">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><circle cx="18" cy="17" r="5" stroke="#94A3B8" stroke-width="1.5"/><path d="M8 38c0-4.4 4.5-8 10-8s10 3.6 10 8" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/><circle cx="30" cy="18" r="4" stroke="#94A3B8" stroke-width="1.5"/><path d="M30 26c3 0 6 1.5 6 4.5" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                        <p>No customers found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.bulk-check');
    const bulkBtn = document.getElementById('bulk-delete-btn');

    if (!selectAll || !bulkBtn) return;

    function updateBulkState() {
        const checked = document.querySelectorAll('.bulk-check:checked');
        bulkBtn.disabled = checked.length === 0;
        if (selectAll) {
            selectAll.checked = checkboxes.length > 0 && checked.length === checkboxes.length;
        }
    }

    checkboxes.forEach(cb => cb.addEventListener('change', updateBulkState));
    selectAll.addEventListener('change', function () {
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateBulkState();
    });
})();
</script>
@endpush