added clipart category

app/Http/Controllers/admin/AdminController.php

@@ -414,11 +414,11 @@ class AdminController extends Controller
         return view('admin_pages.reports');
     }
 
-    public function viewClipart(){
+    public function addClipart(){
         $AdminModel 	    = new AdminModel;
         $clipart_categories_array 	= $AdminModel->selectClipartCategory();
 
-        return view('admin_pages.clipart')
+        return view('admin_pages.add_clipart')
                                     ->with('clipart_categories_array', $clipart_categories_array);
     }
 
@@ -432,12 +432,13 @@ class AdminController extends Controller
         );
 
         $res 	= $AdminModel->insertClipartCategory($data);
-
+        // var_dump($res);
         if($res){
             return response()->json(array(
                 'success' => true,
                 'addClass'=> 'modal-close-reload',
-                'message' => 'Clipart Category is successfully added.'
+                'message' => 'Clipart Category is successfully added.',
+                'last_inserted_id' => $res
             ));
 
         }else{
@@ -569,5 +570,84 @@ class AdminController extends Controller
 		));
 
     }
+
+    public function viewClipartCategories(){
+        $AdminModel 	    = new AdminModel;
+        $clipart_categories_array 	= $AdminModel->ClipartCategory();
+        return view('admin_pages.clipart_categories')
+                                    ->with('clipart_categories_array', $clipart_categories_array);
+    }
+
+    public function deleteClipartCategory(Request $request){
+        $post 	=	$request->all();
+        $AdminModel 	    = new AdminModel;
+
+        $res 	= $AdminModel->deleteClipartCategory($post['id']);
+
+        if($res){
+            return response()->json(array(
+                'success' => true,
+                'message' => "Clipart Category is successfully deleted."
+            ));
+        }
+    }
+
+    public function saveClipartCatOrdering(Request $request){
+        $post 	=	$request->all();
+        $AdminModel 	    = new AdminModel;
+
+        $arrayClipartCat = $post['clip_cat_id'];
+		$order = 1;
+
+		foreach ($arrayClipartCat as $item) {
+			$i = $AdminModel->updateClipartCatOrdering($order, $item);
+			$order++;
+        }
+   
+        return response()->json(array(
+            'success' => true,
+            'message' => "Clipart Category ordering is succcessfully updated!"
+        ));
+        
+    }
+
+    public function updateClipartCategory(Request $request){
+        $post 	=	$request->all();
+        $AdminModel 	    = new AdminModel;
+
+        $id = $post['id'];
+        $category = $post['category'];
+        $is_active = $post['is_active'];
+
+        $data = array (
+            'CategoryName' =>  $category,
+            'IsActive' => $is_active
+        );
+
+        $res 	= $AdminModel->updateClipartCategory($id, $data);
+
+        if($res){
+            return response()->json(array(
+                'success' => true,
+                'message' => "Clipart Category ordering is succcessfully updated!"
+            ));
+        }else{
+            return response()->json(array(
+                'success' => false,
+                'message' => "Something went wrong. Please refresh the page and try again."
+            ));
+        }
+       
+        
+    }
+
+    public function viewClipart(){
+        $AdminModel 	            = new AdminModel;
+        $clipart_array 	= $AdminModel->selectCliparts();
+        
+        return view('admin_pages.cliparts')
+                                    ->with('clipart_array', $clipart_array);
+    }
+
     
 }

app/Http/routes.php

