@extends('layouts.main_without_top_button')
@section('title')
    Fuel Types
@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 Types</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('tank_details')"><a href="{{ route('settings.fuel_tanks') }}">Tank Details</a></li>
                                        <li class="@yield('pumps')"><a href="{{ route('settings.fuel_pumps') }}">Pumping Machines</a></li>
                                        <li class="@yield('fuel_types')"><a href="{{ route('settings.fuel_types') }}">Fuel Types</a></li>
                                        <li class="right btn-group">
                                            <div class="btn-group">
                                                <button class="btn dropdown-toggle" data-toggle="dropdown">
                                                    <i class="icon-th"></i> &nbsp;OPTIONS <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a onclick="createRecordFn()"><i class="icon-plus"></i> &nbsp;Add Fuel Type</a></li>
                                                    <li><a onclick="modelShow('create_fuel_product_type_modal')"><i class="icon-plus"></i> &nbsp;Add Fuel Type</a></li>
                                                </ul>
                                            </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">Name</th>
                                        <th class="head0">Abbreviation</th>
                                        <th class="head0">Description</th>
                                        <th class="head1" width="20">Action</th>
                                        {{--<th class="head1">Recent Location</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 orders...",
                "sZeroRecords": "No Orders available.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: "{{ route('settings.fuel_types_datas') }}",
                data: function (d) {
                },
                error: function (xhr, textStatus, error) {
                    if (textStatus === 'timeout') {
                        alert('Timeout error. The server took too long to send back the data.\nPlease try again.');
                    }
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {data: 'checkbox'},
                {"class": "link", data: 'name'},
                {"class": "link", data: 'abbreviation'},
                {"class": "link", data: 'description'},
                {data: 'action'}
            ],
            "bStateSave": true
        });
        
        
        // Ajax function to create record
        function createRecordFn() {
            var route = "{{ route('settings.fuel.create', ['FuelProductType']) }}";
            
            jQuery.ajax({
                url: route,
                type: "GET",
                data: "",
                success: function (data) {
                    console.log(data);
                    var create_modal = jQuery('#main_modal');
                    create_modal.empty().append(data);
                    modelShow('main_modal');
                    
                    var create_form = create_modal.find('form');
                    create_form.on('submit', function(e) {
                        e.preventDefault();
                        storeRecordFn(create_form);
                    });
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                }
            });
        }
        
        //Ajax function to add a record
        function    storeRecordFn(form) {
            var route = form.attr('action');
            var formData = form.serialize();
            
            jQuery.ajax({
                url: route,
                type: 'POST',
                data: formData,
                success: function (data) {
                    console.log(data);
                    
                    if (data.state === 'Done') {
                        jQuery.jGrowl(data.msg);
                        mainDataTable.draw();
                    } else if (data.state === 'Fail') {
                        jQuery.jGrowl(data.msg);
                    } else {
                        jQuery.jGrowl('Something went wrong');
                    }
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                    // toastr.error('Unknown error occur!', 'Error');
                }
            });
        }
        
        // Ajax function to edit record
        function editRecordFn(id) {
            var route = "{{ route('settings.fuel.edit', ['FuelProductType', ':id']) }}". replace(':id', id);
            
            jQuery.ajax({
                url: route,
                type: "GET",
                data: "",
                success: function (data) {
                    console.log(data);
                    var edit_modal = jQuery('#main_modal');
                    edit_modal.empty().append(data);
                    modelShow('main_modal');
                    
                    var edit_form = edit_modal.find('form');
                    edit_form.on('submit', function(e) {
                        e.preventDefault();
                        updateRecordFn(edit_form);
                    });
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                }
            });
        }

        //Ajax function to add a record
        function updateRecordFn(form) {
            var action = form.attr('action');
            var formData = form.serialize();
            
            jQuery.ajax({
                url: action,
                type: 'PUT',
                data: formData,
                success: function (data) {
                    console.log(data);

                    if (data.state === 'Done') {
                        jQuery.jGrowl(data.msg);
                        mainDataTable.draw();
                    } else if (data.state === 'Fail') {
                        jQuery.jGrowl(data.msg);
                    } else {
                        jQuery.jGrowl('Something went wrong');
                    }
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                    // toastr.error('Unknown error occur!', 'Error');
                }
            });
        }

        //Ajax function to delete a record
        function deleteRecordFn(id) {
            swal({
                title: "Are you sure?",
                text: "You will not be able to recover this imaginary file!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            },
            function () {
                swal({title: "", text: "", timer: 0, showConfirmButton: false}); //

                var route = "{{ route('settings.fuel.delete', ['FuelProductType', ':id']) }}". replace(':id', id);

                jQuery.ajax({
                    url: route,
                    type: 'DELETE',
                    //data: {"id":stadiumId, "_token": "{{ csrf_token() }}" },
                    success: function (data) {
                        console.log(data.state + ' ' + data.msg);

                        if (data.state === 'Done') {
                            jQuery.jGrowl(data.msg);
                            mainDataTable.draw();
                        } else if (data.state === 'Fail') {
                            jQuery.jGrowl(data.msg);
                        } else {
                            jQuery.jGrowl('Something went wrong!');
                        }
                    },
                    error: function (data) {
                        toastr.error('Process fail', 'Error occured');
                        console.log(data);
                    }
                });
            });
        }

    </script>
@stop