~NAXC~

File Content: `testimonials.php`

<?php
include 'session.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <title>Admin - Sanket Study Centre</title>
    <!-- General CSS Files -->
    <link rel="stylesheet" href="assets/css/app.min.css">
    <link rel="stylesheet" href="assets/bundles/jqvmap/dist/jqvmap.min.css">
    <link rel="stylesheet" href="assets/bundles/weather-icon/css/weather-icons.min.css">
    <link rel="stylesheet" href="assets/bundles/weather-icon/css/weather-icons-wind.min.css">
    <link rel="stylesheet" href="assets/bundles/summernote/summernote-bs4.css">
    <link rel="stylesheet" href="assets/bundles/prism/prism.css">

    <!-- Template CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/components.css">

    <!-- Table  CSS -->
    <link rel="stylesheet" href="assets/bundles/footable-bootstrap/css/footable.bootstrap.min.css">
    <link rel="stylesheet" href="assets/bundles/footable-bootstrap/css/footable.standalone.min.css">
    <link rel="stylesheet" href="../../../../../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Sweet Alert  -->
    <link href="plugins/sweet-alert2/sweetalert2.min.css" rel="stylesheet" type="text/css">
    <script src="plugins/sweet-alert2/sweetalert2.all.min.js"></script>
    <script src="plugins/sweet-alert2/sweet-alert.init.js"></script>

    <!-- Custom style CSS -->
    <link rel="stylesheet" href="assets/css/custom.css">
    <link rel='shortcut icon' type='image/x-icon' href='assets/img/logo.webp' />

    <link rel="stylesheet" type="text/css" href="https://jeremyfagis.github.io/dropify/dist/css/dropify.min.css">
    <script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>

    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <style>
        .dataTables_paginate,
        .dataTables_info,
        .dataTables_filter input {
            display: none !important;
        }

        th,
        td {
            border: 1px solid #ddd !important;
            border-collapse: collapse !important;
        }

        table.dataTable thead th {
            border-bottom: 1px solid #ddd !important;
        }

        .link {
            color: #000 !important;
        }

        .link:hover {
            color: #6777ef !important;
        }
    </style>
</head>

