@extends('adminlte::page')

@section('title', 'Tutorial - Despachos')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-truck"></i> Tutorial: Cómo Registrar Despachos</h1>
        <a href="{{ route('tutoriales.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Volver a Tutoriales
        </a>
    </div>
@stop

@section('content')
<div class="container-fluid">

    <!-- Introducción -->
    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-info-circle"></i> Introducción
            </h3>
        </div>
        <div class="card-body">
            <p class="lead">
                Las <strong>Órdenes de Despacho</strong> registran la salida de aves del sistema hacia los clientes.
                Este proceso es fundamental para el control de inventario.
            </p>
            <div class="alert alert-info">
                <i class="fas fa-lightbulb"></i> <strong>Importante:</strong>
                Antes de despachar, verifica que tengas stock suficiente disponible.
            </div>
        </div>
    </div>

    <!-- Paso 1: Datos de la Orden -->
    <div class="card card-success card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-clipboard-check"></i> Paso 1: Datos de la Orden
            </h3>
        </div>
        <div class="card-body">
            <h5 class="text-primary mb-3">Información General del Despacho:</h5>

            <div class="row">
                <div class="col-md-6">
                    <div class="info-box bg-light">
                        <span class="info-box-icon bg-primary"><i class="fas fa-barcode"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text"><strong>Serie de Orden</strong> <span class="text-danger">*</span></span>
                            <span class="info-box-number">Identificador único del despacho</span>
                            <small class="text-muted">Se genera automáticamente (OD01-XXXX)</small>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="info-box bg-light">
                        <span class="info-box-icon bg-info"><i class="fas fa-calendar"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text"><strong>Fecha de Despacho</strong> <span class="text-danger">*</span></span>
                            <span class="info-box-number">Fecha de salida de las aves</span>
                            <small class="text-muted">Por defecto: fecha actual</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="info-box bg-light">
                        <span class="info-box-icon bg-success"><i class="fas fa-user-tie"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text"><strong>Cliente</strong> <span class="text-danger">*</span></span>
                            <span class="info-box-number">Selecciona el cliente destino</span>
                            <small class="text-muted">Puedes buscarlo por nombre o razón social</small>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="info-box bg-light">
                        <span class="info-box-icon bg-warning"><i class="fas fa-truck-loading"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text"><strong>Tipo de Ingreso</strong> <span class="text-danger">*</span></span>
                            <span class="info-box-number">Origen de las aves</span>
                            <small class="text-muted">CAMIÓN (nuevo ingreso) o STOCK (inventario)</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="info-box bg-light">
                        <span class="info-box-icon bg-secondary"><i class="fas fa-weight"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text"><strong>Peso Bruto (kg)</strong></span>
                            <span class="info-box-number">Peso total con jabas</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="info-box bg-light">
                        <span class="info-box-icon bg-secondary"><i class="fas fa-box"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text"><strong>Total Tara (kg)</strong></span>
                            <span class="info-box-number">Peso de las jabas vacías</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="info-box bg-light">
                        <span class="info-box-icon bg-primary"><i class="fas fa-balance-scale"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text"><strong>Peso Neto (kg)</strong></span>
                            <span class="info-box-number">Bruto - Tara = Neto</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Paso 2: Detalles de la Orden -->
    <div class="card card-warning card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-list"></i> Paso 2: Detalles del Despacho
            </h3>
        </div>
        <div class="card-body">
            <h5 class="text-primary mb-3">Agregar items al despacho:</h5>

            <p>Para cada tipo de ave que despachas, agrega un item con la siguiente información:</p>

            <div class="row">
                <div class="col-md-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <i class="fas fa-drumstick-bite fa-3x text-primary mb-2"></i>
                            <h6 class="text-primary">Presentación</h6>
                            <p class="mb-0 small">
                                Pollo Vivo, Beneficiado, etc.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <i class="fas fa-tags fa-3x text-info mb-2"></i>
                            <h6 class="text-info">Tipo de Pollo</h6>
                            <p class="mb-0 small">
                                Presa, Yugo, Criollo, etc.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <i class="fas fa-boxes fa-3x text-warning mb-2"></i>
                            <h6 class="text-warning">Cantidad Jabas</h6>
                            <p class="mb-0 small">
                                Número total de jabas
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <i class="fas fa-kiwi-bird fa-3x text-success mb-2"></i>
                            <h6 class="text-success">Cantidad Aves</h6>
                            <p class="mb-0 small">
                                Total de aves a despachar
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="callout callout-warning mt-3">
                <h5><i class="fas fa-exclamation-circle"></i> Importante:</h5>
                <ul class="mb-0">
                    <li>Si seleccionas <strong>STOCK</strong>, solo podrás despachar lo que tienes disponible</li>
                    <li>Si seleccionas <strong>CAMIÓN</strong>, puedes despachar directamente sin afectar el stock</li>
                    <li>El precio se asigna automáticamente según el cliente y tipo de pollo</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Paso 3: Opciones Adicionales -->
    <div class="card card-info card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-cog"></i> Paso 3: Opciones Adicionales
            </h3>
        </div>
        <div class="card-body">
            <h5 class="text-primary mb-3">Configuraciones del despacho:</h5>

            <div class="row">
                <div class="col-md-6">
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white">
                            <i class="fas fa-clock"></i> Fuera de Horario
                        </div>
                        <div class="card-body">
                            <p>Marca esta opción si el despacho se realiza fuera del horario regular.</p>
                            <p class="mb-0"><strong>¿Cuándo marcarla?</strong></p>
                            <ul>
                                <li>Despachos nocturnos</li>
                                <li>Despachos en días festivos</li>
                                <li>Despachos urgentes fuera de horario</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Paso 4: Guardar -->
    <div class="card card-danger card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-save"></i> Paso 4: Guardar el Despacho
            </h3>
        </div>
        <div class="card-body">
            <h5 class="text-primary mb-3">Finalizar el registro:</h5>

            <ol class="list-group list-group-numbered">
                <li class="list-group-item">
                    <strong>Revisar todos los datos:</strong> Verifica cliente, fecha y tipo de ingreso.
                </li>
                <li class="list-group-item">
                    <strong>Revisar los items:</strong> Confirma cantidades y pesos de cada tipo de ave.
                </li>
                <li class="list-group-item">
                    <strong>Verificar stock (si aplica):</strong> Si es STOCK, asegúrate de tener suficientes aves.
                </li>
                <li class="list-group-item">
                    <strong>Guardar:</strong> Haz clic en <span class="badge badge-primary">Guardar Orden de Despacho</span>
                </li>
                <li class="list-group-item">
                    <strong>Confirmación:</strong> El sistema mostrará un mensaje de éxito.
                </li>
            </ol>

            <div class="alert alert-danger mt-3">
                <i class="fas fa-exclamation-triangle"></i> <strong>Validaciones importantes:</strong>
                <ul class="mb-0">
                    <li>Debes seleccionar un cliente válido</li>
                    <li>Debes agregar al menos un item</li>
                    <li>Si es STOCK, debes tener inventario disponible</li>
                    <li>Los pesos deben ser coherentes (Neto = Bruto - Tara)</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Después de Guardar -->
    <div class="card card-purple card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-tasks"></i> Después de Guardar
            </h3>
        </div>
        <div class="card-body">
            <h5 class="text-primary mb-3">¿Qué sucede después?</h5>

            <div class="timeline">
                <div class="time-label">
                    <span class="bg-success">Despacho Guardado</span>
                </div>
                <div>
                    <i class="fas fa-check bg-success"></i>
                    <div class="timeline-item">
                        <h3 class="timeline-header">El inventario se actualiza</h3>
                        <div class="timeline-body">
                            Si seleccionaste STOCK, las aves se descuentan del inventario disponible.
                        </div>
                    </div>
                </div>
                <div>
                    <i class="fas fa-file-pdf bg-primary"></i>
                    <div class="timeline-item">
                        <h3 class="timeline-header">Imprime la Guía de Despacho</h3>
                        <div class="timeline-body">
                            Puedes descargar e imprimir la guía en formato PDF desde el listado o al finalizar el registro.
                        </div>
                    </div>
                </div>
                <div>
                    <i class="fas fa-list bg-info"></i>
                    <div class="timeline-item">
                        <h3 class="timeline-header">Consulta en el listado</h3>
                        <div class="timeline-body">
                            El despacho aparece en <strong>Listado de Despachos</strong> donde puedes ver detalles, editar o anular.
                        </div>
                    </div>
                </div>
                <div>
                    <i class="fas fa-clock bg-gray"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Operaciones Especiales -->
    <div class="card card-teal card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-tools"></i> Operaciones Especiales
            </h3>
        </div>
        <div class="card-body">
            <h5 class="text-primary mb-3">Acciones adicionales sobre despachos:</h5>

            <div class="row">
                <div class="col-md-6">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-percentage"></i> Aplicar Descuento
                            </h5>
                            <p>Puedes aplicar descuentos en peso (kg) o en cantidad de aves a un despacho ya registrado.</p>
                            <p class="mb-0"><small>Accede desde el menú de acciones del despacho</small></p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card bg-danger text-white">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-exclamation-triangle"></i> Registrar Pérdidas
                            </h5>
                            <p>Si hubo aves muertas o con problemas, puedes registrarlas como pérdidas del despacho.</p>
                            <p class="mb-0"><small>Importante para el cálculo de merma</small></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-user-edit"></i> Cambiar Cliente
                            </h5>
                            <p>Si te equivocaste de cliente, puedes cambiar el cliente destino del despacho.</p>
                            <p class="mb-0"><small>Disponible en las acciones del despacho</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Preguntas Frecuentes -->
    <div class="card card-secondary card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-question-circle"></i> Preguntas Frecuentes
            </h3>
        </div>
        <div class="card-body">
            <div id="accordion">
                <!-- Pregunta 1 -->
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
                                <i class="fas fa-chevron-right"></i> ¿Qué pasa si no tengo stock suficiente?
                            </button>
                        </h5>
                    </div>
                    <div id="collapseOne" class="collapse show" data-parent="#accordion">
                        <div class="card-body">
                            <p>Si seleccionas <strong>STOCK</strong> y no tienes suficientes aves disponibles:</p>
                            <ul>
                                <li>El sistema te mostrará un error indicando el stock disponible</li>
                                <li>Puedes reducir la cantidad a despachar</li>
                                <li>O puedes cambiar a <strong>CAMIÓN</strong> si es un ingreso directo</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Pregunta 2 -->
                <div class="card">
                    <div class="card-header" id="headingTwo">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo">
                                <i class="fas fa-chevron-right"></i> ¿Cuándo debo marcar "Fuera de Horario"?
                            </button>
                        </h5>
                    </div>
                    <div id="collapseTwo" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p>Marca esta opción cuando:</p>
                            <ul>
                                <li>El despacho se realiza fuera del horario laboral normal</li>
                                <li>La caja ya está cerrada pero necesitas registrar el despacho</li>
                                <li>Es un despacho urgente o especial</li>
                            </ul>
                            <p class="mb-0">Esto ayuda a identificar despachos especiales en los reportes.</p>
                        </div>
                    </div>
                </div>

                <!-- Pregunta 3 -->
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree">
                                <i class="fas fa-chevron-right"></i> ¿Cómo aplico un descuento al despacho?
                            </button>
                        </h5>
                    </div>
                    <div id="collapseThree" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p><strong>Proceso:</strong></p>
                            <ol>
                                <li>Ve al <strong>Listado de Despachos</strong></li>
                                <li>Localiza el despacho</li>
                                <li>Haz clic en <strong>Acciones → Generar Descuento</strong></li>
                                <li>Ingresa el descuento en kg o en cantidad de aves</li>
                                <li>Selecciona si el descuento se marca como pérdida</li>
                                <li>Guarda los cambios</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- Pregunta 4 (antes 5) -->
                <div class="card">
                    <div class="card-header" id="headingFour">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour">
                                <i class="fas fa-chevron-right"></i> ¿Puedo eliminar un despacho?
                            </button>
                        </h5>
                    </div>
                    <div id="collapseFour" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p>Sí, si tienes los permisos necesarios, puedes <strong>anular</strong> un despacho.</p>
                            <p><strong>Efectos de anular un despacho:</strong></p>
                            <ul>
                                <li>Si era tipo STOCK, las aves se devuelven al inventario</li>
                                <li>Se registra en el historial de auditoría</li>
                            </ul>
                            <p class="mb-0 text-danger"><strong>Importante:</strong> Esta acción requiere autorización y se registra en el sistema.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@stop

