@extends('layouts.landing')

@section('head')
    @include('layouts._partials.tablaStyle')
@endsection
@section('title',"Inicio")

@section('content')

<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">Prospectos</h6>
                        @can('prospecto.create')
                        <button onclick="Livewire.dispatch('create-prospecto')" class="d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Agregar</button>
                        @endcan


            </div>
        </div>

        <div class="card-body row">
                <div class="col-sm-2 overflow-auto" style="height: 70vh">
                    <div class="list-group">
                    @forelse ($prospectos as $prospecto)

                    @foreach ($prospecto->prospectos as $prospect)
                    <a data-prospect-id="{{ $prospect->id }}"
                        class="list-group-item list-group-item-action"
                        onclick="Livewire.dispatch('edit-prospecto', { id: {{ $prospect->id }},user: {{ $prospecto->id }}})">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{{ $prospecto->name }}</h5>
                            <div class="p-3">
                                <i class="fa-duotone fa-regular fa-circle-user fa-2xl"></i>
                            </div>
                        </div>
                        <small>And some small print.</small>
                    </a>
                        @endforeach


                    @empty
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">Sin elementos</h5>
                            <div class="p-3"><i class="fa-duotone fa-solid fa-brake-warning fa-beat-fade fa-2xl" style="--fa-primary-color: #872222; --fa-secondary-color: #f00000;"></i></div>
                            </div>
                            <p class="mb-1"></p>
                            <small>Agrega un prospecto...</small>
                        </a>
                    @endforelse
                    </div>
                </div>

                <div class="col-sm-10 overflow-auto" style="height: 70vh">
                    @livewire('data-prospecto')
                </div>

                     @livewire('modal-prospecto')

        </div>
    </div>
</div>

@endsection


@section('scripts')
    @include('layouts._partials.tablaScript')
    @include('layouts._partials.delete')
    <script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('mark-active-prospect', ({ id }) => {

            document.querySelectorAll('.list-group-item')
                .forEach(item => item.classList.remove('active'));

            const activeItem = document.querySelector(
                `[data-prospect-id="${id}"]`
            );

            if (activeItem) {
                activeItem.classList.add('active');
            }
        });

    });
</script>


@endsection