@@ -43,10 +43,18 @@ Route::group(['middleware' => 'auth'], function () {
         Route::get('overlay-pattern', 'admin\AdminController@overlayPattern');
 
         Route::get('reports', 'admin\AdminController@viewReports');
-        Route::get('clipart', 'admin\AdminController@viewClipart');
+
+        Route::get('clipart-add', 'admin\AdminController@addClipart');
+        Route::get('cliparts', 'admin\AdminController@viewClipart');
+        Route::get('clipart-categories', 'admin\AdminController@viewClipartCategories');
         Route::post('clipart/save-category', 'admin\AdminController@saveClipartCategory');
         Route::post('clipart/save-svg-clipart', 'admin\AdminController@saveSVGClipart');
+        Route::post('clipart/delete-clipart-category', 'admin\AdminController@deleteClipartCategory');
+        Route::post('clipart/save-clipart-cat-ordering', 'admin\AdminController@saveClipartCatOrdering');
+        Route::post('clipart/update-clipart-category', 'admin\AdminController@updateClipartCategory');
+        
 
+        
         Route::get('user-list', 'admin\AdminController@userList');
 
         Route::post('post/update-user-as-store-owner', 'admin\AdminController@updatUserAsStoreOwner');      

app/Models/admin/AdminModel.php

@@ -146,6 +146,15 @@ class AdminModel extends Model
 		return $i;
 	}
 
+	function ClipartCategory(){
+		$i = DB::table('clipart_categories')
+					->leftjoin('user_logins', 'clipart_categories.UserId', '=', 'user_logins.id')
+					->select('clipart_categories.*', 'user_logins.username')
+					->orderby('clipart_categories.Ordering', 'ASC')
+					->paginate(18);
+		return $i;
+	}
+
 	function selectStoreOwners($store_id){
 		$i = DB::table('user_logins')
 				->where('role', 'store_owner')
@@ -156,7 +165,7 @@ class AdminModel extends Model
 
 	function insertClipartCategory($data){
 
-		$i = DB::table('clipart_categories')->insert($data);
+		$i = DB::table('clipart_categories')->insertGetId($data);
 		return $i;
 	}
 
@@ -166,6 +175,11 @@ class AdminModel extends Model
 		return $i;
 	}
 
+	function updateClipartCatOrdering($order, $id){
+		$i = DB::table('clipart_categories')->where('Id', $id)
+							->update(['Ordering' => $order]);
+	}
+
 
 	function userList(){
 		$i = DB::table('user_logins')
@@ -193,6 +207,34 @@ class AdminModel extends Model
 				->update(['role'=> 'user', 'store_id'=> $data['store_id']]);	
 		return $i;
 	}
+
+	function deleteClipartCategory($id){
+
+		$i = DB::table('clipart_categories')
+								->where("Id", $id)
+								->delete();
+		return $i;
+	}
+
+	function updateClipartCategory($id, $data){
+
+		$i = DB::table('clipart_categories')
+								->where("Id", $id)
+								->update($data);	
+						return $i;
+	}
+
+	function selectCliparts(){
+
+		$i = DB::table('cliparts')
+								->orderby("Id", "DESC")
+								->paginate(16);
+						return $i;
+	}
+
+
 	
 	
+
+	
 }

resources/views/admin/main.blade.php

@@ -41,7 +41,9 @@ scratch. This page gets rid of all links and provides the needed markup only.
     <link href="{{ asset('/bower_components/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
     <!-- Theme style -->
     <link rel="stylesheet" href="{{ asset('/bower_components/admin-lte/dist/css/AdminLTE.min.css') }}">
