@extends('adminlte::page')

@section('title', 'Detalles de Lista: ' . $lista->nombre_lista)

@section('content_header')
    <h1>Detalles de Lista: {{ $lista->nombre_lista }}</h1>
@stop

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                         Detalles de Lista
                    </h3>

                </div>
                <div class="card-body">
                    <!-- Información de la lista -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5><i class="fas fa-info-circle"></i> Información General</h5>
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>ID:</strong></td>
                                    <td>{{ $lista->id }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Nombre:</strong></td>
                                    <td>{{ $lista->nombre_lista }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Descripción:</strong></td>
                                    <td>{{ $lista->descripcion ?: 'Sin descripción' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Estado:</strong></td>
                                    <td>
                                        @if($lista->estado)
                                            <span class="badge badge-success">Activa</span>
                                        @else
                                            <span class="badge badge-secondary">Inactiva</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5><i class="fas fa-cog"></i> Configuración</h5>
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Días de Historial:</strong></td>
                                    <td>{{ $lista->dias_historial }} días</td>
                                </tr>
                                <tr>
                                    <td><strong>Mínimo de Pedidos:</strong></td>
                                    <td>{{ $lista->minimo_pedidos }} pedidos</td>
                                </tr>
                                <tr>
                                    <td><strong>Máximo de Clientes:</strong></td>
                                    <td>{{ $lista->maximo_clientes }} clientes</td>
                                </tr>
                                <tr>
                                    <td><strong>Última Actualización:</strong></td>
                                    <td>{{ $lista->updated_at->format('d/m/Y H:i:s') }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Estadísticas rápidas -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-info"><i class="fas fa-users"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Clientes</span>
                                    <span class="info-box-number">{{ $lista->detalles->count() }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-success"><i class="fas fa-shopping-cart"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Pedidos</span>
                                    <span class="info-box-number">{{ $lista->detalles->sum('total_pedidos') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-warning"><i class="fas fa-chart-line"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Promedio por Cliente</span>
                                    <span class="info-box-number">
                                        {{ $lista->detalles->count() > 0 ? round($lista->detalles->sum('total_pedidos') / $lista->detalles->count(), 1) : 0 }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-primary"><i class="fas fa-star"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Cliente Top</span>
                                    <span class="info-box-number">
                                        {{ $lista->detalles->sortByDesc('total_pedidos')->first() ? $lista->detalles->sortByDesc('total_pedidos')->first()->total_pedidos : 0 }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Lista de clientes -->
                    <div class="row">
                        <div class="col-12">
                            <h5><i class="fas fa-list"></i> Clientes en la Lista
                                <button id="btnActualizarLista" class="btn btn-sm btn-success ml-3">
                                    <i class="fas fa-sync-alt"></i> Actualizar lista
                                </button>
                            </h5>

                            @if($lista->detalles->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Cliente</th>
                                                <th>Documento</th>
                                                <th>Teléfono</th>
                                                <th>Total Despachos</th>
                                                <th>Última Fecha Despacho</th>
                                                <th>Estado</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($lista->detalles as $index => $detalle)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>
                                                        {{ $detalle->cliente->nombre_comercial }}
                                                    </td>
                                                    <td>{{ $detalle->cliente->documento }}</td>
                                                    <td>{{ $detalle->cliente->telefono ?: 'Sin teléfono' }}</td>
                                                    <td>
                                                        <span class="badge badge-primary">{{ $detalle->total_pedidos }}</span>
                                                    </td>
                                                    <td>
                                                        <small>{{ $detalle->ultimo_pedido ? \Carbon\Carbon::parse($detalle->ultimo_pedido)->format('d/m/Y H:i') : 'N/A' }}</small>
                                                    </td>
                                                    <td>
                                                        @if($detalle->activo)
                                                            <span class="badge badge-success">Activo</span>
                                                        @else
                                                            <span class="badge badge-secondary">Inactivo</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> No hay clientes en esta lista actualmente.
                                    <br>
                                    <small>Esto puede deberse a que no hay clientes que cumplan los criterios configurados o que la lista no se ha actualizado recientemente.</small>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Acciones -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="btn-group" role="group">


                                <a href="{{ route('lista-clientes-frecuentes.estadisticas', $lista) }}"
                                   class="btn btn-info mr-3">
                                    <i class="fas fa-chart-bar"></i> Ver Estadísticas
                                </a>

                                <a href="{{ route('lista-clientes-frecuentes.index') }}" class="btn btn-warning">
                                     Lista de Clientes Frecuentes
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

$(document).ready(function() {
   $('#btnActualizarLista').click(function (e) {
    e.preventDefault();

    var btn = $(this);
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Actualizando...');
        $.ajax({
            url: '{{ route('lista-clientes-frecuentes.actualizar', $lista) }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Lista actualizada',
                    text: response.message || 'La lista se actualizó correctamente',
                    timer: 1500,
                    showConfirmButton: false
                });
                setTimeout(function() {
                    location.reload();
                }, 1200);
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'No se pudo actualizar la lista.'
                });
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fas fa-sync-alt"></i> Actualizar lista');
            }
        });

   });
});
</script>
@endsection