@php
    $columns = [
        [
            'label' => 'Evento',
            'width' => 'w-[150px]',
            'render' => fn($event) => e($event['name_event']),
        ],
        [
            'label' => 'Tipo evento',
            'width' => 'w-[150px]',
            'render' => fn($event) => e($event['name_lead_type']),
        ],
        [
            'label' => 'Usuario',
            'width' => 'w-[150px]',
            'render' => fn($event) => e($event['full_name_user_target']),
        ],
        [
            'label' => 'Estado',
            'width' => 'w-auto',
            'isHtml' => true,
            'render' => function ($item) {
                $html = '';
                if ($item['status_pipeline']) {
                    $backgroundColor = $item['status_pipeline']->background_color;
                    $color = $item['status_pipeline']->color;
                    $nameStatus = $item['status_pipeline']->name_status;

                    $html = '<p class="inline-flex items-center p-2 text-parrafo gap-x-2 rounded-3xl js-item-style-container"
                                                                     style="color: ' . $color . '; background-color: ' . $backgroundColor . ';">';
                    $html .= '<span class="block w-2 h-2 rounded-full bg-current"></span>';
                    $html .= '<span class="">' . e($nameStatus) . '</span>';
                    $html .= '</p>';
                }
                return $html;
            },
        ],
        [
            'label' => 'Venue',
            'width' => 'w-[150px]',
            'render' => fn($event) => e($event['venue_name']),
        ],
    ];
    $editRoute = 'leads.edit';
@endphp
<x-layouts.auth-layout>
    <div class="max-w-lg">
        <h2 class="text-size-title text-black mb-4">Leads</h2>
        <p class="text-accent text-parrafo">Administra y da seguimiento a cada solicitud para convertirla en una
            celebración única en Punta Mita.</p>
    </div>
    <div class="mt-6 md:mt-8">
        <div class="flex flex-col md:flex-row md:justify-between">
            <div class="flex flex-col md:flex-row gap-4">
                <x-controls.select name="type_event" placeholder="Tipo de evento" />
                <x-controls.select name="state_event" placeholder="Estado" />
            </div>
            <x-buttons.button href="{{ route('leads.create') }}" variant="add" icon="plus">Agregar nuevo
                lead</x-buttons.button>
        </div>
    </div>
    <div class="mt-6 md:mt-8">
        <x-tables.table-crud :columns="$columns" :editRoute="$editRoute" :items="$listLeads" />
    </div>
</x-layouts.auth-layout>