<?php $__env->startSection('title'); ?> Dashboard <?php $__env->stopSection(); ?>
<?php $__env->startSection('body'); ?>
    
    <style type="text/css">


        .dashboard .item{
            margin-bottom: 20px;
        }
        .dashboard .container{
            width: 100%;
        }

        .dashboard .container .header{
            width: 100%;
            display: inline-block;
            border-bottom: 1px solid #eee;
            position: relative;
        }

        .dashboard .container .header h3{
            margin: 0px !important;
            padding: 0px !important;
            display: inline;
            float: left;
        }

        .dashboard .container .header h3:nth-child(1){
            width: 40%;
        }

        .dashboard .container .header h3:nth-child(2){
            width: 60%;
            text-align: right;
        }

        .dashboard .container .header h3 span{
            margin: 0px;
            display: list-item;
            list-style: none;
        }

        .dashboard .container .header .capacity_ribbon{
            width: 100%;
            font-size: 16pt;
        }

        .dashboard .container .header .capacity_ribbon small{
            width: 50%;
            display: inline-block;
            float: left;
        }

        .dashboard .container .header .capacity_ribbon small:last-child{
            text-align: right;
        }

        .dashboard .container .body{
            padding-top: 5px;
            margin-bottom: 5px;
        }


        .dashboard .container .footer{
            width: 100%;
        }

        .dashboard .container .footer .progress{
            margin-bottom: 2px;
        }
        .dashboard .container .footer .progress-bar{
            padding: 0px 5px 0px 5px;
        }
        .dashboard .container .footer .progress-bar span{
            display: inline-block;
        }
        .dashboard .container .footer .progress-bar div:first-child{
            font-weight:bold;
            position: absolute;
        }

        .dashboard .container .body .points{
            width: 100%;
            margin-top: 15px;
        }
        .dashboard .container .body .points hr{
            margin: 0px 0px 10px 0px;
        }
        .dashboard .container .body .points table{
            width: 100%;
        }

        .dashboard .container .body .points table td:nth-child(2), .dashboard .container .body .points table td:nth-child(3){
            width: 110px;
        }


        .highlighter{
            position: absolute;
            display: none;
            top: 10px;
            transform: translate(-50%, -50%);
            left: 50%;
            cursor: default;
            z-index: 99;
            opacity: 0.3;

        }

        .highlighter span label{
            background-color: #050505;
            margin: 0px;
            padding: 5px 5px 0px 6px;
            border-radius: 2px;
            cursor: pointer;
        }
        .highlighter span{
            display: inline-block;
            padding-right: 8px;
            color: #4f4f4f;
            font-size: 12px;
        }
        .highlighter label input{
            cursor: pointer;
            margin: 0px !important; padding: 0px !important;
        }
        .dashboard .header:hover .highlighter{
            display: inline-block;
        }
        .highlighter:hover{
            display: inline-block;
            opacity: 1;
        }

    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="form-inline" style="margin-bottom: 25px;">
                <div class="form-group">
                    <label class="control-label">Sheduled From</label>
                    <input type="text" class="form-control fromDate" value="<?php echo e($default_date); ?>" name="fromDate" style="min-width: 190px;">
                </div>
                <div class="form-group">
                    <label class="control-label">To</label>
                    <input type="text" class="form-control toDate" value="<?php echo e($default_date); ?>" name="toDate" style="min-width: 190px;">
                </div>
                <div class="form-group">
                    <button class="btn btn-success filter">Filter</button>
                </div>
                
            </div>
        </div>
    </div>
    <div class="row dashboard">

    </div>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
