<div>
    <div class="row row-flex row-cards-dashboard mx-1">
        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 col-cards-dashboard px-1">
            <div class="card card-dashboard">
                <div class="card-header bg-info">
                    <h5 class="card-title">Clientes en espera <br>por contactar</h5>
                    <h3 class="card-value">{{ $quotes_card1->count() }}</h3>
                </div>
                <div class="card-body">
                    @if ($quotes_card1->count())
                        @foreach ($quotes_card1 as $quote)
                            <div class="card-item">
                                ({{ $quote->fullname }}) <br>
                                <a href="{{ url('cotizaciones/ver/'.$quote->id) }}">{{ $quote->code }}</a> - {{ $quote->user->fullname }}
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-light my-4" role="alert">
                            No se encontraron registros
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 col-cards-dashboard px-1">
            <div class="card card-dashboard">
                <div class="card-header bg-danger">
                    <h5 class="card-title">Cotizaciones pendientes <br>por enviar</h5>
                    <h3 class="card-value">{{ $quotes_card2->count() }}</h3>
                </div>
                <div class="card-body">
                    @if ($quotes_card2->count())
                        @foreach ($quotes_card2 as $quote)
                            <div class="card-item">
                                ({{ $quote->fullname }}) <br>
                                <a href="{{ url('cotizaciones/ver/'.$quote->id) }}">{{ $quote->code }}</a> - {{ $quote->user->fullname }}
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-light my-4" role="alert">
                            No se encontraron registros
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 col-cards-dashboard px-1">
            <div class="card card-dashboard">
                <div class="card-header bg-success">
                    <h5 class="card-title">Clientes en espera <br>de aprobación</h5>
                    <h3 class="card-value">{{ $quotes_card3->count() }}</h3>
                </div>
                <div class="card-body">
                    @if ($quotes_card3->count())
                        @foreach ($quotes_card3 as $quote)
                            <div class="card-item">
                                ({{ $quote->fullname }}) <br>
                                <a href="{{ url('cotizaciones/ver/'.$quote->id) }}">{{ $quote->code }}</a> - {{ $quote->user->fullname }}
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-light my-4" role="alert">
                            No se encontraron registros
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 col-cards-dashboard px-1">
            <div class="card card-dashboard">
                <div class="card-header bg-warning">
                    <h5 class="card-title">Clientes en espera <br>de más información</h5>
                    <h3 class="card-value">{{ $quotes_card4->count() }}</h3>
                </div>
                <div class="card-body">
                    @if ($quotes_card4->count())
                        @foreach ($quotes_card4 as $quote)
                            <div class="card-item">
                                ({{ $quote->fullname }}) <br>
                                <a href="{{ url('cotizaciones/ver/'.$quote->id) }}">{{ $quote->code }}</a> - {{ $quote->user->fullname }}
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-light my-4" role="alert">
                            No se encontraron registros
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 col-cards-dashboard px-1">
            <div class="card card-dashboard">
                <div class="card-header bg-primary">
                    <h5 class="card-title">Pólizas aprobadas <br>por emitir</h5>
                    <h3 class="card-value">{{ $quotes_card5->count() }}</h3>
                </div>
                <div class="card-body">
                    @if ($quotes_card5->count())
                        @foreach ($quotes_card5 as $quote)
                            <div class="card-item">
                                ({{ $quote->fullname }}) <br>
                                <a href="{{ url('cotizaciones/ver/'.$quote->id) }}">{{ $quote->code }}</a> - {{ $quote->user->fullname }}
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-light my-4" role="alert">
                            No se encontraron registros
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row row-flex mx-1 row-cards-dashboard">
        <div class="col-lg-7 px-1 col-card-calendar">
            <div class="card card-calendar">
                <div class="card-header border-bottom">
                    <h5 class="card-title">Recordatorios</h5>
                    @livewire('calendar')
                </div>
            </div>
        </div>

        <div class="col-lg-5 px-1 col-card-search">
            <div class="card card-search">
                <div class="card-header border-bottom">
                    <h5 class="card-title">Consulta de asegurados</h5>
                </div>
                @livewire('policyholders')
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div wire:ignore.self class="modal fade" id="calendarModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="calendarModalLabel" wire:ignore>Agregar Evento</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row">
                        <div class="col">
                            <div wire:ignore id="calendarModalAlert" class="alert alert-danger mb-4 d-none" role="alert"></div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col">
                            <div class="form-group">
                                <label for="">Nombre del evento</label>
                                <input wire:ignore type="text" class="form-control" name="title" placeholder="Nombre del evento">
                                <input wire:ignore type="hidden" name="type">
                                <input wire:ignore type="hidden" name="start">
                                <input wire:ignore type="hidden" name="end">
                                <input wire:ignore type="hidden" name="id">
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="">Fecha del evento</label>
                                <input wire:ignore type="text" class="form-control datepicker" name="fecha" placeholder="Fecha">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="">Desde</label>
                                <input wire:ignore type="text" class="form-control timepicker" name="desde" placeholder="Desde">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="">Hasta</label>
                                <input wire:ignore type="text" class="form-control timepicker" name="hasta" placeholder="Hasta">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <div>
                        <button wire:ignore type="button" class="btn btn-danger d-none" id="calendarModalDelete">Eliminar</button>
                    </div>
                    <div>
                        <button wire:ignore type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button wire:ignore type="button" class="btn btn-primary" id="calendarModalSubmit" wire:ignore>Agregar Evento</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('js')
    <script>
        document.addEventListener('livewire:load', function () {
            setInterval(function() {
                @this.checkNotifications();
            }, 10000);
        });
    </script>
@endsection
