@extends('layouts.dashboard-template')
 @section('page-content')
 <div class="main-content">

     <div class="page-content">
         <div class="container-fluid">

             <!-- start page title -->
             <div class="row">
                 <div class="col-12">
                     <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                         <h4 class="mb-sm-0">Blog</h4>

                         <div class="page-title-right">
                             <ol class="breadcrumb m-0">
                                 <li class="breadcrumb-item"><a href="javascript: void(0);">Blog</a></li>
                             </ol>
                         </div>

                     </div>
                 </div>
             </div>
             <!-- end page title -->



             <div class="row">
                 <div class="col-lg-12">
                     <div class="card" id="BlogList">
                         <div class="card-header  bBlog-0">
                             <div class="d-flex align-items-center">
                                 <h5 class="card-title mb-0 flex-grow-1">Blog</h5>
                                 <div class="flex-shrink-0">
                                     <button type="button" class="btn btn-success add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBlog"><i class="ri-add-line align-bottom me-1"></i> Add Blog</button>
                                     <button class="btn btn-soft-danger" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
                                 </div>
                             </div>
                         </div>
                         <div class="card-body bBlog bBlog-dashed bBlog-end-0 bBlog-start-0">
                             <form>
                                 <div class="row g-3">
                                     <div class="col-xxl-4 col-sm-4">
                                         <div class="search-box">
                                             <input type="text" class="form-control search" placeholder="Search for Blog ">
                                             <i class="ri-search-line search-icon"></i>
                                         </div>
                                     </div>
                                     <!--end col-->
                                     <div class="col-xxl-4 col-sm-4">
                                         <div>
                                             <select class="form-control" id="idStatus">
                                                 <option value="all" selected>Select status</option>
                                                 <option value="Active">Public</option>
                                                 <option value="Inprogress">Draft</option>
                                             </select>
                                         </div>
                                     </div>
                                     <!--end col-->

                                     <div class="col-xxl-4 col-sm-4">
                                         <div>
                                             <button type="button" class="btn btn-primary w-100" onclick="SearchData();"> <i class="ri-equalizer-fill me-1 align-bottom"></i>
                                                 Filters
                                             </button>
                                         </div>
                                     </div>
                                     <!--end col-->
                                 </div>
                                 <!--end row-->
                             </form>
                         </div>
                         <div class="card-body pt-0">
                             <div>
                                 -

                                 <div class="table-responsive table-card mb-1">
                                     <table class="table table-nowrap align-middle" id="BlogTable">
                                         <thead class="text-muted table-light">
                                             <tr class="text-uppercase">
                                                 <th scope="col" style="width: 25px;">
                                                     <div class="form-check">
                                                         <input class="form-check-input" type="checkbox" id="checkAll" value="option">
                                                     </div>
                                                 </th>
                                                 <th class="sort" data-sort="id">Blog Title</th>
                                                 <th class="sort" data-sort="customer_name">Visibility</th>
                                                 <th class="sort" data-sort="date">Author</th>
                                                 <th class="sort" data-sort="amount">Published Date</th>
                                                 <th class="sort" data-sort="city">Action</th>
                                             </tr>
                                         </thead>
                                         <tbody class="list form-check-all">
                                             <tr>
                                                 <th scope="row">
                                                     <div class="form-check">
                                                         <input class="form-check-input" type="checkbox" name="checkAll" value="option1">
                                                     </div>
                                                 </th>
                                                 <td>
                                                     <div class="d-flex align-items-center">
                                                         <div class="flex-shrink-0">
                                                             <img src="{{ asset('admin/images/products/img-1.png') }}" alt="" class="avatar-xxs" />
                                                         </div>
                                                         <a href="javascript:void(0);" class="currency_name flex-grow-1 ms-2">About Us</a>
                                                     </div>
                                                 </td>
                                                 <td class="customer_name"><span class="badge bg-success">Public</span></td>
                                                 <td class="date">
                                                     SuperAdmin
                                                 </td>

                                                 <td class="status">Mar 21, 2022
                                                 </td>
                                                 <td>
                                                     <ul class="list-inline hstack gap-2 mb-0">

                                                         <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                                                             <a href="#showModal" data-bs-toggle="modal" class="text-primary d-inline-block edit-item-btn">
                                                                 <i class="ri-pencil-fill fs-16"></i>
                                                             </a>
                                                         </li>
                                                         <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Remove">
                                                             <a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteBlog">
                                                                 <i class="ri-delete-bin-5-fill fs-16"></i>
                                                             </a>
                                                         </li>
                                                     </ul>
                                                 </td>
                                             </tr>
                                         </tbody>
                                     </table>
                                     <div class="noresult" style="display: none">
                                         <div class="text-center">
                                             <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px">
                                             </lord-icon>
                                             <h5 class="mt-2">Sorry! No Result Found</h5>
                                             <p class="text-muted">We've searched more than 150+ Blogs We did
                                                 not find any
                                                 Blogs for you search.</p>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="d-flex justify-content-end">
                                     <div class="pagination-wrap hstack gap-2">
                                         <a class="page-item pagination-prev disabled" href="#">
                                             Previous
                                         </a>
                                         <ul class="pagination listjs-pagination mb-0"></ul>
                                         <a class="page-item pagination-next" href="#">
                                             Next
                                         </a>
                                     </div>
                                 </div>
                             </div>
                             <div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered">
                                     <div class="modal-content">
                                         <div class="modal-header bg-light p-3">
                                             <h5 class="modal-title" id="exampleModalLabel">&nbsp;</h5>
                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                                         </div>
                                         <form action="#">
                                             <div class="modal-body">
                                                 <input type="hidden" id="id-field" />

                                                 <div class="mb-3" id="modal-id">
                                                     <label for="BlogId" class="form-label">Blog group</label>
                                                     <input type="text" id="BlogId" class="form-control" placeholder="Enter group name" />
                                                 </div>

                                                 <div class="mb-3">
                                                     <label for="customername-field" class="form-label">Description</label>
                                                     <textarea class="form-control" id="meta-description-input" placeholder="Enter description" rows="3"></textarea>
                                                 </div>

                                                 <div class="mb-3">
                                                     <label for="Blogname-field" class="form-label">Icon</label>
                                                     <div class="input-group iconpicker-container">
                                                         <input class="form-control iconpicker-input iconpicker-element" placeholder="Pick an icon" data-placement="bottomRight" name="icon" type="text" value="fa-cube" id="icon">
                                                         <span class="input-group-addon"><i class="fa fa-cube"></i></span>
                                                     </div>
                                                 </div>

                                                 <div class="mb-3">
                                                     <label for="Blogname-field" class="form-label">Image</label>
                                                     <input class="form-control" id="Blog-image-input" type="file" accept="image/png, image/gif, image/jpeg">
                                                 </div>
                                                 <div class="mb-3">
                                                     <label for="delivered-status" class="form-label">
                                                         Status</label>
                                                     <select class="form-control" data-trigger name="delivered-status" id="delivered-status">
                                                         <option value="">Active</option>
                                                         <option value="">Inactive</option>
                                                     </select>
                                                 </div>
                                                 <div class="mb-3">
                                                     <label for="customername-field" class="form-label">Meta title</label>
                                                     <textarea class="form-control" id="meta-description-input" placeholder="Enter title" rows="3"></textarea>
                                                 </div>
                                                 <div class="mb-3">
                                                     <label for="customername-field" class="form-label">Meta Description</label>
                                                     <textarea class="form-control" id="meta-description-input" placeholder="Enter description" rows="3"></textarea>
                                                 </div>
                                                 <div class="mb-3">
                                                     <label for="customername-field" class="form-label">Meta keyWord</label>
                                                     <textarea class="form-control" id="meta-description-input" placeholder="Enter keyword" rows="3"></textarea>
                                                 </div>
                                             </div>
                                             <div class="modal-footer">
                                                 <div class="hstack gap-2 justify-content-end">
                                                     <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                                     <button type="submit" class="btn btn-success" id="add-btn">Add</button>
                                                 </div>
                                             </div>
                                         </form>
                                     </div>
                                 </div>
                             </div>

                             <!-- Modal -->
                             <div class="modal fade flip" id="deleteBlog" tabindex="-1" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered">
                                     <div class="modal-content">
                                         <div class="modal-body p-5 text-center">
                                             <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                                             <div class="mt-4 text-center">
                                                 <h4>You are about to delete a Blog ?</h4>
                                                 <p class="text-muted fs-15 mb-4">Deleting your Blog will remove
                                                     all of
                                                     your information from our database.</p>
                                                 <div class="hstack gap-2 justify-content-center remove">
                                                     <button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i>
                                                         Close</button>
                                                     <button class="btn btn-danger" id="delete-record">Yes,
                                                         Delete It</button>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <!--end modal -->
                         </div>
                     </div>

                 </div>
                 <!--end col-->
             </div>
             <!--end row-->
             <!-- Modal -->
             <div class="modal fade zoomIn" id="addBlog" tabindex="-1" aria-labelledby="addBlogLabel" aria-hidden="true">
                 <div class="modal-dialog modal-dialog-centered modal-lg">
                     <div class="modal-content">
                         <div class="modal-header bg-light p-3">
                             <h5 class="modal-title" id="addBlogLabel">Add Blog</h5>
                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>
                         <div class="modal-body">
                             <div class="tab-content">
                                 <div class="tab-pane active" id="personalDetails" role="tabpanel">
                                     <form action="#">
                                         <div class="row">
                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label for="firstnameInput" class="form-label">Blog Title</label>
                                                     <input type="text" class="form-control" id="firstnameInput" placeholder="Enter your name">
                                                 </div>
                                             </div>
                                             <!--end col-->
                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label for="lastnameInput" class="form-label">Slug</label>
                                                     <input type="text" class="form-control" id="lastnameInput" placeholder="Enter company name">
                                                 </div>
                                             </div>
                                             <!--end col-->
                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label for="birthdayidInput" class="form-label">Tags</label>
                                                     <input type="text" class="form-control" id="lastnameInput" placeholder="Select Add /Tag">
                                                 </div>
                                             </div>
                                             <!--end col-->
                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label for="birthdayidInput" class="form-label">Visibility</label>
                                                     <select class="form-control" id="choices-single-default">
                                                         <option value="">Public </option>
                                                         <option value="">Draft</option>
                                                     </select>
                                                 </div>
                                             </div>
                                             <!--end col-->
                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label for="birthdayidInput" class="form-label">Auther</label>
                                                     <div class="input-group">
                                                         <input type="text" class="form-control" placeholder="Author" aria-label="Username" aria-describedby="basic-addon1">
                                                     </div>
                                                 </div>
                                             </div>
                                             <!--end col-->
                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label for="cityidInput" class="form-label">Upload Photo</label>
                                                     <input type="file" class="form-control" id="companylogoInput">
                                                 </div>
                                             </div>
                                             <!--end col-->
                                             <div class="col-lg-12">
                                                 <div class="mb-3">
                                                     <label class="form-label" for="meta-title-input">Description</label>
                                                     <textarea class="ckeditor"></textarea>
                                                 </div>
                                             </div>
                                             <!--end col-->

                                             <div class="col-lg-12">
                                                 <div class="hstack gap-2 justify-content-end">
                                                     <button class="btn btn-link link-success text-decoration-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
                                                     <button type="submit" class="btn btn-primary"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
                                                 </div>
                                             </div>
                                             <!--end col-->
                                         </div>
                                         <!--end row-->
                                     </form>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <!-- end add Blog modal -->
         </div>
         <!-- container-fluid -->
     </div>
     <!-- End Page-content -->

 </div>
 @endsection