@extends('layouts.main_without_top_button')
@section('title')
    Cities
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Cities</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')
        <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" onclick="modelShow('add_bonus_loss_rate')"><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 >SN</th>
                                <th style="width:80px">More 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>



    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog"
         data-backdrop="static" class="modal  hide fade in" id="add_bonus_loss_rate">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">CREATE DRIVER BONUS AND LOSS</h3>
        </div>
        <form action="{{route('settings.driver_bonus_loss.store')}}" method="POST"
              id="create_driver_bonus_loss_rate_form">
            <div class="modal-body">
                <div class="row-fluid">
                    <div class="span12">

                        <label class="control-label span1" for="creation_date">Date</label>
                        <div class="controls span4"><input type="text" name="date" class="span12 datepickers"
                                                           id="creation_date" required/></div>

                    </div>
                </div>

                <div class="row-fluid" style="margin-top: 15px">
                    <table class="table table-condensed" id="addedRow">
                        <tr>
                            <th style="width: 25%"></th>
                            @foreach($fuel_product_types as $product_type)
                                <th>{{$product_type->abbreviation}}</th>
                            @endforeach
                        </tr>
                        @foreach($routes as $route)
                            <tr>
                                <td>
                                    <input type="hidden" value="{{$route->id}}" name="route_id[]">
                                    {{$route->route}}
                                </td>
                                @foreach($fuel_product_types as $product_type)
                                    <td>
                                        <input type="hidden" name="product_type_id[{{$route->id}}][]"
                                               value="{{$product_type->id}}">
                                        <input type="text" name="rate[{{$route->id}}][]" value=""
                                               class="span12 number" required/>
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </table>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn " data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </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_rate_form').on('submit', function (e) {
            e.preventDefault();
            storeOrUpdate(jQuery(this), 'POST');
            jQuery('#add_bonus_loss_rate').modal('toggle');
        });

        // 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