@extends('admin.layout.index')
@section('title', 'Feedback And Ratings')
@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">Feedback & Ratings</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Feedback and Ratings</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Reviews & Issue Resolution</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card p-3">
                    <form>
                        <div class="row g-3">
                            <div class="col-xxl-4 col-sm-6">
                                <div class="header-element header-search position-relative w-100">
                                    <!-- Start::header-link -->
                                    <!-- <input type="text" class="header-search-bar form-control w-100 m-0"
                                        placeholder="Search for Results..." id="search-user-feedback">
                                    <a href="javascript:void(0);" class="header-search-icon-2 border-0">
                                        <i class="bi bi-search"></i>
                                    </a> -->
                                    <!-- End::header-link -->

                                    <input type="text" class="header-search-bar form-control w-100 m-0 pr-5"
                                        placeholder="Search for Results..." id="search-user-feedback">

                                    <!-- Cross Icon -->
                                    <a href="javascript:void(0);" id="clear-search-input" class="position-absolute top-50 end-0 translate-middle-y me-3 text-muted" style="display: none;">
                                        <i class="bi bi-x-circle-fill"></i>
                                    </a>

                                    <!-- Search Icon -->
                                    <a href="javascript:void(0);" class="header-search-icon-2 border-0 position-absolute top-50 end-0 translate-middle-y me-5">
                                        <i class="bi bi-search"></i>
                                    </a>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-xxl-3 col-sm-6">
                                <div>
                                    <input type="date" class="form-control" placeholder="Created date"
                                        id="search-user-feedback-date">
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-xxl-3 col-sm-4">
                                <div>
                                    <select class="form-select form-select-lg" aria-label=".form-select-lg example"
                                        id="user-feedback-status">
                                        <option value="" selected="">Status</option>
                                        <option value="1">Pending</option>
                                        <option value="2">Resolved</option>
                                    </select>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-xxl-2 col-sm-4">
                                <div>
                                    <button type="button" class="btn btn-primary w-100" onclick="SearchData();"><i
                                            class="ri-equalizer-fill me-1 align-bottom"></i>
                                        Filters
                                    </button>
                                </div>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                    </form>
                </div>
            </div>
        </div>
        <!-- End::row-1 -->

        <!-- 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-person me-1 align-middle"></i>User Feedbacks
                                </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-car-front me-1 align-middle"></i>Driver Feedbacks
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="cancel-tab" data-bs-toggle="tab"
                                    data-bs-target="#cancel-tab-pane" type="button" role="tab"
                                    aria-controls="cancel-tab-pane" aria-selected="false"><i
                                        class="bi bi-info-square me-1 align-middle"></i>Issue Resolution
                                </button>
                            </li>
                        </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="table-responsive">
                                    <table class="table text-nowrap table-hover" id="user-feedback-table">
                                        <thead>
                                            <tr>
                                                <th scope="col">User</th>
                                                <th scope="col">Driver</th>
                                                <th scope="col">Feedback</th>
                                                <th scope="col">Ratings</th>
                                                <th scope="col">Created Date</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade  text-muted" id="confirm-tab-pane" role="tabpanel"
                                aria-labelledby="profile-tab" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table text-nowrap table-hover w-100" id="driver-feedback-table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Driver</th>
                                                <th scope="col">User</th>
                                                <th scope="col">Feedback</th>
                                                <th scope="col">Ratings</th>
                                                {{-- <th scope="col">Status</th> --}}
                                                <th scope="col">Created Date</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- <tr>
                                                    <td>
                                                        Toni Stark
                                                    </td>
                                                    <td>John Doe</td>
                                                    <td>Rider was late to the pickup location.</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>
                                                        <span class="badge bg-success-transparent">Resolved</span>
                                                    </td>
                                                    <td>13-12-2023</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> --}}
                                            {{-- <span class="badge bg-warning-transparent">Panding</span> --}}
                                            {{-- <span class="badge bg-success-transparent">Resolved</span> --}}

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade  text-muted" id="cancel-tab-pane" role="tabpanel"
                                aria-labelledby="cancel-tab" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table text-nowrap table-hover w-100" id="customer-issues">
                                        <thead>
                                            <tr>

                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col">User Type</th>
                                                <th scope="col">Issue</th>
                                                <th scope="col">Status</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>

                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->


    </div>
</div>
<!-- End::app-content -->

<!-- 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-primary"
                    data-bs-dismiss="modal">Close
                </button>
            </div>
        </div>
    </div>
