@extends('adminend/layouts.main')

@section('main-section')
@php
$userData = session('user_data');
@endphp
<style>
    .dataTables_filter {
        display: none !important;
    }

    .dataTables_length {
        display: none !important;
    }

    #searchQuery {
        width: 300px;
        /* Adjust the width of the input field */
        height: 40px;
        /* Set the height of the input */
        padding: 5px 10px;
        /* Add padding inside the input */
        font-size: 16px;
        /* Adjust font size */
    }

    #searchBtn {
        height: 40px;
        /* Match the height of the button to the input field */
        padding: 0 20px;
        /* Add horizontal padding to the button */
        font-size: 16px;
        /* Adjust font size */
        background-color: #007bff;
        /* Set the button background color */
        color: white;
        /* Set the text color of the button */
        border: none;
        /* Remove default border */
        cursor: pointer;
        /* Change the cursor to pointer on hover */
    }

    #searchBtn:hover {
        background-color: #0056b3;
        /* Change the button color on hover */
    }

    .loader {
        border: 3px solid #f3f3f3;
        border-top: 3px solid #007bff;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        animation: spin 1s linear infinite;
        display: none;
        margin: 0 auto;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>
<main class="nxl-container">
    <div class="nxl-content">
        <!-- [ page-header ] start -->
        <div class="page-header">
            <div class="page-header-left d-flex align-items-center">
                <div class="page-header-title">
                    <h5 class="m-b-10">User Module</h5>
                </div>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item">List</li>
                </ul>
            </div>
            <div class="page-header-right ms-auto">
                <div class="page-header-right-items">
                    <div class="d-flex d-md-none">
                        <a href="javascript:void(0)" class="page-header-right-close-toggle">
                            <i class="feather-arrow-left me-2"></i>
                            <span>Back</span>
                        </a>
                    </div>
                    <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">

                    </div>
                </div>
                <div class="d-md-none d-flex align-items-center">
                    <a href="javascript:void(0)" class="page-header-right-open-toggle">
                        <i class="feather-align-right fs-20"></i>
                    </a>
                </div>
            </div>
        </div>
        @if(session('message'))
        <div class="alert alert-success">
            {{ session('message') }}
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
        @endif
        <div class="main-content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card stretch stretch-full">
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <div style="margin-top: 10px;">
                                    <input type="text" id="searchQuery" name="searchQuery" placeholder="Enter User Email OR Phone">
                                    <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                                    <button id="searchBtn">Search</button>
                                </div>
                                <table class="table table-hover" id="userList">
                                    <thead>
                                        <tr>
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(6, explode(',', $userData->sub_modules))))
                                            <th>KYC</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(7, explode(',', $userData->sub_modules))))
                                            <th>Link Kyc</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(8, explode(',', $userData->sub_modules))))
                                            <th>Referral Code</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(9, explode(',', $userData->sub_modules))))
                                            <th>Details</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(11, explode(',', $userData->sub_modules))))
                                            <th>Name</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(12, explode(',', $userData->sub_modules))))
                                            <th>Email</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(13, explode(',', $userData->sub_modules))))
                                            <th>Phone</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(14, explode(',', $userData->sub_modules))))
                                            <th>Total Earn</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(15, explode(',', $userData->sub_modules))))
                                            <th>Total Pay</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(16, explode(',', $userData->sub_modules))))
                                            <th>Pending Pay</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(17, explode(',', $userData->sub_modules))))
                                            <th>Email Verify</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(18, explode(',', $userData->sub_modules))))
                                            <th>Account Status</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && in_array(19, explode(',', $userData->sub_modules))))
                                            <th>Affiliate Status</th>
                                            @endif
                                            @if($userData->group_id == 1 || (isset($userData->sub_modules) && count(array_intersect([20, 21, 22, 23], explode(',', $userData->sub_modules))) > 0))
                                            <th class="text-end">Actions</th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody id="proposalBody">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<div class="modal fade" id="vd_popup3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">User Status Change</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form method="POST" id="details-form1" action="#">
                <div class="modal-body">
                    <!-- Hidden input for users_id (already present) -->
                    <input type="hidden" name="users_id" id="id_request"> <!-- This is users_id -->

                    <!-- Hidden input for status -->
                    <input type="hidden" name="status" id="id_request_status"> <!-- This is the status -->

                    <!-- Hidden input for insert_id (newly added) -->
                    <input type="hidden" name="insert_id" id="insert_id1"> <!-- This will store insert_id -->

                    <div class="form-group" style="margin-bottom:8px;">
                        <input type="hidden" placeholder="Enter Email ID" id="getnumber" required class="form-control" name="email">
                    </div>
                    <div class="form-group fSty" style="margin-bottom:8px;">
                        <input type="text" placeholder="OTP" required class="form-control" name="otp" id="otp1">
                        <i class="regenerate_otp btn btn-success">Generate OTP</i>
                    </div>
                    <div class="loader"></div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="submit-btn" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Popup OTP -->