<script type="text/javascript">
    $(function(){
        var _token = $('meta[name="_token"]').attr('content');

        $(document).ajaxStart(function () {
            $('button, .btn').data('loading-text', '...');
            $('button, .btn').button('loading');
            $('[type="checkbox"]').prop("disabled", true);
        }).ajaxStop(function () {
            $('button, .btn').button('reset');
            $('[type="checkbox"]').prop("disabled", false);
        });

        $('.fromDate').datepicker({
            dateFormat: 'DD, d-mm-yy',
            onSelect: function(){
                
                var d = $.datepicker.parseDate('DD, d-mm-yy', $(this).val());
                $(".toDate").datepicker( "option", "minDate", new Date(d) );
            }
        });
        $(".toDate").datepicker({
            dateFormat: 'DD, d-mm-yy',
            onSelect: function(){
                
                var d = $.datepicker.parseDate('DD, d-mm-yy', $(this).val());
                $(".fromDate").datepicker( "option", "maxDate", new Date(d) );
            }
        });

        populate();

        $(".filter").click(function(){
            populate();
        });

        function highlightOrThrow(e, callback){
            $.clearHighlights();
            if(e != undefined && typeof(e) == 'object'){
                if(e.hasOwnProperty('errors')){
                    $.each(e.errors, function(i, k){
                        $('.'+i).highlightElement({msg: k});
                    });
                }else if(e.hasOwnProperty('ok') && e.hasOwnProperty('msg') && e.ok == 0){
                    $.notify.error({msg: e.msg});
                }else if(e.hasOwnProperty('ok')  && e.ok == 1){
                    if(e.hasOwnProperty('msg')){
                        $.notify.success({msg: e.msg});
                    }
                    if(callback != undefined && typeof(callback) == 'function'){
                        callback();
                    }
                }else{
                    callback();
                }
            }
        }

        $(document).on("change", ".highlight", function(){
            var data = {
                id: $(this).data("id"),
                status: $(this).is(":checked") == true ? 1 : 0
            };
            if(data.status == 0){
                bootbox.confirm('Are you sure you want to change status?', function (r) {
                    if (r) {
                        highlight(data);
                    }
                });
            }else{
                highlight(data);
            }
            
        });

        function highlight(data){
            $.post("<?php echo e(url('/dash/highlight')); ?>", {_token: _token, data: data}, function(e){
                highlightOrThrow(e, function(){
                    populate();
                });
            }, 'json');
        }

        function populate(){
            $dashboard = $(".dashboard");
            var data = {
                fromDate: $(".fromDate").val(),
                toDate: $(".toDate").val()
            };



            $.post("<?php echo e(url('/dash/populate')); ?>", {_token: _token, data: data}, function(e){
                highlightOrThrow(e, function(){
                    
                    $dashboard.html("");
                    var dom = '';

                    if(typeof(e) == "object" && Object.keys(e).length > 0){

                        var counter = 0;
                        $.each(e, function(trip_id, result){

                            var trip = result.trip;
                            var vehicles = result.vehicles;

                            $.each(vehicles, function(i, v){
                                var points = v.points;

                                if(counter < Object.keys(e).length && counter % 2 == 0){
                                    dom += '<div class="row"><div class="col-md-12">';
                                }
                                dom += '<div class="col-md-6 item">';

                                var style = v.highlighted == 1 ? 'style="background-color: #7ee5a9"' : '';
                                dom += '    <div class="img-thumbnail container" '+ style +'>';
                                dom += '        <div class="header">';
                                dom += '            <h3>';
                                dom += '                <span><small>Trip # '+ v.trip_id +'</small></span>';
                                dom += '                <span class="capacity_ribbon"><small>'+ v.volume +' CBM</small> <small>'+ v.weight +' KG</small></span>';
                                dom += '            </h3>';
                                dom += '            <h3>';
                                dom += '                <span><small>'+ v.transporter +'</small></span>';
                                dom += '                <span><small>'+ v.number +'</small></span>';
                                dom += '            </h3>';
                                <?php if(auth()->user()->can("edit_dashboard")): ?>
                                var check = v.highlighted == 1 ? "checked" : "";
                                dom += '            <div class="highlighter" style="position: absolute;">';
                                dom += '                <label><span><label><input type="checkbox" '+ check +' class="highlight" data-id="'+ v.id +'"></label> Highlight</span></label>';
                                dom += '            </div>';
                                <?php endif; ?>
                                dom += '        </div>';
                                dom += '        <div class="body">';
                                dom += '            <div>Scheduled date : '+ v.takeoff_date +' ('+ v.takeoff_day_name +')</div>';
                                dom += '            <div>Value of goods : '+ v.goodsCost +'</div>';

                                var style = v.highlighted == 1 ? 'style="background-color: #71ce97"' : '';
                                dom += '            <div class="img-thumbnail points" '+ style +'>';

                                if(typeof(points) == "object" && Object.keys(points).length > 0){
                                    dom += '                <small>Drop Points with their respective drop volume</small>';
                                    dom += '                <hr>';
                                    dom += '                <table>';
                                    dom += '                    <tbody>';

                                    $.each(points, function(j, p){
                                        dom += '                    <tr>';
                                        dom += '                        <td>'+ p[0].distributor +'</td>';
                                        dom += '                        <td>'+ p[0].volume +' CBM</td>';
                                        dom += '                        <td>'+ p[0].weight +' Kg</td>';
                                        dom += '                    </tr>';
                                    });


                                    dom += '                    </tbody>';
                                    dom += '                </table>';
                                }else{
                                    dom += '-- no drop points added --';
                                }

                                dom += '            </div>';
                                dom += '        </div>';
                                dom += '        <div class="footer">';

                                dom += '            <div class="progress">';
                                if (v.volumeExeeded == 1) {
                                    dom += '                <div class="progress-bar progress-bar-danger" role="progressbar" style="width: '+ v.volumePercentage +'%;">';
                                    dom += '                    <div class="text-default">';
                                    dom += '                        <span>Vehicle volume</span>';
                                    dom += '                        <span>'+ v.loadedVolume +'</span>/<span>'+ v.volume +'</span>';
                                    dom += '                    </div>';
                                    dom += '                    <br/>';
                                    dom += '                </div>';
                                }else{
                                    dom += '                <div class="progress-bar progress-bar-success" role="progressbar" style="width: '+ v.volumePercentage +'%;">';
                                    dom += '                    <div class="text-danger">';
                                    dom += '                        <span>Vehicle volume</span>';
                                    dom += '                        <span>'+ v.loadedVolume +'</span>/<span>'+ v.volume +'</span>';
                                    dom += '                    </div>';
                                    dom += '                    <br/>';
                                    dom += '                </div>';
                                }
                                dom += '            </div>';
                                
                                dom += '            <div class="progress">';
                                if (v.weightExeeded == 1) {
                                    dom += '                <div class="progress-bar progress-bar-danger" role="progressbar" style="width: '+ v.weightPercentage +'%;">';
                                    dom += '                    <div class="text-default">';
                                    dom += '                        <span>Vehicle weight</span>';
                                    dom += '                        <span>'+ v.loadedWeight +'</span>/<span>'+ v.weight +'</span>';
                                    dom += '                    </div>';
                                    dom += '                    <br/>';
                                    dom += '                </div>';
                                }else{
                                    dom += '                <div class="progress-bar progress-bar-success" role="progressbar" style="width: '+ v.weightPercentage +'%;">';
                                    dom += '                    <div class="text-danger">';
                                    dom += '                        <span>Vehicle weight</span>';
                                    dom += '                        <span>'+ v.loadedWeight +'</span>/<span>'+ v.weight +'</span>';
                                    dom += '                    </div>';
                                    dom += '                    <br/>';
                                    dom += '                </div>';
                                }
                                dom += '            </div>';



                                dom += '        </div>';
                                dom += '    </div>';
                                dom += '</div>';

                                if(counter+1 < Object.keys(e).length && counter % 2 == 1){
                                    dom += '</div></div>';
                                }

                            });
                            counter++;
                        });

                    }else{
                        dom = '<div class="col-md-12">-- no results found --</div>';
                    }

                    $dashboard.html(dom);

                });

                

            }, 'json');
        }
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>