@extends('layouts.master')
@section('title')
    @lang('translation.Validation')
@endsection
@section('css')
    <!-- Lightbox css -->
    <link href="{{ URL::asset('/assets/libs/magnific-popup/magnific-popup.min.css') }}" rel="stylesheet" type="text/css" />
 
    <link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ URL::asset('/assets/libs/bootstrap-editable/bootstrap-editable.min.css') }}" rel="stylesheet"
        type="text/css" />

    <link href="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('/assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ URL::asset('/assets/libs/magnific-popup/magnific-popup.min.css') }}" rel="stylesheet" type="text/css" />


    <style type="text/css">
        #datatable-buttons tr.child td.child ul.dtr-details li {
            overflow: auto;
        }

        #datatable-buttons tr.child td.child ul.dtr-details li span.dtr-data div.recorte {
            float: none;
        }

        .imagen_carga{
            width: 300px;
        }

        .recorte {
           width: 50px;
            height: 50px;
            overflow: hidden;
            margin: 10px;
            position: relative;
            float: left;
        }

        .recorte img {
            position:absolute;
            left: -100%;
            right: -100%;
            top: -100%;
            bottom: -100%;
            margin: auto;
            min-height: 100%;
            min-width: 100%;
        }
         
        .custom-file-input {
          color: transparent;
          width: 115px;
        }
        .custom-file-input::-webkit-file-upload-button {
          visibility: hidden;
        }
        .custom-file-input::before {
          content: 'Cargar';
          color: black;
          display: inline-block;
          background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
          border: 1px solid #999;
          border-radius: 3px;
          padding: 5px 8px;
          outline: none;
          white-space: nowrap;
          -webkit-user-select: none;
          cursor: pointer;
          text-shadow: 1px 1px #fff;
          font-weight: 700;
          font-size: 10pt;
        }
        .custom-file-input:hover::before {
          border-color: black;
        }
        .custom-file-input:active {
          outline: 0;
        }
        .custom-file-input:active::before {
          background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); 
        }
        .valor_stock{

            width: 70px;
            text-align: left;
            margin-right: 9px;
            float: left;
            padding: 3px;
            border: solid 1px #fff
        },

    </style>

