@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">Banner</h4>

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

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



             <div class="row">
                 <div class="col-lg-12">
                     <div class="card" id="BannerList">
                         <div class="card-header  bBanner-0">
                             <div class="d-flex align-items-center">
                                 <h5 class="card-title mb-0 flex-grow-1">Banner</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="#addBanner"><i class="ri-add-line align-bottom me-1"></i> Add Banner</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 bBanner bBanner-dashed bBanner-end-0 bBanner-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 Banner ">
                                             <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" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
                                                 <option value="all" selected>Select status</option>
                                                 <option value="Active">Public</option>
                                                 <option value="Inprogress">Merchant</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 id="columnSearchDatatable" style="text-align: left;" class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                                         <thead class="thead-light">
                                             <tr>
                                                 <th>Sl</th>
                                                 <th>Image</th>
                                                 <th>Banner type</th>
                                                 <th>Published</th>
                                                 <th style="width: 50px">Action</th>
                                             </tr>
                                         </thead>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">1</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-21-6260c14f117ef.png">
                                                 </td>
                                                 <td>Footer Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="18" checked=""><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBanner" style="cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="18">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </tbody>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">2</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-20-625fb51291e68.png">
                                                 </td>
                                                 <td>Main Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="17"><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBannerstyle=" cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="17">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </tbody>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">3</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-21-6260c07b91aed.png">
                                                 </td>
                                                 <td>Popup Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="16" checked=""><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBanner" style=" cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="16">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </tbody>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">4</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-21-6260beb0ca1f0.png">
                                                 </td>
                                                 <td>Main Section Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="14" checked=""><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBanner" style=" cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="14">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </tbody>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">5</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-21-6260bfbad32ea.png">
                                                 </td>
                                                 <td>Footer Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="13" checked=""><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBanner" style=" cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="13">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </tbody>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">6</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-19-625e81286fd46.png">
                                                 </td>
                                                 <td>Main Section Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="12" checked=""><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBanner" style="cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="12">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </tbody>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">7</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-24-6264be16c896b.png">
                                                 </td>
                                                 <td>Main Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="11" checked=""><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBanner" style=" cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="11">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </tbody>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">8</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-24-6264be477b97f.png">
                                                 </td>
                                                 <td>Main Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="10" checked=""><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBanner" style="cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="10">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </tbody>
                                         <tbody>
                                             <tr>
                                                 <th scope="row">9</th>
                                                 <td>
                                                     <img width="80" onerror="this.src='https://6valley.6amtech.com/public/assets/front-end/img/image-place-holder.png'" src="https://6valley.6amtech.com/storage/app/public/banner/2022-04-21-6260c11c12734.png">
                                                 </td>
                                                 <td>Main Banner</td>
                                                 <td><label class="switch"><input type="checkbox" class="status" id="9"><span class="slider round"></span></label></td>
                                                 <td>
                                                     <a class="btn btn-primary btn-sm edit" title="Edit" data-bs-toggle="modal" id="create-btn" data-bs-target="#addBanner" style="cursor: pointer;">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                     <a class="btn btn-danger btn-sm delete" title="Delete" style="cursor: pointer;" id="9">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </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+ Banners We did
                                                 not find any
                                                 Banners 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="BannerId" class="form-label">Banner group</label>
                                                     <input type="text" id="BannerId" 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="Bannername-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="Bannername-field" class="form-label">Image</label>
                                                     <input class="form-control" id="Banner-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="deleteBanner" 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 Banner ?</h4>
                                                 <p class="text-muted fs-15 mb-4">Deleting your Banner 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="addBanner" tabindex="-1" aria-labelledby="addBannerLabel" 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="addBannerLabel">Add Banner</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-12">
                                                 <div class="mb-3">
                                                     <label for="firstnameInput" class="form-label">Banner type</label>
                                                     <input type="text" class="form-control" id="firstnameInput" placeholder="Enter your name">
                                                 </div>
                                             </div>
                                             <!--end col-->

                                             <div class="col-lg-12">
                                                 <div class="mb-3">
                                                     <label for="birthdayidInput" class="form-label">View position</label>
                                                     <select class="form-control" data-trigger name="choices-single-default" id="choices-single-default">
                                                         <option value="">Select </option>
                                                         <option value="">Footer Banner</option>
                                                         <option value="">Main Banner</option>
                                                         <option value="">Popup Banner</option>
                                                         <option value="">Main section Banner</option>
                                                     </select>
                                                 </div>
                                             </div>
                                             <!--end col-->

                                             <div class="col-lg-12">
                                                 <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="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 Banner modal -->
         </div>
         <!-- container-fluid -->
     </div>
     <!-- End Page-content -->

 </div>
 @endsection