<body>
    <div class="loader"></div>
    <div id="app">
        <div class="main-wrapper main-wrapper-1">
            <div class="navbar-bg"></div>
            <!-- Sidebar Content -->
            <?php
            include 'header.php';
            include 'sidebar.php';
            ?>
            <!-- End Sidebar Content -->
            <!-- Main Content -->
            <div class="main-content">
                <section class="section">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-header" style="padding:10px 0px;">
                                        <h4>All Testimonials</h4>
                                        <div class="card-header-action">
                                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ModelData"><i data-feather="plus" style="height:15px; width:15px;"></i>&nbsp;<span><b>Add Testimonial</b></span></button>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table id="example" class="table dataTable table-bordered table-striped" data-filtering="true" data-sorting="true" data-paging="true" data-paging-size="15">
                                            <thead>
                                                <tr>
                                                    <th>No&nbsp;</th>
                                                    <th>Name</th>
                                                    <th>Designation&nbsp;</th>
                                                    <th>Action&nbsp;</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- add testimonial model -->
            <div class="modal fade" id="ModelData" tabindex="-1" role="dialog" aria-labelledby="ModelDataTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-title" id="ModelDataTitle">Add New Testimonial</h6>
                            <div>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        </div>
                        <hr style="margin: 0.25rem !important;">
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group">
                                    <h6>Name<span class="text-danger">*</span></h6>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                    <p class="error-message text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <h6>Designation<span class="text-danger">*</span></h6>
                                    <input type="text" class="form-control" id="designation" name="designation" required>
                                    <p class="error-message text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <h6>Description <span class="text-danger">*</span></h6>
                                    <textarea name="description" class="form-control" id="editor1" required></textarea>
                                    <p class="error-message text-danger"></p>
                                </div>
                                <br>
                                <div class="col-md-12">
                                    <button type="button" name="testimonial_submit" id="testimonial_submit" class="btn btn-primary mt-4">SUBMIT</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- update testimonial modal-->
            <div class="modal fade" id="ModelData2" tabindex="-1" role="dialog" aria-labelledby="formModal" aria-hidden="true">
                <div class="modal-dialog  modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="formModal">Update Testimonial</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <hr class="text-muted">
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group">
                                    <h6>Name <span class="text-danger">*</span></h6>
                                    <input type="text" class="form-control" id="name_update" name="name_update">
                                </div>
                                <div class="form-group">
                                    <h6>Designation <span class="text-danger">*</span></h6>
                                    <input type="text" class="form-control" id="designation_update" name="designation_update">
                                </div>
                                <div class="form-group">
                                    <h6>Description <span class="text-danger">*</span></h6>
                                    <textarea name="description_update" class="form-control" id="editor2" required></textarea>
                                    <p class="error-message text-danger"></p>
                                </div>
                                <br>
                                <div class="col-md-12">
                                    <button type="button" name="testimonial_submit_update" id="testimonial_submit_update" class="btn btn-primary mt-4">SUBMIT</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <?php
            require_once 'footer.php';
            ?>
            <!-- End Footer -->
        </div>
    </div>
    <!-- General JS Scripts -->
    <script src="assets/js/app.min.js"></script>
    <!-- JS Libraies -->
    <script src="assets/bundles/echart/echarts.js"></script>
    <script src="assets/bundles/chartjs/chart.min.js"></script>
    <script src="assets/bundles/prism/prism.js"></script>
    <!-- Page Specific JS File -->
    <script src="assets/js/page/index.js"></script>
    <!-- Template JS File -->
    <script src="assets/js/scripts.js"></script>
    <!-- Custom JS File -->
    <script src="assets/js/custom.js"></script>

    <script src="assets/bundles/jquery-validation/dist/jquery.validate.min.js"></script>
    <!-- JS Libraies -->
    <script src="assets/bundles/jquery-steps/jquery.steps.min.js"></script>
    <!-- Page Specific JS File -->
    <script src="assets/js/page/form-wizard.js"></script>

    <!-- JS Libraies -->
    <script src="assets/bundles/footable-bootstrap/js/footable.js"></script>
    <script src="assets/bundles/jqvmap/dist/jquery.vmap.min.js"></script>
    <script src="assets/bundles/jqvmap/dist/maps/jquery.vmap.world.js"></script>

    <!-- Page Specific JS File -->
    <script src="assets/js/page/footable-data.js"></script>
    <script src="assets/js/page/index2.js"></script>

    <script type="text/javascript" src="https://jeremyfagis.github.io/dropify/dist/js/dropify.min.js"></script>

    <script>
        CKEDITOR.replace('editor1');
        CKEDITOR.replace('editor2');
        CKEDITOR.replace('editor3');
        CKEDITOR.replace('editor4');

        $('.dropify').dropify();
    </script>

    <!-- datatable js -->
    <script>
        $(document).ready(function() {

            $('#example6').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 15, 25, 50, 100, -1],
                    [10, 15, 25, 50, 100, "All"]
                ],
                "iDisplayLength": 500000000000000000000000000000000000,
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel'
                ]

            });
            $('#example5').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 15, 25, 50, 100, -1],
                    [10, 15, 25, 50, 100, "All"]
                ],
                "iDisplayLength": 500000000000000000000000000000000000,
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel'
                ]

            });
            $('#example4').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 15, 25, 50, 100, -1],
                    [10, 15, 25, 50, 100, "All"]
                ],
                "iDisplayLength": 500000000000000000000000000000000000,
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel'
                ]

            });

            $('.btn-copy').click(function() {
                $('.buttons-copy').trigger('click');
            });
            $('.btn-csv').click(function() {
                $('.buttons-csv').trigger('click');
            });
            $('.btn-excel').click(function() {
                $('.buttons-excel').trigger('click');
            });
            $('.btn-pdf').click(function() {
                $('.buttons-pdf').trigger('click');
            });
            $('.btn-print').click(function() {
                $('.buttons-print').trigger('click');
            });
        });
    </script>

    <!-- fetch testimonials data in table -->
    <script>
        $(document).ready(function() {
            // Make an AJAX request to fetch data
            $.ajax({
                url: 'apis/fetch_testimonials_data_in_table.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // Check if data is available
                    if (data.length > 0) {
                        // Iterate through the data and append rows to the table
                        $.each(data, function(index, item) {

                            var row = '<tr id="row-' + item.testimonial_id + '">' +
                                '<td>' + (index + 1) + '</td>' +
                                '<td>' + item.name + '</td>' +
                                '<td>' + item.designation + '</td>' +
                                '<td>' +
                                '<a class="btn btn-info btn-action" title="edit" data-bs-original-title="Edit" aria-label="Edit" onclick="javascript:myFunction2(' + item.testimonial_id + ')" data-bs-toggle="modal" data-bs-target="#ModelData2"><i class="fas fa-pencil-alt"></i></a>' +
                                '&nbsp;<a class="btn btn-danger btn-action" data-bs-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="" href="javascript:myFunction(' + item.testimonial_id + ')">' +
                                '<i class="fas fa-trash"></i>' +
                                '</a>' +
                                '</td>' +
                                '</tr>';
                            $('tbody').append(row);
                        });
                    } else {
                        // Display a message if no data is available
                        var noDataMessage = '<tr><td colspan="4">Not Found</td></tr>';
                        $('tbody').append(noDataMessage);
                    }
                },
                error: function() {
                    console.log('Error fetching data');
                }
            });
        });
    </script>

    <!-- add new testimonial -->
    <script>
        $(document).ready(function() {
            $("button#testimonial_submit").on("click", function(e) {
                console.log('button is clicked');
                e.preventDefault();

                if (validateForm()) {
                    var name = $("input[name='name']").val();
                    var designation = $("input[name='designation']").val();
                    var editor = CKEDITOR.instances['editor1'];
                    var description = editor.getData().replace(/'/g, "\\'");

                    // Perform AJAX request
                    $.ajax({
                        type: "POST",
                        url: "apis/add_new_testimonial.php",
                        data: {
                            name: name,
                            designation: designation,
                            description: description,
                        },
                        success: function(data) {
                            console.log(data);
                            var res = JSON.parse(data);
                            if (res['error_flag'] == 0) {
                                var Tid = res['Tid'];
                                // Close the modal
                                $('#ModelData').modal('hide');
                                swal.fire({
                                    title: 'Testimonial Added Successfully!',
                                    text: '',
                                    type: 'success',
                                    showCancelButton: false,
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    confirmButtonText: 'OK',
                                }).then(function(isConfirm) {
                                    if (isConfirm.value) {
                                        // Get the last row index
                                        var lastRowIndex = $('#example tbody tr:last').index();
                                        // Increment the index
                                        var newIndex = lastRowIndex + 2; // Add 2 to skip the header row

                                        // Append the new row to the table
                                        var newRow = '<tr id="row-' + Tid + '">' +
                                            '<td>' + newIndex + '</td>' +
                                            '<td>' + name + '</td>' +
                                            '<td>' + designation + '</td>' +
                                            '<td>' +
                                            '<a class="btn btn-info btn-action" title="edit" data-bs-original-title="Edit" aria-label="Edit" onclick="myFunction2(' + Tid + ')" data-bs-toggle="modal" data-bs-target="#ModelData2"><i class="fas fa-pencil-alt"></i></a>' +

                                            '&nbsp;<a class="btn btn-danger btn-action" data-bs-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="" href="javascript:myFunction(' + Tid + ')">' +
                                            '<i class="fas fa-trash"></i>' +
                                            '</a>' +
                                            '</td>' +
                                            '</tr>';
                                        $('#example tbody').append(newRow);
                                    }
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error("AJAX Request Failed:", status, error);
                            // You can add additional error handling logic here
                            swal.fire({
                                title: 'Error',
                                text: 'Failed to add testimonial details. Please try again.',
                                type: 'error',
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'OK',
                            });
                        }
                    });
                }
            });

            function validateForm() {
                console.log('Validating form...');
                // Validate required fields
                var isValid = true;
                $('input[required], textarea[required]').each(function() {
                    // console.log('Checking input:', this);
                    if ($(this).val().trim() === "") {
                        $(this).addClass("is-invalid");
                        isValid = false;
                        $(this).next('.error-message').text('*This field is required.');
                    } else {
                        $(this).removeClass("is-invalid");
                        $(this).next('.error-message').text('');
                    }
                });

                return isValid;
            }
        });
    </script>

    <!-- update testimonial -->
    <script>
        function myFunction2(Tid) {
            var testimonialID = Tid;

            // Fetch link data
            $.ajax({
                method: 'POST',
                url: "apis/fetch_testimonial_data_by_id.php",
                data: {
                    testimonialID: testimonialID
                },
                cache: false,
                success: function(response) {
                    var data = JSON.parse(response);
                    console.log('data: ', data.data[0].description);

                    // Update modal fields with fetched data
                    $("input[name='name_update']").val(data.data[0].name);
                    $("input[name='designation_update']").val(data.data[0].designation);

                    var description = data.data[0].description;
                    CKEDITOR.instances['editor2'].setData(description);
                },
            });

            // Handle testimonial update
            $("button#testimonial_submit_update").on("click", function(e) {
                e.preventDefault();

                var name = $("input[name='name_update']").val();
                var designation = $("input[name='designation_update']").val();
                var editor = CKEDITOR.instances['editor2'];
                var description = editor.getData().replace(/'/g, "\\'");

                // Perform AJAX request to update testimonial data
                $.ajax({
                    type: "POST",
                    url: "apis/update_testimonial.php",
                    data: {
                        name: name,
                        designation: designation,
                        description: description,
                        testimonial_id: testimonialID
                    },
                    success: function(data) {
                        console.log(data);
                        var res = JSON.parse(data);

                        if (res['error_flag'] == 0) {
                            var testimonial_ID = res['testimonial_ID'];
                            // Close the modal
                            $('#ModelData2').modal('hide');

                            // Show success message using sweetalert
                            swal.fire({
                                title: 'Testimonial Updated Successfully!',
                                text: '',
                                type: 'success',
                                showCancelButton: false,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'OK',
                            }).then(function(isConfirm) {
                                if (isConfirm.value) {

                                    // Clear the table
                                    var testimonials_table = $('.main-content tbody');
                                    testimonials_table.empty();

                                    $.ajax({
                                        url: 'apis/fetch_testimonials_data_in_table.php',
                                        type: 'GET',
                                        dataType: 'json',
                                        success: function(data) {
                                            // Check if data is available
                                            if (data.length > 0) {
                                                // Iterate through the data and append rows to the table
                                                $.each(data, function(index, item) {

                                                    var row = '<tr id="row-' + item.testimonial_id + '">' +
                                                        '<td>' + (index + 1) + '</td>' +
                                                        '<td>' + item.name + '</td>' +
                                                        '<td>' + item.designation + '</td>' +
                                                        '<td>' +
                                                        '<a class="btn btn-info btn-action" title="edit" data-bs-original-title="Edit" aria-label="Edit" onclick="javascript:myFunction2(' + item.testimonial_id + ')" data-bs-toggle="modal" data-bs-target="#ModelData2"><i class="fas fa-pencil-alt"></i></a>' +
                                                        '&nbsp;<a class="btn btn-danger btn-action" data-bs-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="" href="javascript:myFunction(' + item.testimonial_id + ')">' +
                                                        '<i class="fas fa-trash"></i>' +
                                                        '</a>' +
                                                        '</td>' +
                                                        '</tr>';
                                                    $('tbody').append(row);
                                                });
                                            } else {
                                                // Display a message if no data is available
                                                var noDataMessage = '<tr><td colspan="4">Not Found</td></tr>';
                                                $('tbody').append(noDataMessage);
                                            }
                                        },
                                        error: function() {
                                            console.log('Error fetching data');
                                        }
                                    });
                                }
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Request Failed:", status, error);
                        // You can add additional error handling logic here
                        swal.fire({
                            title: 'Error',
                            text: 'Failed to update form details. Please try again.',
                            type: 'error',
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'OK',
                        });
                    }
                });
            });
        }
    </script>

    <!-- delete function -->
    <script>
        function myFunction(testimonial_id, index) {
            // Remove the row from the table immediately
            const confirmationMessage = `You want to delete this Testimonial?`;

            swal.fire({
                title: 'Are you sure?',
                text: confirmationMessage,
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, I am sure!',
                cancelButtonText: "No, cancel it!"
            }).then(function(isConfirm) {
                if (isConfirm.value) {
                    // Make an AJAX call
                    fetch(`apis/delete_testimonial.php`, {
                            method: 'DELETE',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                id: testimonial_id
                            }), // Pass the user ID in the request body
                        })
                        .then(response => response.json())
                        .then(function(data) {
                            if (data.status === 'success') {
                                swal.fire(
                                    'Deleted!',
                                    `This Testimonial has been deleted.`,
                                    'success'
                                );

                                $('#row-' + testimonial_id).remove();
                            } else {
                                swal.fire('Error', data.message, 'error');
                                // Handle error scenarios
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            // Handle errors, show an alert, or redirect to an error page
                        });
                } else {
                    // User canceled the action, you may want to re-add the row to the table here
                }
            });
        }
    </script>

</body>

</html>
File Content: testimonials.php

File Content: `testimonials.php`
