@extends('layouts.main_without_top_button', ['title' => 'DRIVERS SETTINGS | ' . config('app.name')])
@section('title')
    DRIVERS SETTINGS
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Finance</a> <span class="divider">/</span></li>
        <li><a href="">Settings</a> <span class="divider">/</span></li>
        <li class="active">DRIVERS SETTINGS</li>
    </ul>
@stop
@section('contentinner')
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <style>
        .pac-container {
            z-index: 99999;
        }
        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="tabbable">
        {{--@include('routes.settings.routes.includes.profile')--}}
        @include('financial_accounts.settings.includes.profile')
        <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: 15px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <a class="btn create_driver_bonus_loss" ><span class="icon icon-plus"></span> NEW RATE</a>
                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->

                        <table class="table table-striped table-bordered table-condensed" id="driver_bonus_loss_table">
                            <thead>
                            <tr>
                                <th style="width:20px" >SN</th>
                                <th style="width:50px">Details</th>
                                <th>Created On</th>
                                <th >Created By</th>
                                <th >Status</th>
                                <th >Actions</th>
                            </tr>
                            </thead>
                        </table>
                    </div><!--span6-->
                </div><!--row-fluid-->
            </div><!--tab-pane-->
        </div>
    </div>
    <script type="text/javascript">
    jQuery('.datepickers').datepicker();
        var oTable = jQuery('#driver_bonus_loss_table').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('settings.driver_bonus_loss.datatable')}}',
                data: function (d) {
                    d.city_id = jQuery('#name').val();
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "aoColumnDefs": [{
                "aTargets": [5],
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    jQuery(nTd).css('text-align', 'center');
                }

            }],
            "columns": [
                {data: 'id'},
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                {data: 'date'},
                {data: 'user_id'},
                {data: 'is_active'},
                {data: 'actions'}
            ],

            "fnDrawCallback": function () {
                jQuery('.edit_driver_bonus_loss').on('click', function () {
                    var pr = jQuery(this).parents('tr');
                    var driver_bonus_loss_calculation_method_id = pr.find('.driver_bonus_loss_calculation_method_id').val();
                    var url = "{{ route('settings.driver_bonus_loss.edit', 'id') }}".replace('id', driver_bonus_loss_calculation_method_id);
                    edit(url);
                });

                jQuery('.delete_driver_bonus_loss').on('click', function (e) {
                    e.preventDefault();
                    var pr = jQuery(this).parents('tr');
                    var driver_bonus_loss_calculation_method_id = pr.find('.driver_bonus_loss_calculation_method_id').val();
                    var delete_url = "{{ route('settings.driver_bonus_loss.destroy', 'id') }}".replace('id', driver_bonus_loss_calculation_method_id);
                    destroy(delete_url);

                });
            },
            "fnRowCallback" : function(nRow, aData, iDisplayIndex){
                var oSettings = this.fnSettings();
                $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
                return nRow;
            },
            "bStateSave": true
        });




        var mainDataTable = oTable;
        jQuery('.create_driver_bonus_loss').click(function (e) {
            e.preventDefault();
            var url="{{route('settings.driver_bonus_loss.create')}}";
            create(url)

        });

        // Array to track the ids of the details displayed rows
        var loading_order_details = [];

        jQuery('#driver_bonus_loss_table tbody').on('click', 'tr td.details-control', function () {

            var tr = jQuery(this).closest('tr');
            var row = oTable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), loading_order_details);

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

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



    </script>
@stop