@extends('layouts.main_without_top_button')
@section('title')
    Settings
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Settings</a> <span class="divider">/</span></li>
        <li class="active">Truck Categories</li>
    </ul>
@stop
@section('contentinner')

        <div class="mediamgr">
        <div class="mediamgr_left">
            <div class="mediamgr_content">
                <h4 class="widgettitle form-inline"><a href="javascript:;">
                    <a href="javascript:;">Truck Category</a>
                    <input type="text" name="new_category"  id="new_category" value="" placeholder="New Truck Category" class="span3" />
                    <a href="javascript:;" class="btn" id="add_category"><span class="icon-plus"></span> Add Category</a>
                </h4>
                    <table class="table table-striped" id="dyntable">
                        <colgroup>
                            <col class="con0" style="align: center; width: 4%" />
                            <col class="con1" />
                            <col class="con0" />
                            <col class="con1" />
                            <col class="con0" />
                            <col class="con1" />
                        </colgroup>
                        <thead>
                        <tr>
                            <th class="head0 nosort"><input type="checkbox" class="checkall" /></th>
                            <th class="head0">Category</th>
                            <th class="head1" width="20">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($categories as $category)
                            <tr class="gradeX">
                                <td class="aligncenter"><span class="center"><input type="checkbox" /></span></td>
                                <td>
                                  <span id="quantity{{$category->id}}" style="display:none">
                                  <input type="text" class="span4" id="dataquantity{{$category->id}}" value="{{$category->category}}"> </span>
                                  <span class="" id="quantityvalue{{$category->id}}">{{$category->category}}</span>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button onclick="editDetails({{$category->id}});" id="editDetails{{$category->id}}" class="btn btn-small" >
                                                <i class="icon-pencil icon"></i>
                                        </button>
                                        <button onclick="editSave({{$category->id}});" id="editsave{{$category->id}}" class="btn btn-small" style="display:none">
                                                <i class="iconfa-save"></i>
                                        </button>
                                        <button onclick="showDeleteModal({{$category->id}},'{{$category->category}}')" class="btn btn-small" >
                                            <i class="icon-trash "></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <br /><br />
                    
                    <br class="clearall" />
                    
                    </div><!--mediamgr_content-->

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

            <!-- <div class="mediamgr_right"  style="margin-top: -18px;margin-bottom: 10px;"> -->
                <div class="mediamgr_right">
                <div class="mediamgr_rightinner">
                    <h4>Trucks Settings</h4>
                    <ul class="menuright">
                        <li class="current"><a href="{{ route('settings.trucks.maintenance') }}">Truck Categories</a></li>
                        {{--<li><a href="{{ route('settings.trucks.maintenance-category') }}">Truck Maintenance Categories</a></li>--}}
                        <li><a href="{{ route('settings.trailers.categories') }}">Trailer Category</a></li>
                        <li><a href="{{ route('settings.trailers.maintenance-category') }}">Trailer Maintenance Category</a></li>
                        <li><a href="{{ route('settings.trailers.maintenance-parameter') }}">Trailer Maintenance Parameter</a></li>
                        
                    </ul>
                </div><!-- mediamgr_rightinner -->
            </div><!-- mediamgr_right -->
            <br class="clearall" />
        </div><!--mediamgr-->

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#add_category").click(function()
        {
            if(jQuery("#new_category").val() != '')
            {
                jQuery.ajax({
                        url: 'truck-category/add',
                        dataType: 'json',
                        type: 'GET',
                        data: {'category': jQuery('#new_category').val()},
                        cache: false,
                        beforeSend: function(){
                        },
                        success: function(data) {
                            if(data)
                            {
                                jQuery('#dyntable tbody').append(data);
                            }
                            // alert(data);
                        }
                    });
            }
        });
    });
function editDetails(argument) {
        jQuery('#quantity' + argument).show();
        jQuery('#quantityvalue'+ argument).hide();

        jQuery('#editsave'+ argument).show();
        jQuery('#editDetails'+ argument).hide();

        jQuery('#descript' + argument).show();
        jQuery('#descriptionvalue'+ argument).hide();
     }
function editSave (argument) {
    var target = document.getElementById('dyntable');
    Initiatespinner(target );
    jQuery.ajax({
        url: "truck-category/updatecategory",
        type: 'GET',
        data: {
            'category_id' : argument,
            'category': jQuery('#dataquantity' + argument).val(),
        },
        cache: false,
        beforeSend: function(){

        },
        success: function(html) {
           jQuery('#messege_add').html(html); 
           location.reload();                      
           }
        });
     }
    function showDeleteModal(argument,category) {
    jConfirm('Are You sure you want to delete '+ category, 'DELETE', function(r) {
        if (r == true){
            CategoryRemove(argument);
        }else{

        }           
            
    });
}
function CategoryRemove(argument) {
    jQuery.ajax({
        url: "truck-category/deletecategory",
        type: 'GET',
        data: {
            'category_id' : argument,//popup_ok
          },
        cache: false,
        success: function(data) {
            location.reload();                      
           }
          });
}
</script>
@stop