@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="#">Trailers Category</a>
                            <input type="text" name="new_category"  id="new_category" value="" placeholder="New 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 class="current"><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-->

        </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-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-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-category/delete",
        type: 'GET',
        data: {
            'category_id' : argument,//popup_ok
          },
        cache: false,
        success: function(data) {
            location.reload();                      
           }
          });
    }
    </script>
@stop