@extends('layouts.app')
@section('content')

<style>
    .daterangepicker td.start-date{background-color:#ff731e !important;}
    .daterangepicker td.end-date{background-color: #ff731e !important;}
    .daterangepicker td.in-range{background-color: #F9CB96;}
    #daterange {
        background: #f9f9f9;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    }
    .daterangepicker .ranges li.active {
        background-color: #ff731e;
        color: #fff;
    }
    .btnArrow {
        font-size: 25px;
        background: #f9f9f9;
        margin: 0px 20px;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
    }
    .btn-sm {
        background: #ff731e;
    }
    .btn.btn-info {
        color: #36A1EA !important;
        background: #d5e9f7;
    }
</style>
    <div class="page-info">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/home'); }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Listado de Embarques</li>
            </ol>
        </nav>
        <div class="page-options">
            @can('shipments.create')
                <a  href="{{ route('shipments.create') }}" class="btn btn-success">
                    <img src=" {{  asset('assets/iconos/agregar.png') }} " alt="usuarios" style="height: 20px;">
                    Nuevo Embarque
                </a>
                <a  onclick="guardarExcelEmbarques()" class="btn btn-info float-left" style="margin-right: 10px;">
                    {{-- href="{{ route('shipments.create_report_embarques_excel') }}" --}}
                    Generar Excel
                </a>
            @endcan
        </div>
    </div>

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Embarques</h1>
                </div>
                <div class="col-sm-6"></div>
            </div>
        </div>
    </section>
    
    <div class="main-wrapper">
            <div class="col">
                @include('flash::message')

                <div class="clearfix"></div>

                <div class="card">
                    <div class="card-body p-0">
                        <div class="col-9 ranges text-right" id="filtroFechas">
                            <div class="btn-group w-50" style="margin-top: 50px; margin-bottom: 50px">
                                <button class="btnArrow" style="border:none" data-tipo="anterior"> &lt; </button>
                                    <input class="w-50 text-center" type="text" id="daterange" name="daterange" value="01-Aug-2023 / 01-Aug-2023">
                                <button class="btnArrow" style="border:none" data-tipo="siguiente"> &gt; </button>
                            </div>
                        </div>
                        <div id="contenedor-table">
                            @include('shipments.table')
                        </div>
                        
                        <div class="card-footer clearfix float-right">
                            <div class="float-right">
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal excel -->
    <div class="modal fade" id="modal_guardar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {!! Form::open(['method'=>'POST','route' => 'shipments.create_report_embarques_excel']) !!}
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModal">Generar Excel</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Type Proveedor -->
                        <div class="form-group col-sm-12">
                            {!! Form::label('customers_id', 'Cliente') !!}
                            {!! Form::select('customers_id',$customers ,!empty($shipment) ? $shipment->customers_id: null, ['class' => 'form-control select_tow customers_id', 'id'=>'customers_id', 'onchange' => "changeCustomer()"]) !!}
                        </div>
                        <div class="form-group col-sm-12 select_product" ></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" id="btn-primary" class="btn btn-primary">Guardar</button>
                    </div>
            </div>
        </div>
    </div>

    <livewire:modal-delete /> 
@endsection

@push('page_scripts')
    
    <script>
        const url_dinamica =  "{{ url('/') }}";
        const url_getProduct = "{{ url('/getProduct') }}";

        $(document).ready(function() {
            "use strict";

            let customers_id = $('#customers_id').val();
            let product_id = $('#product_id').val();
            getProduct(customers_id, product_id);

        });
        
        $('#shipments-table').DataTable({
            order: [0, 'desc'],
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                "infoEmpty": "Mostrando 0 a 0 de 0 Entradas",
                "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
        })

        function changeCustomer(){    
            let customers_id = $('#customers_id').val();
            let product_id = $('#product_id').val();
            getProduct(customers_id, product_id);
        }

        // function changeProduct(){    
        //     let product_id = $('#product_id').val();
        //     getProduct(product_id);
        // }

        function guardarExcelEmbarques(){
            console.log("llegamos");
            $('#modal_guardar').modal('show')
            
            // $('.select_tow').select2();       
            $('.date_normal').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: true,
                icons: {
                    up: "icon-arrow-up-circle icons font-2xl",
                    down: "icon-arrow-down-circle icons font-2xl"
                },
                sideBySide: true
            });
        }

        function getProduct(customers_id, product_id){
            console.log(customers_id);
            console.log(product_id)
            fetch(url_getProduct+'/'+customers_id)
                .then(res => res.text())
                .then(html => {
                    $('.select_product').html(html);

                    // $('.delete').on('click', function(event){
                    //     $(this).parent().parent().remove();
                    // });
                    // $('.select_tow').select2();    
                });    
        }

        $('#daterange').daterangepicker({
        "cancelButtonClasses": "btn btn-secondary",
        "applyButtonClasses" : "btn btn-primary_local",
        ranges: {
            'Hoy': [moment(), moment()],
            'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
            'Este mes': [moment().startOf('month'), moment().endOf('month')],
            'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        "alwaysShowCalendars": true,
        // "startDate": inicio,
        // "endDate": fin,
        "opens": "center",
        "locale": {
            "format": "DD-MMM-YYYY",
            "separator": " / ",
            "applyLabel": "Aplicar",
            "cancelLabel": "Cancelar",
            "fromLabel": "Desde",
            "toLabel": "Hasta",
            "customRangeLabel": "Personalizado",
            "weekLabel": "W",
            "daysOfWeek": [
                "Do",
                "Lu",
                "Ma",
                "Mie",
                "Jue",
                "Vie",
                "Sa"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Septiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "firstDay": 1
        },
    });



        function modal_delete(modulo, info, form){
            $('#id_form').val(form);
            $('#modulo_modal').html(modulo);
            $('#modulo_modal_title').html(modulo);
            $('#info_modal').html(info);
            
            $('#exampleModalCenter').modal('show');
        }

        function btn_modal_delete(){
            let id_form = $('#id_form').val();
            document.getElementById(id_form).submit();
        }



        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
            // $.LoadingOverlay("show");
            // actualizarDatos();
            // $.LoadingOverlay("hide");

            actualizarDatos();
            alert('llegamos');
        });

        $(".btnArrow").click(function(){

        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        var tipo = $(this).data('tipo');

        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/get_fecha/"+tipo+"/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
            $('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);

            actualizarDatos();
            $.LoadingOverlay("hide");
        })
        .fail(function(error) {
            console.log('error',error);
        });
        });

        function actualizarDatos(){
            let result = $("#daterange").val().split('/');

            let fecha_inicio = $.trim(result[0]);
            let fecha_final = $.trim(result[1]);

            
            fetch( url_dinamica + "/get_embarques_rango/"+fecha_inicio+"/"+fecha_final,)
            .then(response => response.text())
            .then(data => {

                console.log(data);
                $('#contenedor-table').html(data);
                $('#shipments-table').DataTable({
                    order: [0, 'desc'],
                    language: {
                        "decimal": "",
                        "emptyTable": "No hay información",
                        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                        "infoEmpty": "Mostrando 0 a 0 de 0 Entradas",
                        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                        "infoPostFix": "",
                        "thousands": ",",
                        "lengthMenu": "Mostrar _MENU_ Entradas",
                        "loadingRecords": "Cargando...",
                        "processing": "Procesando...",
                        "search": "Buscar:",
                        "zeroRecords": "Sin resultados encontrados",
                        "paginate": {
                            "first": "Primero",
                            "last": "Ultimo",
                            "next": "Siguiente",
                            "previous": "Anterior"
                        }
                    },
                })
            });

            // $.ajax({
            //     type        : 'GET',
            //     url         : url_dinamica+"/api/get_citas_rango/"+fecha_inicio+"/"+fecha_final,
            //     dataType    : 'json',
            //     encode          : true
            // })
            // .done(function(data){
            //     var datos = (data.data);
            //     console.log(datos);
            //     if (datos == "ERROR") {
            //         $("#loader").hide();
            //         $("#ceroCitas").show();
            //     }
            //     else{
            //         $("#containerCalendar").removeClass('standby');
            //         $("#loader").hide();
            //         var agregar = '<tbody id="tbody-citas">';
            //         data.data.forEach(element => {
            //             agregar = agregar + '<tr>'+
            //             '<td style="line-height: 22px">'+element.fecha+'<br />'+element.hora+'</td>'+
            //             '<td>'+element.servicio+'</td>'+
            //             '<td>'+element.empleado + '<br /> <strong>Agenda: </strong> ' + element.agendada + '</td>'+
            //             '<td>$'+element.costo+'</td>';
            //             if(element.estatus == "Asistida" && element.estatus_pago == "Pagada")
            //             {
            //                 agregar = agregar + '<td><div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Asistida</div></td>';
            //             }
            //             else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
            //             {
            //                 agregar = agregar + '<td><div style="width: 90px" class="badge badge-warning badge-pill">Apartada</div></td>';
            //             }
            //             else if(element.estatus_pago == "Pagada")
            //             {
            //                 agregar = agregar + '<td><div style="width: 90px" class="badge badge-info badge-pill">Pagada</div></td>';
            //             }
            //             else if(element.estatus == "Cancelada")
            //             {
            //                 agregar = agregar + '<td><div style="width: 90px" class="badge badge-danger badge-pill">Cancelada</div></td>';
            //             }
            //             else if(element.estatus == "Asistida")
            //             {
            //                 agregar = agregar + '<td><div style="width: 90px" class="badge badge-success badge-pill">Asistida</div></td>';
            //             }
            //             agregar = agregar + '<td><div class="btn-group">';
            //             if(element.estatus_tiempo == "normal")
            //             {
            //                 if(element.estatus == "Asistida" && element.estatus_pago == 'Pagada')
            //                 {
            //                     agregar = agregar + '<div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Pagada</div>';
            //                 }
            //                 else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
            //                 {
            //                     agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>'+
            //                     '<a onclick="armarModalAsistencia('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>'+
            //                     '<a onclick="abrirModalReagendarCita('+element.info_reagendar+')" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>'+
            //                     '<a onclick="armarModalEliminar('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Eliminar" href="#" class="btnAccionesCalendar text-danger" onclick="event.preventDefault();"><i class="mdi mdi-calendar-remove"></i></a>'+
            //                     '<a target="_blank" href="https://api.whatsapp.com/send?phone=+521'+element.telefono+'&text=Buenas%20tardes%20Sr.%20'+element.cliente+',%20su%20cita%20quedo%20agendada%20 con fecha '+element.fecha+' y hora '+element.hora+', %20le%20recordamos%20ser%20puntual,%20que%20tenga%20un%20excelente%20día." class="btnAccionesCalendar text-info"><i class="mdi mdi-whatsapp"></i></a>';
            //                 }
            //                 else if(element.estatus_pago == "Pagada")
            //                 {
            //                     agregar = agregar + '<a onclick="armarModalAsistencia('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>'+
            //                     '<a onclick="abrirModalReagendarCita('+element.info_reagendar+')" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>';
            //                 }
            //                 else if(element.estatus == "Asistida")
            //                 {
            //                     agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>';
            //                 }
            //             }
            //             else{
            //                 if(element.estatus == "Asistida" && element.estatus_pago == 'Pagada')
            //                 {
            //                     agregar = agregar + '<div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Pagada</div>';
            //                 }
            //                 else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
            //                 {
            //                     agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>'+
            //                     '<a onclick="abrirModalReagendarCita('+element.info_reagendar+')" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>'+
            //                     '<a onclick="armarModalEliminar('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Eliminar" href="#" class="btnAccionesCalendar text-danger" onclick="event.preventDefault();"><i class="mdi mdi-calendar-remove"></i></a>';
            //                 }
            //                 else if(element.estatus_pago == "Pagada")
            //                 {
            //                     agregar = agregar + '<a onclick="abrirModalReagendarCita('+element.info_reagendar+')" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>';
            //                 }
            //                 else if(element.estatus == "Asistida")
            //                 {
            //                     agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>';
            //                 }
            //             }

            //             @if(Auth::user()->tipo_usuario == 'Admin' || Auth::user()->email ==  'marketing3@birdev.mx')
            //                 agregar = agregar + '<a href="'+url_dinamica+'/citas/'+element.id+'/edit" data-placement="top" title="Editar" class="btnAccionesCalendar text-primary"><i class="mdi mdi-pen"></i></a>';
            //             @endif

            //             agregar = agregar + '</div></td>'+'<td style="line-height: 22px">'+element.cliente+'<br />'+element.telefono+'</td></tr>';
            //         });
            //         agregar = agregar + '</tbody>';
            //         $("#table-citas").append(agregar)
            //         $("#table-citas").show();
            //         $("#citaCero").show();
            //         $('[data-toggle2="tooltip"]').tooltip();
            //     }
            // })
            // .fail(function(error) {
            //     console.log('error',error);
            // });
        
        
        
        
        }//fin de funcion



    </script>
@endpush