@extends('layouts.app')

@section('title', 'Customers')

@section('content')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => route('dashboard')],
        ['label' => 'Customers'],
    ]" />

    <x-page-header title="Customers" subtitle="Manage customers">
        @can('create', \App\Models\Customer::class)
            <a href="{{ route('customers.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg me-1"></i> Add Customer
            </a>
        @endcan
    </x-page-header>

    <div class="vem-filter-bar">
        <form method="GET" action="{{ route('customers.index') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label" for="search">Search</label>
                <input type="search" name="search" id="search" class="form-control form-control-sm" value="{{ request('search') }}" placeholder="Name, email, phone...">
            </div>
            <div class="col-md-3">
                <label class="form-label" for="customer_type">Type</label>
                <select name="customer_type" id="customer_type" class="form-select form-select-sm">
                    <option value="">All types</option>
                    @foreach (\App\Enums\CustomerType::cases() as $type)
                        <option value="{{ $type->value }}" @selected(request('customer_type') === $type->value)>{{ $type->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label" for="status">Status</label>
                <select name="status" id="status" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="active" @selected(request('status') === 'active')>Active</option>
                    <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                <a href="{{ route('customers.index') }}" class="btn btn-outline-secondary btn-sm">Reset</a>
            </div>
        </form>
    </div>

    <x-card flush>
        @if ($customers->isEmpty())
            <x-empty-state icon="people" title="No customers yet" description="Add customers to start creating bookings and documents.">
                @can('create', \App\Models\Customer::class)
                    <a href="{{ route('customers.create') }}" class="btn btn-primary btn-sm">Add Customer</a>
                @endcan
            </x-empty-state>
        @else
            <x-table :headers="['Name', 'Type', 'Contact', 'Phone', 'Status', 'Actions']">
                @foreach ($customers as $customer)
                    <tr>
                        <td><a href="{{ route('customers.show', $customer) }}" class="fw-medium">{{ $customer->name }}</a></td>
                        <td>{{ $customer->customer_type->label() }}</td>
                        <td>{{ $customer->contact_person ?? '—' }}</td>
                        <td>{{ $customer->phone ?? '—' }}</td>
                        <td><x-badge :status="$customer->is_active ? 'active' : 'inactive'" :label="$customer->is_active ? 'Active' : 'Inactive'" /></td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('customers.show', $customer) }}" class="btn btn-outline-primary">View</a>
                                @can('update', $customer)
                                    <a href="{{ route('customers.edit', $customer) }}" class="btn btn-outline-secondary">Edit</a>
                                @endcan
                            </div>
                        </td>
                    </tr>
                @endforeach
            </x-table>
            @if ($customers->hasPages())
                <div class="p-3 border-top">{{ $customers->links() }}</div>
            @endif
        @endif
    </x-card>
@endsection
