@extends ('layouts.main')
@section('styles')
 <style>
    .btn-accent:hover {
        background-color: #a8d860 !important;
    }
</style>
@endsection

@section('content')

    <div class="col-md-12" id="page-top">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Detalle de pedido
                        </h3>         
                    </div>
                    
                </div>

                   
                @if( $order['order_check'] == '2')
                    <div class="m-portlet__head-tools">
                        <ul class="m-portlet__nav">
                            <li class="m-portlet__nav-item">
                                <a  onclick="#"   disabled  class="btn  m-btn m-btn--pill m-btn--custom m-btn--icon  " style="border: solid 1px; border-color: #a8d860;  cursor: default !important; ">
										<span>
										    <i class="flaticon-list-3 "></i>
										<span>completado</span>
									</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                @else
                    <div id="progressbar" class="m-portlet__head-tools"style="display: none"> 
                         <progress ></progress>
                     </div>    
                    <div id="botonaceptar" style=" display: contents"class="m-portlet__head-tools"> 
                        <ul class="m-portlet__nav">
                            <li class="m-portlet__nav-item">
                                <a  onclick="check()" class="btn btn-accent m-btn m-btn--pill m-btn--custom m-btn--icon btn-outline-info" style="border: solid 1px; border-color: #a8d860;">
                                    <span>
                                        <i class="flaticon-list-3 "></i>
                                            <span>Orden lista</span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                @endif
            </div>

            <div class="m-portlet__body table-responsive">
                <p><span style="font-weight: bold;">N° orden:</span> {{$order->id}} <br/>
                <span style="font-weight: bold;">Cliente:</span> {{isset($order->customer->contact_name) ? $order->customer->contact_name : ''}}</p>
                <table class="table table-striped- table-bordered table-hover table-checkable" id="mtable1">
                    <thead>
                    <tr>
                        {{--<th>id_categoria</th>--}}
                        <th>Categoría</th>
                         <th>Orden</th>
                        <th>Nombre de producto</th>
                        <th>Cantidad</th>
                        <th>Unidad de medida</th>
                        <th>Precio unitario</th>
                        <th>Total</th>
                        <th>Peso exacto</th>
                        <th>Precio total</th>
                        <th>Imagen</th>
                        <th>Acciones</th>
                 

                    </tr>
                    </thead>
                    <tbody>
                    @foreach($order_details as $order_detail)
                        <tr class="odd gradeX">
                            <td>{{$order_detail->category_name .'-'.$order_detail->orders_id.'-'.$order_detail->category_id}}</td>
                           
                            <td>@if($order_detail->order_checks  == 1)
                                    <span class="m-badge m-badge--success m-badge--wide " style="padding: 3px 10px;     padding-top: 7%;"><i class="flaticon-interface-5 "> </i></span>
                                @else
                                    <span class="m-badge m-badge--danger m-badge--wide" style="padding: 3px 10px;     padding-top: 7%;"> <i class="flaticon-exclamation-1"> </i> </span>
                                @endif</td>
                            
                            <td>{{$order_detail->product_name}}</td>
                            <td>{{$order_detail->qty}} </td>
                            <td>{{$order_detail->units_name}} </td>
                            <td>${{number_format($order_detail->unit_price,2,'.','')}}</td>
                            <td>${{number_format($order_detail->total,2,'.','')}}</td>
                            <td>{{$order_detail->exact_weight}}</td>
                            <td>${{number_format($order_detail->total_price,2,'.','')}}</td>
                            <td><img src="{{$order_detail->product_image}}" alt="" width="100"/></td>
                            <td>
                                <a  onClick="showUpdateStatusOrder({{$order_detail->id}})" 
                                title="Actualizar estatus pedido" class="btn btn-icon-only btn-warning  m-btn m-btn--pill modal_{{$order_detail->id}}" 
                                style="margin: 2px;" data-name="{{$order_detail->product_name}}"
                                 data-unit="{{$order_detail->units_name}}" data-qty="{{$order_detail->qty}}"
                                 data-unitprice="{{$order_detail->unit_price}}"  data-unit_id="{{$order_detail->units_id}}">
                                    <i class="fa flaticon-edit "></i>
                                </a>
                            </td>
                                
                        </tr>
                    @endforeach

                    </tbody>
                </table>

                <div style="float: right;margin-right: 60px;margin-top:20px;">
                    <p style="font-weight:600;">Subtotal: ${{number_format($order->subtotal,2,'.','')}}</p>
                    <p style="font-weight:600;">Costo de envío: ${{number_format($order->shipping_cost,2,'.','')}}</p>
                    <p style="font-weight:600;">Total: ${{number_format($order->total,2,'.','')}}</p>
                    <input type="hidden" id="id_order"value="{{$order->id}}">
                    <input type="hidden" id="id_category"value="{{$order_detail->category_id}}">
               
               
                </div>
            </div>
        </div>
    </div>

      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Actualizar producto <span id="nameProduct"></span></h5>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body" id="bodyDelete">
                    <label>Cantidad</label>
                    <input type="text" name="qty" id="qty" class="form-control" />
                    <br />
                    <label>Unidad de medida</label>
                    <input type="text" name="unit" id="unit" class="form-control" />
                    <br />
                    <label>Peso exacto</label>
                    <input type="number" name="exact_weight" id="exact_weight" class="form-control" />
                    <br />
                    <label>Precio total</label>
                    <input type="number" name="total_price" id="total_price" class="form-control" />
                    
                    <input type="hidden" name="unit_id" id="unit_id" class="form-control" />
                    
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="_token" value="{{csrf_token()}}" id="token">
                    <button type="button"  class="btn btn-outline-success" id="updateOrder">Aceptar</button>
                    <button type="button" data-dismiss="modal" class="btn btn-outline-danger">Cancelar</button>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('scripts')

    <script type="text/javascript">


        $('#listMenu').find('.start').removeClass('start');
        $('#orders').addClass('start');

        $(document).ready(function() {
            var groupColumn = 0;
            var oldStart = 0;
            var table = $('#mtable1').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
                },"columnDefs": [
                    { "visible": false, "targets": groupColumn },


                ]
                // ,rowGroup: {
                //     dataSrc: [[ groupColumn ]],
                // }

                ,"order": [[ groupColumn, 'asc' ]],
                "displayLength": 25,

                "drawCallback": function ( settings ) {
                    var api = this.api();
                    var rows = api.rows( {page:'current'} ).nodes();
                    var last=null;

                    api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                        // console.log(group);
                        if ( last !== group ) {
                            var nameColumn = group.split("-");
                            $(rows).eq( i ).before(
                                '<tr class="group"><td colspan="10">'+
                                ''+nameColumn[0]+ '' +
                                ' ' + 
                                '<a href="/ticket/'+nameColumn[1]+'/'+nameColumn[2]+'" target="_blank" title="Imprimir" class="btn btn-icon-only btn-accent  m-btn m-btn--pill pull-right btn-success"style="margin: -7px;" >' +
                                '<i class="fa flaticon-technology "></i></a>'+'</td></tr>'
                            );

                            last = group;
                        }

                    } );
                },
                 "fnDrawCallback": function (o) {
                    if ( o._iDisplayStart != oldStart ) {
                    var targetOffset = $('#page-top').offset().top;
                    $('html,body').animate({scrollTop: targetOffset}, 500);
                    oldStart = o._iDisplayStart;
                    }

                }



            } );

            // Order by the grouping
            // $('#example tbody').on( 'click', 'tr.group', function () {
            //     var currentOrder = table.order()[0];
            //     if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
            //         table.order( [ groupColumn, 'desc' ] ).draw();
            //     }
            //     else {
            //         table.order( [ groupColumn, 'asc' ] ).draw();
            //     }
            // } );
        } );


        function showUpdateStatusOrder(order_detail_id){
            var product_name = $(".modal_"+order_detail_id).data("name");
            var unit = $(".modal_"+order_detail_id).data("unit");
            var qty = $(".modal_"+order_detail_id).data("qty");
            var unitprice = $(".modal_"+order_detail_id).data("unitprice");
            var unit_id = $(".modal_"+order_detail_id).data("unit_id");

            $("#updateOrder").attr("onclick","updateStatusOrder("+order_detail_id+")");
            $("#nameProduct").text(product_name);
            $("#unit").val(unit);
            $("#qty").val(qty);
            $("#unit_id").val(unit_id);
            $("#exact_weight").attr("onKeyUp","totalPrice('"+unitprice+"')");
            $("#total_price").val(qty * unitprice);
            $('#myModal').modal({
                backdrop: 'static',
                keyboard: false
            }); 

        }


        function updateStatusOrder(order_detail_id){

            var total_price = $("#total_price").val();
            var exact_weight = $("#exact_weight").val();
            var qty = $("#qty").val();
            var unit_id = $("#unit_id").val();

            $("#total_price").removeAttr("style");
            $("#exact_weight").removeAttr("style");
            $("#qty").removeAttr("style");

            if(total_price == '' || total_price <= 0 || qty == '' || qty <= 0 || exact_weight == '' || exact_weight <= 0){
                $("#total_price").css("border","solid 1px red");
                $("#qty").css("border","solid 1px red");
                $("#exact_weight").css("border","solid 1px red");
            }else{
                $("#total_price").removeAttr("style");
                $("#exact_weight").removeAttr("style");
                $("#qty").removeAttr("style");

                $.ajax({
                url: "/updateDataFromProduct",
                headers: {'X-CSRF-TOKEN':'{{csrf_token()}}'},
                type: "post",
                data:{order_detail_id:order_detail_id,total_price:total_price,
                      exact_weight:exact_weight,qty:qty},
                success: function(data) {
                    $('#myModal').modal("hide");
                    window.location = "/orders/"+data;
                }
            });

            }
        }

          const formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits: 2
        });

        function totalPrice(unit_price){

            var qty = $("#exact_weight").val();
            var unit = $("#unit_id").val();

            var total = 0;
            if(unit == 8){
                var decimalQuantity = qty / 1000;
                total = decimalQuantity * unit_price;
            }else{
                total = qty * unit_price;
            }
            
            newTotal = formatter.format(total);
            $("#total_price").val(newTotal.split("$")[1]);


        }

        
        function check( ){

        var intro = document.getElementById('progressbar');
        intro.style.display ='flex';
        var intro = document.getElementById('botonaceptar');
        intro.style.display ='none';

            var id_orders = document.getElementById("id_order").value;
            var id_category = document.getElementById("id_category").value;
 

            $.ajax({
                url: "/orders_check",
                headers: {'X-CSRF-TOKEN':'{{csrf_token()}}'},
                type: "post",
                data:{id_orders:id_orders,id_category:id_category},
                success: function(data) {
                    
                    //console.log(data);
                    window.location = "/orders/"+data;
                }
            });



        }
    </script>
@endsection