@extends('adminlte::page')
@section('title', 'Devoluciones Producto')
@section('plugins.Datatables', true)
@section('plugins.Select2', true)
@section('content_header')
    <h1>Devoluciones</h1>
@stop

@section('content')


    <a href="#" class="btn btn-primary mb-3" data-toggle="modal" data-target="#devolucionModalDespachos">Nueva devolucion</a>


   <div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h1 class="card-title">Devoluciones</h1>
            </div>

            <card class="card-body">

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="searchDate">Buscar por Fecha:</label>
                        <input type="date" id="searchDate" class="form-control">
                    </div>
                    <div class="col-md-1">
                        <button id="filterButton" class="btn btn-primary" style="margin-top: 2.3rem;">Buscar</button>
                    </div>
                </div>


                <table class="table" id="table-devoluciones">
                    <thead>
                        <th>#</th>
                        <th>Orden</th>
                        <th>Cliente</th>
                        <th>Tipo de producto</th>
                        <th>Cantidad Aves</th>
                        <th>Peso Neto</th>
                        <th>Fecha</th>
                        <th>Motivo</th>
                        <th>Acción</th>
                    </thead>
                    <tbody>
                        @foreach ($devoluciones as $devolucion)
                            <tr>
                                <td>{{ $devolucion->id }}</td>
                                <td>{{ $devolucion->ordenDespacho->serie_orden }}</td>
                                <td>{{ $devolucion->cliente->razon_social }}</td>
                                <td>{{ $devolucion->tipo_pollo->descripcion }}</td>
                                <td>{{ $devolucion->cantidad }}</td>
                                <td>{{ $devolucion->peso_neto }}</td>
                                <td>{{ $devolucion->fecha }}</td>
                                <td>{{ $devolucion->motivo }}</td>
                                <td>
                                    <form action="{{ route('devoluciones.destroy', $devolucion->id ) }}">
                                        @csrf
                                        @method('delete')
                                        <button class="btn btn-danger btnDestroyDevolucion btn-sm" data-id="{{ $devolucion->id }}"> <i class="fa fa-trash"></i> Eliminar</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </card>
        </div>
    </div>
   </div>



    {{-- devolucion por orden despachos --}}
    <div class="modal fade" id="devolucionModalDespachos" tabindex="-1" role="dialog" aria-labelledby="devolucionModalDespachosLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="devolucionModalDespachosLabel">Registrar Devolución por Despacho</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('devolucion-despachos.store') }}" method="POST">
                        @csrf

                        <!-- Selección del cliente -->
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-10 mb-3">
                                    <label for="cliente_id">Cliente</label> <br>
                                    <select id="cliente_id" name="cliente_id"  class="form-control selectpicker" required data-live-search="true">
                                        <option value="">Seleccione un cliente</option>
                                        @foreach ($clientes as $cliente)
                                            <option value="{{ $cliente->id }}">{{ $cliente->nombre_comercial }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label for="">Despacho</label>
                                    <button class="btn btn-primary" id="btnBuscarDespacho"> <i class="fa fa-search"></i> Buscar</button>
                                </div>
                            </div>
                        </div>

                        <div class="message">
                            <p>Seleccionar 1 sola orden de despacho</p>
                        </div>

                        <table class="table">
                            <thead>
                                <th>#</th>
                                <th>Serie Despacho</th>
                                <th>Jabas</th>
                                <th>Cantidad Pollos</th>
                                <th>Peso Bruto</th>
                                <th>Tara</th>
                                <th>Peso Neto</th>
                                <th></th>
                            </thead>
                            <tbody class="TableVenta">
                                <!--datos jquery-->
                            </tbody>
                        </table>

                        <!-- Selección del tipo de pollo -->
                        <div class="form-group">
                            <label for="tipo_pollo_id">Tipo de Pollo</label>
                            <select class="form-control" id="tipo_pollo_id" name="tipo_pollo_id" required>
                                <option value="">Seleccione un tipo de pollo</option>
                                @foreach ($tiposPollo as $tipoPollo)
                                    <option value="{{ $tipoPollo->id }}">{{ $tipoPollo->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>




                        <div class="row">
                            <!-- Campo cantidad -->
                            <div class="col">
                                <label for="cantidad">Cantidad de Pollos</label>
                                <input type="number" class="form-control" id="cantidad" name="cantidad" required
                                    min="1" placeholder="Ingrese la cantidad de pollos" value="0">
                            </div>

                            <div class="col">
                                <!-- Campo peso neto -->
                                <div class="form-group">
                                    <label for="peso_neto">Peso Neto</label>
                                    <input type="number" class="form-control" id="peso_neto" name="peso_neto" required
                                        min="0.01" step="any" placeholder="Ingrese el peso neto">
                                </div>
                            </div>

                        </div>



                        <div class="form-group">
                            <label for="Motivo">Motivo</label>
                            <textarea name="motivo" id="motivo" cols="30" rows="4" class="form-control"></textarea>
                        </div>


                        <!-- Campo fecha -->
                        <div class="form-group">
                            <label for="fecha">Fecha</label>
                            <input type="date" class="form-control" id="fecha" name="fecha"
                                value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" required>
                        </div>

                        <!-- Botón para registrar la devolución -->
                        <button type="button" id="btnAddDevolucion" class="btn btn-primary">Registrar
                            Devolución</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


@stop

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.1/dist/css/bootstrap-select.min.css">
    <style>
        .select2-selection {
            height: 40px !important;
            width: 350px !important;
        }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.1/dist/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            // Inicializa DataTables
            var table = $('#table-devoluciones').DataTable({
                language: {
                    "url": "/js/spanish.json"
                },
                pageLength: 25
            });



            $('#btnAddDevolucion').click(function(e) {
                e.preventDefault();
                // Crear un objeto FormData con los datos del formulario
                let formData = new FormData($('#devolucionModalDespachos form')[0]);
                // Obtener el valor de despacho_id de la tabla
                let despachoId = $('#despacho_id').text();  // Obtenemos el valor de la celda
                // Agregar el valor de despacho_id al FormData
                formData.append('orden_despacho_id', despachoId);

                // Validar que todos los campos estén llenos
                if (!validarFormulario(formData)) {
                    return; // Si no es válido, detener la ejecución
                }

                // // Enviar los datos al controlador usando AJAX
                $.ajax({
                    url: '{{ route('devolucion-despachos.store') }}', // URL a la que se enviará el formulario
                    type: 'POST',
                    data: formData,
                    contentType: false, // Esto es necesario para que FormData funcione correctamente
                    processData: false, // No procesar los datos
                    success: function(response) {
                        // console.log(response);
                        // Si la solicitud fue exitosa
                        if (response.success) {
                            // Cerrar el modal
                            $('#devolucionModal').modal('hide');

                            // Mostrar mensaje de éxito o redirigir
                            Swal.fire({
                                icon: 'success',
                                title: 'Éxito',
                                text: 'Devolución registrada correctamente',
                                showConfirmButton: false,
                                timer: 1000
                            }).then(() => {
                                location.reload(); // Recarga la página después de mostrar la alerta
                            });
                        } else {
                            // Si hubo un error, mostrar el mensaje
                            Swal.fire({
                                icon: 'error',
                                title: 'Error', // Cambié 'Éxito' por 'Error' aquí
                                text: 'Hubo un error al registrar la devolución: ' + response.message, // Mostrar el mensaje de error que viene de la respuesta
                                confirmButtonText: 'Ok'
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // Manejo de errores
                        Swal.fire({
                            title: 'Información',
                            icon: 'error',
                            text: 'Hubo un error al registrar la devolución',
                            confirmButtonText: 'Ok'
                        })
                    }
                });
            });

            //Metodos:

            $('#devolucionModal').on('shown.bs.modal', function () {
                // Inicializa Select2 en el select dentro del modal
                // $('.selectpicker').selectpicker();
                $('.selectpicker').selectpicker('refresh');
                $('.TableVenta').empty();
            });



            // Filtrar cuando se hace clic en el botón de búsqueda Table
            $('#filterButton').on('click', function() {
                var selectedDate = $('#searchDate').val();
                if (selectedDate) {
                    var formattedDate = moment(selectedDate).format('DD/MM/YYYY');
                    table.column(6).search('^' + formattedDate + '$', true, false).draw();
                } else {
                    table.column(6).search('').draw();
                }
            });


            //funciones::   buscar orden despacho del cliente
            $('#btnBuscarDespacho').click(function (e) {
                e.preventDefault();
                const clienteId = $('.selectpicker').val();  // Obtenemos el cliente seleccionado
                $.ajax({
                    type: "GET",
                    url: "/devoluciones/despachos/" + clienteId,  // URL para obtener las ventas
                    dataType: "Json",
                    success: function (response) {
                        // Limpiar la tabla antes de agregar los nuevos datos
                        $('.TableVenta').empty();

                        console.log(response.despachos);


                        if (response.despachos.length > 0) {
                            // Si hay despachos, las mostramos en la tabla
                            response.despachos.forEach(function(despacho) {
                                const row = `
                                    <tr>
                                        <td id="despacho_id">${despacho.id}</td>
                                        <td>${despacho.serie_orden}</td>
                                        <td>${despacho.cantidad_jabas}</td>
                                        <td>${despacho.cantidad_pollos}</td>
                                        <td>${despacho.peso_total_bruto}</td>
                                        <td>${despacho.tara}</td>
                                        <td>${despacho.peso_total_neto}</td>
                                        <td><button type="button" class="btn btn-xs btn-danger btnDelete">Eliminar</button></td>
                                    </tr>
                                `;
                                $('.TableVenta').append(row); // Agregar fila a la tabla
                            });
                        } else {
                            // Si no hay ventas, mostramos un mensaje
                            // console.log('Este cliente no tiene ventas registradas en el día de hoy.');
                             // Mostrar el mensaje de error usando SweetAlert
                            Swal.fire({
                                icon: 'warning',
                                title: '¡INFORMACIÓN!',
                                text: 'Este cliente no tiene despachos registrados en el día de hoy.',
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        $('.TableVenta').empty();  // Limpiar la tabla en caso de error

                        // Verificar si la respuesta contiene un mensaje de error
                        const errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Hubo un problema al obtener los despachos.';

                        // Mostrar el mensaje de error usando SweetAlert
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage,
                        });

                        console.log('Hubo un problema al obtener los despachos: ' + errorMessage);
                    }
                });

            });


            // Función para validar que todos los campos del Formulario estén llenos
            function validarFormulario(formData) {
                let formIsValid = true;
                let errorMessage = "Por favor, complete todos los campos:<br>";

                 // Mapeo de los nombres de los campos a descripciones más comprensibles para el usuario
                const fieldNames = {
                    'cliente_id': 'Seleccionar el Cliente',
                    'orden_despacho_id':'Seleccionar Orden de despacho',
                    'tipo_pollo_id': 'Seleccionar Tipo de Pollo',
                    'peso_neto': 'Ingresar Peso Neto',
                    'cantidad': 'Ingresar la cantidad',
                    'motivo': 'Ingresar el motivo de la devolucion',
                    // Agrega aquí más campos según sea necesario
                };

                // Iterar sobre los FormData y verificar si algún campo está vacío
                formData.forEach(function(value, key) {
                    console.log(key, value);

                    // Si algún campo está vacío, se marca como inválido y se agrega el nombre del campo a un mensaje
                    if (!value || value.trim() === '') {
                        formIsValid = false;

                        // Si no hay un nombre legible, mostramos el nombre del campo, si no, mostramos la descripción
                        const fieldLabel = fieldNames[key] || key;  // Usamos la descripción si existe en el mapeo
                        errorMessage += `* ${fieldLabel}<br>`;  // Añadimos el campo a la lista de errores
                    }
                });

                // Si el formulario no es válido, mostrar un mensaje de advertencia
                if (!formIsValid) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos incompletos',
                        html: errorMessage,
                        confirmButtonText: 'Ok'
                    });
                }

                return formIsValid;
            }



            //DELETE TABLE INDEX
            $('.btnDestroyDevolucion').click(function (e) {
                e.preventDefault();  // Prevenir el comportamiento por defecto del botón

                // Confirmación antes de eliminar la devolución
                Swal.fire({
                    title: "CONFIRMACIÓN",
                    text: "¿Está seguro de eliminar la devolución?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Sí, eliminarla!",
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Obtener el ID de la devolución a eliminar
                        var devolucionId = $(this).data('id');  // Asumimos que el ID de la devolución está en un atributo 'data-id'

                        // Enviar solicitud AJAX para eliminar la devolución
                        $.ajax({
                            type: 'DELETE',  // Usamos el método DELETE
                            url: '/devolucion-despachos/' + devolucionId,  // URL de la API para eliminar la devolución (ajusta la URL)
                            dataType: 'json',
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Devolución eliminada',
                                        text: response.message,
                                        showConfirmButton: false,
                                    });

                                    // Opcional: Actualizar la tabla o interfaz de usuario después de eliminar la devolución
                                    // Por ejemplo, puedes eliminar la fila de la tabla donde se encontraba la devolución
                                    // $('#devolucion-' + devolucionId).remove();  // Asumiendo que cada fila tiene un ID como 'devolucion-ID'
                                    location.reload();
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: response.message,
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Hubo un problema al eliminar la devolución. Intenta nuevamente.',
                                });
                            }
                        });
                    }
                });
            });

            //Eliminar, solo afectar a la venta indicada
            $('.TableVenta').on('click', '.btnDelete', function() {
                // Eliminar la fila correspondiente al botón de eliminar
                $(this).closest('tr').remove();
            });

            //motivo TopUpperCase
            $('#motivo').on('input', function() {
                // Convertimos el texto a mayúsculas
                $(this).val($(this).val().toUpperCase());
            });



        });
    </script>
@stop