-   
+    <!-- jquery-ui -->
+	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    
     <style>
         /* .store-password-field {
           
@@ -152,6 +154,50 @@ desired effect
     immediately after the control sidebar -->
     <div class="control-sidebar-bg"></div>
     </div>
+
+    <div class="modal fade" id="modal_add_category" role="dialog">
+        <div class="modal-dialog">
+            <!-- Modal content-->
+            <div class="modal-content">
+                <form id="frm_add_category">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        <h4 class="modal-title">Adding Category</h4>
+                    </div>
+                    <div class="modal-body">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div id="modal_add_category_msg"></div>
+                                <div class="form-group">
+                                    Category Name *
+                                    <div class="row">
+                                        <div class="col-sm-12">
+                                            <input type="text" name="category" class="form-control" placeholder="Enter category name">
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    Category Status *
+                                    <div class="row">
+                                        <div class="col-sm-12">
+                                            <select name="is_active" class="form-control">
+                                                <option value="1">Active</option>
+                                                <option value="0">Inactive</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-primary btn-custom-save">Save</button>
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
 <!-- ./wrapper -->
 
     <!-- REQUIRED JS SCRIPTS -->
@@ -184,6 +230,8 @@ desired effect
     <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.15/fabric.min.js"></script>
     <!-- select2 -->
     <script src="{{ asset('/bower_components/select2/dist/js/select2.min.js') }}"></script>
+    <!-- jquery-ui -->
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
     <script>
         $(document).ready(function() {
@@ -198,7 +246,16 @@ desired effect
             }catch(e){
 
             }
-           
+            
+            var tblbody_clipart_cat = $('#tblbody_clipart_cat');
+ 
+            tblbody_clipart_cat.sortable({
+                revert: 100,
+                placeholder: 'placeholder'
+            });
+
+            tblbody_clipart_cat.disableSelection();
+
             $('#svg_clipart').on('change', function(event) {
                 var tmppath = URL.createObjectURL(event.target.files[0]);
                 // $("img").fadeIn("fast").attr('src', URL.createObjectURL(event.target.files[0]));
@@ -276,8 +333,6 @@ desired effect
 
             $('#store_owners_table').DataTable();
 
-            
-
             $('#list').click(function(event){
                 event.preventDefault();
                 $('#products .item').addClass('list-group-item');
@@ -520,8 +575,7 @@ desired effect
 				},
 				submitHandler: submitAddCategoryForm
 			});
-
+     
-            
             $(document).on('hidden.bs.modal', '.modal-close-reload', function(){
                 location.reload();
             });
@@ -702,13 +756,137 @@ desired effect
                     
                 });
             }
+
+            $(document).on('button click', '.btn-delete-clipart-cat', function() {      
+                var getId = $(this).data('id');
+                $.ajax({
+                    type : 'POST',
+                    url  : "{{ url('admin/clipart/delete-clipart-category') }}",
+                    data : {
+                        id : getId
+                    },
+                    beforeSend: function(xhr){
+                        var token = $('meta[name="csrf_token"]').attr('content');
+                        if (token) {
+                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
+                        }
+                    },
+                    success :  function(response){
+                        if(response.success){                          
+                            alert(response.message)
+                            location.reload();
+                        }          
+                    }
+                });
+            });
+
+            $(document).on('button click', '.btn-edit-clipart-cat', function() {
+                var getId = $(this).data('id');
+                var getCategory = $(this).data('category');
+                var getStatus = $(this).data('status');
+
+                $('#modal_edit_category').modal('show');
+                $('#edit_category').val(getCategory);
+                $('#edit_is_active').val(getStatus);
+                $('#cat_id').val(getId);
+                
+            });
+
+            $("#frm_edit_category").validate({
+				rules: {
+                    category: {
+						required: true
+					},
+					is_active: {
+						required: true
+					}
+                },
+				messages: {},
+				errorPlacement: function(error, element) {
+					var placement = $(element).data('error');
+					if (placement) {
+						$(placement).append(error);
+					}else {
+						error.insertAfter(element);
+					}
+				},
+				submitHandler: submitEditCategoryForm
+			});
+
+           
+
+            $('#btn_save_clipart_cat_sorting').on('click', function(e) {
+                e.preventDefault();
+                var sorted_data = tblbody_clipart_cat.sortable('serialize');
+                // console.log(sorted_data);
+                
+                $.ajax({
+                    data: sorted_data,
+                    type: 'POST',
+                    url  : "{{ url('admin/clipart/save-clipart-cat-ordering') }}",
+                    beforeSend:function(xhr){
+                        
+                        var token = $('meta[name="csrf_token"]').attr('content');
+
+                        if (token) {
+                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
+                        }
+                        xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
+                    },
+                    success:function(result) {
+                        if(result.success){
+                            alert(result.message);
+                        }
+                    }
+                });
+            });
         }); // end document ready
 
         
+        
+
+        function submitEditCategoryForm(){
+
+            var data = $("#frm_edit_category").serializeArray();
+
+            $.ajax({
+                type : 'POST',
+                url  : "{{ url('admin/clipart/update-clipart-category') }}",
+                data : data,
+                beforeSend: function(xhr){
+                    var token = $('meta[name="csrf_token"]').attr('content');
+                    if (token) {
+                        return xhr.setRequestHeader('X-CSRF-TOKEN', token);
+                    }
+                },
+                success :  function(response){
+                    if(response.success){
+                        $('#modal_edit_category_msg').html('<div class="alert alert-success alert-dismissible"> ' +
+                                                    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ' +
+                                                    '<h4><i class="icon fa fa-check"></i> Success!</h4> ' +
+                                                    '<p>'+response.message+'</p> ' +
+                                                    '</div>').fadeIn().delay(2000).fadeOut(function (){
+                                                        $('#modal_edit_category').modal('hide');
+                                                        location.reload();
+                                                    });
+                        
+                        var form = $('#frm_edit_category')
+                        form.validate().resetForm();
+                        form[0].reset();
+                    }else{
+                        $('#modal_edit_category_msg').html('<div class="alert alert-danger alert-dismissible"> ' +
+                                                    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ' +
+                                                    '<h4><i class="icon fa fa-ban"></i> Error!</h4> ' +
+                                                    '<p>'+response.message+'</p> ' +
+                                                    '</div>').fadeIn().delay(2000).fadeOut();
+                    }          
+                }
+            });
+        }
 
         function submitAddCategoryForm(){
 
-            var data = $("#frm_add_category").serialize();
+            var data = $("#frm_add_category").serializeArray();
 
             $.ajax({
                 type : 'POST',
@@ -722,18 +900,23 @@ desired effect
                 },
                 success :  function(response){
                     if(response.success){
-                        $('#modal_add_category').addClass(response.addClass);
+                        var getURL = "{{ Request::is('admin/clipart-categories') }}";
-
                         $('#modal_add_category_msg').html('<div class="alert alert-success alert-dismissible"> ' +
                                                     '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ' +
                                                     '<h4><i class="icon fa fa-check"></i> Success!</h4> ' +
                                                     '<p>'+response.message+'</p> ' +
-                                                    '</div>').fadeIn().delay(5000).fadeOut();
+                                                    '</div>').fadeIn().delay(2000).fadeOut(function (){
+                                                        $('#modal_add_category').modal('hide');
+                                                        if(getURL){
+                                                            location.reload();
+                                                        }else{
+                                                            $("#sel_clipart_category").append('<option value="'+response.last_inserted_id+'">'+data[0]['value']+'</option>');
+                                                        }
+                                                    });
                         
                         var form = $('#frm_add_category')
                         form.validate().resetForm();
                         form[0].reset();
-
                     }else{
                         $('#modal_add_category_msg').html('<div class="alert alert-danger alert-dismissible"> ' +
                                                     '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ' +

resources/views/admin/sidebar.blade.php

@@ -43,7 +43,7 @@
             </ul>
         </li>
        
-        @php $under_designer_management = array("/admin/clipart", "/admin/overlay-pattern") @endphp
+        @php $under_designer_management = array("/admin/cliparts", "/admin/overlay-pattern", "/admin/clipart-add", "/admin/clipart-categories") @endphp
         <li class="treeview {{ (in_array($getrequest_url, $under_designer_management)) ? 'active' : '' }}">
             <a href="#"><i class="fa fa-paint-brush"></i> <span>Designer Management</span>
                 <span class="pull-right-container">
@@ -51,10 +51,27 @@
                 </span>
             </a>
             <ul class="treeview-menu">
-                <li {{ ($getrequest_url == '/admin/clipart') ? 'class=active' : '' }}><a href="{{ url('/admin/clipart') }}"><i class="fa fa-circle-o"></i> Clipart</a></li>
+                <li {{ ($getrequest_url == '/admin/cliparts') ? 'class=active' : '' }}><a href="{{ url('/admin/cliparts') }}"><i class="fa fa-circle-o"></i> Cliparts</a></li>
+                <li {{ ($getrequest_url == '/admin/clipart-add') ? 'class=active' : '' }}><a href="{{ url('/admin/clipart-add') }}"><i class="fa fa-circle-o"></i> Add Clipart</a></li>
+                <li {{ ($getrequest_url == '/admin/clipart-categories') ? 'class=active' : '' }}><a href="{{ url('/admin/clipart-categories') }}"><i class="fa fa-circle-o"></i> Clipart Categories</a></li>
                 <li {{ ($getrequest_url == '/admin/overlay-pattern') ? 'class=active' : '' }}><a href="{{ url('/admin/overlay-pattern') }}"><i class="fa fa-circle-o"></i> Overlay Pattern</a></li>
             </ul>
         </li>
+
+        <li class="treeview {{ (in_array($getrequest_url, $under_designer_management)) ? 'active' : '' }}">
+            <a href="#"><i class="fa fa-paint-brush"></i> <span>Designer Management</span>
+                <span class="pull-right-container">
+                    <i class="fa fa-angle-left pull-right"></i>
+                </span>
+            </a>
+            <ul class="treeview-menu">
+                <li {{ ($getrequest_url == '/admin/cliparts') ? 'class=active' : '' }}><a href="{{ url('/admin/cliparts') }}"><i class="fa fa-circle-o"></i> Cliparts</a></li>
+                <li {{ ($getrequest_url == '/admin/clipart-add') ? 'class=active' : '' }}><a href="{{ url('/admin/clipart-add') }}"><i class="fa fa-circle-o"></i> Add Clipart</a></li>
+                <li {{ ($getrequest_url == '/admin/clipart-categories') ? 'class=active' : '' }}><a href="{{ url('/admin/clipart-categories') }}"><i class="fa fa-circle-o"></i> Clipart Categories</a></li>
+                <li {{ ($getrequest_url == '/admin/overlay-pattern') ? 'class=active' : '' }}><a href="{{ url('/admin/overlay-pattern') }}"><i class="fa fa-circle-o"></i> Overlay Pattern</a></li>
+            </ul>
+        </li>
+        
         <li class="{{ Request::is('admin/orders') ? 'active' : '' }}">
             <a href="{{ url('/admin/orders') }}">
                 <i class="fa fa-list-alt"></i> <span>Orders</span>    

resources/views/admin_pages/add_clipart.blade.php

@@ -9,54 +9,19 @@
     <!-- Content Header (Page header) -->
     <section class="content-header">
     <h1>
-        Clipart
+        Adding of Clipart
         <!-- <small>Optional description</small> -->
     </h1>
     <ol class="breadcrumb">
         <li><a href="{{ url ('admin') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
-        <li class="active"> Clipart</li>
+        <li><a href="{{ url ('admin') }}"><i class="fa fa-paint-brush"></i> Designer Management</a></li>
+        <li class="active"> Add Clipart</li>
     </ol>
     </section>
 
     <!-- Main content -->
     <section class="content container-fluid">
         <div class="row">
-            <!-- <div class="col-md-3">
-                <button class="btn btn-primary btn-block margin-bottom" data-toggle="modal" data-target="#modal_add_category"><i class="fa fa-plus"></i> Add Categories</button>
-                <div class="box box-solid">
-                    <div class="box-header with-border">
-                        <h3 class="box-title">Categories</h3>
-                        <div class="box-tools">
-                            <button type="button" class="btn btn-box-tool">
-                                <i class="fa fa-edit"></i>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="box-body no-padding" data-widget="tree">
-                        <ul class="nav nav-pills nav-stacked">
-                            @foreach($clipart_categories_array as $clipart_category)
-                                <li class="li-clipart-category" id="cat-{{  $clipart_category->Id }}">
-                                    <a href="{{ url ('admin/clipart/view/') . '/' . $clipart_category->Id }}">
-                                        {{ $clipart_category->CategoryName }}
-                                        
-                                        <span class="pull-right-container">
-                                            @if($clipart_category->IsActive == 1)
-                                                <i class="label label-success pull-right">Active</i>
-                                            @else
-                                                <i class="label label-danger pull-right">Inactive</i>
-                                            @endif
-                                        </span>
-                                        
-                                        @if($clipart_category->UserId != null)
-                                            <i class="fa fa-user pull-right" title="{{ $clipart_category->username }}"></i>
-                                        @endif
-                                    </a>
-                                </li>
-                            @endforeach
-                        </ul>
-                    </div>
-                </div>
-            </div> -->
             <div class="col-md-12">
                 <div class="box">
                     <div class="box-header with-border">
@@ -104,7 +69,7 @@
                                                     </select>
                                                 </div>
                                                 <div class="col-sm-4">
-                                                    <button type="button" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Add Category</button>
+                                                    <button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modal_add_category"><i class="fa fa-plus"></i> Add Category</button>
                                                 </div>
                                             </div>
                                         </div>
@@ -135,48 +100,4 @@
     </section>
     <!-- /.content -->
 </div>
-
-<div class="modal fade" id="modal_add_category" role="dialog">
-    <div class="modal-dialog">
-        <!-- Modal content-->
-        <div class="modal-content">
-            <form id="frm_add_category">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title">Adding Category</h4>
-                </div>
-                <div class="modal-body">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <div id="modal_add_category_msg"></div>
-                            <div class="form-group">
-                                Category Name *
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <input type="text" name="category" class="form-control" placeholder="Enter category name">
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                Category Status *
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <select name="is_active" class="form-control">
-                                            <option value="1">Active</option>
-                                            <option value="0">Inactive</option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary btn-custom-save">Save</button>
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
 @endsection

resources/views/admin_pages/clipart_categories.blade.php

@@ -0,0 +1,142 @@
+@extends('admin.main')
+@section('content')
+<style>
+    .additional-info{
+        display:none;
+    }
+</style>
+<div class="content-wrapper">
+    <!-- Content Header (Page header) -->
+    <section class="content-header">
+    <h1>
+        Clipart Categories
+        <!-- <small>Optional description</small> -->
+    </h1>
+    <ol class="breadcrumb">
+        <li><a href="{{ url ('admin') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
+        <li><a href="{{ url ('admin') }}"><i class="fa fa-paint-brush"></i> Designer Management</a></li>
+        <li class="active"> Clipart Categories</li>
+    </ol>
+    </section>
+
+    <!-- Main content -->
+    <section class="content container-fluid">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                       <h4 class="box-title">List</h4>
+                    </div>
+                    <div class="box-body">
+                        <div class="row">
+                            <div class="col-sm-12">
+                                <div class="well">
+                                    <button type="button" class="btn btn-primary" id="btn_save_clipart_cat_sorting">
+                                        Save Changes
+                                    </button>
+                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_add_category">
+                                        <i class="fa fa-plus"></i> Add Category
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-12">
+                                @if(count($clipart_categories_array) > 0)
+                                    <table class="table table-bordered table-condensed">
+                                        <thead>
+                                        <tr>
+                                            <th></th>
+                                            <th>Category Name</th>
+                                            <th>Category Status</th>
+                                            <th>Category Owner</th>
+                                            <th class="text-center">Action</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody id="tblbody_clipart_cat">
+                                            @foreach($clipart_categories_array as $clipart_category)
+                                                <tr id="{{ 'clip_cat_id_'. $clipart_category->Id }}">
+                                                    <td class="text-center" style="width: 50px"><i class="fa fa-bars"></i></td>
+                                                    <td><a href="#">{{ $clipart_category->CategoryName }}</a></td>
+                                                    <td>
+                                                        @if( $clipart_category->IsActive == 1)
+                                                            <span class="label label-success">Active</span>
+                                                        @else
+                                                            <span class="label label-danger">Inactive</span>
+                                                        @endif
+                                                    </td>
+                                                    <td>
+                                                        @if( $clipart_category->UserId == null)
+                                                            Administrator
+                                                        @else
+                                                            {{ $clipart_category->username }}
+                                                        @endif
+                                                    </td>
+                                                    <td class="text-center">
+                                                        <button class="btn btn-default btn-xs btn-edit-clipart-cat" data-category="{{ $clipart_category->CategoryName }}" data-status="{{ $clipart_category->IsActive }}" data-id="{{ $clipart_category->Id }}"><i class="fa fa-edit"></i></button>
+                                                        <button class="btn btn-default btn-xs btn-delete-clipart-cat" data-id="{{ $clipart_category->Id }}"><i class="fa fa-trash"></i></button>
+                                                    </td>
+                                                </tr>
+                                            @endforeach
+                                        </tbody>
+                                    </table>
+                                @else
+                                    <div class="col-sm-12">
+                                        <h3 style="color: #b5b5b5;">No Record Found</h3>
+                                    </div>
+                                @endif
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- /.content -->
+</div>
+
+<div class="modal fade" id="modal_edit_category" role="dialog">
+    <div class="modal-dialog">
+        <!-- Modal content-->
+        <div class="modal-content">
+            <form id="frm_edit_category">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="modal-title">Edit Category</h4>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div id="modal_edit_category_msg"></div>
+                            <div class="form-group">
+                                Category Name *
+                                <div class="row">
+                                    <div class="col-sm-12">
+                                        <input type="text" name="id" id="cat_id" class="form-control">
+                                        <input type="text" name="category" id="edit_category" class="form-control" placeholder="Enter category name">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                Category Status *
+                                <div class="row">
+                                    <div class="col-sm-12">
+                                        <select name="is_active" id="edit_is_active" class="form-control">
+                                            <option value="1">Active</option>
+                                            <option value="0">Inactive</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary btn-custom-save">Save</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/admin_pages/cliparts.blade.php

@@ -0,0 +1,65 @@
+@extends('admin.main')
+@section('content')
+<style>
+    .additional-info{
+        display:none;
+    }
+</style>
+<div class="content-wrapper">
+    <!-- Content Header (Page header) -->
+    <section class="content-header">
+    <h1>
+        Cliparts
+        <!-- <small>Optional description</small> -->
+    </h1>
+    <ol class="breadcrumb">
+        <li><a href="{{ url ('admin') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
+        <li><a href="{{ url ('admin') }}"><i class="fa fa-paint-brush"></i> Designer Management</a></li>
+        <li class="active">Cliparts</li>
+    </ol>
+    </section>
+
+    <!-- Main content -->
+    <section class="content container-fluid">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                       <h4 class="box-title">List</h4>
+                    </div>
+                    <div class="box-body">
+                        <div class="row">
+                            {{-- <div class="col-md-12"> --}}
+                                {{-- <ul class="hide-bullets"> --}}
+                                    @foreach($clipart_array as $clipart)
+                                        <div class="item  col-sm-4 col-lg-3">
+                                            <div class="thumbnail" style="padding: 5px;">
+                                                <div class="store-logo">
+                                                    <img src="{{ config('site_config.images_directory') . 'cliparts/' . $clipart->SVGFilename }}" width="100%" style="height: inherit;">
+                                                </div>
+                                            </div>
+                                        </div>
+                                        {{-- <li class="col-sm-2">
+                                        <a class="thumbnail"></a>
+                                        </li> --}}
+                                    @endforeach
+                                {{-- </ul> --}}
+                            {{-- </div> --}}
+                        </div>
+                    </div>
+                    <div class="box-footer">   
+                        <div class="row">
+                            <div class="col-sm-12">
+                                <div class="text-center">
+                                    {{ $clipart_array->links() }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- /.content -->
+</div>
+@endsection