@extends('layouts.main_without_top_button')
@section('title')
    Fuel Tanks
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{ route('settings.fuel_index') }}">Fuels Settings</a> <span class="divider">/</span></li>
        <li class="active">Fuel Tanks</li>
    </ul>
@stop
@section('truck_categories')
    current
@stop
@section('contentinner')
    <style type="text/css">
        input.invalid, textarea.invalid {
            border: 2px solid red;
        }

        input.valid, textarea.valid {
            border: 2px solid green;
        }
    </style>
    <div class="tabbable">
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row-fluid">
                    <div class="span12">
                        
                        
                        
                        <div class="mediamgr">
                            <div class="mediamgr_left">
                                <div class="mediamgr_category" style="width: 100%">
                                    <ul>
                                        <li class="@yield('fuel_types')"><a href="{{ route('fuel_types.index') }}">Fuel Types</a></li>
                                        <li class="@yield('tank_details')"><a href="{{ route('fuel_tanks.index') }}">Tank Details</a></li>
                                        <li class="@yield('pumps')"><a href="{{ route('fuel_pumps.index') }}">Pumping Machines</a></li>
                                        <li class="right btn-group">
                                            <div class="btn-group">
                                                <button onclick="create('{{ route('fuel_tanks.create') }}')" class="btn dropdown-toggle">
                                                    <i class="icon-th"></i> &nbsp;Add Fuel Tank
                                                </button>
                                            </div><!--btn-group-->
                                        </li>
                                    </ul>
                                </div><!--mediamgr_category-->
                                
                                <table class="table table-striped table-condensed" id="mainDataTable">
                                    <thead>
                                        <tr>
                                            <th class="head0 nosort">No</th>
                                            <th class="head0">Location</th>
                                            <th class="head0">Capacity</th>
                                            <th class="head0">Fuel Type</th>
                                            <th class="head0">Connected Pumps</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-->
    
    <script type="text/javascript">
        var mainDataTable = jQuery('#mainDataTable').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading data...",
                "sZeroRecords": "No data available.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: "{{ route('fuel_tanks.datatable') }}",
                data: function (d) {},
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {data: 'checkbox'},
                {data: 'location', "class": "link"},
                {data: 'fuel_capacity', "class": "link"},
                {data: 'fuel_product_type', "class": "link"},
                {data: 'fuel_pumps', "class": "link"},
                {data: 'action'}
            ],
            "bStateSave": true
        });
        
        // Ajax function to edit record
        function editRecordFn(id) {
            var url = "{{ route('fuel_tanks.edit', ':id') }}". replace(':id', id);
            edit(url);
        }
        
        //Ajax function to delete a record
        function deleteRecordFn(id) {
            var url = "{{ route('fuel_tanks.destroy', ':id') }}". replace(':id', id);
            destroy(url);
        }

    </script>
@stop