@extends('layouts.main')
@section('contentinner')
<div class="maincontent">
    <div class="contentinner">

        <div class="mediamgr">
            <div class="mediamgr_left">
                <div class="mediamgr_content">
                    <h4 class="widgettitle form-inline">
                        <a href="#">Trailer Maintenance Category</a>
                        <input type="text" name="new_category"  id="new_category" value="" placeholder="New Truck Category" class="span3" />
                        <a href="#" class="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>
                            {{--<th class="head1">Recent Location</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="span2" id="dataquantity{{$category->id}}" value="{{$category->name}}"> </span>
                                <span class="" id="quantityvalue{{$category->id}}">{{$category->name}}</span>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button onclick="editDetails({{$category->id}});" id="editDetails{{$category->id}}" class="btn btn btn-small" >
                                        <i class="icon-pencil icon"></i>
                                    </button>
                                    <button onclick="editSave({{$category->id}});" id="editsave{{$category->id}}" class="btn btn btn-small" style="display:none">
                                        <i class="iconfa-save"></i>
                                    </button>
                                    <button onclick="showDeleteModal({{$category->id}},'{{$category->name}}');" id="" class="btn btn-small" >
                                        <i class="icon-trash icon"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <br /><br />

                    <br class="clearall" />

                </div><!--mediamgr_content-->

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

            <div class="mediamgr_right">
                <div class="mediamgr_rightinner">
                    <h4>Trucks Settings</h4>
                    <ul class="menuright">
                        <li><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.trucks.maintenance-parameter') }}">Truck Maintenance Parameters</a></li>
                        <li><a href="{{ route('settings.trailers.categories') }}">Trailer Category</a></li>
                        <li class="current"><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-->

    </div><!--contentinner-->
</div><!--maincontent-->
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery(".add_category").click(function()
        {
            if(jQuery("#new_category").val() != '')
            {
                jQuery.ajax({
                    url: 'trailer-maintenance-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);
                        }
                    }
                });
            }
        });
    });
    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: "trailer-maintenance-category/update",
            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,name) {
    jConfirm('Are You sure you want to delete '+ name, 'DELETE', function(r) {
        if (r == true){
            CategoryRemove(argument);
        }else{

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