<div class="modal fade" id="vd_popup4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">User Account Change</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form method="POST" id="details-form2" action="#">
                <div class="modal-body">
                    <!-- Hidden input for users_id (already present) -->
                    <input type="hidden" name="users_id" id="id_request11"> <!-- This is users_id -->

                    <!-- Hidden input for status -->
                    <input type="hidden" name="status" id="id_request_status11"> <!-- This is the status -->

                    <!-- Hidden input for insert_id (newly added) -->
                    <input type="hidden" name="insert_id" id="insert_id"> <!-- This will store insert_id -->

                    <div class="form-group" style="margin-bottom:8px;">
                        <input type="hidden" placeholder="Enter Email ID" id="getnumber" required class="form-control" name="email">
                    </div>
                    <div class="form-group fSty" style="margin-bottom:8px;">
                        <input type="text" placeholder="OTP" required class="form-control" name="otp" id="otp">
                        <i class="regenerate_otp1 btn btn-success">Generate OTP</i>
                    </div>
                    <div class="loader"></div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="submit-btn" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="vd_popup" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create User Withdrawal</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" id="details-form" action="{{ route('user.withdrawal.request.create') }}">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="users_id" id="users_id_request">
                    <div class="form-group">
                        <input type="hidden" class="form-control" name="is_cashback" value="0">
                        <!-- <label>Is cashback Amount???</label>
                        <input type="checkbox" style="margin-left: -47%;" class="form-control" name="is_cashback" value="1"> -->
                    </div>
                    <div class="form-group" style="margin-bottom:8px;">
                        <input type="text" placeholder="Amount:" required class="form-control" name="amount">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="vd_popup2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Send direct message to whatsapp</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" id="details-form" action="{{ route('user.message.send.whatsapp') }}">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="mobile" id="users_id_request2">
                    <div class="form-group" style="margin-bottom:8px;">
                        <textarea class="form-control" name="message" cols="30" rows="10" placeholder="Message:" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        let table;

        // Ensure userData.sub_modules is always an array
        const userData = @json($userData);
        userData.sub_modules = Array.isArray(userData.sub_modules) ?
            userData.sub_modules :
            (userData.sub_modules ? String(userData.sub_modules).split(',').map(id => id.trim()) : []);

        $("#searchBtn").click(function() {
            let searchValue = $('#searchQuery').val().trim();
            var baseUrl = "{{ url('/') }}";
            if (searchValue.length >= 10) {
                if (table && $.fn.DataTable.isDataTable("#userList")) {
                    table.clear().destroy();
                }

                let columns = [];
                let thCount = $("#userList th").length;
                let thIndex = 0;

                // Map column headers to data properties
                $("#userList th").each(function() {
                    let headerText = $(this).text().trim().toLowerCase();
                    if (thIndex < thCount) {
                        if (headerText === 'kyc' && (userData.group_id === 1 || userData.sub_modules.includes('6'))) {
                            columns.push({
                                data: 'kyc_status',
                                render: function(data) {
                                    return data === 2 ? '<p class="fa fa-check-circle text-success"></p>' : '<p class="fa fa-times-circle text-danger"></p>';
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'link kyc' && (userData.group_id === 1 || userData.sub_modules.includes('7'))) {
                            columns.push({
                                data: 'is_tax',
                                render: function(data) {
                                    return data === 1 ? '<p class="fa fa-check-circle text-success"></p>' : '<p class="fa fa-times-circle text-danger"></p>';
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'referral code' && (userData.group_id === 1 || userData.sub_modules.includes('8'))) {
                            columns.push({
                                data: 'referral_code',
                                render: function(data) {
                                    return data || 'N/A';
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'details' && (userData.group_id === 1 || userData.sub_modules.includes('9'))) {
                            columns.push({
                                data: 'details',
                                render: function(data, type, row) {
                                    let baseUrl = "{{ route('user.referral.list', ':id') }}"; // placeholder
                                    baseUrl = baseUrl.replace(':id', row.id); // replace with actual id
                                    return `<a href="${baseUrl}" target="_blank"><p class="fa fa-users fa-lg nav_icon"></p></a>`;
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'name' && (userData.group_id === 1 || userData.sub_modules.includes('11'))) {
                            columns.push({
                                data: 'name',
                                render: function(data) {
                                    return `<p>${data || 'N/A'}</p>`;
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'email' && (userData.group_id === 1 || userData.sub_modules.includes('12'))) {
                            columns.push({
                                data: 'email',
                                render: function(data) {
                                    return `<p>${data || 'N/A'}</p>`;
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'phone' && (userData.group_id === 1 || userData.sub_modules.includes('13'))) {
                            columns.push({
                                data: 'phone',
                                render: function(data) {
                                    if (!data) return `<p>N/A</p>`;

                                    const last4 = data.slice(-4);
                                    const masked = '*'.repeat(data.length - 4) + last4;
                                    return `<p>${masked}</p>`;
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'total earn' && (userData.group_id === 1 || userData.sub_modules.includes('14'))) {
                            columns.push({
                                data: 'total_earnings',
                                render: function(data) {
                                    return `<p>${data || 'N/A'}</p>`;
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'total pay' && (userData.group_id === 1 || userData.sub_modules.includes('15'))) {
                            columns.push({
                                data: 'total_paid',
                                render: function(data) {
                                    return `<p>${data || 'N/A'}</p>`;
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'pending pay' && (userData.group_id === 1 || userData.sub_modules.includes('16'))) {
                            columns.push({
                                data: 'pending_pay',
                                render: function(data, type, row) {
                                    return `<p>${(row.total_earnings - row.total_paid || 0).toFixed(2)}</p>`;
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'email verify' && (userData.group_id === 1 || userData.sub_modules.includes('17'))) {
                            columns.push({
                                data: 'email_verified',
                                render: function(data, type, row) {
                                    return data === 1 ?
                                        '<div><button class="btn btn-sm btn-success" data-users-id="' + (row.users_id || '') + '" data-status="1">Verified</button></div>' :
                                        '<div><button class="btn btn-sm btn-danger changeEmailStatus" data-users-id="' + (row.users_id || '') + '" data-status="0">Not Verified</button></div>';
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'account status' && (userData.group_id === 1 || userData.sub_modules.includes('18'))) {
                            columns.push({
                                data: 'account_status',
                                render: function(data, type, row) {
                                    return data === 1 ?
                                        '<div><button class="btn btn-sm btn-success changeStatus" data-users-id="' + (row.users_id || '') + '" data-status="1">Active</button></div>' :
                                        '<div><button class="btn btn-sm btn-danger changeStatus" data-users-id="' + (row.users_id || '') + '" data-status="0">Deactivate</button></div>';
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'affiliate status' && (userData.group_id === 1 || userData.sub_modules.includes('19'))) {
                            columns.push({
                                data: 'affiliate_status',
                                render: function(data, type, row) {
                                    return data === 1 ?
                                        '<div><button class="btn btn-sm btn-success setSuspend" data-users-id="' + (row.users_id || '') + '" data-status="0">Active</button></div>' :
                                        '<div><button class="btn btn-sm btn-danger setSuspend" data-users-id="' + (row.users_id || '') + '" data-status="1">Suspend</button></div>';
                                },
                                defaultContent: 'N/A'
                            });
                        } else if (headerText === 'actions' && (userData.group_id === 1 || userData.sub_modules.some(id => ['20', '21', '22', '23'].includes(id)))) {
                            columns.push({
                                data: 'actions',
                                orderable: false,
                                render: function(data, type, row) {
                                    let actions = '';
                                    if (userData.group_id === 1 || userData.sub_modules.includes('20')) {
                                        actions += `<a href="${baseUrl}/admin/user-details/${row.id || ''}" target="_blank"><p class="fa fa-eye fa-lg nav_icon" title="View Details"></p></a> `;
                                    }
                                    if (userData.group_id === 1 || userData.sub_modules.includes('21')) {
                                        actions += `| <a href="${baseUrl}/admin/user-edit/${row.id || ''}" target="_blank"><p class="fa fa-pencil fa-lg nav_icon" title="Edit User"></p></a> `;
                                    }
                                    if (userData.group_id === 1 || userData.sub_modules.includes('22')) {
                                        actions += `| <p title="Pay Request" class="fa-solid fa-money-bill fa-lg nav_icon" onclick="setUserToRequestForm(${row.id || ''})"></p> `;
                                    }
                                    if (userData.group_id === 1 || userData.sub_modules.includes('23')) {
                                        actions += `| <p title="Message" class="fa fa-envelope fa-lg nav_icon" onclick="setUserToRequestForm2(${row.phone || ''})"></p>`;
                                    }
                                    return actions || 'N/A';
                                },
                                defaultContent: 'N/A'
                            });
                        }
                        thIndex++;
                    }
                });

                table = $("#userList").DataTable({
                    processing: true,
                    serverSide: true,
                    searching: false,
                    lengthChange: false,
                    paging: false,
                    info: true,
                    dom: 'rt',
                    rowId: 'users_id',
                    language: {
                        emptyTable: "No data found for the given search criteria.",
                        zeroRecords: "No matching records found",
                        info: "Showing _START_ to _END_ of _TOTAL_ entries",
                        infoEmpty: "No entries found"
                    },
                    ajax: {
                        url: "{{ route('users.module.search') }}",
                        type: "POST",
                        data: function(d) {
                            d.searchQuery = searchValue;
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('#csrf_token').val()
                        },
                        beforeSend: function() {
                            $("#userList tbody").html('<tr><td colspan="' + thCount + '" class="text-center">Loading...</td></tr>');
                        },
                        error: function(xhr, status, error) {
                            let errorMessage = 'Error loading data. Please try again.';
                            if (xhr.status === 403) {
                                errorMessage = 'You do not have permission to perform this action.';
                            } else if (xhr.status === 419) {
                                errorMessage = 'Session expired. Please refresh the page and try again.';
                            }
                            $("#userList tbody").html('<tr><td colspan="' + thCount + '" class="text-center">' + errorMessage + '</td></tr>');
                        },
                        dataSrc: 'data',
                    },
                    columns: columns,
                    drawCallback: function(settings) {
                        if (!settings.json || !settings.json.data || settings.json.data.length === 0) {
                            console.log("No data returned, ensuring empty table message is displayed");
                            $("#userList tbody").html('<tr><td colspan="' + thCount + '" class="text-center">No data found for the given search criteria.</td></tr>');
                        }
                    },
                    initComplete: function(settings, json) {
                        console.log("DataTable initialized with data:", json ? json.data : 'No data');
                    }
                });
            } else {
                alert("Please enter at least 10 characters for the search.");
            }
        });

        $("#searchQuery").on("keypress", function(e) {
            if (e.which === 13) { // Enter key
                e.preventDefault();
                $("#searchBtn").click(); // just trigger the click event
            }
        });
    });
</script>

<script>
    function setUserToRequestForm(user_id) {
        $('#users_id_request').val(user_id);
        $('#vd_popup').modal('show');
    }

    function setUserToRequestForm2(mobile) {
        $('#users_id_request2').val(mobile);
        $('#vd_popup2').modal('show');
    }
</script>

<script>
    $(document).ready(function() {
        $(document).on('click', '.changeStatus', function() {
            var userId = $(this).data('users-id');
            var status = $(this).data('status');

            $('#id_request').val(userId);
            $('#id_request_status').val(status);

            $('#vd_popup3').modal('show');
        });

        $(document).on('click', '.regenerate_otp', function() {
            var userId = $('#id_request').val();
            var status = $('#id_request_status').val();
            var email = 'management@idigitalpreneur.com';

            var $loader = $('#vd_popup3 .modal-body .loader');
            var $submitBtn = $('#vd_popup3 .modal-footer .btn-primary');
            var $otpBtn = $('#vd_popup3 .regenerate_otp');

            $loader.show();
            $otpBtn.addClass('disabled').css('pointer-events', 'none').css('opacity', '0.5');
            $submitBtn.prop('disabled', true);

            $.ajax({
                url: "{{ route('user.status.change') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    users_id: userId,
                    status: status,
                    email: email
                },
                success: function(response) {
                    response = JSON.parse(response);

                    if (response.status === 'success') {
                        alert('OTP generated successfully!');

                        $('#otp1').val(response.otp);

                        $('#insert_id').val(response.insert_id);
                    } else {
                        alert('Error generating OTP: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error details:', status, error);
                    alert('An error occurred while processing the request. Please try again.');
                },
                complete: function() {
                    // Hide loader and re-enable buttons
                    $loader.hide();
                    $otpBtn.removeClass('disabled').css('pointer-events', '').css('opacity', '');
                    $submitBtn.prop('disabled', false);
                }
            });
        });

        $(document).on('submit', '#details-form1', function(e) {
            e.preventDefault();

            var formData = $(this).serialize();
            var insertId = $('#insert_id').val();
            var userId = $('#id_request').val(); // Get User ID
            var status = $('#id_request_status').val(); // Get Current Status
            var button = $('.changeStatus[data-users-id="' + userId + '"]'); // Find the button

            var $loader = $('#vd_popup3 .modal-body .loader');
            var $submitBtn = $('#vd_popup3 .modal-footer #submit-btn');
            var $otpBtn = $('#vd_popup3 .regenerate_otp');

            // Show loader and disable buttons
            $loader.show();
            $submitBtn.prop('disabled', true);
            $otpBtn.addClass('disabled').css('pointer-events', 'none').css('opacity', '0.5');

            $.ajax({
                url: "{{ route('user.status.change.verifyotp') }}",
                type: 'POST',
                data: formData + '&insert_id=' + insertId + '&_token={{ csrf_token() }}',
                success: function(response) {
                    if (typeof response !== 'object') {
                        response = JSON.parse(response);
                    }

                    if (response.status === 'success') {
                        alert(response.message);
                        var newStatus = status === "1" ? "0" : "1";
                        var newClass = newStatus === "1" ? "btn-success" : "btn-danger";
                        var newText = newStatus === "1" ? "Activate" : "Deactivate";

                        button.attr("data-status", newStatus)
                            .removeClass("btn-success btn-danger")
                            .addClass(newClass)
                            .text(newText);

                        $('#vd_popup3').modal('hide');
                        $('#id_request').val('');
                        $('#id_request_status').val('');
                        $('#otp1').val('');
                        $('#insert_id1').val('');
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error details:', status, error);
                    alert('An error occurred while submitting the form. Please try again.');
                },
                complete: function() {
                    // Hide loader and re-enable buttons
                    $loader.hide();
                    $submitBtn.prop('disabled', false);
                    $otpBtn.removeClass('disabled').css('pointer-events', '').css('opacity', '');
                }
            });
        });

        $(document).on('click', '.changeEmailStatus', function() {
            var userId = $(this).data('users-id');
            var button = $(this);

            button.addClass('disabled').css('pointer-events', 'none').css('opacity', '0.5');

            $.ajax({
                url: "{{ route('user.email.verify.change') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    users_id: userId
                },
                success: function(response) {
                    if (typeof response !== 'object') {
                        response = JSON.parse(response);
                    }
                    if (response.status === 'success') {
                        alert(response.message);
                        button.attr("data-status", "1")
                            .removeClass("btn-danger changeEmailStatus")
                            .addClass("btn-success")
                            .text("Verified")
                            .prop("disabled", true);

                        // Refresh the DataTable
                        $('#userList').DataTable().ajax.reload();
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error details:', status, error);
                    alert('An error occurred while changing the email verification status. Please try again.');
                },
                complete: function() {
                    button.removeClass('disabled').css('pointer-events', '').css('opacity', '');
                }
            });
        });
    });
</script>

<script>
    $(document).ready(function() {
        $(document).on('click', '.setSuspend', function() {
            var userId = $(this).data('users-id');
            var status = $(this).data('status');

            $('#id_request11').val(userId);
            $('#id_request_status11').val(status);

            $('#vd_popup4').modal('show');
        });

        $(document).on('click', '.regenerate_otp1', function() {
            var userId = $('#id_request11').val();
            var status = $('#id_request_status11').val();
            var email = 'management@idigitalpreneur.com';

            var $loader = $('#vd_popup4 .modal-body .loader');
            var $submitBtn = $('#vd_popup4 .modal-footer .btn-primary');
            var $otpBtn = $('#vd_popup4 .regenerate_otp1');

            $loader.show();
            $otpBtn.addClass('disabled').css('pointer-events', 'none').css('opacity', '0.5');
            $submitBtn.prop('disabled', true);

            $.ajax({
                url: "{{ route('user.account.change') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    users_id: userId,
                    status: status,
                    email: email
                },
                success: function(response) {
                    response = JSON.parse(response);

                    if (response.status === 'success') {
                        alert('OTP generated successfully!');
                        $('#otp').val(response.otp);

                        $('#insert_id').val(response.insert_id);
                    } else {
                        alert('Error generating OTP: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error details:', status, error);
                    alert('An error occurred while processing the request. Please try again.');
                },
                complete: function() {
                    // Hide loader and re-enable buttons
                    $loader.hide();
                    $otpBtn.removeClass('disabled').css('pointer-events', '').css('opacity', '');
                    $submitBtn.prop('disabled', false);
                }
            });
        });

        $(document).on('submit', '#details-form2', function(e) {
            e.preventDefault();

            var formData = $(this).serialize();
            var insertId = $('#insert_id').val();
            var userId = $('#id_request11').val(); // Get User ID
            var status = $('#id_request_status11').val(); // Get Current Status
            var button = $('.setSuspend[data-users-id="' + userId + '"]'); // Find the button

            var $loader = $('#vd_popup4 .modal-body .loader');
            var $submitBtn = $('#vd_popup4 .modal-footer #submit-btn');
            var $otpBtn = $('#vd_popup4 .regenerate_otp1');

            // Show loader and disable buttons
            $loader.show();
            $submitBtn.prop('disabled', true);
            $otpBtn.addClass('disabled').css('pointer-events', 'none').css('opacity', '0.5');

            $.ajax({
                url: "{{ route('user.account.change.verifyotp') }}",
                type: 'POST',
                data: formData + '&insert_id=' + insertId + '&_token={{ csrf_token() }}',
                success: function(response) {
                    if (typeof response !== 'object') {
                        response = JSON.parse(response);
                    }

                    if (response.status === 'success') {
                        alert(response.message);
                        var newStatus = status === "1" ? "1" : "0";
                        var newClass = newStatus === "1" ? "btn-success" : "btn-danger";
                        var newText = newStatus === "1" ? "Resume" : "Suspend";

                        button.attr("data-status", newStatus)
                            .removeClass("btn-success btn-danger")
                            .addClass(newClass)
                            .text(newText);

                        $('#vd_popup4').modal('hide');
                        $('#id_request11').val('');
                        $('#id_request_status11').val('');
                        $('#otp').val('');
                        $('#insert_id').val('');
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error details:', status, error);
                    alert('An error occurred while submitting the form. Please try again.');
                },
                complete: function() {
                    // Hide loader and re-enable buttons
                    $loader.hide();
                    $submitBtn.prop('disabled', false);
                    $otpBtn.removeClass('disabled').css('pointer-events', '').css('opacity', '');
                }
            });
        });
    });
</script>
@endsection