@extends('admin.layout.index')
@section('title', 'Admin | Contact Us')

@section('custom-style')
    <style>
        .banner-preview {
            width: 100%;
            height: auto;
            max-height: 100px;
            object-fit: cover;
            border-radius: 1rem;
        }

        .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')

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

            <!-- Start::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">Contact Us</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Contact</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- End::page-header -->

            <!-- Start::row-1 -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card p-3">
                    
                            <div class="row g-2 align-items-center d-lg-flex">
                                <!-- Search Input -->
                                <div class="col-lg-4 col-md-6 col-12">
                                    <input type="text" class="form-control" id="searchUser" placeholder="Search for Results..">
                                </div>

                                <!-- Date Filter -->
                                <div class="col-lg-3 col-md-6 col-12">
                                    <input type="date" class="form-control" id="dateUser" placeholder="Apply date">
                                </div>

                                <!-- Status Filter -->
                                <div class="col-lg-3 col-md-6 col-12">
                                    <select class="form-select" name="status" id="statusUser">
                                        <option value="">Status</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>

                                <!-- Button Group -->
                                <div class="col-lg-2 col-md-6 col-12 d-flex gap-2">
                                    <!-- Filter Button -->
                                    <button type="button" class="btn btn-primary flex-grow-1" id="filters">
                                        <i class="ri-search-line"></i> Filter
                                    </button>

                                    <!-- Reset Button -->
                                    <button type="button" class="btn btn-secondary flex-grow-1" id="resetFilters">
                                        <i class="ri-refresh-line"></i> Reset
                                    </button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
            <!-- End::row-1 -->

            <!-- Banners Section -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card custom-card">
                        <!-- <div class="card-header justify-content-between">
                            <div class="card-title">
                                Banners Overview
                            </div>
                            @can('create-banners')
                                <button class="btn btn-primary btn-sm btn-wave waves-effect waves-light" data-bs-toggle="modal"
                                    data-bs-target="#createBanner">
                                    Add New Banner
                                </button>
                            @endcan
                        </div> -->
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped" style="width: 100%;" id="contact-table">
                                    <thead>
                                        <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Subject</th>
                                        <th>Created At</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                        </tr>
                                    </thead>
                                    {{--                                    <tbody> --}}
                                    {{--                                    <tr> --}}
                                    {{--                                        <td>1</td> --}}
                                    {{--                                        <td>50% Off on All Products</td> --}}
                                    {{--                                        <td>Web</td> --}}
                                    {{--                                        <td><span class="badge bg-success">Active</span></td> --}}
                                    {{--                                        <td> --}}
                                    {{--                                            <img src="{{asset('assets/images/media/media-75.jpg')}}" --}}
                                    {{--                                                 class="banner-preview" alt="Banner Preview"> --}}
                                    {{--                                        </td> --}}
                                    {{--                                        <td> --}}
                                    {{--                                            <a href="javascript:void(0)" data-bs-toggle="tooltip" --}}
                                    {{--                                               data-bs-custom-class="tooltip-primary" aria-label="Edit Banner" --}}
                                    {{--                                               data-modal-target="#editBannerModal" --}}
                                    {{--                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn" --}}
                                    {{--                                               data-bs-original-title="Edit Banner"> --}}
                                    {{--                                                <i class="ri-edit-line"></i> --}}
                                    {{--                                            </a> --}}
                                    {{--                                            <button id="alert-confirm" data-bs-toggle="tooltip" --}}
                                    {{--                                                    data-bs-custom-class="tooltip-danger" aria-label="Cancel Order" --}}
                                    {{--                                                    data-modal-target="#delete-modal" --}}
                                    {{--                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" --}}
                                    {{--                                                    data-bs-original-title="Delete"> --}}
                                    {{--                                                <i class="ri-delete-bin-5-line"></i> --}}
                                    {{--                                            </button> --}}
                                    {{--                                        </td> --}}
                                    {{--                                    </tr> --}}
                                    {{--                                    <tr> --}}
                                    {{--                                        <td>2</td> --}}
                                    {{--                                        <td>Mobile Exclusive Deals</td> --}}
                                    {{--                                        <td>Mobile</td> --}}
                                    {{--                                        <td><span class="badge bg-danger">Inactive</span></td> --}}
                                    {{--                                        <td> --}}
                                    {{--                                            <img src="{{asset('assets/images/media/media-75.jpg')}}" --}}
                                    {{--                                                 class="banner-preview" alt="Banner Preview"> --}}
                                    {{--                                        </td> --}}
                                    {{--                                        <td> --}}
                                    {{--                                            <a href="javascript:void(0)" data-bs-toggle="tooltip" --}}
                                    {{--                                               data-bs-custom-class="tooltip-primary" aria-label="Edit Banner" --}}
                                    {{--                                               data-modal-target="#editBannerModal" --}}
                                    {{--                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn" --}}
                                    {{--                                               data-bs-original-title="Edit Banner"> --}}
                                    {{--                                                <i class="ri-edit-line"></i> --}}
                                    {{--                                            </a> --}}
                                    {{--                                            <button id="alert-confirm" data-bs-toggle="tooltip" --}}
                                    {{--                                                    data-bs-custom-class="tooltip-danger" aria-label="Cancel Order" --}}
                                    {{--                                                    data-modal-target="#delete-modal" --}}
                                    {{--                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" --}}
                                    {{--                                                    data-bs-original-title="Delete"> --}}
                                    {{--                                                <i class="ri-delete-bin-5-line"></i> --}}
                                    {{--                                            </button> --}}
                                    {{--                                        </td> --}}
                                    {{--                                    </tr> --}}
                                    {{--                                    <!-- Additional rows can be added here --> --}}
                                    {{--                                    </tbody> --}}
                                </table>
                            </div>
                        </div>

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

            <!-- Add Banner Modal -->
            <div class="modal fade" id="createBanner" tabindex="-1" aria-labelledby="addBannerModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addBannerModalLabel">Add New Banner</h5>
                            <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="mb-3">
                                    <label for="bannerTitle" class="form-label">Banner Title</label>
                                    <input type="text" class="form-control" id="bannerTitle"
                                        placeholder="Enter Banner Title" name="title">
                                    <span class="text-danger" id="titleError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerType" class="form-label">Banner Type</label>
                                    <select class="form-select" id="bannerType" name="type">
                                        <option value="">Select Type</option>
                                        <option value="web">Web</option>
                                        <option value="mobile">Mobile</option>
                                    </select>
                                    <span class="text-danger" id="typeError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerImage" class="form-label">Upload Banner Image</label>
                                    <input type="file" class="form-control" id="bannerImage" name="image">
                                    <span class="text-danger" id="imageError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerStatus" class="form-label">Status</label>
                                    <select class="form-select" id="bannerStatus" name="status">
                                        <option value="">Select Status</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                    <span class="text-danger" id="statusError"></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>

            <!-- Edit Banner Modal -->
            <div class="modal fade" id="editBanner" tabindex="-1" aria-labelledby="editBannerModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addBannerModalLabel">Edit Banner</h5>
                            <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="mb-3">
                                    <label for="bannerTitle" class="form-label">Banner Title</label>
                                    <input type="text" class="form-control" id="editTitle"
                                        placeholder="Enter Banner Title" name="title">
                                    <span class="text-danger" id="titleEditError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerType" class="form-label">Banner Type</label>
                                    <select class="form-select" id="editType" name="type">
                                        <option value="">Select Type</option>
                                        <option value="web">Web</option>
                                        <option value="mobile">Mobile</option>
                                    </select>
                                    <span class="text-danger" id="typeEditError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerImage" class="form-label">Upload Banner Image</label>
                                    <input type="file" class="form-control" id="bannerImage" name="image">
                                </div>
                                <div class="mb-3">
                                    <label for="bannerStatus" class="form-label">Status</label>
                                    <select class="form-select" id="editStatus" name="status">
                                        <option value="">Select Status</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                    <span class="text-danger" id="statusEditError"></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>
            <!-- Delete 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>

                  <!-- Modal -->
                  <div class="modal fade zoomIn" id="banOrder" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body text-center">
                                            <form method="post" id="banForm" enctype="multipart/form-data">
                                                @csrf
                                                {{ method_field('PUT') }}
                                                <input type="hidden" id="editId" name="id"/>
                                                <div class="mb-3">
                                                    <label for="editMessage" class="form-label">Message</label>
                                                    <textarea id="editMessage" class="form-control" rows="4" readonly></textarea>
                                                </div>
                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end modal -->

        </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')
    <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>

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

            var t = $('#contact-table').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                order: [[1, 'desc']],
                bDestroy: true,
                dom: 'lrtip',
                ajax: {
                    "type": "GET",
                    "url": URL,
                    "data": function (d) {
                        d.searchValue = $('#searchUser').val();
                        d.dateUser = $('#dateUser').val();
                        d.statusUser = $('#statusUser').val();
                    }
                },
                columns: [
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'email' },
                    { data: 'subject' },
                    { data: 'created_at' },
                    { data: null },
                    { data: null }
                ],
                columnDefs: [
                    {
                        render: function (data, type, row, meta) {
                            return meta.row + 1;
                        },
                        searchable: false,
                        orderable: true,
                        targets: 0
                    },
                    {
                        render: function (data, type, row, meta) {

                            if(row.status == 'active'){
                                return `<div class="d-flex align-items-center">
                            <span class="badge bg-success">Active</span>
                        </div>`;
                            }
                            if(row.status == 'inactive'){
                                return `<div class="d-flex align-items-center">
                            <span class="badge bg-danger">Inactive</span>
                        </div>`;
                            }
                            else{
                                return `<div class="d-flex align-items-center">

                        </div>`;
                            }
                        },
                        searchable: false,
                        orderable: false,
                        targets: 5
                    },
                    {
                        render: function (data,type,row,meta) {
                            var url = '{{ route("contact-us.show", ":id") }}';
                            url = url.replace(':id', data.id);
                            var update = '{{ route("contact-us.update", ":id") }}';
                            update = update.replace(':id', data.id);


                                return '<div class="d-flex">' +
                                    '<a class="text-warning d-inline-block remove-item-btn" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Inactive">' +
                                    '<span type="button" data-id="' + row.id + '" data-message="' + row.message + '" data-url="'+update+'" data-bs-toggle="modal" href="#banOrder"' +
                                    '<i class="ri-message-2-line fs-16 me-2"></i>' +
                                    '</span>' +
                                    '</a>' +
                                    '<a class="text-success d-inline-block remove-item-btn" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Inactive">' +
                                    '<span type="button" data-id="' + row.id + '" data-reply="' + row.reply + '" data-url="'+update+'" data-bs-toggle="modal" href="#editReply"' +
                                    '<i class="ri-mail-open-line text-muted fs-16"></i>' +
                                    '</span>' +
                                    '</a>' +
                                
                                    // '<a class="text-danger d-inline-block remove-item-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" href="#deleteOrder">' +
                                    // '<i class="ri-delete-bin-5-fill fs-16  ms-2"></i>' +
                                    // '</span>' +
                                    // '</a>' +
                                    '</div>';


                        },
                        searchable: false,
                        orderable: false,
                        targets: -1
                    }
                ],
            });
            $('#filters').click(function() {
                let btn = $(this); // Store button reference
                btn.html('Filtering...').prop('disabled', true);

                t.ajax.reload(function() {
                    btn.html('<i class="ri-search-line"></i> Filter').prop('disabled', false);
                });
            });

            $('#resetFilters').click(function() {
                let btn = $(this); // Store button reference
                btn.html('Resetting...').prop('disabled', true);

                $('#searchUser').val('');
                $('#dateUser').val('');
                $('#statusUser').val('');

                t.ajax.reload(function() {
                    btn.html('<i class="ri-refresh-line"></i> Reset').prop('disabled', false);
                });
            });

        });

        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('banner.store') }}",
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if (data.success) {
                        // Hide the modal
                        $('#createBanner').modal('hide');

                        // Update the table content with the new HTML
                        $('#banner-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) {
                        $('#createBanner').modal('hide');

                        // Update the table content with the new HTML
                        $('#banner-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) {
                    $('#titleError').addClass('d-none');
                    $('#imageError').addClass('d-none');
                    $('#statusError').addClass('d-none');
                    $('#typeError').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>

    {{-- 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');

                            $('#banner-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>

    {{-- Edit Modal Pass --}}
    <script>
        $(document).ready(function() {
            $('#editBanner').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var id = button.data('id');
                var title = button.data('title');
                var type = button.data('type');
                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('#editTitle').val(title);
                modal.find('#editType').val(type);
                modal.find('#editStatus').val(status);
            });
        });
    </script>



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

            $('#titleEditError').addClass('d-none').text('');
            $('#statusEditError').addClass('d-none').text('');
            $('#typeEditError').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('banner.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
                        $('#editBanner').modal('hide');

                        // Update the table content with the new HTML
                        $('#banner-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) {
                        $('#editBanner').modal('hide');

                        // Update the table content with the new HTML
                        $('#banner-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
                    $('#titleEditError').addClass('d-none').text('');
                    $('#statusEditError').addClass('d-none').text('');
                    $('#typeEditError').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>

{{--Edit Modal Pass--}}
    <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 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);
            });
        });

    </script>

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

                // Update the modal's form action and fields
                var modal = $(this);
                modal.find('#banForm').attr('action', url);
                modal.find('#editId').val(id);
                modal.find('#editStatus').val(status);
                modal.find('#editMessage').val(message);
            });
        });

    </script>

<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('contact-us.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
                        $('#contact-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 = $('#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
                        $('#contact-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 = $('#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>

@endsection