@extends('adminlte::page')

@section('title', 'Crear Lista de Clientes Frecuentes')

@section('content_header')
    <h1>Crear Lista 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-plus"></i> Crear Nueva Lista de Clientes Frecuentes
                    </h3>

                </div>
                <div class="card-body">
                    <form action="{{ route('lista-clientes-frecuentes.store') }}" method="POST" id="formCreate">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nombre_lista">Nombre de la Lista <span class="text-danger">*</span></label>
                                    <input type="text"
                                           class="form-control @error('nombre_lista') is-invalid @enderror"
                                           id="nombre_lista"
                                           name="nombre_lista"
                                           value="{{ old('nombre_lista') }}"
                                           required
                                           maxlength="100"
                                           placeholder="Ej: Clientes VIP">
                                    @error('nombre_lista')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="estado">Estado</label>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox"
                                               class="custom-control-input"
                                               id="estado"
                                               name="estado"
                                               value="1"
                                               {{ old('estado') ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="estado">
                                            Marcar como lista activa
                                        </label>
                                    </div>
                                    <small class="form-text text-muted">
                                        Solo una lista puede estar activa a la vez. La lista activa será la que se use por defecto.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="descripcion">Descripción</label>
                            <textarea class="form-control @error('descripcion') is-invalid @enderror"
                                      id="descripcion"
                                      name="descripcion"
                                      rows="3"
                                      placeholder="Descripción opcional de la lista">{{ old('descripcion') }}</textarea>
                            @error('descripcion')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="dias_historial">Días de Historial <span class="text-danger">*</span></label>
                                    <input type="number"
                                           class="form-control @error('dias_historial') is-invalid @enderror"
                                           id="dias_historial"
                                           name="dias_historial"
                                           value="{{ old('dias_historial', 30) }}"
                                           min="1"
                                           max="365"
                                           required>
                                    <small class="form-text text-muted">
                                        Número de días hacia atrás para considerar en el historial de <b>despachos</b>.
                                    </small>
                                    @error('dias_historial')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="minimo_pedidos">Mínimo de Despachos <span class="text-danger">*</span></label>
                                    <input type="number"
                                           class="form-control @error('minimo_pedidos') is-invalid @enderror"
                                           id="minimo_pedidos"
                                           name="minimo_pedidos"
                                           value="{{ old('minimo_pedidos', 3) }}"
                                           min="1"
                                           max="100"
                                           required>
                                    <small class="form-text text-muted">
                                        Número mínimo de <b>despachos</b> que debe tener un cliente para ser considerado frecuente.
                                    </small>
                                    @error('minimo_pedidos')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="maximo_clientes">Máximo de Clientes <span class="text-danger">*</span></label>
                                    <input type="number"
                                           class="form-control @error('maximo_clientes') is-invalid @enderror"
                                           id="maximo_clientes"
                                           name="maximo_clientes"
                                           value="{{ old('maximo_clientes', 20) }}"
                                           min="1"
                                           max="100"
                                           required>
                                    <small class="form-text text-muted">
                                        Número máximo de clientes que se incluirán en la lista.
                                    </small>
                                    @error('maximo_clientes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-warning mt-3">
                            <strong><i class="fas fa-exclamation-triangle"></i> Importante</strong>
                            <ul class="mb-0">
                                <li>Al guardar los cambios, la lista se actualizará automáticamente con los nuevos criterios.</li>
                                <li>Los clientes que ya no cumplan los criterios serán removidos de la lista.</li>
                                <li>Los clientes que ahora cumplan los criterios serán agregados a la lista.</li>
                                <li>La actualización puede tomar unos segundos dependiendo de la cantidad de datos.</li>
                                <li><b>La lógica de la lista ahora se basa en los despachos reales de los clientes, no en los pedidos.</b></li>
                            </ul>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary mr-3">
                                <i class="fas fa-save"></i> Crear Lista
                            </button>
                            <a href="{{ route('lista-clientes-frecuentes.index') }}" class="btn btn-warning">
                                Lista de Clientes Frecuentes
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Validación del formulario
    $('#formCreate').submit(function(e) {
        const dias = parseInt($('#dias_historial').val());
        const minimo = parseInt($('#minimo_pedidos').val());
        const maximo = parseInt($('#maximo_clientes').val());

        if (dias < 1 || dias > 365) {
            e.preventDefault();
            toastr.error('Los días de historial deben estar entre 1 y 365');
            return false;
        }

        if (minimo < 1 || minimo > 100) {
            e.preventDefault();
            toastr.error('El mínimo de pedidos debe estar entre 1 y 100');
            return false;
        }

        if (maximo < 1 || maximo > 100) {
            e.preventDefault();
            toastr.error('El máximo de clientes debe estar entre 1 y 100');
            return false;
        }

        // Mostrar loading
        const btn = $(this).find('button[type="submit"]');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Creando...');
    });

    // Tooltips
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
@endpush