@extends('layouts.main_without_top_button')
@section('title')
    UPS: DIPPING READINGS
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">UPS</li>
    </ul>
@stop
@section('contentinner')
    <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="tabbable">
    
        <ul class="nav nav-tabs" style="margin-top: 0px">
            <li><a href="{{ route('pump_readings.index') }}"> Fuel Pumps Readings</a></li>
            <li><a href="{{ route('tank_readings.index') }}"> Fuel Tanks Readings</a></li>
            <li class="pull-right btn-group">
                <div class="btn-group">
                    <button onclick="create('{{ route('tank_readings.create') }}')" class="btn">
                        <i class="icon-th"></i> &nbsp;New Tank Reading
                    </button>
                </div><!--btn-group-->
            </li>
        </ul>
        
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row-fluid">
                    <div class="span12">

                        <div class="mediamgr">
                            <div class="mediamgr_left">
                                
                                <table class="table table-striped table-condensed" id="mainDataTable">
                                    <thead>
                                    <tr>
                                        <th style="width: 10px" class="head0 nosort">No</th>
                                        <th style="width: 10px">More</th>
                                        <th class="head0">Date</th>
                                        <th class="head0">Employee</th>
                                        <th class="head1" width="20">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>

                            </div><!--mediamgr_left -->

                        </div><!--mediamgr-->
                    </div><!--span12-->
                </div><!--row-fluid-->
            </div><!--row-fluid-->
        </div><!--row-fluid-->
    </div><!--tabbable-->
    
    
    <!-- Modal -->
    <!-- <div aria-hidden="false" class="fade hide modal animated" data-backdrop="static" id="main_modal" data-backdrop="static"></div> -->
    
    <script type="text/javascript">
        var mainDataTable = jQuery('#mainDataTable').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading records...",
                "sZeroRecords": "No record found",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: "{{ route('tank_readings.indexDatas') }}",
                data: function (d) {},
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {data: 'checkbox'},
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                {"class": "link", data: 'date'},
                {"class": "link", data: 'employee'},
                {data: 'action'}
            ],
            "bStateSave": true
        });
        // Array to track the ids of the details displayed rows
        var details = [];
        
        jQuery('#mainDataTable 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'), details);

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

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

                // Add to the 'open' array
                if (idx === -1) {
                    details.push(tr.attr('id'));
                }
            }
        });
        function format(d) {
            return d.fp_reading_more_details;
        }
        
        
        
        
        // // Ajax function to edit record
        function editRecordFn(id) {
            var url = '{{ route("tank_readings.edit", ":id") }}' . replace(':id', id);
            edit(url);
        }
        // //Ajax function to delete a record
        function deleteRecordFn(id) {
            var url = '{{ route("tank_readings.destroy", ":id") }}' . replace(':id', id);
            destroy(url);
        }
    </script>
@stop