@extends('layouts.container')
<!-- will be used to show any messages -->
@section('title', 'Categories Management')
@section('title_description', '')
@section('css')
	<link href="{{asset('/engine/multiSelect/css/multi-select.css') }}" media="screen" rel="stylesheet" type="text/css">
	<link href="{{asset('/engine/adminLTE/dist/css/skins/skin-blue.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{asset('/engine/iCheck/flat/blue.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('body-class', 'skin-blue')
@section('content')
	@if (Session::has('message'))
		<div class="alert alert-info">{{ Session::get('message') }}</div>
	@endif
	<div class="row">
		<div class="col-md-3">
			<div class="box box-solid">
				<div class="box-header with-border">
					<h3 class="box-title">Group Categories</h3>
					<div class='box-tools'>
						<button class='btn btn-box-tool' data-widget='collapse'><i class='fa fa-minus'></i></button>
					</div>
				</div>
				<div class="box-body no-padding">
					<ul class="nav nav-pills nav-stacked">
						<li><a href="{{ URL::route('categories-all') }}"><i class="fa fa-newspaper-o"></i> ALL</a></li>
						@foreach($Categoriesgroup as $category => $data)
							<li><a href="{{ URL::route('categories-index', $data->id) }}"><i class="fa fa-newspaper-o"></i> {{ $data->group_category_name }}</a></li>
						@endforeach
					</ul>
				</div><!-- /.box-body -->
			</div><!-- /. box -->

		</div><!-- /.col -->
		<div class="col-md-9">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title"><a href="{{ URL::route('categories-create-form') }}" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-plus-sign"></span> New Category</a></h3>
					<div class="box-tools pull-right">
						<div class="has-feedback">
							<input type="text" class="form-control input-sm" placeholder="Search"/>
							<span class="glyphicon glyphicon-search form-control-feedback"></span>
						</div>
					</div><!-- /.box-tools -->
				</div><!-- /.box-header -->
				<div class="box-body no-padding">
					<div class="categories-controls margin">
						<!-- Check all button -->
						<button class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></button>
						<div class="btn-group">
							<button class="btn btn-default btn-sm btn_trash"><i class="fa fa-trash-o"></i></button>
						</div><!-- /.btn-group -->
					</div>
					<div class="table-responsive categories-messages">
						<table class="table table-hover table-striped">
							<thead>
							<tr>
								<th width="10"></th>
								<th class="col-md-5">Group Category Name</th>
								<th>Category Name</th>
								<th class="col-md-1">Status</th>
								<th width="50">Action</th>
							</tr>
							</thead>
							<tbody>
							@foreach($categories as $key => $value)
								<tr>
								<!--<td>{{ $value->id }}</td>-->
									<td><input type="checkbox" class="categories_ids" id="categories_ids[{{ $key }}]" value="{{ $value->id }}" /></td>
									<td>{{ @$value->CategoriesGroup->group_category_name }}</td>
									<td>{{ $value->category_name }}</td>
									<td class="categories-activated">{{ $status[$value->status] }}</td>
									<td>
										<a class="btn btn-sm btn-warning" href="{{ URL::route('categories-edit-form', $value->id) }}"><span class="glyphicon glyphicon-edit"></span></a>
									</td>
								</tr>
							@endforeach
							</tbody>
						</table>
						<div class="text-center">
							{{ $categories->links() }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('js')
	<script src="{{asset('/engine/iCheck/icheck.min.js') }}" type="text/javascript"></script>
	<script src="{{asset('/engine/fastclick/fastclick.min.js') }}"></script>
	<script src="{{asset('/engine/slimScroll/jquery.slimscroll.min.js') }}" type="text/javascript"></script>
	<script>
        $(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.categories-messages input[type="checkbox"]').iCheck({
                checkboxClass: 'icheckbox_flat-blue',
                radioClass: 'iradio_flat-blue'
            });

            $(".checkbox-toggle").click(function () {
                var clicks = $(this).data('clicks');
                if (clicks) {
                    $(".categories-messages input[type='checkbox']").iCheck("uncheck");
                    $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
                } else {
                    $(".categories-messages input[type='checkbox']").iCheck("check");
                    $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
                }
                $(this).data("clicks", !clicks);
            });

            $('.btn_trash').click(function() {
                var $checked = $(".categories-messages input[type='checkbox']:checked:enabled");
                var $counter = $checked.length;
                $checked.each(function(index, value) {
                    $.ajax({
                        url: "{{ URL::route('categories-delete', '') }}"+ '/' + $(value).val(),
                        method: 'DELETE'
                    }).always(function() {
                        if (($counter-1) === index) {
                            $(".categories-messages input[type='checkbox']").iCheck("uncheck");
                            window.location.reload();
                        }
                    });
                });
            });
        });
	</script>
@endsection