@extends('adminlte::page')

@section('title', 'Listas de Clientes Frecuentes')
@section('content_header')
    <h1>Listas de Clientes Frecuentes</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">
                        <i class="fas fa-list"></i> Listas de Clientes Frecuentes
                    </h3>
                    <div class="card-tools">
                        <a href="{{ route('lista-clientes-frecuentes.create') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus"></i> Nueva Lista
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            {{ session('success') }}
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            {{ session('error') }}
                        </div>
                    @endif



                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre</th>
                                    <th>Descripción</th>
                                    <th>Configuración</th>
                                    <th>Clientes</th>
                                    <th>Estado</th>
                                    <th>Última Actualización</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($listas as $lista)
                                    <tr>
                                        <td>{{ $lista->id }}</td>
                                        <td>
                                            <strong>{{ $lista->nombre_lista }}</strong>
                                        </td>
                                        <td>{{ $lista->descripcion ?: 'Sin descripción' }}</td>
                                        <td>
                                            <small>
                                                <strong>Días:</strong> {{ $lista->dias_historial }}<br>
                                                <strong>Min. despachos:</strong> {{ $lista->minimo_pedidos }}<br>
                                                <strong>Máx. clientes:</strong> {{ $lista->maximo_clientes }}
                                            </small>
                                        </td>
                                        <td>
                                            <span class="badge badge-info">{{ $lista->detalles_count }}</span>
                                        </td>
                                        <td>
                                            @if($lista->estado)
                                                <span class="badge badge-success">Activa</span>
                                            @else
                                                <span class="badge badge-secondary">Inactiva</span>
                                            @endif
                                        </td>
                                        <td>
                                            <small>{{ $lista->updated_at->format('d/m/Y H:i') }}</small>
                                        </td>
                                        <td>

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    Acciones
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a href="{{ route('lista-clientes-frecuentes.show', $lista) }}"
                                                        class="dropdown-item" title="Ver detalles"> Ver detalles
                                                    </a>

                                                    <a href="{{ route('lista-clientes-frecuentes.edit', $lista) }}"
                                                        class="dropdown-item" title="Editar"> Editar
                                                    </a>

                                                    <a href="{{ route('lista-clientes-frecuentes.estadisticas', $lista) }}"
                                                        class="dropdown-item" title="Estadísticas"> Estadísticas
                                                    </a>


                                                </div>
                                            </div>
 <!--
                                            <div class="btn-group" role="group">


                                                <button type="button"
                                                        class="btn btn-success btn-sm actualizar-lista"
                                                        data-id="{{ $lista->id }}"
                                                        title="Actualizar lista">
                                                    <i class="fas fa-sync-alt"></i>
                                                </button>


                                                <button type="button"
                                                        class="btn btn-{{ $lista->estado ? 'warning' : 'success' }} btn-sm cambiar-estado"
                                                        data-id="{{ $lista->id }}"
                                                        data-estado="{{ $lista->estado }}"
                                                        title="{{ $lista->estado ? 'Desactivar' : 'Activar' }}">
                                                    <i class="fas fa-{{ $lista->estado ? 'pause' : 'play' }}"></i>
                                                </button>

                                                @if(!$lista->estado || $listas->where('estado', true)->count() > 1)
                                                    <button type="button"
                                                            class="btn btn-danger btn-sm eliminar-lista"
                                                            data-id="{{ $lista->id }}"
                                                            data-nombre="{{ $lista->nombre_lista }}"
                                                            title="Eliminar">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                @endif

                                            </div>
                                             -->
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">
                                            <p class="text-muted">No hay listas de clientes frecuentes creadas.</p>
                                            <a href="{{ route('lista-clientes-frecuentes.create') }}" class="btn btn-primary">
                                                <i class="fas fa-plus"></i> Crear primera lista
                                            </a>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmación para eliminar -->
<div class="modal fade" id="modalEliminar" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar eliminación</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>¿Está seguro de que desea eliminar la lista "<strong id="nombreListaEliminar"></strong>"?</p>
                <p class="text-danger"><small>Esta acción no se puede deshacer.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <form id="formEliminar" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Eliminar</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Actualizar lista
    $('.actualizar-lista').click(function() {
        const id = $(this).data('id');
        const btn = $(this);
        const icon = btn.find('i');

        btn.prop('disabled', true);
        icon.removeClass('fa-sync-alt').addClass('fa-spinner fa-spin');

        $.ajax({
            url: `/lista-clientes-frecuentes/${id}/actualizar`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    setTimeout(() => location.reload(), 1500);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                toastr.error('Error al actualizar la lista');
            },
            complete: function() {
                btn.prop('disabled', false);
                icon.removeClass('fa-spinner fa-spin').addClass('fa-sync-alt');
            }
        });
    });

    // Cambiar estado
    $('.cambiar-estado').click(function() {
        const id = $(this).data('id');
        const estado = $(this).data('estado');
        const btn = $(this);

        $.ajax({
            url: `/lista-clientes-frecuentes/${id}/cambiar-estado`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    setTimeout(() => location.reload(), 1500);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                toastr.error('Error al cambiar el estado');
            }
        });
    });

    // Eliminar lista
    $('.eliminar-lista').click(function() {
        const id = $(this).data('id');
        const nombre = $(this).data('nombre');

        $('#nombreListaEliminar').text(nombre);
        $('#formEliminar').attr('action', `/lista-clientes-frecuentes/${id}`);
        $('#modalEliminar').modal('show');
    });
});
</script>
@endpush