@extends('layouts.main', ['title' => 'LOGISTICS | Driver\'s Losses'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li class="active">Driver's Loss</li>
    </ul>
@stop
@section('title')
    Driver's Loss
@endsection
@section('msghead_menu')
    <li class="right btn-group">

        <button class="btn" onclick="openAdvancedSearch('route_truck_allocation')">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
        <button class="btn" style="margin-right: 2px" id="recovery_voucher">
            <span class="iconsweets-create"></span> RECOVERY VOUCHER
        </button>
    </li>
@endsection


@section('contentinner')
    <style>
        tr:hover, tr.selected {
            background-color: #eeeeee;
            font-weight: 600;
        }

        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;
        }

        /*.dataTables_length {*/
        /*height: 10px;*/
        /*}*/

    </style>
    <div id="route_truck_allocation" class="sidenav">
        <a href="javascript:void(0)" class="closebtn"
           onclick="closeAdvancedSearch('route_truck_allocation')">&times;</a>

        <div style="margin-bottom: 8px">
            <form target="_blank" class="form-inline form-filter" method="get"
                  action="{{route('route_assignments.reports.loss.print')}}">
{{--                <label class="control-label" for="Category">Recovery Type</label>--}}
{{--                <select name="driver_id" width="100%" id="driver_id" class="searchable_select">--}}
{{--                    <option value="">ALL</option>--}}
{{--                    @foreach($drivers as $driver)--}}
{{--                        <option value="{{$driver->employee_id}}">{{$driver->driver}}</option>--}}
{{--                    @endforeach--}}
{{--                </select>--}}

                <label class="control-label" for="Category">Driver</label>
                <select name="driver_id" width="100%" id="driver_id" class="searchable_select">
                    <option value="">ALL</option>
                    @foreach($drivers as $driver)
                        <option value="{{$driver->employee_id}}">{{$driver->driver}}</option>
                    @endforeach
                </select>

                <button class="btn" style="" id="filter_tranker_loss">FILTER</button>
                <input class="btn" name="submit" id="print_permits" type="submit" value="PRINT">
{{--                <input class="btn" name="submit" id="print_permits" type="submit" value="EXCEL">--}}
            </form>


        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered logistics_table" id="driver_losses">
                <thead>
                <tr>
                    <th width='5px'><input type="checkbox" class="checkall"/></th>
                    <th>Date</th>
                    <th>Driver</th>
                    <th>Route</th>
                    <th>Vehicle</th>
                    <th>Total Loss</th>
                    <th>Recovery Type</th>
                    <th>Recovery</th>

                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script>
        $('.searchable_select').select2();


        let mainDataTable = jQuery('#driver_losses').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No Orders available.",
                    "sInfoEmpty": "No entries to display."
                },
                lengthMenu: [
                    [10, 25, 50, 100, 200],
                    ['10 Locations', '25 Locations', '50 Locations', '100 Locations', '100 Locations']
                ],
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: "{{ route('account_management.debt_management.get_index_data',$recovery_type) }}",
                    data: function (d) {
                        d.search_field = $('input[name=search_field]').val();
                        d.driver_id = $('#driver_id').val();
                    }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "aoColumnDefs": [{
                    "aTargets": [5],
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        jQuery(nTd).css('text-align', 'right');
                        if ((sData == 0.00)) {
                            jQuery(nTd).addClass('highlight-red')
                        }
                    }
                },
                    {
                        "aTargets": [7],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if ((sData == 0.00)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    }
                ],
                "columns": [
                    {
                        data: 'checkbox',
                        "class": "dt_checkbox",
                        "orderable": false
                    },
                    {"class": "link", data: 'collection_date'},
                    {"class": "link", data: 'driver'},
                    {"class": "link", data: 'trip'},
                    {"class": "link", data: 'vehicle'},
                    {"class": "link", data: 'amount'},
                    {"class": "link", data: 'type'},
                    {"class": "link", data: 'to_be_collected'},
                ],
                "bStateSave": true
            });

        $('#filter_tranker_loss').on('click', function (e) {
            e.preventDefault();
            mainDataTable.draw();
        });

        function createOrEdit(url, content = null) {
            var splited_url = url.split("/");
            var action = splited_url[splited_url.length - 1];
            var method = action == 'edit' ? 'PUT' : 'POST';

            jQuery.ajax({
                url: url,
                type: 'GET',
                data: {
                    'content': content,
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data, method);
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        }
        $('#recovery_voucher').on('click', function () {

        });
        $('#driver_losses tbody').on('dblclick', 'tr td.link', function () {
            let tr = $(this).closest('tr');
            let loan_recovery_plan_id = tr.find('.loan_recovery_plan_id').val();

            let url = "{{route('recovery_vouchers.create',[':id'])}}";
            url = url.replace(":id", loan_recovery_plan_id);

            let method = 'POST';
            jQuery.ajax({
                url: url,
                type: 'GET',
                data: {
                    'loan_recovery_plan_id': loan_recovery_plan_id,
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data, method);
                    stopSpinner();
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });


    </script>
@endsection