</div>
<!-- End::add task modal -->
<!-- Start::add task modal -->
<div class="modal fade" id="replyModal" 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>
            <div class="modal-body px-4">
                <div class="row gy-2">
                    <div class="col-xl-12">
                        <label for="task-id" class="form-label">Reply</label>
                        <textarea class="form-control" id="task-id" name="" rows="4" cols="50"></textarea>
                    </div>
                    <div class="col-xl-12">
                        <select class="form-select form-select-lg" aria-label=".form-select-lg example">
                            <option selected="">Status</option>
                            <option value="1">Pending</option>
                            <option value="2">Resolved</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel
                </button>
                <button type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- End::add task modal -->
<!-- Start::Delete 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>

<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="deleteCampFormIssue" 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>
<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>

@endsection
@section('custom-script')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></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>
    flatpickr("#search-user-feedback-date", {
        dateFormat: "Y-m-d" // e.g., 2025-05-28
    });
</script> -->



{{-- Datatable User Feedback --}}
<script>
    $(function() {
        let URL = "{{ route('get-users-feedback') }}";
        let sortOption = 'recent'; // Default sort option
        var t = $('#user-feedback-table').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 = $('#search-user-feedback').val();
                    d.status = $('#user-feedback-status').val();
                    d.date = $('#search-user-feedback-date').val();
                }
            },
            columns: [{
                    data: 'rider',
                    orderable: false
                },
                {
                    data: 'driver',
                    orderable: false
                },
                {
                    data: 'description',
                    orderable: false
                },
                {
                    data: null
                },
                {
                    data: 'created_at',
                    orderable: true
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [{
                    render: function(data, type, row, meta) {
                        let rating = parseFloat(data) || 0; // Ensure it's a valid number
                        let fullStars = Math.floor(data.rating); // Get the number of full stars
                        let halfStar = rating % 1 >= 0.5; // Check if a half-star is needed
                        let starsHtml = '<span class="text-warning d-block ms-1">';

                        // Add full stars
                        for (let i = 0; i < fullStars; i++) {
                            starsHtml += '<i class="ri-star-fill"></i>';
                        }

                        // Add half star if applicable
                        if (halfStar) {
                            starsHtml += '<i class="ri-star-half-fill"></i>';
                        }

                        // Ensure a total of 5 stars by adding empty stars
                        let totalStars = fullStars + (halfStar ? 1 : 0);
                        for (let i = totalStars; i < 5; i++) {
                            starsHtml += '<i class="ri-star-line"></i>'; // Empty star
                        }

                        starsHtml += '</span>';
                        return starsHtml;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 3
                },
                // {
                //     render: function(data, type, row, meta) {
                //         var url = '{{ route('feedback.delete', ':id') }}';
                //         url = url.replace(':id', data.id);


                //         return '<div class="d-flex">' +
                //             '<a  data-bs-toggle="modal" data-description = "' + row
                //             .description +
                //             '" data-bs-target="#create-task" 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="Cancel Order">' +
                //             '<span type="button" >' +
                //             '<i class="ri-eye-fill"></i>' +
                //             '</span>' +
                //             // '<a href="'+track+'" class="btn btn-success-light btn-icon ms-1 btn-sm invoice-btn" data-bs-toggle="tooltip" id="alert-confirm" data-bs-custom-class="tooltip-primary" title="Order Tracking">' +
                //             // '<span type="button" >' +
                //             // '<i class="ri-file-2-fill"></i>' +
                //             // '</span>' +
                //             '<a data-url="' + url +
                //             '" data-bs-toggle="modal" data-bs-target="#deleteCamp" 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-primary" title="Order Delete">' +
                //             '<span type="button" >' +
                //             '<i class="ri-delete-bin-5-line"></i>' +
                //             '</span>' +


                //             '</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();
        });
    });
    window.SearchData = function() {
        $('#user-feedback-table').DataTable().ajax.reload();
    }
    $('.header-search-bar, .form-select').on('change keyup', function() {
        $('#user-feedback-table').DataTable().ajax.reload();
    });

    function selectRange() {
        $('#user-feedback-table').DataTable().ajax.reload();
    }
</script>

