@extends('admin.layout.index')
@section('title', 'Admin | Customer Support Management')

@section('custom-style')
<style>
    .dataTables_empty {
        text-align: center !important;
    }

    .dataTables_processing {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
        z-index: 9999;
    }
</style>
@endsection

@section('content')

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h1 class="page-title fw-medium fs-18 mb-2">Support</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Pages</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Support And Communication</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xxl-12 col-xl-6">
                <div class="card custom-card">
                    <div class="card-body">
                        <ul class="nav nav-tabs tab-style-2 mb-3 d-sm-flex" id="myTab1"
                            role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="order-tab" data-bs-toggle="tab"
                                    data-bs-target="#order-tab-pane" type="button" role="tab"
                                    aria-controls="home-tab-pane" aria-selected="true"><i
                                        class="bi bi-gear me-1 align-middle"></i>Manage Customer Issues
                                </button>
                            </li>
                            <!-- <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="confirmed-tab" data-bs-toggle="tab"
                                            data-bs-target="#confirm-tab-pane" type="button" role="tab"
                                            aria-controls="profile-tab-pane" aria-selected="false"><i
                                            class="bi bi-star me-1 align-middle"></i>
                                        User Feedback and Reviews
                                    </button>
                                </li> -->
                                @can('faqs')
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="faq-tab" data-bs-toggle="tab"
                                    data-bs-target="#faq-tab-pane" type="button" role="tab"
                                    aria-controls="faq-tab-pane" aria-selected="false"><i
                                        class="bi bi-star me-1 align-middle"></i>
                                    FAQs
                                </button>
                            </li>
                            @endcan
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active text-muted" id="order-tab-pane" role="tabpanel"
                                aria-labelledby="home-tab" tabindex="0">
                                <div class="card-body table-responsive border rounded">
                                    <div class="card-header justify-content-between p-0 m-0">
                                        <div class="card-title">
                                            Support And Communication
                                        </div>
                                        <div class="d-flex flex-wrap gap-2">

                                            <div class="card-body d-flex align-items-center flex-wrap">

                                                <div class="dropdown">
                                                    <button class="btn btn-light dropdown-toggle m-1" type="button"
                                                        id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                        aria-expanded="false">
                                                        Sort By
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item sort-option-customer" href="javascript:void(0);" data-value="recent">Recently Added</a></li>
                                                        <li><a class="dropdown-item sort-option-customer" href="javascript:void(0);" data-value="7days">7 Days Ago</a></li>
                                                        <li><a class="dropdown-item sort-option-customer" href="javascript:void(0);" data-value="1month">1 Month Ago</a></li>
                                                    </ul>
                                                </div>
                                                <div class="d-flex align-items-center m-1" role="search">
                                                    <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="datatable-customer-search-input">
                                                    <button type="button" class="btn btn-primary" id="search-btn"><i class="ri-search-line"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <table class="table text-nowrap table-hover" id="customer-issues">
                                        <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Email ID</th>
                                                <th scope="col">Message</th>
                                                <th scope="col">Type</th>
                                                <th scope="col">Status</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <span class="avatar avatar-sm me-2 avatar-rounded">
                                                            <img src="{{asset('assets/images/faces/4.jpg')}}"
                                                                 alt="img">
                                                        </span><a href="http://127.0.0.1:8000/profile">Toni Stark</a>
                                                    </div>
                                                </td>
                                                <td>mayorkelly@gmail.com</td>
                                                <td>enatis faucibus aliquet
                                                    condimentum pretium.
                                                </td>
                                                <td>Message</td>
                                                <td><span class="badge bg-success-transparent">Resolved</span></td>
                                                <td>
                                                    <div class="hstack gap-2 fs-15">
                                                        <button id="alert-confirm"
                                                                data-bs-toggle="tooltip"
                                                                data-bs-custom-class="tooltip-secondary"
                                                                aria-label="View"
                                                                title="View"
                                                                data-modal-target="#create-task"
                                                                class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-eye-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                                data-bs-toggle="tooltip"
                                                                data-bs-custom-class="tooltip-primary"
                                                                aria-label="Reply"
                                                                title="Reply"
                                                                data-modal-target="#replyModal"
                                                                class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-message-2-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                                data-bs-toggle="tooltip"
                                                                data-bs-custom-class="tooltip-danger"
                                                                aria-label="Cancel Order"
                                                                title="Delete"
                                                                data-modal-target="#delete-modal"
                                                                class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-delete-bin-5-line"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                     -->
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                            <div class="tab-pane fade  text-muted" id="confirm-tab-pane"
                                role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                <div class="card-body table-responsive border rounded">
                                    <div class="card-header justify-content-between p-0 m-0">
                                        <div class="card-title">
                                            Support And Communication
                                        </div>
                                        <div class="d-flex flex-wrap gap-2">

                                            <div class="card-body d-flex align-items-center flex-wrap">

                                                <div class="dropdown">
                                                    <button class="btn btn-light dropdown-toggle m-1" type="button"
                                                        id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                        aria-expanded="false">
                                                        Sort By
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item" href="javascript:void(0);">Recently
                                                                Added</a></li>
                                                        <li><a class="dropdown-item" href="javascript:void(0);">7
                                                                Days
                                                                Ago</a></li>
                                                        <li><a class="dropdown-item" href="javascript:void(0);">1
                                                                Month
                                                                Ago</a></li>

                                                    </ul>
                                                </div>
                                                <div class="d-flex align-items-center m-1" role="search">
                                                    <input class="form-control" type="search" placeholder="Search"
                                                        aria-label="Search">
                                                    <button class="btn btn-light ms-2" type="submit">Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Review ID</th>
                                                <th>User</th>
                                                <th>Rating</th>
                                                <th>Feedback</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>REV123456</td>
                                                <td>John Doe</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <span class="text-warning d-block ms-1">
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-half-fill"></i>
                                                        </span>
                                                    </div>
                                                </td>
                                                <td>Great service, but delivery was slow.</td>
                                                <td>
                                                    <div class="hstack gap-2 fs-15">
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-secondary"
                                                            aria-label="View"
                                                            title="View"
                                                            data-modal-target="#create-task"
                                                            class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-eye-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-primary"
                                                            aria-label="Reply"
                                                            title="Reply"
                                                            data-modal-target="#replyModal"
                                                            class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-message-2-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-danger"
                                                            aria-label="Cancel Order"
                                                            title="Delete"
                                                            data-modal-target="#delete-modal"
                                                            class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-delete-bin-5-line"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>REV654321</td>
                                                <td>Jane Smith</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <span class="text-warning d-block ms-1">
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                        </span>
                                                    </div>
                                                </td>
                                                <td>Perfect experience, no issues at all!</td>
                                                <td>
                                                    <div class="hstack gap-2 fs-15">
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-secondary"
                                                            aria-label="View"
                                                            title="View"
                                                            data-modal-target="#create-task"
                                                            class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-eye-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-primary"
                                                            aria-label="Reply"
                                                            title="Reply"
                                                            data-modal-target="#replyModal"
                                                            class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-message-2-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-danger"
                                                            aria-label="Cancel Order"
                                                            title="Delete"
                                                            data-modal-target="#delete-modal"
                                                            class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-delete-bin-5-line"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>REV123456</td>
                                                <td>Jane Smith</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <span class="text-warning d-block ms-1">
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-half-fill"></i>
                                                        </span>
                                                    </div>
                                                </td>
                                                <td>Great service, but delivery was slow.</td>
                                                <td>
                                                    <div class="hstack gap-2 fs-15">
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-secondary"
                                                            aria-label="View"
                                                            title="View"
                                                            data-modal-target="#create-task"
                                                            class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-eye-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-primary"
                                                            aria-label="Reply"
                                                            title="Reply"
                                                            data-modal-target="#replyModal"
                                                            class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-message-2-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-danger"
                                                            aria-label="Cancel Order"
                                                            title="Delete"
                                                            data-modal-target="#delete-modal"
                                                            class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-delete-bin-5-line"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>REV654321</td>
                                                <td>Jane Smith</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <span class="text-warning d-block ms-1">
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                            <i class="ri-star-fill"></i>
                                                        </span>
                                                    </div>
                                                </td>
                                                <td>Perfect experience, no issues at all!</td>
                                                <td>
                                                    <div class="hstack gap-2 fs-15">
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-secondary"
                                                            aria-label="View"
                                                            title="View"
                                                            data-modal-target="#create-task"
                                                            class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-eye-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-primary"
                                                            aria-label="Reply"
                                                            title="Reply"
                                                            data-modal-target="#replyModal"
                                                            class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-message-2-fill"></i>
                                                        </button>
                                                        <button id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-danger"
                                                            aria-label="Cancel Order"
                                                            title="Delete"
                                                            data-modal-target="#delete-modal"
                                                            class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">
                                                            <i class="ri-delete-bin-5-line"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="card-footer border-top-0">
                                        <div class="d-flex align-items-center flex-wrap overflow-auto">
                                            <div class="mb-2 mb-sm-0">
                                                Showing <b>1</b> to <b>10</b> of <b>10</b> entries <i
                                                    class="bi bi-arrow-right ms-2 fw-medium"></i>
                                            </div>
                                            <div class="ms-auto">
                                                <ul class="pagination mb-0 overflow-auto">
                                                    <li class="page-item disabled">
                                                        <a class="page-link">Previous</a>
                                                    </li>
                                                    <li class="page-item active" aria-current="page"><a
                                                            class="page-link" href="javascript:void(0);">1</a></li>
                                                    <li class="page-item">
                                                        <a class="page-link" href="javascript:void(0);">2</a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link"
                                                            href="javascript:void(0);">3</a></li>
                                                    <li class="page-item"><a class="page-link"
                                                            href="javascript:void(0);">4</a></li>
                                                    <li class="page-item"><a class="page-link"
                                                            href="javascript:void(0);">5</a></li>
                                                    <li class="page-item">
                                                        <a class="page-link" href="javascript:void(0);">Next</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade  text-muted" id="faq-tab-pane"
                                role="tabpanel" aria-labelledby="faq-tab" tabindex="0">
                                <div class="card-body table-responsive border rounded">
                                    <div class="card-header justify-content-between p-0 m-0">
                                        <div class="card-title">
                                            FAQs
                                        </div>
                                        <div class="d-flex flex-wrap gap-2">

                                            <div class="card-body d-flex align-items-center flex-wrap">
                                                @can('create-faqs')
                                                <a class="btn btn-sm btn-primary-light btn-wave me-2 waves-effect waves-light"
                                                    href="javascript:void(0)" data-bs-toggle="modal"
                                                    data-bs-target="#createFaq"> <i class="bx bx-plus align-middle"></i> Add Faq</a>
                                                @endcan
                                                {{-- <div class="dropdown">--}}
                                                {{-- <button class="btn btn-light dropdown-toggle m-1" type="button"--}}
                                                {{-- id="dropdownMenuButton1" data-bs-toggle="dropdown"--}}
                                                {{-- aria-expanded="false">--}}
                                                {{-- Sort By--}}
                                                {{-- </button>--}}
                                                {{-- <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">--}}
                                                {{-- <li><a class="dropdown-item" href="javascript:void(0);">Recently--}}
                                                {{-- Added</a></li>--}}
                                                {{-- <li><a class="dropdown-item" href="javascript:void(0);">7--}}
                                                {{-- Days--}}
                                                {{-- Ago</a></li>--}}
                                                {{-- <li><a class="dropdown-item" href="javascript:void(0);">1--}}
                                                {{-- Month--}}
                                                {{-- Ago</a></li>--}}

                                                {{-- </ul>--}}
                                                {{-- </div>--}}
                                                {{-- <div class="d-flex align-items-center m-1" role="search">--}}
                                                {{-- <input class="form-control" type="search" placeholder="Search"--}}
                                                {{-- aria-label="Search">--}}
                                                {{-- <button class="btn btn-light ms-2" type="submit">Search</button>--}}
                                                {{-- </div>--}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-2">
                                        <table class="table table-striped text-center" id="faq-table" style="width: 100%">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Question</th>
                                                    <th>Answer</th>
                                                    <th>Status</th>
                                                    <th scope="col">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{-- <tr>--}}
                                                {{-- <td>1</td>--}}
                                                {{-- <td>REV123456</td>--}}
                                                {{-- <td>John Doe</td>--}}
                                                {{-- <td>--}}
                                                {{-- <div class="d-flex align-items-center">--}}
                                                {{-- <span class="text-warning d-block ms-1">--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-half-fill"></i>--}}
                                                {{-- </span>--}}
                                                {{-- </div>--}}
                                                {{-- </td>--}}
                                                {{-- <td>Great service, but delivery was slow.</td>--}}
                                                {{-- <td>--}}
                                                {{-- <div class="hstack gap-2 fs-15">--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-secondary"--}}
                                                {{-- aria-label="View"--}}
                                                {{-- title="View"--}}
                                                {{-- data-modal-target="#create-task"--}}
                                                {{-- class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-eye-fill"></i>--}}
                                                {{-- </button>--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-primary"--}}
                                                {{-- aria-label="Reply"--}}
                                                {{-- title="Reply"--}}
                                                {{-- data-modal-target="#replyModal"--}}
                                                {{-- class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-message-2-fill"></i>--}}
                                                {{-- </button>--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-danger"--}}
                                                {{-- aria-label="Cancel Order"--}}
                                                {{-- title="Delete"--}}
                                                {{-- data-modal-target="#delete-modal"--}}
                                                {{-- class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-delete-bin-5-line"></i>--}}
                                                {{-- </button>--}}
                                                {{-- </div>--}}
                                                {{-- </td>--}}
                                                {{-- </tr>--}}
                                                {{-- <tr>--}}
                                                {{-- <td>2</td>--}}
                                                {{-- <td>REV654321</td>--}}
                                                {{-- <td>Jane Smith</td>--}}
                                                {{-- <td>--}}
                                                {{-- <div class="d-flex align-items-center">--}}
                                                {{-- <span class="text-warning d-block ms-1">--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- </span>--}}
                                                {{-- </div>--}}
                                                {{-- </td>--}}
                                                {{-- <td>Perfect experience, no issues at all!</td>--}}
                                                {{-- <td>--}}
                                                {{-- <div class="hstack gap-2 fs-15">--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-secondary"--}}
                                                {{-- aria-label="View"--}}
                                                {{-- title="View"--}}
                                                {{-- data-modal-target="#create-task"--}}
                                                {{-- class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-eye-fill"></i>--}}
                                                {{-- </button>--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-primary"--}}
                                                {{-- aria-label="Reply"--}}
                                                {{-- title="Reply"--}}
                                                {{-- data-modal-target="#replyModal"--}}
                                                {{-- class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-message-2-fill"></i>--}}
                                                {{-- </button>--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-danger"--}}
                                                {{-- aria-label="Cancel Order"--}}
                                                {{-- title="Delete"--}}
                                                {{-- data-modal-target="#delete-modal"--}}
                                                {{-- class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-delete-bin-5-line"></i>--}}
                                                {{-- </button>--}}
                                                {{-- </div>--}}
                                                {{-- </td>--}}
                                                {{-- </tr>--}}
                                                {{-- <tr>--}}
                                                {{-- <td>3</td>--}}
                                                {{-- <td>REV123456</td>--}}
                                                {{-- <td>Jane Smith</td>--}}
                                                {{-- <td>--}}
                                                {{-- <div class="d-flex align-items-center">--}}
                                                {{-- <span class="text-warning d-block ms-1">--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-half-fill"></i>--}}
                                                {{-- </span>--}}
                                                {{-- </div>--}}
                                                {{-- </td>--}}
                                                {{-- <td>Great service, but delivery was slow.</td>--}}
                                                {{-- <td>--}}
                                                {{-- <div class="hstack gap-2 fs-15">--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-secondary"--}}
                                                {{-- aria-label="View"--}}
                                                {{-- title="View"--}}
                                                {{-- data-modal-target="#create-task"--}}
                                                {{-- class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-eye-fill"></i>--}}
                                                {{-- </button>--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-primary"--}}
                                                {{-- aria-label="Reply"--}}
                                                {{-- title="Reply"--}}
                                                {{-- data-modal-target="#replyModal"--}}
                                                {{-- class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-message-2-fill"></i>--}}
                                                {{-- </button>--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-danger"--}}
                                                {{-- aria-label="Cancel Order"--}}
                                                {{-- title="Delete"--}}
                                                {{-- data-modal-target="#delete-modal"--}}
                                                {{-- class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-delete-bin-5-line"></i>--}}
                                                {{-- </button>--}}
                                                {{-- </div>--}}
                                                {{-- </td>--}}
                                                {{-- </tr>--}}
                                                {{-- <tr>--}}
                                                {{-- <td>4</td>--}}
                                                {{-- <td>REV654321</td>--}}
                                                {{-- <td>Jane Smith</td>--}}
                                                {{-- <td>--}}
                                                {{-- <div class="d-flex align-items-center">--}}
                                                {{-- <span class="text-warning d-block ms-1">--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- <i class="ri-star-fill"></i>--}}
                                                {{-- </span>--}}
                                                {{-- </div>--}}
                                                {{-- </td>--}}
                                                {{-- <td>Perfect experience, no issues at all!</td>--}}
                                                {{-- <td>--}}
                                                {{-- <div class="hstack gap-2 fs-15">--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-secondary"--}}
                                                {{-- aria-label="View"--}}
                                                {{-- title="View"--}}
                                                {{-- data-modal-target="#create-task"--}}
                                                {{-- class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-eye-fill"></i>--}}
                                                {{-- </button>--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-primary"--}}
                                                {{-- aria-label="Reply"--}}
                                                {{-- title="Reply"--}}
                                                {{-- data-modal-target="#replyModal"--}}
                                                {{-- class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-message-2-fill"></i>--}}
                                                {{-- </button>--}}
                                                {{-- <button id="alert-confirm"--}}
                                                {{-- data-bs-toggle="tooltip"--}}
                                                {{-- data-bs-custom-class="tooltip-danger"--}}
                                                {{-- aria-label="Cancel Order"--}}
                                                {{-- title="Delete"--}}
                                                {{-- data-modal-target="#delete-modal"--}}
                                                {{-- class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">--}}
                                                {{-- <i class="ri-delete-bin-5-line"></i>--}}
                                                {{-- </button>--}}
                                                {{-- </div>--}}
                                                {{-- </td>--}}
                                                {{-- </tr>--}}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="card-footer border-top-0">
                                        {{-- <div class="d-flex align-items-center flex-wrap overflow-auto">--}}
                                        {{-- <div class="mb-2 mb-sm-0">--}}
                                        {{-- Showing <b>1</b> to <b>10</b> of <b>10</b> entries <i--}}
                                        {{-- class="bi bi-arrow-right ms-2 fw-medium"></i>--}}
                                        {{-- </div>--}}
                                        {{-- <div class="ms-auto">--}}
                                        {{-- <ul class="pagination mb-0 overflow-auto">--}}
                                        {{-- <li class="page-item disabled">--}}
                                        {{-- <a class="page-link">Previous</a>--}}
                                        {{-- </li>--}}
                                        {{-- <li class="page-item active" aria-current="page"><a--}}
                                        {{-- class="page-link" href="javascript:void(0);">1</a></li>--}}
                                        {{-- <li class="page-item">--}}
                                        {{-- <a class="page-link" href="javascript:void(0);">2</a>--}}
                                        {{-- </li>--}}
                                        {{-- <li class="page-item"><a class="page-link"--}}
                                        {{-- href="javascript:void(0);">3</a></li>--}}
                                        {{-- <li class="page-item"><a class="page-link"--}}
                                        {{-- href="javascript:void(0);">4</a></li>--}}
                                        {{-- <li class="page-item"><a class="page-link"--}}
                                        {{-- href="javascript:void(0);">5</a></li>--}}
                                        {{-- <li class="page-item">--}}
                                        {{-- <a class="page-link" href="javascript:void(0);">Next</a>--}}
                                        {{-- </li>--}}
                                        {{-- </ul>--}}
                                        {{-- </div>--}}
                                        {{-- </div>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

    </div>
</div>
<!-- End::app-content -->
<div class="modal fade" id="createFaq" tabindex="-1"
    aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Add Faq
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form method="post" id="storeForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Question</label>
                        <textarea type="question" class="form-control" name="question" id="question"
                            rows="2"></textarea>
                        <span class="text-danger d-none" id="questionError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Answer</label>
                        <textarea type="answer" class="form-control" name="answer" id="answer"
                            rows="4"></textarea>
                        <span class="text-danger d-none" id="answerError"></span>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>

        </div>
    </div>
</div>

<div class="modal fade" id="editFaq" tabindex="-1"
    aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Edit Faq
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form method="post" id="editForm" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <div class="modal-body">

                    <input type="hidden" id="editId" name="id" />
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Question</label>
                        <textarea type="question" class="form-control" name="question" id="editQuestion"
                            rows="2"></textarea>
                        <span class="text-danger" id="questionEditError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Answer</label>
                        <textarea type="answer" class="form-control" name="answer" id="editAnswer"
                            rows="4"></textarea>
                        <span class="text-danger" id="answerEditError"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Start::add task modal -->
<div class="modal fade" id="create-task" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">View Detail</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body px-4">
                <div class="row gy-2">
                    <div class="col-xl-12">
                        <label for="task-id" class="form-label">Description</label>
                        <textarea class="form-control" id="editDescription" name="" rows="4" cols="50" readonly
                            placeholder="" readonly>Good service, but ride was delayed and driver was also friendly.
                            </textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light"
                    data-bs-dismiss="modal">Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Start::add task modal -->
<div class="modal fade" id="editReply" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Issue Resolution</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form method="post" id="editReplyForm" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <div class="modal-body px-4">
                    <div class="row gy-2">
                        <input type="hidden" id="editId" name="id">
                        <div class="col-xl-12">
                            <label for="task-id" class="form-label">Reply</label>
                            <textarea class="form-control" id="editResponse" name="reply" rows="4" cols="50"></textarea>
                            <span class="text-danger" id="replyEditError"></span>
                        </div>
                        <div class="col-xl-12">
                            <select class="form-select form-select-lg" aria-label=".form-select-lg example" id="editStatus" name="status">
                                <option selected="">Status</option>
                                <option value="pending">Pending</option>
                                <option value="resolved">Resolved</option>
                            </select>
                            <span class="text-danger" id="statusEditError"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light"
                        data-bs-dismiss="modal">Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End::add task modal -->

<!-- Start::Delete task modal -->
<div class="modal fade flip" id="delete-modal" 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>Are You Sure?</h4>
                    <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>
                    <form method="POST" id="deleteCampForm" class="form-submit">
                        @csrf
                        {{ method_field('DELETE') }}
                        <button type="button" class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Delete It</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End::add task modal -->

<div class="modal fade flip" id="deleteCamp" 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>Are You Sure?</h4>
                    <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>
                    <form method="POST" id="deleteCampForm" class="form-submit">
                        @csrf
                        {{ method_field('DELETE') }}
                        <button type="button" class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Delete It</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-script')
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Event delegation for modal triggers
    document.addEventListener('click', function(event) {
        var target = event.target.closest('[data-modal-target]');
        if (target) {
            var modalId = target.getAttribute('data-modal-target');
            var modal = new bootstrap.Modal(document.querySelector(modalId));
            modal.show();
        }
    });
</script>

<script>
    $(function() {
        let URL = "{{ route('get-faqs') }}";

        var t = $('#faq-table').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            // dom: 'lrtip',
            ajax: {
                "type": "GET",
                "url": URL
            },
            columns: [{
                    data: 'id'
                },
                {
                    data: 'question'
                },
                {
                    data: 'answer'
                },
                {
                    data: null
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [{
                    render: function(data, type, row, meta) {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-info-transparent">${data.status}</span>
                        </div>`;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 3
                },
                // {
                //     render: function (data,type,row,meta) {
                //         var url = '{{ route("faq.delete", ":id") }}';
                //         url = url.replace(':id', data.id);
                //         var update = '{{ route("faq.update", ":id") }}';
                //         update = update.replace(':id', data.id);

                //         return '<div class="d-flex">' +
                //             '<a class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn me-2" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Edit">' +
                //             '<span type="button" data-id="' + row.id + '" data-question="' + row.question + '" data-answer="' + row.answer + '" data-status="' + row.status + '" data-url="'+update+'" data-bs-toggle="modal" data-bs-target="#editFaq">' +
                //             '<i class="ri-edit-line"></i>' +
                //             '</span>' +
                //             '</a>' +
                //             '<a class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-danger" title="Delete">' +
                //             '<span type="button" data-url="'+url+'" data-bs-toggle="modal" data-bs-target="#deleteCamp">' +
                //             '<i class="ri-delete-bin-5-line"></i>' +
                //             '</span>' +
                //             '</a>' +
                //             '</div>';

                //     },
                //     searchable: false,
                //     orderable: false,
                //     targets: -1
                // }
            ],
        });
    });

    function selectRange() {
        $('.dataTable').DataTable().ajax.reload();
    }
</script>

{{--Ajax Store--}}
<script>
    $("#storeForm").on('submit', function(event) {
        event.preventDefault();

        // Disable the submit button and change its text
        var submitButton = $('#storeForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'POST',
            url: "{{route('faq.store')}}",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Hide the modal
                    $('#createFaq').modal('hide');

                    // Update the table content with the new HTML
                    $('#faq-table').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).success(data.message);

                    // Reset the form
                    $('#storeForm')[0].reset();
                }
                if (data.error) {
                    $('#createFaq').modal('hide');

                    // Update the table content with the new HTML
                    $('#faq-table').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).error(data.message);

                    $('#storeForm')[0].reset();
                }

                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            },
            error: function(data) {
                $('#questionError').addClass('d-none');
                $('#answerError').addClass('d-none');
                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'Error';
                        $(ErrorID).removeClass("d-none");
                        $(ErrorID).text(value);
                    });
                }
                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            }
        });
    });
    // Clear error messages on input change
    $('#storeForm input,#storeForm textarea,#storeForm select').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'Error';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>

{{--Edit Modal Pass--}}
<script>
    $(document).ready(function() {
        $('#editFaq').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var question = button.data('question');
            var answer = button.data('answer');
            var status = button.data('status');
            var url = button.data('url');

            // Update the modal's form action and fields
            var modal = $(this);
            modal.find('#editForm').attr('action', url);
            modal.find('#editId').val(id);
            modal.find('#editQuestion').val(question);
            modal.find('#editAnswer').val(answer);
            modal.find('#editStatus').val(status);
        });
    });
</script>


{{--Ajax Update--}}
<script>
    // Edit record with AJAX POST method
    $("#editForm").on('submit', function(event) {
        event.preventDefault();

        $('#questionEditError').addClass('d-none').text('');
        $('#answerEditError').addClass('d-none').text('');

        // Re-enable the submit button and reset its text
        var submitButton = $('#editForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var rowId = $('#editForm input[name="id"]').val();

        $.ajax({
            type: 'POST',
            url: "{{ route('faq.update', ':id') }}".replace(':id', rowId),
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Hide the modal
                    $('#editFaq').modal('hide');

                    // Update the table content with the new HTML
                    $('#faq-table').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).success(data.message);

                    var submitButton = $('#editForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                if (data.error) {
                    $('#editFaq').modal('hide');

                    // Update the table content with the new HTML
                    $('#faq-table').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).error(data.message);

                    var submitButton = $('#editForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            },
            error: function(data) {
                // Clear previous error messages
                $('#questionEditError').addClass('d-none').text('');
                $('#answerEditError').addClass('d-none').text('');

                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    // Display error messages
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'EditError'; // Ensure this ID is correct
                        $(ErrorID).removeClass("d-none").text(value);
                    });
                }

                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            }
        });
    });
    // Clear error messages on input change
    $('#editForm input,#editForm textarea, #editForm select').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'EditError';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>

{{--Ajax Delete--}}
<script>
    $(document).ready(function() {
        $("#deleteCamp").on('show.bs.modal', function(event) {
            var triggerLink = $(event.relatedTarget);
            var url = triggerLink.data("url");
            $("#deleteCampForm").attr('action', url);

            // Reset the button state
            var submitButton = $("#deleteCampForm button[type='submit']");
            submitButton.prop('disabled', false).text('Yes, Delete It');
        });


        $("#deleteCampForm").on('submit', function(event) {
            event.preventDefault();

            var actionUrl = $(this).attr('action');
            var submitButton = $("#deleteCampForm button[type='submit']");
            submitButton.prop('disabled', true).text('Processing...');

            $.ajax({
                type: 'POST',
                url: actionUrl,
                data: $(this).serialize(),
                success: function(data) {
                    if (data.success) {
                        // Hide the modal
                        $('#deleteCamp').modal('hide');

                        $('#faq-table').DataTable().ajax.reload();

                        // Trigger the success toast notification
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).success(data.message);
                    }
                },
                error: function(data) {

                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).error(data.message);

                    // Re-enable the button and reset its text
                    submitButton.prop('disabled', false).text('Yes, Delete It');
                }
            });
        });
    });
</script>

{{-- Datatable User Feedback --}}
<script>
    $(function() {
        let URL = "{{ route('get-customer-issues') }}";
        let sortOption = 'recent'; // Default sort option
        var t = $('#customer-issues').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            dom: 'lrtip',
            dom: '<"d-flex justify-content-between"l<"d-flex">>rt<"d-flex justify-content-between"ip>', // Custom dom layout
            ajax: {
                "type": "GET",
                "url": URL,
                "data": function(d) {
                    d.sortOption = sortOption;
                    d.search = $('#datatable-customer-search-input').val();
                }
            },
            columns: [{
                    data: null
                },
                {
                    data: 'email'
                },
                {
                    data: 'description'
                },
                {
                    data: null
                },
                {
                    data: null
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [{
                    render: function(data, type, row, meta) {
                        return `
        <div class="d-flex align-items-center">
            <span class="avatar avatar-sm me-2 avatar-rounded">
                <img src="{{ asset('') }}${row.image}" alt="${row.name}" class="img-fluid">
            </span>
            <a href="#" class="text-dark fw-bold">${row.name}</a>
        </div>
    `;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 0

                },
                {
                    render: function(data, type, row, meta) {
                        return `Message`; // Just return the string, no <td> tag
                    },
                    searchable: false,
                    orderable: false,
                    targets: 3
                },
                {
                    render: function(data, type, row, meta) {
                        // Dynamically set the status
                        let status = row.status; // Assume 'status' is a field in your data
                        let badgeClass = '';

                        // Determine badge color based on status
                        if (status === 'resolved') {
                            badgeClass = 'bg-success-transparent';
                        } else if (status === 'pending') {
                            badgeClass = 'bg-warning-transparent';
                        } else if (status === 'rejected') {
                            badgeClass = 'bg-danger-transparent';
                        } else if (status === 'inprogress') {
                            badgeClass = 'bg-info-transparent';
                        } else {
                            badgeClass = 'bg-secondary-transparent'; // Default status
                        }

                        // Return the dynamically constructed HTML
                        return `
            <td>
                <span class="badge ${badgeClass}">${status}</span>
            </td>
        `;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 4 // Ensure it targets the correct column
                },
                // {
                //                         render: function (data,type,row,meta) {
                //                             var url = '{{ route("customer-issues.delete", ":id") }}';
                //                             url = url.replace(':id', data.id);
                //                             var update = '{{ route("customer-issues.update", ":id") }}';
                //                             update = update.replace(':id', data.id);

                //                             return '<div class="d-flex">' +
                //                                 '<a class="btn btn-secondary-light btn-icon ms-1 btn-sm invoice-btn" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Edit">' +
                //                                 '<span type="button" data-id="' + row.id + '" data-description="' + row.description + '" data-bs-toggle="modal" data-bs-target="#create-task">' +
                //                                 '<i class="ri-eye-fill"></i>' +
                //                                 '</span>' +
                //                                 '</a>' +
                //                                 '<a class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Edit">' +
                //                                 '<span type="button" data-id="' + row.id + '" data-status="' + row.status+ '" data-reply="' + row.reply +  '" data-url="'+update+'" data-bs-toggle="modal" data-bs-target="#editReply">' +
                //                                 '<i class="ri-message-2-fill"></i>' +
                //                                 '</span>' +
                //                                 '</a>' +
                //                                 '<a class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-danger" title="Delete">' +
                //                                 '<span type="button" data-url="'+url+'" data-bs-toggle="modal" data-bs-target="#delete-modal">' +
                //                                 '<i class="ri-delete-bin-5-line"></i>' +
                //                                 '</span>' +
                //                                 '</a>' +
                //                                 '</div>';

                //                         },
                //                         searchable: false,
                //                         orderable: false,
                //                         targets: -1
                //                     },

            ],

            language: {
                processing: "<div class='dt-processing'>Processing...</div>",
                paginate: {
                    previous: '&lsaquo;',
                    next: '&rsaquo;'
                }
            },
            drawCallback: function(settings) {
                var api = this.api();
                var dataCount = api.data().count();

                // Hide pagination if no data is available
                if (dataCount === 0) {
                    $('.dataTables_paginate').hide();
                } else {
                    $('.dataTables_paginate').show();
                }
            },
        });
        $('.sort-option-customer').on('click', function() {
            sortOption = $(this).data('value');
            t.ajax.reload();
        });
        // Trigger search on form input change or button click
        $('.header-search-bar, .form-select').on('change keyup', function() {
            t.ajax.reload();
        });
    });

    function selectRange() {
        $('#customer-issues').DataTable().ajax.reload();
    }
</script>

{{--Edit Modal Pass--}}
<script>
    $(document).ready(function() {
        $('#create-task').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var description = button.data('description');

            // Update the modal's form action and fields
            var modal = $(this);
            modal.find('#editId').val(id);
            modal.find('#editDescription').val(description);
        });
    });
</script>

{{--Ajax Delete--}}
<script>
    $(document).ready(function() {
        $("#delete-modal").on('show.bs.modal', function(event) {
            var triggerLink = $(event.relatedTarget);
            var url = triggerLink.data("url");
            $("#deleteCampForm").attr('action', url);

            // Reset the button state
            var submitButton = $("#deleteCampForm button[type='submit']");
            submitButton.prop('disabled', false).text('Yes, Delete It');
        });


        $("#deleteCampForm").on('submit', function(event) {
            event.preventDefault();

            var actionUrl = $(this).attr('action');
            var submitButton = $("#deleteCampForm button[type='submit']");
            submitButton.prop('disabled', true).text('Processing...');

            $.ajax({
                type: 'POST',
                url: actionUrl,
                data: $(this).serialize(),
                success: function(data) {
                    if (data.success) {
                        // Hide the modal
                        $('#delete-modal').modal('hide');

                        $('#customer-issues').DataTable().ajax.reload();

                        // Trigger the success toast notification
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).success(data.message);
                    }
                },
                error: function(data) {

                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).error(data.message);

                    // Re-enable the button and reset its text
                    submitButton.prop('disabled', false).text('Yes, Delete It');
                }
            });
        });
    });
</script>



{{--Ajax Update--}}
<script>
    // Edit record with AJAX POST method
    $("#editReplyForm").on('submit', function(event) {
        event.preventDefault();

        $('#replyEditError').addClass('d-none').text('');
        $('#statusEditError').addClass('d-none').text('');

        // Re-enable the submit button and reset its text
        var submitButton = $('#editReplyForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var rowId = $('#editReplyForm input[name="id"]').val();

        $.ajax({
            type: 'POST',
            url: "{{ route('customer-issues.update', ':id') }}".replace(':id', rowId),
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Hide the modal
                    $('#editReply').modal('hide');

                    // Update the table content with the new HTML
                    $('#customer-issues').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).success(data.message);

                    var submitButton = $('#editReplyForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                if (data.error) {
                    $('#editReply').modal('hide');

                    // Update the table content with the new HTML
                    $('#customer-issues').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).error(data.message);

                    var submitButton = $('#editReplyForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            },
            error: function(data) {
                // Clear previous error messages
                $('#replyEditError').addClass('d-none').text('');
                $('#statusEditError').addClass('d-none').text('');

                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    // Display error messages
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'EditError'; // Ensure this ID is correct
                        $(ErrorID).removeClass("d-none").text(value);
                    });
                }

                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            }
        });
    });
    // Clear error messages on input change
    $('#editReplyForm input,#editReplyForm textarea, #editReplyForm select').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'EditError';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>


<script>
    $(document).ready(function() {
        $('#editReply').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var reply = button.data('reply');
            var status = button.data('status');
            var url = button.data('url');

            // Update the modal's form action and fields
            var modal = $(this);
            modal.find('#editReplyForm').attr('action', url);
            modal.find('#editId').val(id);
            modal.find('#editResponse').val(reply);
            modal.find('#editStatus').val(status);
        });
    });
</script>
<script>
    // Activate the search button
    $('#search-btn').on('click', function() {
        let searchValue = $('#datatable-customer-search-input').val();

        console.log(searchValue)
        // You can implement logic to filter data based on date and price too
        let filterString = searchValue;


        $('#customer-issues').DataTable().search(filterString).draw();

    });
</script>

@endsection