@extends('layouts.main_without_top_button', ['title' => 'TRA Supervision | ' . config('app.name')])
@section('title')
    TRA Supervision
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">TRA Supervision</li>
    </ul>
@stop
@section('contentinner')
    <style>
        #logistics_modal {
            width: 95%;
            margin-left: -32%;
        }
    </style>

    <div class="tabbable" onload="loadScript()">

        <ul class="nav nav-tabs" style="margin-top: 0px">
            <li><a href="{{route('requisitions.tra_supervisions.index')}}"> DAR ES SALAAM </a></li>
            <li><a href="{{route('requisitions.tra_supervisions.index.moro')}}"> MOROGORO </a></li>
        </ul>

        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="row-fluid" style="margin-bottom: 8px;">
                    <div class="span12  profile-left">
                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <a class="btn" id="create_tra_supervision">
                                        <span class="iconsweets-create"></span> CREATE REQUEST <span style="font-size: 10px;color: #51a7c6"> ( alt+g )</span>
                                    </a>
                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->

                        <table class="table table-bordered table-condensed table-striped logistics_table" style="width: 100%"
                               id="requisition_driver_mileage_index">
                            <thead>
                            <tr>
                                <th style="width: 20px"><input type="checkbox" class="checkall"/></th>
                                <th>Date</th>
                                <th>Truck</th>
                                <th>Trailer</th>
                                <th>Driver</th>
                                <th>client</th>
                                <th>Destination</th>
                                <th>Cargo Type</th>
                                {{--<th>Action</th>--}}
                            </tr>
                            </thead>
                        </table>

                    </div><!--span6-->
                </div><!--row-fluid-->
            </div><!--tab-pane-->
        </div>
    </div>

    <script>

        jQuery('#id_from_truck_id,#id_from_container,.searchable_select').select2();
        jQuery(function () {
            var mainDataTable = jQuery('#requisition_driver_mileage_index').
            on('error.dt', function (e, settings, techNote, message) {
                console.log('An error has been reported by DataTables: ', message);
                jQuery.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
                stopSpinner();
            })
                .DataTable({
                    "oLanguage": {
                        "sLoadingRecords": startSpinner(),
                        "sZeroRecords": "No records to display.",
                        "sProcessing": "Please wait - loading records...",
                        "sInfoEmpty": "No entries to display."
                    },
                    "initComplete": function (settings, json) {
                        stopSpinner();
                    },
                    ajax: {
                        url: '{{route('requisitions.tra_supervisions.datatable.index')}}',
                        data: function (d) {
                            //d.id_from_container = jQuery('#id_from_container').val();
                        }
                    },
                    "sPaginationType": "full_numbers",
                    processing: true,
                    serverSide: true,
                    "columns": [
                        {data: 'checkbox'},
                        {data: 'date'},
                        {data: 'truck'},
                        {data: 'trailer'},
                        {data: 'driver'},
                        {data: 'client'},
                        {data: 'destination'},
                        {data: 'cargo_type'}
                    ],
                    "bStateSave": true
                });

            jQuery('#search-form').on('click', function (e) {
                searchTable(e);
            });

            function searchTable(e) {
                mainDataTable.draw();
                e.preventDefault();
            }
        });



        jQuery('#create_tra_supervision').on('click', function () {

            var loading_order_item_id = checkRows('loading_order_item_id');
            var checked = loading_order_item_id.length > 0;
            if (!checked) {
                swal("Please check at least one Truck to continue with the process");
                return false;
            }
            jQuery.ajax({
                url: '{{route('requisitions.tra_supervisions.create')}}',
                type: 'GET',
                data: {
                    loading_order_item_id: loading_order_item_id,
                    position:'DSM'
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data, 'POST');
                    jQuery('.remove_driver_mileage_item').on('click', function () {
                        jQuery(this).parents('tr').remove()
                    });

                    jQuery('.request_amount').keyup(function (event) {
                        var request_amount = jQuery(this).val();
                        var total_amount = 0;
                        jQuery('.request_amount').each(function () {
                            total_amount += parseFloat(removeComma(this.value));
                        });
                        jQuery('#total_tra_supervision_amount').html(total_amount.toLocaleString())
                    });

                    jQuery('.searchable_select_requisition').select2();
                    jQuery('.requisition_date').datepicker();

//                    jQuery('#mileage_new_requisition_form').on('submit', function (e) {
//                        e.preventDefault();
//                        var form = jQuery(this);
//                        storeOrUpdate(form, 'POST');
//                        socket.emit('truckMileage', 1);
//                    });

                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });


//            jQuery("#add_sub_contract").each(function () {
//                if (jQuery(this).attr('initialized') != 'true') {
//                    jQuery(this).click(function () {
//                    });
//                }
//                jQuery(this).attr('initialized', 'true');
//            });
        });


        function checkedRoutes() {
            var checked = jQuery('.route_id:checked').length > 0;
//            if (!checked) {
//                jAlert("Please check at least one route to continue with the process", 'SELECTION DIALOG');
//                return false;
//            }
            var checkRoutes = [];
            jQuery('.route_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    checkRoutes.push(jQuery(this).val());
                }
            });
            return checkRoutes;
        }


        function closeAdvancedSearch() {
            jQuery("#advanced_search").css({
                "width": 0,
                'padding-left': 0
            });
        }
        function openAdvancedSearch() {
            jQuery("#advanced_search").css({
                "width": 230,
                'padding-left': 30
            });
        }
    </script>
@stop