<script>
    $(function() {
        let URL = "{{ route('getDriverFeedback') }}";
        let sortOption = 'recent'; // Default sort option
        var t = $('#driver-feedback-table').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 = $('#search-user-feedback').val();
                    d.status = $('#user-feedback-status').val();
                    d.date = $('#search-user-feedback-date').val();
                }
            },
            columns: [{
                    data: 'driver',
                    orderable: false
                },
                {
                    data: 'rider',
                    orderable: false
                },
                {
                    data: 'description',
                    orderable: false
                },
                {
                    data: null
                },
                {
                    data: 'created_at',
                    orderable: true
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [{
                    render: function(data, type, row, meta) {
                        let rating = parseFloat(data) || 0; // Ensure it's a valid number
                        let fullStars = Math.floor(data.rating); // Get the number of full stars
                        let halfStar = rating % 1 >= 0.5; // Check if a half-star is needed
                        let starsHtml = '<span class="text-warning d-block ms-1">';

                        // Add full stars
                        for (let i = 0; i < fullStars; i++) {
                            starsHtml += '<i class="ri-star-fill"></i>';
                        }

                        // Add half star if applicable
                        if (halfStar) {
                            starsHtml += '<i class="ri-star-half-fill"></i>';
                        }

                        // Ensure a total of 5 stars by adding empty stars
                        let totalStars = fullStars + (halfStar ? 1 : 0);
                        for (let i = totalStars; i < 5; i++) {
                            starsHtml += '<i class="ri-star-line"></i>'; // Empty star
                        }

                        starsHtml += '</span>';
                        return starsHtml;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 3
                },
                // {
                //     render: function(data, type, row, meta) {
                //         var url = '{{ route('feedback.delete', ':id') }}';
                //         url = url.replace(':id', data.id);


                //         return '<div class="d-flex">' +
                //             '<a  data-bs-toggle="modal" data-description = "' + row
                //             .description +
                //             '" data-bs-target="#create-task" 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="Cancel Order">' +
                //             '<span type="button" >' +
                //             '<i class="ri-eye-fill"></i>' +
                //             '</span>' +
                //             // '<a href="'+track+'" class="btn btn-success-light btn-icon ms-1 btn-sm invoice-btn" data-bs-toggle="tooltip" id="alert-confirm" data-bs-custom-class="tooltip-primary" title="Order Tracking">' +
                //             // '<span type="button" >' +
                //             // '<i class="ri-file-2-fill"></i>' +
                //             // '</span>' +
                //             '<a data-url="' + url +
                //             '" data-bs-toggle="modal" data-bs-target="#deleteCamp" 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-primary" title="Order Delete">' +
                //             '<span type="button" >' +
                //             '<i class="ri-delete-bin-5-line"></i>' +
                //             '</span>' +


                //             '</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();
        });
    });
    window.SearchData = function() {
        $('#driver-feedback-table').DataTable().ajax.reload();
    }
    $('.header-search-bar, .form-select').on('change keyup', function() {
        $('#driver-feedback-table').DataTable().ajax.reload();
    });

    function selectRange() {
        $('#driver-feedback-table').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('#viewDescription').val(description);
        });
    });
</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');

                        $('#user-feedback-table').DataTable().ajax.reload();
                        $('#driver-feedback-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-issue-resolution') }}";
        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 = $('#search-user-feedback').val();
                    d.status = $('#user-feedback-status').val();
                    d.date = $('#search-user-feedback-date').val();
                }
            },
            columns: [{
                    data: 'issue_id'
                },
                {
                    data: 'name'
                },
                {
                    data: null
                },
                {
                    data: 'description',
                    orderable: false
                },
                {
                    data: null
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [

                {
                    render: function(data, type, row, meta) {
                        return `
            <td>
                <span class="badge bg-info-transparent">${row.user_type}</span>
            </td>
        `;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 2
                },
                {
                    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 {
                            badgeClass = 'bg-secondary-transparent'; // Default status
                        }

                        // Return the dynamically constructed HTML
                        return `
            <td>
                <span class="badge ${badgeClass}">${status}</span>
            </td>
        `;
                    },
                    searchable: false,
                    orderable: true,
                    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();
    }
    window.SearchData = function() {
        $('#customer-issues').DataTable().ajax.reload();
        $('#driver-feedback-table').DataTable().ajax.reload();
        $('#user-feedback-table').DataTable().ajax.reload();
    }
    $('.header-search-bar, .form-select').on('change keyup', function() {
        $('#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') || "No description is available.";
            // 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");
            console.log(url)
            $("#deleteCampFormIssue").attr('action', url);

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



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

            var actionUrl = $(this).attr('action');
            var submitButton = $("#deleteCampFormIssue 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();

        // You can implement logic to filter data based on date and price too
        let filterString = searchValue;

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

    });
</script>

<script>
    $(document).ready(function() {
        const $input = $('#search-user-feedback');
        const $clear = $('#clear-search-input');

        // Show/hide clear icon
        $input.on('input', function() {
            $clear.toggle($(this).val().length > 0);
        });

        // Clear input and reload DataTable
        $clear.on('click', function() {
            $input.val('');
            $(this).hide();
            $('#driver-feedback-table').DataTable().ajax.reload();
            $('#user-feedback-table').DataTable().ajax.reload();
            $('#customer-issues').DataTable().ajax.reload();
        });

        // Trigger reload on input
        $('.header-search-bar, .form-select').on('change keyup', function() {
            $('#driver-feedback-table').DataTable().ajax.reload();
            $('#customer-issues').DataTable().ajax.reload();
        });
    });
</script>
@endsection