Laravel 10 Xử lý việc upload ảnh hoặc file khi tạo mới và sửa bản ghi trong database
Việc upload và xử lý file để lưu lại file ảnh hoặc video,file trên server là 1 vấn đề thường xuyên gặp của code .Dưới đây là đoạn code demo mà mình đã code .Các bạn có thể tham khảo vào project của mình
1 Tạo project
Đầu tiền mình tạo project với câu lệnh :
composer create-project laravel/laravel la10uploadfile
2 Tạo demo category
Ở đây ta tạo category demo với lệnh
php artisan make:model Category -a
3 File migration database/migrations/2023_12_27_152228_create_categories_table.php như sau :
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('categories', function (Blueprint $table) {
$table->id();
$table->string('name',300);
$table->string('slug',300)->unique();
$table->unsignedInteger('parent_id')->default(0);
$table->unsignedInteger('type')->default(0);
$table->string('style',80)->nullable()->comment('style css');
$table->mediumText('description')->nullable();
$table->unsignedInteger('sort')->default(1);
$table->boolean('status')->default(false)->comment('hiển thị hay ẩn');
$table->longText('content')->nullable();
$table->string('thumbnail',300)->comment('ảnh đại diện')->nullable();
$table->string('seo_title',200)->nullable();
$table->string('seo_tag',200)->nullable();
$table->string('seo_keyword',200)->nullable();
$table->tinyText('seo_description')->nullable();
//index
$table->index('parent_id');
$table->index('name');
$table->softDeletes();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('categories');
}
};
Sau đó ta tạo database với lệnh
php artisan migrate
Để tạo bảng dữ liệu demo
Ở đây do mình làm theo mô hình mvc service repository pattern - đây là mô hình mà các công ty hay dùng so với đơn thuần mvc
File app/Repositories/BaseRepository.php
<?php
namespace App\Repositories;
use App\Repositories\Interfaces\BaseRepositoryInterface;
use Illuminate\Database\Eloquent\Model;
class BaseRepository implements BaseRepositoryInterface
{
protected Model $models;
/**
* @return mixed
*/
public function getModels()
{
return $this->models;
}
/**
* @param mixed $models
*/
public function setModels($models): void
{
$this->models = $models;
}
public function getAll($keyword = null, $paginate= 20)
{
if($keyword != null)
{
return $this->models->where('name','like','%'.$keyword.'%')->paginate($paginate);
}else{
return $this->models->paginate($paginate);
}
}
public function create(array $args)
{
return $this->models->create($args);
}
public function find($id)
{
return $this->models->find($id);
}
public function delete($id)
{
$item = self::find($id);
return $item->delete();
}
public function update(array $args)
{
return $this->models->update($args);
}
}
File app/Repositories/Interfaces/BaseRepositoryInterface.php
<?php
namespace App\Repositories\Interfaces;
interface BaseRepositoryInterface
{
public function getAll($keyword = null, $paginate= 20);
public function find($id);
public function create(array $args);
public function update(array $args);
public function delete(int $id);
}
Ở đây mình tạo BaseRepository và BaseRepositoryInterface mình tạo để base các repository khác
File app/Repositories/Interfaces/CategoryRepositoryInterface.php
<?php
namespace App\Repositories\Interfaces;
interface CategoryRepositoryInterface extends BaseRepositoryInterface
{
}
File app/Repositories/CategoryRepository.php
<?php
namespace App\Repositories;
use App\Repositories\Interfaces\CategoryRepositoryInterface;
class CategoryRepository extends BaseRepository implements CategoryRepositoryInterface
{
}
Ở đây chúng ta dùng singleton ở file app/Providers/AppServiceProvider.php
<?php
namespace App\Providers;
use App\Models\Category;
use App\Observers\CategoryObsever;
use App\Repositories\CategoryRepository;
use App\Repositories\Interfaces\CategoryRepositoryInterface;
use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*/
public function register(): void
{
$this->app->singleton(CategoryRepositoryInterface::class,CategoryRepository::class);
}
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Paginator::useBootstrapFive();
Category::observe(CategoryObsever::class);
}
}
Ở đây chúng ta dùng singleton để dùng CategoryRepositoryInterface có mục đích là sử dụng Interface thay vì dùng Repository
File app/Services/CategoryService.php
<?php
namespace App\Services;
use App\Models\Category;
use App\Repositories\Interfaces\CategoryRepositoryInterface;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use PHPUnit\TextUI\Help;
class CategoryService
{
protected CategoryRepositoryInterface $categoryRepository;
public function __construct(CategoryRepositoryInterface $categoryRepository)
{
$this->categoryRepository = $categoryRepository;
$this->categoryRepository->setModels(new Category());
}
public function getAll($keyword = null, $paginate= 20)
{
return $this->categoryRepository->getAll($keyword, $paginate);
}
public function update(Request $request, int $id)
{
$data_update = $request->all();
$data_old = self::find($id);
if(isset($data_update['thumbnail']))
{
// xóa ảnh cũ
$status_delete_image = HelpService::UrlimageDelete($data_old->thumbnail,'');
// lưu ảnh mới
$image = $request->file('thumbnail');
$name_file = HelpService::UrlimageService($image);
$image->move('images', $name_file);
$data_update['thumbnail'] = $name_file;
}
$data_update['status'] = $request->status === 'on' ? 1 : 0;
$status_return = $data_old->update($data_update);
return $status_return;
}
public function create(Request $request)
{
$data = $request->all();
if ($request->hasFile('thumbnail')) {
$image = $request->file('thumbnail');
$name_file = HelpService::UrlimageService($image);
$image->move('images', $name_file);
$data['thumbnail'] = $name_file;
}
return $this->categoryRepository->create($data);
}
public function find($id)
{
return $this->categoryRepository->find($id);
}
public function delete($id)
{
$item = $this->categoryRepository->find($id);
$status = HelpService::UrlimageDelete($item->thumbnail,'');
return $this->categoryRepository->delete($id);
}
}
Do cần sử dụng nhiều service Upload ảnh nên mình viết 1 service có tên là HelpService để sử dụng nhiều lần
<?php
namespace App\Services;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
class HelpService
{
public static function UrlimageService($name,$path = '/images/',$disk = 'public')
{
$name_file = pathinfo($name->getClientOriginalName(), PATHINFO_FILENAME);
$name_file = Str::slug($name_file);
$extension = $name->getClientOriginalExtension();
$newpath = $path.''.$name_file.'.'.$extension;
$fileExists = file_exists(Storage::disk($disk)->path($newpath));
// nếu file tồn tại thì chúng ta sẽ thêm đuôi vào sau ;
if($fileExists)
{
$string_date = now()->format('d-m-y-h-i-s');
return $path.$name_file.'-'.$string_date.'.'.$extension;
}else
{
return $newpath;
}
}
public static function UrlimageDelete($name,$path = '/images/',$disk = 'public')
{
$status = Storage::disk($disk)->delete($path.$name);
return $status;
}
}
Tại controller app/Http/Controllers/Backend/CategoryController.php
<?php
namespace App\Http\Controllers\Backend;
use App\Enums\CategoryType;
use App\Http\Controllers\Controller;
use App\Http\Requests\StoreCategoryRequest;
use App\Http\Requests\UpdateCategoryRequest;
use App\Models\Category;
use App\Services\CategoryService;
use App\Traits\SlugTrait;
use Illuminate\Http\File;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Storage;
class CategoryController extends Controller
{
use SlugTrait;
protected CategoryService $categoryService;
protected $all_category;
protected $all_type;
public function __construct(CategoryService $categoryService)
{
$this->categoryService = $categoryService;
$this->all_category = Category::active()->get();
$this->all_type = CategoryType::asSelectArray();
}
public function index(Request $request)
{
$query = isset($request->q) ? addslashes($request->q) : null;
$data = $this->categoryService->getAll($query);
return view('backend.category.index',compact('data'));
}
public function create()
{
$all_category = $this->all_category;
return view('backend.category.create',compact('all_category'));
}
public function store(StoreCategoryRequest $request,Category $category)
{
$result = $this->categoryService->create($request);
return redirect()->route('backend.category.index')->with('message','Thêm thành công');
}
public function edit(Request $request,string $id)
{
$data_item = $this->categoryService->find($id);
$all_category = $this->all_category;
return view('backend.category.edit',compact('data_item','all_category'));
}
public function update(UpdateCategoryRequest $request,$id)
{
$status = $this->categoryService->update($request,$id);
if($status)
{
return redirect()->route('backend.category.index')->with('message','Thêm thành công');
}
}
public function destroy(Request $request,$id)
{
$status = $this->categoryService->delete($id);
if($status)
{
return redirect()->route('backend.category.index')->with('message','Xóa thành công');
}
return redirect()->route('backend.category.index')->with('message','Xóa thành công');
}
public function deletelist(Request $request)
{
foreach ($request->ids as $id){
self::destroy($request,$id);
}
return \response()->json(['status' =>1,'data' =>'Xóa thành công']);
}
}
Ở file resources/views/backend/category/create.blade.php
@extends('layouts.backend')
@push('css')
@endpush
@section('content')
<!-- PAGE -->
<div class="page">
<div class="page-main">
@include('components.backendpageheader')
<!--APP-SIDEBAR-->
@include('components.backendsidebar')
<!--app-content open-->
<div class="main-content app-content mt-0">
<div class="side-app">
<!-- CONTAINER -->
<div class="main-container container-fluid">
<form action="{{route('backend.category.store')}}" method="post" enctype="multipart/form-data">
@csrf
<!-- Row -->
<div class="row">
<div class="col-md-12 col-xl-12 pt-2">
<div class="col-xl-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">{{__('backend.category')}}</h3>
</div>
<div class="card-body">
<div class="panel panel-primary">
<div class="tab-menu-heading">
@if ($errors->any())
<div class="alert alert-success" role="alert">
@foreach ($errors->all() as $error)
<span>{{ $error}}</span>
@endforeach
</div>
@endif
<div class="tabs-menu">
<!-- Tabs -->
<ul class="nav panel-tabs panel-danger">
<li><a href="#tab1" class="active"
data-bs-toggle="tab"><span><i
class="fe fe-user me-1"></i></span>{{__('backend.main')}}
</a></li>
<li><a href="#tab2" data-bs-toggle="tab" class=""><span><i
class="fe fe-calendar me-1"></i></span>{{__('backend.content')}}
</a></li>
<li><a href="#tab3" data-bs-toggle="tab" class=""><span><i
class="fe fe-bell me-1"></i></span>{{__('backend.seo')}}
</a></li>
</ul>
</div>
</div>
<div class="panel-body tabs-menu-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="form-group">
<label for="title" >{{__('backend.title')}}</label>
<input type="text"
class="form-control form-control-lg"
name="name" id="title" required
onblur="createslug()"
value="{{old('name')}}"
maxlength="300"
minlength="3"
>
</div>
<div class="form-group">
<label for="slug">{{__('backend.slug')}}</label>
<input type="text"
class="form-control form-control-lg"
name="slug" id="slugpost" required
value="{{old('name')}}"
maxlength="300"
minlength="3"
>
</div>
<div class="form-group">
<div class="col-sm-6">
<div class="form-group form-control-lg">
<label class="custom-switch form-switch me-5">
<input name="status" id="status" type="checkbox"
class="custom-switch-input form-group form-control-lg"
value=1 checked>
<span
class="custom-switch-indicator custom-switch-indicator-lg"></span>
<span class="custom-switch-description">Hiển thị</span>
</label>
</div>
</div>
<div class="col-12 ">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label
class="form-label">{{__('backend.category')}}</label>
<input type="file"
class="form-control form-control-lg"
name="thumbnail" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label
class="form-label">{{__('backend.category')}}</label>
<select name="parent_id" required
class="form-control form-select select2">
<option value="0">
{{__('backend.category_root')}}
</option>
@foreach($all_category as $category)
<option
value="{{$category->id}}">{{$category->name}}</option>
@endforeach
</select>
</div>
<div class="form-group">
{{-- <a href="{{ route() }}" class="btn btn-"--}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label
class="form-label">{{__('backend.type')}}</label>
<select name="type" required
class="form-control form-select select2">
@foreach (\App\Enums\CategoryType::asSelectArray() as $key => $value)
<option value="{{ $key }}" {{ old('type', $transaction->type ?? null) === $value ? 'selected' : '' }}>
{{ ucfirst($value) }}
</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="form-group">
<label
for="description">{{__('backend.description')}}</label>
<textarea name="description" class="form-control mb-4"
placeholder="{{__('backend.description')}}"
rows="10"></textarea>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="form-group">
<label
for="seo_title">{{__('backend.seo_title')}}</label>
<input type="text" class="form-control form-control-lg"
name="seo_title"/>
</div>
<div class="form-group">
<label for="seo_tag">{{__('backend.seo_tag')}}</label>
<input type="text" class="form-control form-control-lg"
name="seo_tag"/>
</div>
<div class="form-group">
<label
for="seo_keyword">{{__('backend.seo_keyword')}}</label>
<input type="text" class="form-control form-control-lg"
name="seo_keyword"/>
</div>
<div class="form-group">
<label
for="seo_description">{{__('backend.seo_description')}}</label>
<textarea class="form-control form-control-lg"
name="seo_description" rows="8"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-12 pt-2">
<div class="col-md-12">
<div class="card">
<button type="submit" class="btn btn-success">{{__('backend.submit')}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Row -->
</form>
</div>
<!-- CONTAINER CLOSED -->
</div>
</div>
<!--app-content closed-->
</div>
<!-- Sidebar-right -->
<div class="sidebar sidebar-right sidebar-animate">
<div class="panel panel-primary card mb-0 shadow-none border-0">
<div class="tab-menu-heading border-0 d-flex p-3">
<div class="card-title mb-0"><i class="fe fe-bell me-2"></i><span class=" pulse"></span>Notifications
</div>
<div class="card-options ms-auto">
<a href="javascript:void(0);" class="sidebar-icon text-end float-end me-3 mb-1"
data-bs-toggle="sidebar-right" data-target=".sidebar-right"><i
class="fe fe-x text-white"></i></a>
</div>
</div>
<div class="panel-body tabs-menu-body latest-tasks p-0 border-0">
<div class="tabs-menu border-bottom">
<!-- Tabs -->
<ul class="nav panel-tabs">
<li class=""><a href="#side1" class="active" data-bs-toggle="tab"><i
class="fe fe-settings me-1"></i>Feeds</a></li>
<li><a href="#side2" data-bs-toggle="tab"><i class="fe fe-message-circle"></i> Chat</a></li>
<li><a href="#side3" data-bs-toggle="tab"><i class="fe fe-anchor me-1"></i>Timeline</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="side1">
<div class="p-3 fw-semibold ps-5">Feeds</div>
<div class="card-body pt-2">
<div class="browser-stats">
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span class="feeds avatar-circle brround bg-primary-transparent"><i
class="fe fe-user text-primary"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">New user registered</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-secondary brround bg-secondary-transparent"><i
class="fe fe-shopping-cart text-secondary"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">New order delivered</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-danger brround bg-danger-transparent"><i
class="fe fe-bell text-danger"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">You have pending tasks</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-warning brround bg-warning-transparent"><i
class="fe fe-gitlab text-warning"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">New version arrived</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-pink brround bg-pink-transparent"><i
class="fe fe-database text-pink"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Server #1 overloaded</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-info brround bg-info-transparent"><i
class="fe fe-check-circle text-info"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">New project launched</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-3 fw-semibold ps-5">Settings</div>
<div class="card-body pt-2">
<div class="browser-stats">
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span class="feeds avatar-circle brround bg-primary-transparent"><i
class="fe fe-settings text-primary"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">General Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-secondary brround bg-secondary-transparent"><i
class="fe fe-map-pin text-secondary"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Map Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-danger brround bg-danger-transparent"><i
class="fe fe-headphones text-danger"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Support Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-warning brround bg-warning-transparent"><i
class="fe fe-credit-card text-warning"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Payment Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-pink brround bg-pink-transparent"><i
class="fe fe-bell text-pink"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Notification Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="side2">
<div class="list-group list-group-flush">
<div class="pt-3 fw-semibold ps-5">Today</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/2.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Addie Minstra
</div>
<p class="mb-0 fs-12 text-muted"> Hey! there I' am available.... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/11.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Rose Bush
</div>
<p class="mb-0 fs-12 text-muted"> Okay...I will be waiting for you </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/10.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Claude Strophobia
</div>
<p class="mb-0 fs-12 text-muted"> Hi we can explain our new
project...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/13.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Eileen Dover
</div>
<p class="mb-0 fs-12 text-muted"> New product Launching... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/12.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Willie Findit
</div>
<p class="mb-0 fs-12 text-muted"> Okay...I will be waiting for you </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/15.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Manny Jah
</div>
<p class="mb-0 fs-12 text-muted"> Hi we can explain our new
project...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/4.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Cherry Blossom
</div>
<p class="mb-0 fs-12 text-muted"> Hey! there I' am available....</p>
</a>
</div>
</div>
<div class="pt-3 fw-semibold ps-5">Yesterday</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/7.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Simon Sais
</div>
<p class="mb-0 fs-12 text-muted">Schedule Realease...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/9.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Laura Biding
</div>
<p class="mb-0 fs-12 text-muted"> Hi we can explain our new
project...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/2.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Addie Minstra
</div>
<p class="mb-0 fs-12 text-muted">Contact me for details....</p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/9.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Ivan Notheridiya
</div>
<p class="mb-0 fs-12 text-muted"> Hi we can explain our new
project...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/14.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Dulcie Veeta
</div>
<p class="mb-0 fs-12 text-muted"> Okay...I will be waiting for you </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/11.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Florinda Carasco
</div>
<p class="mb-0 fs-12 text-muted">New product Launching...</p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/4.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Cherry Blossom
</div>
<p class="mb-0 fs-12 text-muted">[email protected]</p>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="side3">
<ul class="task-list timeline-task">
<li class="d-sm-flex mt-4">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">Task Finished<span
class="text-muted fs-11 mx-2 fw-normal">09 July 2021</span></h6>
<p class="text-muted fs-12">Adam Berry finished task on<a
href="javascript:void(0)" class="fw-semibold"> Project Management</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">New Comment<span
class="text-muted fs-11 mx-2 fw-normal">05 July 2021</span></h6>
<p class="text-muted fs-12">Victoria commented on Project <a
href="javascript:void(0)" class="fw-semibold"> AngularJS Template</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">New Comment<span
class="text-muted fs-11 mx-2 fw-normal">25 June 2021</span></h6>
<p class="text-muted fs-12">Victoria commented on Project <a
href="javascript:void(0)" class="fw-semibold"> AngularJS Template</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">Task Overdue<span
class="text-muted fs-11 mx-2 fw-normal">14 June 2021</span></h6>
<p class="text-muted mb-0 fs-12">Petey Cruiser finished task <a
href="javascript:void(0)" class="fw-semibold"> Integrated management</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">Task Overdue<span
class="text-muted fs-11 mx-2 fw-normal">29 June 2021</span></h6>
<p class="text-muted mb-0 fs-12">Petey Cruiser finished task <a
href="javascript:void(0)" class="fw-semibold"> Integrated management</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">Task Finished<span
class="text-muted fs-11 mx-2 fw-normal">09 July 2021</span></h6>
<p class="text-muted fs-12">Adam Berry finished task on<a
href="javascript:void(0)" class="fw-semibold"> Project Management</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--/Sidebar-right-->
<!-- Country-selector modal-->
<div class="modal fade" id="country-selector">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content country-select-modal">
<div class="modal-header">
<h6 class="modal-title">Choose Country</h6>
<button aria-label="Close" class="btn-close"
data-bs-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<ul class="row p-3">
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block active">
<span class="country-selector"><img alt="" src="../assets/images/flags/us_flag.jpg"
class="me-3 language"></span>USA
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/italy_flag.jpg"
class="me-3 language"></span>Italy
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/spain_flag.jpg"
class="me-3 language"></span>Spain
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/india_flag.jpg"
class="me-3 language"></span>India
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/french_flag.jpg"
class="me-3 language"></span>French
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/russia_flag.jpg"
class="me-3 language"></span>Russia
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/germany_flag.jpg"
class="me-3 language"></span>Germany
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/argentina.jpg"
class="me-3 language"></span>Argentina
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt="" src="../assets/images/flags/malaysia.jpg"
class="me-3 language"></span>Malaysia
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt="" src="../assets/images/flags/turkey.jpg"
class="me-3 language"></span>Turkey
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Country-selector modal-->
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-md-12 col-sm-12 text-center">
Copyright © 2022 <a href="javascript:void(0)">Sash</a>. Designed with <span
class="fa fa-heart text-danger"></span> by <a href="javascript:void(0)"> Spruko </a> All
rights reserved.
</div>
</div>
</div>
</footer>
<!-- FOOTER END -->
</div>
@include('ckfinder::setup')
@endsection
@push('js')
@endpush
File resources/views/backend/category/edit.blade.php
@extends('layouts.backend')
@push('css')
@endpush
@section('content')
<!-- PAGE -->
<div class="page">
<div class="page-main">
@include('components.backendpageheader')
<!--APP-SIDEBAR-->
@include('components.backendsidebar')
<!--app-content open-->
<div class="main-content app-content mt-0">
<div class="side-app">
<!-- CONTAINER -->
<div class="main-container container-fluid">
<form action="{{ route('backend.category.update',['id'=>$data_item['id']]) }}" method="post"
enctype="multipart/form-data">
@method('patch')
@csrf
<!-- Row -->
<div class="row">
<div class="col-md-12 col-xl-12 pt-2">
<div class="col-xl-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">{{__('backend.category')}}</h3>
</div>
<div class="card-body">
<div class="panel panel-primary">
<div class="tab-menu-heading">
@if ($errors->any())
<div class="alert alert-success" role="alert">
@foreach ($errors->all() as $error)
<span>{{ $error}}</span>
@endforeach
</div>
@endif
<div class="tabs-menu">
<!-- Tabs -->
<ul class="nav panel-tabs panel-danger">
<li><a href="#tab1" class="active"
data-bs-toggle="tab"><span><i
class="fe fe-user me-1"></i></span>{{__('backend.main')}}
</a></li>
<li><a href="#tab2" data-bs-toggle="tab" class=""><span><i
class="fe fe-calendar me-1"></i></span>{{__('backend.content')}}
</a></li>
<li><a href="#tab3" data-bs-toggle="tab" class=""><span><i
class="fe fe-bell me-1"></i></span>{{__('backend.seo')}}
</a></li>
</ul>
</div>
</div>
<div class="panel-body tabs-menu-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="form-group">
<label for="title">{{__('backend.title')}}</label>
<input type="text"
class="form-control form-control-lg"
name="name" id="title" required
onblur="createslug()"
value="{{$data_item['name']}}"
maxlength="300"
minlength="3"
>
</div>
<div class="form-group">
<label for="slug">{{__('backend.slug')}}</label>
<input type="text"
class="form-control form-control-lg"
name="slug" id="slugpost" required
value="{{$data_item['slug']}}"
maxlength="300"
minlength="3"
>
</div>
<div class="form-group">
<div class="col-sm-6">
<div class="form-group form-control-lg">
<label
class="custom-switch form-switch me-5">
<input type="checkbox" name="status"
class="custom-switch-input form-group form-control-lg"
@if($data_item['status']) checked @endif>
<span
class="custom-switch-indicator custom-switch-indicator-lg"></span>
<span class="custom-switch-description">Hiển thị</span>
</label>
</div>
</div>
<div class="col-12 ">
<div class="row">
<div class="col-md-4">
<div class="form-group">
@if($data_item['thumbnail'])
<img
src="{{$data_item['thumbnail']}}"/>
@endif
<label
class="form-label">{{__('backend.category')}}</label>
<input type="file"
class="form-control form-control-lg"
name="thumbnail"/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label
class="form-label">{{__('backend.category')}}</label>
<select name="parent_id" required
class="form-control form-select select2">
<option value="0">
{{__('backend.category_root')}}
</option>
@foreach($all_category as $category)
<option
value="{{$category->id}}"
@if($category->id === $data_item['parent_id'])selected @endif
>{{$category->name}}</option>
@endforeach
</select>
</div>
<div class="form-group">
{{-- <a href="{{ route() }}" class="btn btn-"--}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label
class="form-label">{{__('backend.type')}}</label>
<select name="type" required
class="form-control form-select select2">
@foreach (\App\Enums\CategoryType::asSelectArray() as $key => $value)
<option
value="{{ $key }}" {{ old('type', $transaction->type ?? null) === $value ? 'selected' : '' }}>
{{ ucfirst($value) }}
</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="form-group">
<label
for="description">{{__('backend.description')}}</label>
<textarea name="description"
class="form-control mb-4"
placeholder="{{__('backend.description')}}"
rows="10"></textarea>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="form-group">
<label
for="seo_title">{{__('backend.seo_title')}}</label>
<input type="text"
class="form-control form-control-lg"
name="seo_title"/>
</div>
<div class="form-group">
<label
for="seo_tag">{{__('backend.seo_tag')}}</label>
<input type="text"
class="form-control form-control-lg"
name="seo_tag"/>
</div>
<div class="form-group">
<label
for="seo_keyword">{{__('backend.seo_keyword')}}</label>
<input type="text"
class="form-control form-control-lg"
name="seo_keyword"/>
</div>
<div class="form-group">
<label
for="seo_description">{{__('backend.seo_description')}}</label>
<textarea class="form-control form-control-lg"
name="seo_description"
rows="8"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-12 pt-2">
<div class="col-md-12">
<div class="card">
<button type="submit"
class="btn btn-success">{{__('backend.submit')}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Row -->
</form>
</div>
<!-- CONTAINER CLOSED -->
</div>
</div>
<!--app-content closed-->
</div>
<!-- Sidebar-right -->
<div class="sidebar sidebar-right sidebar-animate">
<div class="panel panel-primary card mb-0 shadow-none border-0">
<div class="tab-menu-heading border-0 d-flex p-3">
<div class="card-title mb-0"><i class="fe fe-bell me-2"></i><span class=" pulse"></span>Notifications
</div>
<div class="card-options ms-auto">
<a href="javascript:void(0);" class="sidebar-icon text-end float-end me-3 mb-1"
data-bs-toggle="sidebar-right" data-target=".sidebar-right"><i
class="fe fe-x text-white"></i></a>
</div>
</div>
<div class="panel-body tabs-menu-body latest-tasks p-0 border-0">
<div class="tabs-menu border-bottom">
<!-- Tabs -->
<ul class="nav panel-tabs">
<li class=""><a href="#side1" class="active" data-bs-toggle="tab"><i
class="fe fe-settings me-1"></i>Feeds</a></li>
<li><a href="#side2" data-bs-toggle="tab"><i class="fe fe-message-circle"></i> Chat</a></li>
<li><a href="#side3" data-bs-toggle="tab"><i class="fe fe-anchor me-1"></i>Timeline</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="side1">
<div class="p-3 fw-semibold ps-5">Feeds</div>
<div class="card-body pt-2">
<div class="browser-stats">
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span class="feeds avatar-circle brround bg-primary-transparent"><i
class="fe fe-user text-primary"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">New user registered</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-secondary brround bg-secondary-transparent"><i
class="fe fe-shopping-cart text-secondary"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">New order delivered</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-danger brround bg-danger-transparent"><i
class="fe fe-bell text-danger"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">You have pending tasks</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-warning brround bg-warning-transparent"><i
class="fe fe-gitlab text-warning"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">New version arrived</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-pink brround bg-pink-transparent"><i
class="fe fe-database text-pink"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Server #1 overloaded</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-info brround bg-info-transparent"><i
class="fe fe-check-circle text-info"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">New project launched</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
<a href="javascript:void(0)"><i class="fe fe-x"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-3 fw-semibold ps-5">Settings</div>
<div class="card-body pt-2">
<div class="browser-stats">
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span class="feeds avatar-circle brround bg-primary-transparent"><i
class="fe fe-settings text-primary"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">General Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-secondary brround bg-secondary-transparent"><i
class="fe fe-map-pin text-secondary"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Map Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-danger brround bg-danger-transparent"><i
class="fe fe-headphones text-danger"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Support Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-warning brround bg-warning-transparent"><i
class="fe fe-credit-card text-warning"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Payment Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-sm-2 mb-sm-0 mb-3">
<span
class="feeds avatar-circle avatar-circle-pink brround bg-pink-transparent"><i
class="fe fe-bell text-pink"></i></span>
</div>
<div class="col-sm-10 ps-sm-0">
<div class="d-flex align-items-end justify-content-between ms-2">
<h6 class="">Notification Settings</h6>
<div>
<a href="javascript:void(0)"><i class="fe fe-settings me-1"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="side2">
<div class="list-group list-group-flush">
<div class="pt-3 fw-semibold ps-5">Today</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/2.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Addie Minstra
</div>
<p class="mb-0 fs-12 text-muted"> Hey! there I' am available.... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/11.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Rose Bush
</div>
<p class="mb-0 fs-12 text-muted"> Okay...I will be waiting for you </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/10.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Claude Strophobia
</div>
<p class="mb-0 fs-12 text-muted"> Hi we can explain our new
project...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/13.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Eileen Dover
</div>
<p class="mb-0 fs-12 text-muted"> New product Launching... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/12.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Willie Findit
</div>
<p class="mb-0 fs-12 text-muted"> Okay...I will be waiting for you </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/15.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Manny Jah
</div>
<p class="mb-0 fs-12 text-muted"> Hi we can explain our new
project...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/4.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Cherry Blossom
</div>
<p class="mb-0 fs-12 text-muted"> Hey! there I' am available....</p>
</a>
</div>
</div>
<div class="pt-3 fw-semibold ps-5">Yesterday</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/7.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Simon Sais
</div>
<p class="mb-0 fs-12 text-muted">Schedule Realease...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/9.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Laura Biding
</div>
<p class="mb-0 fs-12 text-muted"> Hi we can explain our new
project...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/2.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Addie Minstra
</div>
<p class="mb-0 fs-12 text-muted">Contact me for details....</p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/9.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Ivan Notheridiya
</div>
<p class="mb-0 fs-12 text-muted"> Hi we can explain our new
project...... </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/14.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Dulcie Veeta
</div>
<p class="mb-0 fs-12 text-muted"> Okay...I will be waiting for you </p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/11.jpg"></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Florinda Carasco
</div>
<p class="mb-0 fs-12 text-muted">New product Launching...</p>
</a>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image"
data-bs-image-src="../assets/images/users/4.jpg"><span
class="avatar-status bg-success"></span></span>
</div>
<div class="">
<a href="chat.html">
<div class="fw-semibold text-dark" data-bs-toggle="modal"
data-target="#chatmodel">Cherry Blossom
</div>
<p class="mb-0 fs-12 text-muted">[email protected]</p>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="side3">
<ul class="task-list timeline-task">
<li class="d-sm-flex mt-4">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">Task Finished<span
class="text-muted fs-11 mx-2 fw-normal">09 July 2021</span></h6>
<p class="text-muted fs-12">Adam Berry finished task on<a
href="javascript:void(0)" class="fw-semibold"> Project Management</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">New Comment<span
class="text-muted fs-11 mx-2 fw-normal">05 July 2021</span></h6>
<p class="text-muted fs-12">Victoria commented on Project <a
href="javascript:void(0)" class="fw-semibold"> AngularJS Template</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">New Comment<span
class="text-muted fs-11 mx-2 fw-normal">25 June 2021</span></h6>
<p class="text-muted fs-12">Victoria commented on Project <a
href="javascript:void(0)" class="fw-semibold"> AngularJS Template</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">Task Overdue<span
class="text-muted fs-11 mx-2 fw-normal">14 June 2021</span></h6>
<p class="text-muted mb-0 fs-12">Petey Cruiser finished task <a
href="javascript:void(0)" class="fw-semibold"> Integrated management</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">Task Overdue<span
class="text-muted fs-11 mx-2 fw-normal">29 June 2021</span></h6>
<p class="text-muted mb-0 fs-12">Petey Cruiser finished task <a
href="javascript:void(0)" class="fw-semibold"> Integrated management</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
<li class="d-sm-flex">
<div>
<i class="task-icon1"></i>
<h6 class="fw-semibold">Task Finished<span
class="text-muted fs-11 mx-2 fw-normal">09 July 2021</span></h6>
<p class="text-muted fs-12">Adam Berry finished task on<a
href="javascript:void(0)" class="fw-semibold"> Project Management</a>
</p>
</div>
<div class="ms-auto d-md-flex me-3">
<a href="javascript:void(0)" class="text-muted me-2"><span
class="fe fe-edit"></span></a>
<a href="javascript:void(0)" class="text-muted"><span
class="fe fe-trash-2"></span></a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--/Sidebar-right-->
<!-- Country-selector modal-->
<div class="modal fade" id="country-selector">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content country-select-modal">
<div class="modal-header">
<h6 class="modal-title">Choose Country</h6>
<button aria-label="Close" class="btn-close"
data-bs-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<ul class="row p-3">
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block active">
<span class="country-selector"><img alt="" src="../assets/images/flags/us_flag.jpg"
class="me-3 language"></span>USA
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/italy_flag.jpg"
class="me-3 language"></span>Italy
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/spain_flag.jpg"
class="me-3 language"></span>Spain
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/india_flag.jpg"
class="me-3 language"></span>India
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/french_flag.jpg"
class="me-3 language"></span>French
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/russia_flag.jpg"
class="me-3 language"></span>Russia
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/germany_flag.jpg"
class="me-3 language"></span>Germany
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt=""
src="../assets/images/flags/argentina.jpg"
class="me-3 language"></span>Argentina
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt="" src="../assets/images/flags/malaysia.jpg"
class="me-3 language"></span>Malaysia
</a>
</li>
<li class="col-lg-6 mb-2">
<a href="javascript:void(0)" class="btn btn-country btn-lg btn-block">
<span class="country-selector"><img alt="" src="../assets/images/flags/turkey.jpg"
class="me-3 language"></span>Turkey
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Country-selector modal-->
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-md-12 col-sm-12 text-center">
Copyright © 2022 <a href="javascript:void(0)">Sash</a>. Designed with <span
class="fa fa-heart text-danger"></span> by <a href="javascript:void(0)"> Spruko </a> All
rights reserved.
</div>
</div>
</div>
</footer>
<!-- FOOTER END -->
</div>
@include('ckfinder::setup')
@endsection
@push('js')
@endpush
File resources/views/backend/category/index.blade.php
@extends('layouts.backend')
@push('css')
@endpush
@section('content')
<!-- app-Header -->
<div class="app-header header sticky">
<div class="container-fluid main-container">
<div class="d-flex">
<a aria-label="Hide Sidebar" class="app-sidebar__toggle" data-bs-toggle="sidebar"
href="javascript:void(0)"></a>
<!-- sidebar-toggle-->
<a class="logo-horizontal " href="index.html">
<img src="{{asset('assets/images/brand/logo-1.png')}}" class="header-brand-img desktop-logo"
alt="logo">
<img src="{{ asset('assets/images/brand/logo-3.png') }}" class="header-brand-img light-logo1"
alt="logo">
</a>
<!-- LOGO -->
<div class="main-header-center ms-3 d-none d-lg-block">
<input class="form-control" placeholder="Search for results..." type="search">
<button class="btn px-0 pt-2"><i class="fe fe-search" aria-hidden="true"></i></button>
</div>
<div class="d-flex order-lg-2 ms-auto header-right-icons">
<div class="dropdown d-none">
<a href="javascript:void(0)" class="nav-link icon" data-bs-toggle="dropdown">
<i class="fe fe-search"></i>
</a>
<div class="dropdown-menu header-search dropdown-menu-start">
<div class="input-group w-100 p-2">
<input type="text" class="form-control" placeholder="Search....">
<div class="input-group-text btn btn-primary">
<i class="fe fe-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!-- SEARCH -->
<button class="navbar-toggler navresponsive-toggler d-lg-none ms-auto" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon fe fe-more-vertical"></span>
</button>
<div class="navbar navbar-collapse responsive-navbar p-0">
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<div class="d-flex order-lg-2">
<div class="dropdown d-lg-none d-flex">
<a href="javascript:void(0)" class="nav-link icon" data-bs-toggle="dropdown">
<i class="fe fe-search"></i>
</a>
<div class="dropdown-menu header-search dropdown-menu-start">
<div class="input-group w-100 p-2">
<input type="text" class="form-control" placeholder="Search....">
<div class="input-group-text btn btn-primary">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!-- COUNTRY -->
<div class="d-flex country">
<a class="nav-link icon text-center" data-bs-target="#country-selector"
data-bs-toggle="modal">
<i class="fe fe-globe"></i><span
class="fs-16 ms-2 d-none d-xl-block">English</span>
</a>
</div>
<!-- SEARCH -->
<div class="dropdown d-flex">
<a class="nav-link icon theme-layout nav-link-bg layout-setting">
<span class="dark-layout"><i class="fe fe-moon"></i></span>
<span class="light-layout"><i class="fe fe-sun"></i></span>
</a>
</div>
<!-- Theme-Layout -->
<div class="dropdown d-flex">
<a class="nav-link icon full-screen-link nav-link-bg">
<i class="fe fe-minimize fullscreen-button"></i>
</a>
</div>
<!-- FULL-SCREEN -->
<div class="dropdown d-flex notifications">
<a class="nav-link icon" data-bs-toggle="dropdown"><i
class="fe fe-bell"></i><span class=" pulse"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<div class="drop-heading border-bottom">
<div class="d-flex">
<h6 class="mt-1 mb-0 fs-16 fw-semibold text-dark">Notifications
</h6>
</div>
</div>
<div class="notifications-menu">
<a class="dropdown-item d-flex" href="notify-list.html">
<div class="me-3 notifyimg bg-primary brround box-shadow-primary">
<i class="fe fe-mail"></i>
</div>
<div class="mt-1 wd-80p">
<h5 class="notification-label mb-1">New Application received
</h5>
<span class="notification-subtext">3 days ago</span>
</div>
</a>
<a class="dropdown-item d-flex" href="notify-list.html">
<div class="me-3 notifyimg bg-secondary brround box-shadow-secondary">
<i class="fe fe-check-circle"></i>
</div>
<div class="mt-1 wd-80p">
<h5 class="notification-label mb-1">Project has been
approved</h5>
<span class="notification-subtext">2 hours ago</span>
</div>
</a>
<a class="dropdown-item d-flex" href="notify-list.html">
<div class="me-3 notifyimg bg-success brround box-shadow-success">
<i class="fe fe-shopping-cart"></i>
</div>
<div class="mt-1 wd-80p">
<h5 class="notification-label mb-1">Your Product Delivered
</h5>
<span class="notification-subtext">30 min ago</span>
</div>
</a>
<a class="dropdown-item d-flex" href="notify-list.html">
<div class="me-3 notifyimg bg-pink brround box-shadow-pink">
<i class="fe fe-user-plus"></i>
</div>
<div class="mt-1 wd-80p">
<h5 class="notification-label mb-1">Friend Requests</h5>
<span class="notification-subtext">1 day ago</span>
</div>
</a>
</div>
<div class="dropdown-divider m-0"></div>
<a href="notify-list.html"
class="dropdown-item text-center p-3 text-muted">View all
Notification</a>
</div>
</div>
<!-- NOTIFICATIONS -->
<div class="dropdown d-flex message">
<a class="nav-link icon text-center" data-bs-toggle="dropdown">
<i class="fe fe-message-square"></i><span class="pulse-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<div class="drop-heading border-bottom">
<div class="d-flex">
<h6 class="mt-1 mb-0 fs-16 fw-semibold text-dark">You have 5
Messages</h6>
<div class="ms-auto">
<a href="javascript:void(0)" class="text-muted p-0 fs-12">make all
unread</a>
</div>
</div>
</div>
<div class="message-menu">
<a class="dropdown-item d-flex" href="chat.html">
<span
class="avatar avatar-md brround me-3 align-self-center cover-image"
data-bs-image-src="../assets/images/users/1.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Peter Theil</h5>
<small class="text-muted ms-auto text-end">
6:45 am
</small>
</div>
<span>Commented on file Guest list....</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span
class="avatar avatar-md brround me-3 align-self-center cover-image"
data-bs-image-src="../assets/images/users/15.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Abagael Luth</h5>
<small class="text-muted ms-auto text-end">
10:35 am
</small>
</div>
<span>New Meetup Started......</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span
class="avatar avatar-md brround me-3 align-self-center cover-image"
data-bs-image-src="../assets/images/users/12.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Brizid Dawson</h5>
<small class="text-muted ms-auto text-end">
2:17 pm
</small>
</div>
<span>Brizid is in the Warehouse...</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span
class="avatar avatar-md brround me-3 align-self-center cover-image"
data-bs-image-src="../assets/images/users/4.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Shannon Shaw</h5>
<small class="text-muted ms-auto text-end">
7:55 pm
</small>
</div>
<span>New Product Realease......</span>
</div>
</a>
</div>
<div class="dropdown-divider m-0"></div>
<a href="javascript:void(0)" class="dropdown-item text-center p-3 text-muted">See
all
Messages</a>
</div>
</div>
<!-- MESSAGE-BOX -->
<div class="dropdown d-flex header-settings">
<a href="javascript:void(0);" class="nav-link icon"
data-bs-toggle="sidebar-right" data-target=".sidebar-right">
<i class="fe fe-align-right"></i>
</a>
</div>
<!-- SIDE-MENU -->
<div class="dropdown d-flex profile-1">
<a href="javascript:void(0)" data-bs-toggle="dropdown"
class="nav-link leading-none d-flex">
<img src="../assets/images/users/21.jpg" alt="profile-user"
class="avatar profile-user brround cover-image">
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<div class="drop-heading">
<div class="text-center">
<h5 class="text-dark mb-0 fs-14 fw-semibold">Percy Kewshun</h5>
<small class="text-muted">Senior Admin</small>
</div>
</div>
<div class="dropdown-divider m-0"></div>
<a class="dropdown-item" href="profile.html">
<i class="dropdown-icon fe fe-user"></i> Profile
</a>
<a class="dropdown-item" href="email-inbox.html">
<i class="dropdown-icon fe fe-mail"></i> Inbox
<span class="badge bg-danger rounded-pill float-end">5</span>
</a>
<a class="dropdown-item" href="lockscreen.html">
<i class="dropdown-icon fe fe-lock"></i> Lockscreen
</a>
<a class="dropdown-item" href="login.html">
<i class="dropdown-icon fe fe-alert-circle"></i> Sign out
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /app-Header -->
@include('components.backendsidebar',['data'=>'hehe'])
<!--app-content open-->
<div class="main-content app-content mt-0">
<div class="side-app">
<!-- CONTAINER -->
<div class="main-container container-fluid">
@include('components.backendpageheader')
<!-- ROW-2 -->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="card">
<div class="card-header row flex-row">
<div class="col-12 mb-2 ">
<h3 class="card-title">{{__('backend.category')}}</h3>
</div>
<div class="col-12 row">
<div class="options col-6">
<div class="float-start actions nodisplay">
<button class="btn btn-danger delete_all">Xóa tất cả</button>
</div>
</div>
<div class="options col-6 d-flex justify-content-between float-end">
<div class="item mx-3 ">
<form class="row" method="search" action="{{ route('backend.category.index') }}">
<div class="col-auto">
<input type="text" name="q" class="form-control" value="{{ request('q') ?: old('q') }}"/>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
<div class="item">
<a href="{{ route('backend.category.create') }}">
<button class="btn btn-success">{{__('backend.new')}}</button>
</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row mt-4">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" class="float-left">
<input type="checkbox" name="check_all_ids" id="check_all_ids"/>
</th>
<th scope="col" class="w-10">{{__('backend.stt')}}</th>
<th scope="col">{{__('backend.name')}}</th>
<th scope="col">{{__('backend.slug')}}</th>
<th scope="col">{{__('backend.action')}}</th>
</tr>
</thead>
<tbody>
@foreach($data as $key => $item)
<tr id="contact_{{$item->id}}">
<th>
<input type="checkbox" name="check_ids" class="check_ids"
value="{{$item->id}}"/>
</th>
{{-- <th><input type="checkbox" name="ids" class="checkbox_ids" id="" value="{{$item->id}}"/> </th>--}}
<th scope="row">{{$key+1}}</th>
<td>{{$item->name}}</td>
<td>{{$item->slug}}</td>
<td>
<div class="item" style="display: inline-block;">
<a href="{{route('backend.category.edit',['id'=>$item->id])}}"
type="button" class="btn btn-primary">Edit</a>
</div>
<div class="item" style="display: inline-block;">
<form
action="{{ route('backend.category.destroy', ['id' => $item->id]) }}"
method="POST">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Xóa</button>
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
{{$data->links()}}
</div>
</div>
</div>
</div>
<!-- ROW-2 END -->
</div>
<!-- CONTAINER END -->
</div>
</div>
<!--app-content close-->
@endsection
@push('css')
<style>
.display {
display: block;
}
.nodisplay {
display: none;
}
</style>
@endpush
@push('js')
<script type="text/javascript">
$(document).ready(function () {
const check_all_ids = $('#check_all_ids');
const delete_all = $('.delete_all');
check_all_ids.click(function () {
$('.check_ids').prop('checked', $(this).prop('checked'));
//console.log($('#check_all_ids').prop('checked'))
if ($(this).prop('checked')) {
$('.actions').addClass('display');
$('.actions').removeClass('nodisplay');
} else {
$('.actions').addClass('nodisplay');
$('.actions').removeClass('display');
}
})
delete_all.click(function (event) {
event.preventDefault();
var all_ids = [];
$('.check_ids:checked').each(function () {
all_ids.push($(this).val());
})
$.ajax({
url: "{{ route('backend.category.deletelist') }}",
method: 'POST',
dataType: 'json',
data: {
ids: all_ids,
_token: "{{ csrf_token() }}",
},
success: function (data) {
all_ids.map(item => {
$('#contact_' + item).css('display', 'none');
})
console.log(data.data)
},
fail: function (error) {
console.log(error)
}
})
})
});
</script>
@endpush
