@extends('vehicles.profile.includes.main')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('vehicles.index')}}">Vehicles Managements</a> <span class="divider">/</span></li>
        <li class="active">Trucks Profile:Trips</li>
    </ul>
@stop
@section('profile')
    <style>
    td.details-control {
        background: url('{{ URL::asset('img/details_open.png') }}') no-repeat center center;
        cursor: pointer;
    }

    tr.details td.details-control {
        background: url('{{ URL::asset('img/details_close.png') }}') no-repeat center center;
    }

    .form-filter {
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        color: #0e4722;
        font-weight: normal;
        text-align: center;
        padding-bottom: 4px;
    }
</style>
    <div class="tab-pane active">

        <h4 class="widgettitle">Routes List
            <!-- form for filtering -->
        <span class="form-inline" style="margin-left:30px;">
            <label class="control-label" for="Category">Date From</label>
            <input type="text" name="from_date" id="starting_date" class="span3 datepicker">
            <label class="control-label" for="Category">Date to</label>
            <input type="text" name="to_date" id="expiring_date" class="span3 datepicker">
            <input type="submit" name="submit_filter" class="btn" value="Filter">
            <a class="btn" href="javascript:;" onclick="PrintRoutes()"><i class="icon-print"></i> &nbsp;Print</a>
        </span>

        </h4>



        <!-- Main Table -->
        <div class="row-fluid">
            <div class="span12">
                <table class="table table-bordered logistics_table" id="loadingOrdersTable">
                    <thead>
                    <tr>
                        <th>RNo.</th>
                        <th>Route</th>
                        <th>Destination</th>
                        <th>Commodity</th>
                        <th>Loading Date</th>
                        <th>Departure Date</th>
                        <th>Trailer</th>
                        <th>Driver</th>
                        <th>Client</th>
                    </tr>
                    </thead>
                </table>
            </div><!--span12-->
        </div><!--row-fluid-->
    </div>
    {{--@include('routes.loading_orders.includes.loading_model')--}}
    <script>
        var mainDataTable = jQuery('#loadingOrdersTable').DataTable(
                {
                    "oLanguage": {
                        "sLoadingRecords": "Please wait - loading orders...",
                        "sZeroRecords": "No Orders available.",
                        "sInfoEmpty": "No entries to display."
                    },
                    ajax: {
                        url: "{{ route('vehicles.route_logs.data_table.index',['id'=>$vehicle->id]) }}",
                        data: function (d) {},
                    },
                    "order": [[ 5, "desc" ]],
                    scrollCollapse: true,
                    "sPaginationType": "full_numbers",
                    processing: true,
                    serverSide: true,
                    "columns": [
                        {"class": "link", data: 'route_assignment_number'},
                        {"class": "link", data: 'route'},
                        {"class": "link", data: 'destination'},
                        {"class": "link", data: 'transit_product'},
                        {"class": "link", data: 'loading_date'},
                        {"class": "link", data: 'departure_date'},
                        {"class": "link", data: 'trailer'},
                        {"class": "link", data: 'driver'},
                        {"class": "link", data: 'client'}
                    ],
                    "bStateSave": true
                });
        //   Array to track the ids of the details displayed rows
        var lo_vehicle_details = [];
        jQuery('#loadingOrdersTable tbody').on('click', 'tr td.details-control', function () {
            var tr = jQuery(this).closest('tr');
            var row = mainDataTable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), lo_vehicle_details);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                lo_vehicle_details.splice(idx, 1);
            } else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    lo_vehicle_details.push(tr.attr('id'));
                }
            }
        });
        function format(d) {
            return d.loading_order_more_details;
        }

        //Ajax function to add a record
        $('#truck_loading_cargo').on('submit', function (e) {
            var this_form = $(this);
            e.preventDefault();
//            $('#create_trip').style.opacity = "0.4";
            $('#create_trip').attr("disabled", true);
            var loading_order_form_id = jQuery(this);
            var formData = loading_order_form_id.serialize();
            jQuery.ajax({
                url: '{{route('loading_orders.truck_loading.store')}}',
                type: 'POST',
                data: formData,
                beforeSend: function () {
                    startSpinner();
                },
                complete: function () {
                    stopSpinner();
                },
                success: function (data) {
                    console.log(data);
                    jQuery('.has-error').removeClass('has-error');

                    if (data.state === 'Done') {
                        resetFormAndClose(this_form);
                        jQuery.jGrowl(data.msg);
                        mainDataTable.draw();
                    } else if (data.state === 'Fail') {
                        jQuery.jGrowl(data.msg);
                    } else {
                        var num = 0;
                        jQuery.each(data, function (k, v) {
                            field = k.substr(0, k.indexOf("."));
                            field = jQuery('select[name="' + field + '[]"]').addClass('has-error');
                            if (num == 0) jQuery.jGrowl(v);
                            num++;
                        });
                    }
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                    // toastr.error('Unknown error occur!', 'Error');
                }
            });
        });


        $('#truck_loading').on('click', function (e) {
            e.preventDefault();
            var loading_order_vehicle_id = checkRows('loading_order_vehicle_id');
            if (loading_order_vehicle_id.length < 1) {//add more than one
                jAlert("PLEASE CHECK AT LEAST ONE ORDER TO CONTINUE", 'SELECTION DIALOG');
                return false;
            }

            jQuery.ajax({
                url: '{{route('loading_orders.truck_loading.create')}}',
                type: 'GET',
                data: {loading_order_vehicle_id: loading_order_vehicle_id},
                beforeSend: function () {
                    startSpinner();
                },
                complete: function () {
                    stopSpinner();
//                    $('#create_trip').style.opacity = "1";
                    $('#create_trip').attr("disabled", false);
                },
                success: function (data) {
                    jQuery('#loading_cargo_body').empty().append(data);
                    jQuery('#route_assignment_create_form').appendTo("body").modal('toggle');
                    $('.laoding_order_serchable_select').select2();
                    $('.route_assignment_date_time_picker').datetimepicker({
                        format: 'yyyy-MM-dd hh:mm'
                    });
                    $('input[name="loading_date[]"]').datepicker({
                        format: 'yyyy-mm-dd'
                    });
                    {{--$('.single_trip_route_id').on('change', function () {--}}
                    {{--var route_id = $(this).val();--}}
                    {{--jQuery.ajax({--}}
                    {{--url: '{{route('routes.fuel_assignments')}}',--}}
                    {{--type: 'GET',--}}
                    {{--data: {--}}
                    {{--route_id: route_id--}}
                    {{--},--}}
                    {{--success: function (data) {--}}
                    {{--alert(data);--}}
                    {{--}--}}
                    {{--});--}}
                    {{--});--}}
                }
            });
        });
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery("#starting_date").datepicker({
                // dateFormat: "yy-mm-dd",
                onSelect: function (date) {
                    var date2 = jQuery('#starting_date').datepicker('getDate');
                    date2.setDate(date2.getDate() + 1);
                    jQuery('#expiring_date').datepicker('setDate', date2);
                    //sets minDate to dt1 date + 1
                    jQuery('#expiring_date').datepicker('option', 'minDate', date2);
                }
            });
            jQuery('#expiring_date').datepicker({
                // dateFormat: "yy-mm-dd",
                onClose: function () {
                    var dt1 = jQuery('#starting_date').datepicker('getDate');
                    console.log(dt1);
                    var dt2 = jQuery('#expiring_date').datepicker('getDate');
                    if (dt2 <= dt1) {
                        var minDate = jQuery('#expiring_date').datepicker('option', 'minDate');
                        jQuery('#expiring_date').datepicker('setDate', minDate);
                    }
                }
            });
        });
        function PrintRoutes() {
            var base_url = '';
            var url = base_url + 'printroutes';
            var win = window.open(url, '_blank');
            win.focus();
        }
    </script>
@stop