@section('css')
<style>
    .lead {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .info-box {
        min-height: 90px;
        margin-bottom: 15px;
    }

    .info-box-content {
        padding: 10px;
    }

    .info-box-text {
        font-size: 0.95rem;
    }

    .info-box-number {
        font-size: 0.9rem;
        font-weight: normal;
    }

    #accordion .btn-link {
        text-decoration: none;
        color: #495057;
        width: 100%;
        text-align: left;
        font-weight: 500;
    }

    #accordion .btn-link:hover {
        color: #007bff;
    }

    #accordion .btn-link i {
        transition: transform 0.3s;
    }

    #accordion .btn-link:not(.collapsed) i {
        transform: rotate(90deg);
    }

    .timeline {
        position: relative;
        margin: 0 0 30px 0;
        padding: 0;
        list-style: none;
    }

    .timeline:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #dee2e6;
        left: 31px;
        margin: 0;
    }

    .timeline > div {
        position: relative;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    .timeline > div > .timeline-item {
        box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
        border-radius: 3px;
        background: #fff;
        color: #444;
        margin-left: 60px;
        margin-right: 15px;
        padding: 0;
        position: relative;
    }

    .timeline > div > .fas,
    .timeline > div > .far,
    .timeline > div > .fab,
    .timeline > div > .fal,
    .timeline > div > .fad,
    .timeline > div > .ion {
        width: 30px;
        height: 30px;
        font-size: 15px;
        line-height: 30px;
        position: absolute;
        color: #fff;
        background: #adb5bd;
        border-radius: 50%;
        text-align: center;
        left: 18px;
        top: 0;
    }

    .timeline > div > .timeline-item > .timeline-header {
        border-bottom: 1px solid rgba(0,0,0,.125);
        color: #495057;
        font-size: 16px;
        line-height: 1.1;
        margin: 0;
        padding: 10px;
    }

    .timeline > div > .timeline-item > .timeline-body {
        padding: 10px;
    }

    .timeline > .time-label > span {
        font-weight: 600;
        padding: 5px;
        display: inline-block;
        background-color: #fff;
        border-radius: 4px;
    }

    .card-teal .card-header {
        background-color: #20c997;
        color: white;
    }

    .card-teal.card-outline {
        border-top: 3px solid #20c997;
    }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Animación para los collapse
        $('#accordion .btn-link').on('click', function() {
            var icon = $(this).find('i');
            if (icon.hasClass('fa-chevron-right')) {
                icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
            } else {
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
            }
        });
    });
</script>
@stop