@endsection
@section('content')
    @component('common-components.breadcrumb')
        @slot('pagetitle') Inicio @endslot
        @slot('title') Informe de Ventas @endslot
    @endcomponent 

    <div class="modal fade" id="detalleVenta" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="row">       
                        <div class="col-md-12 d-grid gap-2">
                            <button type="button" 
                            class="btn btn-secondary btn-lg btn-block waves-effect waves-light" 
                            data-bs-dismiss="modal">x</button>
                        </div>
                    </div>
                </div>
                
                <div class="modal-body">

                    <div class="row">
                        <div class="col-md-12">
                        
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>Código</th>
                                            <th>Item</th>
                                            <th>Categoría</th>
                                            <th>Marca</th>
                                            <th>Modelo</th>
                                            <th>Cantidad</th>
                                            <th>Valor</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tabla-detalle-venta">
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
                
                <button type="button" 
                class="btn btn-primary" 
                data-bs-dismiss="modal">Cerrar</button>

            </div>
    
    
        </div>
    </div>


    <div class="row">    
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    {{-- <h4 class="card-title">Cliente</h4> --}}
                    <div class="row">
                        <div class="col-md-2">
                            <input class="form-control" 
                                type="datetime-local" 
                                id="fecha-inicio">
                        </div>

                        <div class="col-md-2">
                            <input class="form-control" 
                                type="datetime-local" 
                                id="fecha-fin">
                        </div>

                        <div class="col-md-3">
                            <select class="form-select" id="user">
                                <option value="todos">Todos los Vendedores</option>
                                @foreach ($usuarios as $u)
                                    <option value="{{ $u->id }}">{{ $u->nombre . " " . $u->apellido_paterno }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <select class="form-select" id="bodega">
                                <option value="todos">Todas las Bodegas</option>
                                @foreach ($bodegas as $b)
                                    <option value="{{ $b->id }}">{{ $b->nombre }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <button type="button" 
                                class="btn btn-success d-print-none" 
                                id="btn-mostrar-ventas" >Mostrar Ventas</button>  
                        </div>  
                    </div>
                </div>
            </div>
            <!-- end card -->
        </div> <!-- end col -->
    
    </div>

    <div class="row">       
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">       
                    {{-- <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#agregaMaterial">Nuevo</button> --}}
                    <table id="datatable-buttons" class="table table-hover table-bordered dt-responsive nowrap data_table_search"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th>Fecha Venta</th>
                                <th>Vendedor</th>
                                <th>Bodega</th>
                                <th class=text-end>Subtotal Venta</th>
                                <th class=text-end>Descuento</th>
                                <th class=text-end>Total Venta</th>
                                <th class="text-center">Detalles</th>
                            </tr> 
                        </thead>
                        <tbody id="tabla-informe-ventas">
                            <tr><td colspan="7" class="text-center">No hay datos</td></tr>
                        </tbody> 


                </div>
            </div>
        </div>
    </div><!--end row-->


    




@endsection
@section('script')
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/es.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <!-- Magnific Popup-->
    <script src="{{ URL::asset('/assets/libs/magnific-popup/magnific-popup.min.js') }}"></script>
    <!-- lightbox init js-->
    <script src="{{ URL::asset('/assets/js/pages/lightbox.init.js') }}"></script>
 
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/bootstrap-editable/bootstrap-editable.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/datatables/datatables.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/pdfmake/pdfmake.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/magnific-popup/magnific-popup.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/funcionesGlobales.min.js')}}"></script>

    <script type="text/javascript">
        $(function(){
            // var today = new Date().toISOString().slice(0, 16); // Formato ISO para datetime-local
            var today = "{{ date('Y-m-d 00:00') }}";

            // // Establecer la fecha de hoy como valor por defecto para fecha de inicio y fecha fin
            console.log("today: ", today);
            $('#fecha-inicio').val(today);
            $('#fecha-fin').val(today.slice(0, 11) + '23:59'); // Establecer la hora 23:59 para fecha fin

            // Control de las fechas de inicio y fin
            // $('#fecha-inicio').change(function() {
            //     var fechaInicio = new Date($(this).val());
            //     var fechaFin = new Date($('#fecha-fin').val());

            //     if (fechaInicio > fechaFin && $('#fecha-fin').val() !== '') {
            //         alert('La fecha de inicio no puede ser posterior a la fecha final.');
            //         $(this).val('');
            //         return false;
            //     }

            //     $('#fecha-fin').val(fechaInicio.slice(0, 11) + '23:59'); // Establecer la hora 23:59 para fecha fin

            // });

            // $('#fecha-fin').change(function() {
            //     var fechaInicio = new Date($('#fecha-inicio').val());
            //     var fechaFin = new Date($(this).val());

            //     if (fechaInicio > fechaFin) {
            //         alert('La fecha final no puede ser anterior a la fecha de inicio.');
            //         $(this).val('');
            //     }
            // });
            
            $("#btn-mostrar-ventas").on('click', function(){
                console.log("click mostrar ventas");
                var fechaInicio = $('#fecha-inicio').val();
                var fechaFin = $('#fecha-fin').val();
                var usuario = $("#user").val();
                var bodega = $("#bodega").val();

                // Validación de fechas
                if (!fechaInicio || !fechaFin) {
                    alert('Por favor, seleccione ambas fechas.');
                    return;
                }

                // Realizar la solicitud AJAX para obtener las ventas
                $.ajax({
                    type: 'POST',
                    url: '/carga_informe_ventas', // Reemplaza con la ruta correcta
                    data: {
                        fechaInicio: fechaInicio,
                        fechaFin: fechaFin,
                        usuario: usuario,
                        bodega: bodega
                    },
                    success: function(response) {
                        // Manejar la respuesta del servidor y dibujar el contenido en la tabla
                        // $('#tabla-informe-ventas').html(response);
                        $('#tabla-informe-ventas').empty();

                        if (response.ventas && response.ventas.length > 0) {
                            // Construir la tabla con los datos obtenidos
                            var subtotal = 0;
                            var descuentos = 0;
                            var total = 0;
                            var tablaHTML = '';

                            $.each(response.ventas, function(index, venta) {
                                subtotal += parseInt(venta.subtotal_venta);
                                descuentos += parseInt(venta.descuento);
                                total += parseInt(venta.total_venta);

                                tablaHTML += '<tr>';
                                tablaHTML += '<td>' + venta.fecha + '</td>';
                                tablaHTML += '<td>' + venta.nombre_vendendor + '</td>';
                                tablaHTML += '<td>' + venta.nombre_bodega + '</td>';
                                tablaHTML += '<td class="text-end">' + venta.subtotal_venta + '</td>';
                                tablaHTML += '<td class="text-end">' + venta.descuento + '</td>';
                                tablaHTML += '<td class="text-end">' + venta.total_venta + '</td>';
                                tablaHTML += '<td class="text-center"><button class="btn btn-primary ver-venta" data-id-venta="' + venta.id + '" >Ver</button></td>';
                                tablaHTML += '</tr>';
                            });

                            tablaHTML += '<tr><td colspan="6" class="text-end"><h3>Subtotal Ventas:</h3> </td><td class="text-end"><h3>' + subtotal + '</h3></td></tr>';
                            tablaHTML += '<tr><td colspan="6" class="text-end"><h3>Total Descuentos:</h3> </td><td class="text-end"><h3>' + descuentos + '</h3></td></tr>';
                            tablaHTML += '<tr><td colspan="6" class="text-end"><h2>Total Ventas:</h2> </td><td class="text-end"><h2>' + total + '</h2></td></tr>';

                            $('#tabla-informe-ventas').html(tablaHTML);
                        } else {
                            // Mostrar un mensaje si no hay datos
                            $('#tabla-informe-ventas').html('<tr><td colspan="7">No hay datos</td></tr>');
                        }
                    },
                    error: function(error) {
                        console.error('Error al obtener las ventas:', error);
                        // Manejar errores si la solicitud AJAX falla
                    }
                });
            });

            // $(".ver-venta").click(function(){
            $(document).on('click', '.ver-venta', function(){

                // $("#creaModelo").modal("show");
                var idVenta = $(this).data('id-venta');
                // $("#modelo_marca_id").val(idMarca);
                // var fechaInicio = $('#fecha-inicio').val();
                // var fechaFin = $('#fecha-fin').val();

                $("#tabla-detalle-venta").html("");

                $.ajax({
                    url: "/ver_detalle_venta",
                    dataType: 'json',
                    type: 'POST',
                    data: {'id_venta': idVenta/*, 'fecha_inicio': fechaInicio, 'fecha_fin': fechaFin*/}, 
                    success: function(result){
                        // console.log(result);
                        if(result.error == false){
                            // Agregar una opción por cada modelo obtenido
                            var tablaHTML = "";
                            $.each(result.ventas, function(index, v) {

                                tablaHTML += '<tr>' +
                                    '<td scope="row">' + v.material.codigo + '</td>' +
                                    '<td scope="row">' + v.nombre_item + '</td>' +
                                    '<td scope="row">' + v.material.categoria_materiales.nombre + '</td>' +
                                    '<td scope="row">' + v.material.marca.nombre + '</td>' +
                                    '<td scope="row">' + v.material.modelo.nombre + '</td>' +
                                    '<td scope="row">' + v.cantidad + '</td>' +
                                    '<td scope="row">' + v.valor + '</td>' +
                                '</tr>';
                                // selectModelos.append('<option value="' + modelo.id + '">' + modelo.nombre + '</option>');
                            });

                            tablaHTML += '<tr><td colspan="6" style="text-align:right;"><strong>Subtotal:</strong> </td><td>' + result.subtotal + '</td></tr>';
                            tablaHTML += '<tr><td colspan="6" style="text-align:right;"><strong>Descuento:</strong> </td><td>' + result.descuento + '</td></tr>';
                            tablaHTML += '<tr><td colspan="6" style="text-align:right;"><strong>Total:</strong> </td><td>' + result.total + '</td></tr>';

                            $("#tabla-detalle-venta").append(tablaHTML);


                            $("#detalleVenta").modal("show");

                        }
                    },
                    error: function(error) {
                        console.error(error);
                        alert("Ha ocurrido un error a nivel de servidor. Favor notificar a Soporte.");
                    }
                });

            });

        });
    </script>
@endsection