@extends('includes.layout')

@section('title', 'Welcome')

@section('content')

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="../images/favicon.png">
        <title>Smarthub - RN</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">


        
        
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">  -->
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->

        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
       


        <style>
            /* slide nav bar css */
            #menu5 span {
                width: max-content !important;
            }
            .ql-code-block{
            display:none !important;
           }
            .ok_btn {
                background-color: #0069d9;
                color: #fff;
                padding: 5px 20px;
                border: none;
                border-radius: 5px;
            }

            .sou-yt-pupop {
                height: 19rem;
                width: 39rem;
                background-color: white;
                position: absolute;
                top: 58rem;
                right: 5rem;
                box-shadow: 4px 6px 11px -1px #ddd;
                border-radius: 8px;
                padding: 1rem;
                display: none;
            }

            .sou-pay-pupop {
                height: 19rem;
                width: 39rem;
                background-color: white;
                position: absolute;
                top: 22rem;
                right: 2rem;
                box-shadow: 4px 6px 11px -1px #ddd;
                border-radius: 8px;
                padding: 1rem;
                display: none;
            }


            html,
            body,
            .main_container {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
                margin: 0;
                padding: 0;
                height: 100%;
            }

            .main {
                font-size: 18px;
                margin: 2rem 0 0;
            }

            .main_body_container {
                display: flex;
                width: 100%;
                height: 100%;
            }

            .ql-editor ol,
.ql-editor ul,
.ql-editor li {
  background: transparent !important;
  box-shadow: none !important;
  border-left: none !important;
}

            .compose_btn {
                border-radius: 25px !important;
                font-size: 14px !important;
                height: 30px;
                width: 45%;
                background-color: #4573d2;
                color: #fff;
                border: 2px solid #4573d2;
                font-weight: 500;
            }

            .compose_btn:hover {
                background-color: #fff;
                color: #4573d2;
            }

            .dropdown-content a {
                position: relative !important;
                left: -21px !important;
                padding: 8px 0px 13px 0px !important;
            }

            #yourDataTableId_wrapper {
                top: -27px;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button {
                background-color: #fff !important;
                color: #186ed5 !important;
                border: 1px solid #0d71e9 !important;
                font-weight: 500 !important;
                padding: 2px 10px !important;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button.current {
                background-color: #186ed5 !important;
                color: #fff !important;
                border: 1px solid #0d71e9 !important;
                font-weight: bold !important;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
                background: #82afe5 !important;
                color: #fff !important;
                border: 1px solid #0d71e9 !important;
            }

            #yourDataTableId {
                border-collapse: collapse;
                width: 100%;
                border: 0;
                border-radius: 10px;
                overflow: hidden;
            }

            #yourDataTableId th {
                background: #111827;
                padding: 10px 0;
                text-align: center;
            }

            #yourDataTableId td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }

            .dataTables_info,
            .dataTables_paginate,
            .dataTables_length {
                padding-top: 20px !important;
                padding-bottom: 20px !important;
            }

            .dataTables_wrapper .dataTables_filter {
                padding: 20px 0 !important;
                position: relative !important;
            }

            #yourDataTableId_filter label {
                color: #000 !important;
                display: flex !important;
                margin: auto;
                justify-content: center;
                place-items: center;
            }

            #yourDataTableId_filter input {
                height: 30px !important;
                width: 150px !important;
                border: 1px solid #b1b1b1 !important;
                border-radius: 10px !important;
                box-shadow: inset 0px 0px 7px -2px #716d6d !important;
                padding: 10px !important;
            }

            .dataTables_length select {
                border: 1px solid #efefef !important;
            }

            .test[data-title] {
                position: relative;
            }

            /* Tooltip text */
            .test[data-title]::after {
                content: attr(data-title);
                position: absolute;
                transform: translateX(-50%);
                background-color: black;
                color: white;
                padding: 5px;
                border-radius: 3px;
                white-space: nowrap;
                opacity: 0;
                transition: opacity 0.3s;
                z-index: 1;
            }

            /* Tooltip display on hover */
            .test[data-title]:hover::after {
                opacity: 1;
            }

            textarea {
                text-decoration: none;
            }

            .login {
                border-color: #1345ac !important;
                box-shadow: none;
                background-color: #1345AB !important;
                position: relative;
            }

            .modal-header {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: start;
                align-items: flex-start;
                -ms-flex-pack: justify;
                justify-content: space-between;
                padding: 1rem 1rem;
                border-bottom: 1px solid #dee2e6;
                border-top-left-radius: calc(.3rem - 1px);
                border-top-right-radius: calc(.3rem - 1px);
                background-color: #4573d1;
            }

            .modalabel {
                font-size: 14px;
                line-height: 28px;
                font-weight: bold;
                color: #1345ac;
            }


            .green {
                padding: 10px;
                background: green;
                color: #fff;
                border-radius: 7px;
            }

            .red {
                padding: 10px;
                background: red;
                color: #fff;
                border-radius: 7px;

            }

            .full {
                width: auto;
                height: auto;
                border-radius: 6px;
                overflow: auto;
            }

            summary {
                height: 50px;
            }

            .number {
                background-color: #ccc;
                position: relative;
                z-index: 1;
                color: #0069d9;
                border: 2px solid;
                border-radius: 20px;
                padding: 7px 13px;
            }

            .open_div {
                padding: 20px 10px;
                display: none;
                color: #000000;
                font-size: 16px;
                background-color: #f8f8f8;
                margin-top: 20px;
                border-radius: 6px;
                box-shadow: 3px 3px 4px -4px;
            }

            #sentence_1 {
                font-weight: 600;
                cursor: pointer;
            }

            .open_div span {
                font-size: 14px;
                font-weight: 500;
            }

            .mail {
                background: lightgreen;
                padding: 10px 15px;
                border: none;
                border-radius: 6px;
                color: #000;
            }

            .remove {
                background: lightgrey;
                padding: 10px 15px;
                border: none;
                border-radius: 6px;
                color: #000;
            }

            .actiondone11 {
                background: #0069d9;
                padding: 10px 15px;
                border: none;
                border-radius: 6px;
                color: #fff;
            }

            .modal-dialog {
                max-width: 500px;
                position: relative;
                left: 0;
            }

            .modal-dialog1 {
                max-width: 500px;
                position: relative;
                left: 0;
            }

            .modal-body {
                z-index: 11;
            }

            .modal-content {
                box-shadow: 0px 0px 10px -2px #000 !important;
            }

            #payment_div,
            #send_mail,
            #request_div {
                padding: 20px;
                background-color: #ffffff00;
                position: relative;
                height: 100%;
                top: 0;
                width: 0%;
                position: absolute;
                left: 50%;
                display: none;
            }

            .email_send_divv {
                padding: 20px;
                background-color: #ffffff00;
                position: relative;
                height: 100%;
                top: 0;
                width: 0%;
                position: absolute;
                left: 50%;
                display: none;
            }
            u {
                text-decoration: underline !important;
            }
            s {
                text-decoration: line-through !important;
            }
            .ql-size-medium-large {
                font-size: 16px; 
            }
            .ql-size-large{
                font-size: 20px; 
            }
            .ql-size-normal {
                font-size: 14px;
            }
            .ql-size-huge {
                font-size: 32px;
            }
            .ql-font-monospace {
                font-family: "Courier New", Courier, monospace !important;
            }
            .ql-font-serif {
                font-family: Georgia, "Times New Roman", serif !important;
            }
            .ql-tooltip{
                left: 10px !important;
            }
            .btn-outline-secondary.focus, .btn-outline-secondary:focus{
                box-shadow: none !important;
            }
            .btn-outline-secondary:hover{
                background: none !important;
                border-color: none !important;
            }
        </style>



        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> -->
        <!-- <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> -->
        <!-- <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> -->

        <!-- Include Bootstrap CSS and JS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> -->
        <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
        <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->
        <!-- jQuery library -->
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->

        <!-- jQuery UI library -->
        <!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css"> -->
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> -->
        <!-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css"> -->
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js">
        </script>
        <script>
            $.noConflict();
            jQuery(document).ready(function($) {
                // $('#yourDataTableId').DataTable({
                //     "pageLength": 10,
                //     "stripeClasses": []
                // });


            $('#yourDataTableId').DataTable({
                    "columnDefs": [
                        { "orderable": false, "targets": 0 }
                    ],
                    "order": [[3, 'desc']] 
                });
            });
        </script>
        <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
        <!-- <script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script> -->

        <!-- <script src="{{ asset('ckeditor4/ckeditor.js') }}"></script>
        {{-- <script src="{{ asset('ckeditor4/samples/js/sample.js') }}"></script> --}} -->



        <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />

        <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>


        <script>


            function toggleDiv() {
                $('#div1').toggle();
                // $('#div2').hide();
                // $('#div3').hide();
                // $('#div4').hide();
                // $('#div5').hide();
                // $('#div6').hide();
            }

            function toggleDiv2() {
              //  $('#div1').hide();
                $('#div11').toggle();
                // $('#div3').hide();
                // $('#div4').hide();
                // $('#div5').hide();
                // $('#div6').hide();
            }

            function toggleDiv3() {
                // $('#div1').hide();
                // $('#div2').hide();
                $('#div3').toggle();
                // $('#div4').hide();
                // $('#div5').hide();
                // $('#div6').hide();
            }
            function toggleDiv222() {
                // $('#div1').hide();
                // $('#div2').hide();
                $('#div22_div').toggle();
                // $('#div4').hide();
                // $('#div5').hide();
                // $('#div6').hide();
            }
         

            function toggleDiv4() {
                // $('#div1').hide();
                // $('#div2').hide();
                // $('#div3').hide();
                $('#div4').toggle();
                // $('#div5').hide();
                // $('#div6').hide();
            }

            function toggleDiv5() {
                // $('#div1').hide();
                // $('#div2').hide();
                // $('#div3').hide();
                // $('#div4').hide();
                $('#div5').toggle();
                // $('#div6').hide();
            }

            function toggleDiv6() {
                // $('#div1').hide();
                // $('#div2').hide();
                // $('#div3').hide();
                // $('#div4').hide();
                // $('#div5').hide();
                $('#div6').toggle();
            }

            function toggleDiv7() {
                // $('#div1').hide();
                // $('#div2').hide();
                // $('#div3').hide();
                // $('#div4').hide();
                // $('#div5').hide();
                // $('#div6').hide();
                $('#div7').toggle();
            }

            function fsasubtaskcreate() {


            const selectedValue = $('input[name="fsa-status"]:checked').val();
        $.ajax({
            type: 'POST',
            url: 'https://smarthub.rn-test.com/fsasubtaskcreateinrevenue',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                formid: $('#formid').val(),
                name: 'payment',
                radiobutton: selectedValue,
            },
            success: function(result) {

  

                let fsaOption = '';
if (result.fsacheck != 'No') {
  fsaOption = '<option value="FSA">FSA</option>';
}
    $('#div11').html(`

  <div> <b>Flag Type:</b> ${result.data[0].percentage_userid} </div><br>
    <div> <button id="matchcolor3" onclick="request711()" style="  padding: 3px;color: white;width: 63%;border-radius: 7px;background: #0069d9;" >Modify Flag Type</button>
    </div>
  </div>

  <div id="hideflag" style="display:none;"><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect4" class="form-control">
        <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
    ${fsaOption}

    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">
<button id="matchcolor" style="  padding: 3px;color: white;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','no')" style="  padding: 3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>

    `);

    $('.number11').css('color','#fff');
$('#number11').css('background-color','#0069d9');
$('#hover11').text('Completed');
$('#done11').css('display','block');
$('#notdone11').css('display','none');







               if(selectedValue != 2){
                $('.verfiyfsaa').css({
                        'cursor': 'pointer',
                        'pointer-events': 'auto'
                    });

                }
                $('.div22pending').css('display', 'none');
                $('.div22done').css('display', 'block');
                $('#div22text').text('Completed');
                $('#number2div').css('background', '#0069d9');
                $('#div22number').css('color', '#fff');
                $('#alerttext').css('display', 'none');                    
            //    $('#updatedone').css('display', 'none');

                $('#showbuttonnn').css('display', 'block');
                $('#hidebuttonnn').css('display', 'none');
                $('#slackbuttonnn').css('display', 'block');

                // const fsaValue = matchingEntry.fsaverfify.toString();

            
   
                const fsaValue = selectedValue;

$('input[name="fsa-status"]').each(function () {
    const $checkbox = $(this);
    const value = $checkbox.val();
    const $label = $checkbox.closest('label');
    const $textSpan = $label.find('.fsa-label-text');

    if (value === fsaValue) {
        $checkbox.prop('checked', true).prop('disabled', true).hide();

        $label.find('.tick-icon').remove();
        $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
        $('.success-message1').css('display','none');
        $label.find('.fsa-success-br').remove(); // ✅ remove previous <br>

        // ✅ Add tick icon inside label using inline-flex
        const tickIcon = `
            <svg class="tick-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
        `;
        $textSpan.before(tickIcon);

    
  

    } else {
      
       $("input[type='checkbox']").prop('disabled', false);
       

       $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
        $('.success-message1').css('display','none');
       
        $label.find('.tick-icon').remove();
       
        $label.find('.fsa-success-br').remove(); // ✅ clean <br>
    }
    $(`input[name="fsa-status"]`).css('display', 'block');
    $(`input[name="fsa-status"][value="${fsaValue}"]`).css('display', 'none');
})



            // Hide all success messages
            $('.success-message1, .success-message2, .success-message22').hide();
            if(selectedValue !== '3'){
    $('#reject').css('display', 'flex');
                    $('#request').css('display', 'flex');
                    $('#approve').css('display', 'flex');
                    $('#divlasttext').css('display', 'none');
}
            // Show relevant success messages based on selected value
            if (selectedValue === '1') {
                $('.success-message1').css('display', 'inline-flex');
            } else if (selectedValue === '2') {
                $('.success-message2').css('display', 'inline-flex');
                $('.success-message22').css('display', 'block');
                $('#request').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

$('#reject').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

$('#approve').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});



            }
            const updateButton = document.getElementById('updatedone');

updateButton.innerHTML = `
<span style="padding: 8px 1rem; background: #0069d9; color: #fff; border-radius: 5px; font-weight: 600;">
    Update
</span>
`;


                $('.div22done').show();
                $('.div22pending').hide();

                $('#slackLinkk').attr('href', result.asanalink);
                $('#gid4').text(result.gid);





            if (selectedValue == '1') {
                         
                         $("input[type='checkbox'][value='2']").prop('disabled', true);
                         $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);
                        
         
                     }
                  if (selectedValue == '2') {
                  
                     $("input[type='checkbox'][value='1']").prop('disabled', true);
                     $("input[type='checkbox'][value='2']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);
                          
                 }
             
                
                    if(selectedValue == '3'){
                        $("input[type='checkbox'][value='4']").prop('disabled', true);
                        $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='2']").prop('disabled', false);

                    } if(selectedValue == '4'){
                        $("input[type='checkbox'][value='3']").prop('disabled', true);
                        $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='2']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);

                    }
                


            }


        })
}

function capitalize(str) {
            return str
                .toLowerCase()
                .split(' ')
                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                .join(' ');
        }

        function request445() {
           
                    $('#div22').css('grid-template-columns', '1fr auto');
                    $('#div22').css('width', '100%');
                    $('#div22_div').css('width', '100%');
                    $('.modal-dialog').css('max-width', '500px');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('.modal-dialog').css('left', '-13%');
                    $('#firstt').css('display', 'none');
                    $('#div6').css('width', '100%');
                    $('#div5').css('width', '98%');
                    $('#hidebuttonnn').css('display', 'none');
                    $('#showbuttonnn').css('display', 'block');
                    $('#slackbuttonnn').css('display', 'block');
        }




      //  $(document).on('click', '#comment_posttt', function() {
     function comment_postt() {

                var cmts = document.getElementById('texst_value').value;
    
                 var gid = $('#gid4').text();

                $.ajax({
                    type: 'POST',
                    url: 'https://smarthub.rn-test.com/cmtrevenue3',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        cmts: cmts,
                         subtaskid: gid
                        
                    },
                    success: function(result) {

                        $('#texst_value').val('');
                        console.log('testok',result);
        $('#data-containerr').empty();
        let html = '';
        $('#data-containerr').html(html);
        let comments = result.comments.data; // Access the comments array
        $.each(comments, function(index, value) {
            // Get the first two letters of the name
            let firstTwoLetters = value.created_by.name.substring(0, 2);

            // Calculate time difference
            let timestamp = new Date(value.created_at);
            let currentDate = new Date();
            let diff = Math.floor((currentDate - timestamp) /
                1000); // Difference in seconds

            let days = Math.floor(diff / (60 * 60 * 24));
            diff -= days * (60 * 60 * 24);

            let hours = Math.floor(diff / (60 * 60));
            diff -= hours * (60 * 60);

            let minutes = Math.floor(diff / 60);
            let htmlTime = '';

            if (days > 0) {
                htmlTime = `${days} Days`;
            } else if (hours > 0) {
                htmlTime = `${hours} Hours`;
            } else if (minutes > 0) {
                htmlTime = `${minutes} Minutes`;
            } else {
                htmlTime = 'Less than a minute ago';
            }

            let isComment = value.resource_subtype === 'comment_added';

let textClass = isComment ? 'text-slate-500 text-xs' : 'text-slate-500 text-xs';
let label = isComment ? '' : '<span class="text-[10px] font-bold bg-gray-200 px-1 py-0.5 rounded-sm text-gray-600 mr-2">ACTION</span>';

html += `
<div class="grid grid-cols-10 items-center gap-[3.5rem]">
    <div class="h-12 w-12 bg-orange-400 rounded-full grid place-items-center">${firstTwoLetters}</div>
    <div class="col-span-9 text-start">
        <div class="flex items-center gap-1">
            <div class="font-medium">${capitalize(value.created_by.name)}</div>
            <span class="text-sm font-medium text-gray-500">${htmlTime}</span>
        </div>
        <div class="font-medium ${textClass}">
            ${label}${value.text}
        </div>
    </div>
</div>
`;
            // html += `
            // <div class="grid grid-cols-10 items-center gap-[3.5rem]">
            //     <div class="h-12 w-12 bg-orange-400 rounded-full grid place-items-center">${firstTwoLetters}</div>
            //     <div class="col-span-9 text-start">
            //         <div class="flex items-center gap-1"><div class="font-medium ">${capitalize(value.created_by.name)}</div><span class="text-sm font-medium text-gray-500">${htmlTime}</span></div>
            //         <div class="font-medium text-slate-500 text-xs">${value.text}</div>
            //     </div>
            // </div>
            // `;
        });

     
        
        $('#div22').css('grid-template-columns', '1fr 1fr');
        $('#div22').css('width', '100%');
        $('#div22').css('gap', '10px');
        $('#div6').css('width', '50%');
        $('#div5').css('width', '46%');
        // $('#div6_div').css('width', '100%');

        $('#div22_div').css('width', '100%');

        // Insert the HTML into the container
        $('#data-containerr').html(html);
        $('.modal-dialog').css('left', '-13%');
        $('.modal-dialog').css('max-width', '42%');
        // $('.modal-dialog').css('transition', 'max-width 0.4s ease');
        $('#firstt').css('display', 'block');
        $('#hidebuttonnn').css('display', 'block');
        $('#showbuttonnn').css('display', 'none');
        $('#slackbuttonnn').css('display', 'block');
    }
})

                }


function request45() {

$.ajax({
    type: 'POST',
    url: 'https://smarthub.rn-test.com/getcommentsrevenue3',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: {
        gid: $('#gid4').text(),
    },
    success: function(result) {
        console.log('testok',result);
        $('#data-containerr').empty();
        let html = '';
        $('#data-containerr').html(html);
        let comments = result.comments.data; // Access the comments array
        $.each(comments, function(index, value) {
            // Get the first two letters of the name
            let firstTwoLetters = value.created_by.name.substring(0, 2);

            // Calculate time difference
            let timestamp = new Date(value.created_at);
            let currentDate = new Date();
            let diff = Math.floor((currentDate - timestamp) /
                1000); // Difference in seconds

            let days = Math.floor(diff / (60 * 60 * 24));
            diff -= days * (60 * 60 * 24);

            let hours = Math.floor(diff / (60 * 60));
            diff -= hours * (60 * 60);

            let minutes = Math.floor(diff / 60);
            let htmlTime = '';

            if (days > 0) {
                htmlTime = `${days} Days`;
            } else if (hours > 0) {
                htmlTime = `${hours} Hours`;
            } else if (minutes > 0) {
                htmlTime = `${minutes} Minutes`;
            } else {
                htmlTime = 'Less than a minute ago';
            }

            let isComment = value.resource_subtype === 'comment_added';

let textClass = isComment ? 'text-slate-500 text-xs' : 'text-slate-500 text-xs';
let label = isComment ? '' : '<span class="text-[10px] font-bold bg-gray-200 px-1 py-0.5 rounded-sm text-gray-600 mr-2">ACTION</span>';

html += `
<div class="grid grid-cols-10 items-center gap-[3.5rem]">
    <div class="h-12 w-12 bg-orange-400 rounded-full grid place-items-center">${firstTwoLetters}</div>
    <div class="col-span-9 text-start">
        <div class="flex items-center gap-1">
            <div class="font-medium">${capitalize(value.created_by.name)}</div>
            <span class="text-sm font-medium text-gray-500">${htmlTime}</span>
        </div>
        <div class="font-medium ${textClass}">
            ${label}${value.text}
        </div>
    </div>
</div>
`;
            // html += `
            // <div class="grid grid-cols-10 items-center gap-[3.5rem]">
            //     <div class="h-12 w-12 bg-orange-400 rounded-full grid place-items-center">${firstTwoLetters}</div>
            //     <div class="col-span-9 text-start">
            //         <div class="flex items-center gap-1"><div class="font-medium ">${capitalize(value.created_by.name)}</div><span class="text-sm font-medium text-gray-500">${htmlTime}</span></div>
            //         <div class="font-medium text-slate-500 text-xs">${value.text}</div>
            //     </div>
            // </div>
            // `;
        });

     
        
        $('#div22').css('grid-template-columns', '1fr 1fr');
        $('#div22').css('width', '100%');
        $('#div22').css('gap', '10px');
        $('#div6').css('width', '50%');
        $('#div5').css('width', '46%');
        // $('#div6_div').css('width', '100%');

        $('#div22_div').css('width', '100%');

        // Insert the HTML into the container
        $('#data-containerr').html(html);
        $('.modal-dialog').css('left', '-13%');
        $('.modal-dialog').css('max-width', '42%');
        // $('.modal-dialog').css('transition', 'max-width 0.4s ease');
        $('#firstt').css('display', 'block');
        $('#hidebuttonnn').css('display', 'block');
        $('#showbuttonnn').css('display', 'none');
        $('#slackbuttonnn').css('display', 'block');
    }
})

}




function fsaverify2() {

const selectedValue = $('input[name="fsa-status"]:checked').val();
const button = document.getElementById('updatedone');
const buttonText = button.textContent.trim();

if (!selectedValue) {
    // alert('Please select an option.');
    return;
}

$.ajax({
    type: 'post',
    data: {
        formid: $('#formid').val(),
        radiobutton: selectedValue
    },
    url: 'https://smarthub.rn-test.com/fsaverifyinrevenue',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },

    success: function(result) {
        console.log('Response:', result);

       

            
$('#done11').css('display','block');
$('#notdone11').css('display','none');
$('#noteligible').css('display','none');

$('.approve_sale').css('display','none');
$('#email_done_div_text').text('Email Sent Successfully.');

$('#email_done_div').css('display','block');
$('#email_done_div').css('top','34%');


$('.modal-dialog').css('left', '-14%');
                $('.modal-dialog').css('max-width', '40%');
             
                $('.modal-dialog').css('height', '700px');
                // $('.modal-content').css('height', 'inherit');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                setTimeout(function() {
    $('#email_done_div').css('display', 'none');

$('#div22_div').css('width','100%');
    $('.number11').css('color','#fff');
$('#number11').css('background-color','#0069d9');
$('#hover11').text('Completed');
$('#done11').css('display','block');
$('#notdone11').css('display','none');





            $('.verfiyfsaa').css({
                'cursor': 'pointer',
                'pointer-events': 'auto'
            });
        $('.div22pending').css('display', 'none');
        $('.div22done').css('display', 'block');
        $('#div22text').text('Completed');
        $('#number2div').css('background', '#0069d9');
        $('#div22number').css('color', '#fff');
        $('#alerttext').css('display', 'none');                    
       
       // $('#updatedone').css('display', 'none');
        $('#showbuttonnn').css('display', 'none');
        $('#hidebuttonnn').css('display', 'none');
        $('#slackbuttonnn').css('display', 'none');
        $('#fraud_list').text(result.data33);


}, 2000);




        let fsaOption = '';
if (result.fsacheck != 'No') {
  fsaOption = '<option value="FSA">FSA</option>';
}
    $('#div11').html(`

  <div> <b>Flag Type:</b> ${result.data[0].percentage_userid} </div><br>
    <div> <button id="matchcolor3" onclick="request711()" style="  padding: 3px;color: white;width: 63%;border-radius: 7px;background: #0069d9;" >Modify Flag Type</button>
    </div>
  </div>

  <div id="hideflag" style="display:none;"><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect3" class="form-control">
        <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
    ${fsaOption}

    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">
<button id="matchcolor" style="  padding: 3px;color: white;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','no')" style="  padding: 3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>

    `);

    
        
    // const fsaValue = matchingEntry.fsaverfify.toString();
    const selectedValue = $('input[name="fsa-status"]:checked').val();






    const fsaValue = selectedValue;

$('input[name="fsa-status"]').each(function () {
    const $checkbox = $(this);
    const value = $checkbox.val();
    const $label = $checkbox.closest('label');
    const $textSpan = $label.find('.fsa-label-text');

    if (value === fsaValue) {
        $checkbox.prop('checked', true).prop('disabled', true).hide();

        $label.find('.tick-icon').remove();
        $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
        $('.success-message1').css('display','none');
        $label.find('.fsa-success-br').remove(); // ✅ remove previous <br>

        // ✅ Add tick icon inside label using inline-flex
        const tickIcon = `
            <svg class="tick-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
        `;
        $textSpan.before(tickIcon);

    
  

    } else {
      
       $("input[type='checkbox']").prop('disabled', false);
       

       $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
        $('.success-message1').css('display','none');
       
        $label.find('.tick-icon').remove();
       
        $label.find('.fsa-success-br').remove(); // ✅ clean <br>
    }
    $(`input[name="fsa-status"]`).css('display', 'block');
    $(`input[name="fsa-status"][value="${fsaValue}"]`).css('display', 'none');
})













    
$('.success-message1, .success-message2, .success-message22').hide();

if(selectedValue !== '3'){
    $('#reject').css('display', 'flex');
                    $('#request').css('display', 'flex');
                    $('#approve').css('display', 'flex');
                    $('#divlasttext').css('display', 'none');
}
// Show relevant success messages based on selected value
if (selectedValue === '1') {
$('.success-message1').css('display', 'inline-flex');
} else if (selectedValue === '2') {
$('.success-message2').css('display', 'inline-flex');
$('.success-message22').css('display', 'block');
$('#request').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

$('#reject').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

$('#approve').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});



}
if (selectedValue == '3') {

                        $('#divlasttext').css('display', 'flex');
                            $('#textfinal').text('Denied');
                     
                        
                    $('#request').css('display', 'none');
                    $('#approve').css('display', 'none');
                    $('#reject').css('display', 'none');
//                         $('#reject').css({
//                             'pointer-events': '',
//                             'cursor': 'pointer',
//                         });

                    }else{
                        if(selectedValue == '2'){

                            $('#request').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                    $('#reject').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                $('#approve').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                        }else{
                        $('#request').css({
                        'pointer-events': '',
                        'cursor': '',
                    });

                    $('#reject').css({
                        'pointer-events': '',
                        'cursor': '',
                    });

                $('#approve').css({
                        'pointer-events': '',
                        'cursor': '',
                    });
                }
                        $('#reject').css('display', 'flex');
                    $('#request').css('display', 'flex');
                    $('#approve').css('display', 'flex');
                    $('#divlasttext').css('display', 'none');
                   }
                  


    $('.div22done').show();
    $('.div22pending').hide();


    if(!(result.dataaa[0].percentage_userid)) {
                
              
                $('#request').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                    $('#reject').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                $('#approve').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });


           }
           else{
            if(result.dataaa[0].percentage_userid == 'No issue in Flag'){
            $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });

                    }    
           }

           $("input[type='checkbox']").prop('disabled', true);


           if (selectedValue == '1') {
                         
                         $("input[type='checkbox'][value='2']").prop('disabled', true);
                         $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);
                        
         
                     }
                  if (selectedValue == '2') {
                  
                     $("input[type='checkbox'][value='1']").prop('disabled', true);
                     $("input[type='checkbox'][value='2']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);
                          
                 }
             
                
                    if(selectedValue == '3'){
                        $("input[type='checkbox'][value='4']").prop('disabled', true);
                        $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='2']").prop('disabled', false);

                    } if(selectedValue == '4'){
                        $("input[type='checkbox'][value='3']").prop('disabled', true);
                        $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='2']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);
                        
                    }
                

    }
})
}

            function fsaverify() {

const selectedValue = $('input[name="fsa-status"]:checked').val();
const button = document.getElementById('updatedone');
const buttonText = button.textContent.trim();

if (!selectedValue) {
    // alert('Please select an option.');
    return;
}
if (buttonText.includes("Create")) {
    fsasubtaskcreate();
    return;
}
if(selectedValue == '3'){

    

    var getnameemail = $('#orginalname').text();
    var parts = getnameemail.split(',');

var email = parts[0]; 
var name = parts[1]; 

    $('#notiemailto').text(email);
    let content ='';

              content=`
<p><span style="color: rgb(0, 0, 0);">Hey ${name}, 
</span></p><p><br></p>
                                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
                                            We couldn't process your revenue sharing request because your content, or content from the parties you've included, matches artificial streaming patterns.
                                        </p><br>
                                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
                                            For more information, see:
                                        </p><br>
                                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
                                            <a href="https://routenote.com/blog/what-does-an-fsa-fraud-streaming-claim-mean/" target="_blank" style="font-weight: 700; color: #1345ac; display: inline; vertical-align: baseline;">What does a fraud streaming claim mean?</a>
                                            <br>
                                            <a href="https://support.routenote.com/kb-article/how-can-i-avoid-artificial-or-fraudulent-streaming/" target="_blank" style="font-weight: 700; color: #1345ac; display: inline; vertical-align: baseline;">How can I avoid artificial or fraudulent streaming?</a>
                                        </p><br>
                                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 28px;">
                                            Many warm regards,
                                        </p>
                                       `;
                                            
if (notiemailnameEditor) {
  //  notiemailnameEditor.setContents(content);
    notiemailnameEditor.clipboard.dangerouslyPasteHTML(content);
    notiemailnameEditor.enable(false);
  

}

$('#forfsa').css('display','block');
    $('#fornotfsa').css('display','none');

                $('#noteligible').css('display', 'block');
                $('.modal-dialog').css('left', '-20%');
                $('.modal-dialog').css('max-width', '45%');
                $('#div22_div').css('width', '44%');
                $('.modal-dialog').css('height', '700px');
                $('#noteligible').css('right', '2rem');
                $('#noteligible').css('top', '31rem');
               
                // $('.modal-content').css('height', 'inherit');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');


    return;
}


$.ajax({
    type: 'post',
    data: {
        formid: $('#formid').val(),
        radiobutton: selectedValue
    },
    url: 'https://smarthub.rn-test.com/fsaverifyinrevenue',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },

    success: function(result) {
        console.log('Response:', result);

       


        let fsaOption = '';
if (result.fsacheck != 'No') {
  fsaOption = '<option value="FSA">FSA</option>';
}
    $('#div11').html(`

  <div> <b>Flag Type:</b> ${result.data[0].percentage_userid} </div><br>
    <div> <button id="matchcolor3" onclick="request711()" style="  padding: 3px;color: white;width: 63%;border-radius: 7px;background: #0069d9;" >Modify Flag Type</button>
    </div>
  </div>

  <div id="hideflag" style="display:none;"><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect3" class="form-control">
        <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
    ${fsaOption}

    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">
<button id="matchcolor" style="  padding: 3px;color: white;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','no')" style="  padding: 3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>

    `);

    $('.number11').css('color','#fff');
$('#number11').css('background-color','#0069d9');
$('#hover11').text('Completed');
$('#done11').css('display','block');
$('#notdone11').css('display','none');





            $('.verfiyfsaa').css({
                'cursor': 'pointer',
                'pointer-events': 'auto'
            });
        $('.div22pending').css('display', 'none');
        $('.div22done').css('display', 'block');
        $('#div22text').text('Completed');
        $('#number2div').css('background', '#0069d9');
        $('#div22number').css('color', '#fff');
        $('#alerttext').css('display', 'none');                    
       
       // $('#updatedone').css('display', 'none');
        $('#showbuttonnn').css('display', 'none');
        $('#hidebuttonnn').css('display', 'none');
        $('#slackbuttonnn').css('display', 'none');
        $('#fraud_list').text(result.data33);
        
    // const fsaValue = matchingEntry.fsaverfify.toString();
    const selectedValue = $('input[name="fsa-status"]:checked').val();






    const fsaValue = selectedValue;

$('input[name="fsa-status"]').each(function () {
    const $checkbox = $(this);
    const value = $checkbox.val();
    const $label = $checkbox.closest('label');
    const $textSpan = $label.find('.fsa-label-text');

    if (value === fsaValue) {
        $checkbox.prop('checked', true).prop('disabled', true).hide();

        $label.find('.tick-icon').remove();
        $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
        $('.success-message1').css('display','none');
        $label.find('.fsa-success-br').remove(); // ✅ remove previous <br>

        // ✅ Add tick icon inside label using inline-flex
        const tickIcon = `
            <svg class="tick-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
        `;
        $textSpan.before(tickIcon);

    
  

    } else {
      
       $("input[type='checkbox']").prop('disabled', false);
       

       $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
        $('.success-message1').css('display','none');
       
        $label.find('.tick-icon').remove();
       
        $label.find('.fsa-success-br').remove(); // ✅ clean <br>
    }
    $(`input[name="fsa-status"]`).css('display', 'block');
    $(`input[name="fsa-status"][value="${fsaValue}"]`).css('display', 'none');
})













    
$('.success-message1, .success-message2, .success-message22').hide();

if(selectedValue !== '3'){
    $('#reject').css('display', 'flex');
                    $('#request').css('display', 'flex');
                    $('#approve').css('display', 'flex');
                    $('#divlasttext').css('display', 'none');
}
// Show relevant success messages based on selected value
if (selectedValue === '1') {
$('.success-message1').css('display', 'inline-flex');
} else if (selectedValue === '2') {
$('.success-message2').css('display', 'inline-flex');
$('.success-message22').css('display', 'block');
$('#request').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

$('#reject').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

$('#approve').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});



}
if (selectedValue == '3') {

                        $('#divlasttext').css('display', 'flex');
                            $('#textfinal').text('Denied');
                     
                        
                    $('#request').css('display', 'none');
                    $('#approve').css('display', 'none');
                    $('#reject').css('display', 'none');
//                         $('#reject').css({
//                             'pointer-events': '',
//                             'cursor': 'pointer',
//                         });

                    }else{
                        if(selectedValue == '2'){

                            $('#request').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                    $('#reject').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                $('#approve').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                        }else{
                        $('#request').css({
                        'pointer-events': '',
                        'cursor': '',
                    });

                    $('#reject').css({
                        'pointer-events': '',
                        'cursor': '',
                    });

                $('#approve').css({
                        'pointer-events': '',
                        'cursor': '',
                    });
                }
                        $('#reject').css('display', 'flex');
                    $('#request').css('display', 'flex');
                    $('#approve').css('display', 'flex');
                    $('#divlasttext').css('display', 'none');
                   }
                  


    $('.div22done').show();
    $('.div22pending').hide();


    if(!(result.dataaa[0].percentage_userid)) {
                
              
                $('#request').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                    $('#reject').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                $('#approve').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });


           }
           else{
            if(result.dataaa[0].percentage_userid == 'No issue in Flag'){
            $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });

                    }    
           }

           $("input[type='checkbox']").prop('disabled', true);


           if (selectedValue == '1') {
                         
                         $("input[type='checkbox'][value='2']").prop('disabled', true);
                         $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);
                        
         
                     }
                  if (selectedValue == '2') {
                  
                     $("input[type='checkbox'][value='1']").prop('disabled', true);
                     $("input[type='checkbox'][value='2']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);
                          
                 }
             
                
                    if(selectedValue == '3'){
                        $("input[type='checkbox'][value='4']").prop('disabled', true);
                        $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='3']").prop('disabled', false);
                         $("input[type='checkbox'][value='2']").prop('disabled', false);

                    } if(selectedValue == '4'){
                        $("input[type='checkbox'][value='3']").prop('disabled', true);
                        $("input[type='checkbox'][value='1']").prop('disabled', false);
                         $("input[type='checkbox'][value='2']").prop('disabled', false);
                         $("input[type='checkbox'][value='4']").prop('disabled', false);
                        
                    }
                

    }
})
}



            function comment_asana() {

                $.ajax({
                    type: 'POST',
                    url: '{{ route('postcommentsinasana') }}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        gid: $('#gid').text(),
                        comment: $('#texst_value').val()
                    },
                    success: function(result) {
                       
                        console.log('result', result);
                        $('#texst_value').val('');
                        $('.modal-dialog').css('left', '-6%');
                        $('.modal-dialog').css('max-width', '70%');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                        $('#sou-yt-pupop').toggle();


                        $('.sub-tk-msg').css('display', 'none')
                        $('#btnsief').css('display', 'none')

                        $('.sub-tk-msg11').css('display', 'block');
                        $('.div2done').css('display', 'block');
                        $('.div2pending').css('display', 'none');
                        $('#div2text').text('Admin Action Completed');
                        $('#request5_d').css('display', 'block');
                        $('#request5').css('display', 'none');

                        $('#data-container').empty();
                        let html = '';
                        $('#data-container').html(html);
                        let comments = result.comments.data; // Access the comments array

                        $.each(comments, function(index, value) {
                            // Get the first two letters of the name
                            let firstTwoLetters = value.created_by.name.substring(0, 2);

                            // Calculate time difference
                            let timestamp = new Date(value.created_at);
                            let currentDate = new Date();
                            let diff = Math.floor((currentDate - timestamp) /
                                1000); // Difference in seconds

                            let days = Math.floor(diff / (60 * 60 * 24));
                            diff -= days * (60 * 60 * 24);

                            let hours = Math.floor(diff / (60 * 60));
                            diff -= hours * (60 * 60);

                            let minutes = Math.floor(diff / 60);
                            let htmlTime = '';

                            if (days > 0) {
                                htmlTime = `${days} Days`;
                            } else if (hours > 0) {
                                htmlTime = `${hours} Hours`;
                            } else if (minutes > 0) {
                                htmlTime = `${minutes} Minutes`;
                            } else {
                                htmlTime = 'Less than a minute ago';
                            }

                            // Build HTML string
                            html += `
        <div style="width:100%; display: flex; align-items: center; gap: 1rem; margin: 12px 0;">
            <div style="height:3.5rem; width:3.5rem; background-color:#ffab40; border-radius:50%; display: flex; justify-content: center; align-items: center;">
                ${firstTwoLetters}
            </div>
            <div style="width: 86%;">
                <div style="display: flex; gap: 1rem;">
                    <span>${value.created_by.name}</span>
                    <span style="color:#b4b4b4;">${htmlTime}</span>
                </div>
                <div style="margin-top: 5px;">${value.text}</div>
            </div>
        </div>
    `;
                        });

                        // Insert the HTML into the container
                        $('#data-container').html(html);
                        $('#sou-yt-pupop').css('display', 'block')

                    }
                })




            }

            function subtask_create(event, mail) {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('revenuesubtaskcreate') }}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        taskid: event,
                        mail: mail
                    },
                    success: function(result) {

                        console.log('result', result);

                        $('.modal-dialog').css('left', '-6%');
                        $('.modal-dialog').css('max-width', '70%');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                        $('#sou-yt-pupop').toggle();
                        $('#gid').text(result.gid);

                        $('.sub-tk-msg').css('display', 'none')
                        $('#btnsief').css('display', 'none')

                        $('.sub-tk-msg11').css('display', 'block');
                        $('.div2done').css('display', 'block');
                        $('.div2pending').css('display', 'none');
                        $('#div2text').text('Admin Action Completed');
                        $('#request5_d').css('display', 'block');
                        $('#request5').css('display', 'none');

                        $('#data-container').empty();
                        let html = '';
                        $('#data-container').html(html);
                        let comments = result.comments.data; // Access the comments array

                        $.each(comments, function(index, value) {
                            // Get the first two letters of the name
                            let firstTwoLetters = value.created_by.name.substring(0, 2);

                            // Calculate time difference
                            let timestamp = new Date(value.created_at);
                            let currentDate = new Date();
                            let diff = Math.floor((currentDate - timestamp) /
                                1000); // Difference in seconds

                            let days = Math.floor(diff / (60 * 60 * 24));
                            diff -= days * (60 * 60 * 24);

                            let hours = Math.floor(diff / (60 * 60));
                            diff -= hours * (60 * 60);

                            let minutes = Math.floor(diff / 60);
                            let htmlTime = '';

                            if (days > 0) {
                                htmlTime = `${days} Days`;
                            } else if (hours > 0) {
                                htmlTime = `${hours} Hours`;
                            } else if (minutes > 0) {
                                htmlTime = `${minutes} Minutes`;
                            } else {
                                htmlTime = 'Less than a minute ago';
                            }

                            // Build HTML string
                            html += `
        <div style="width:100%; display: flex; align-items: center; gap: 1rem; margin: 12px 0;">
            <div style="height:3.5rem; width:3.5rem; background-color:#ffab40; border-radius:50%; display: flex; justify-content: center; align-items: center;">
                ${firstTwoLetters}
            </div>
            <div style="width: 86%;">
                <div style="display: flex; gap: 1rem;">
                    <span>${value.created_by.name}</span>
                    <span style="color:#b4b4b4;">${htmlTime}</span>
                </div>
                <div style="margin-top: 5px;">${value.text}</div>
            </div>
        </div>
    `;
                        });

                        // Insert the HTML into the container
                        $('#data-container').html(html);
                        $('#sou-yt-pupop').css('display', 'block')

                    }
                })




            }



            function slack_create(userid, name, email, formid) {


                $('.modal-dialog').css('left', '-6%');
                $('.modal-dialog').css('max-width', '70%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                $('#sou-yt-pupop1').toggle();
                $('#sou-yt-pupop1').css('display', 'block');

                $('#commentslack').val('Please can I check if ' + email + ' is recognised email from ' + name + ' ?UID(' +
                    userid + ')');
                $('#formid').val(formid);


            }




            function comment_slack() {

                var cmts = document.getElementById('commentslack').value;
                var formid = document.getElementById('formid').value;


                $.ajax({
                    type: 'POST',
                    url: '{{ route('commentinslack') }}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        comment: cmts,
                        formid: formid
                    },
                    success: function(result) {
                        $('#commentslack').val('');
                        $('#div3text').text('Admin Action Completed');
                        $('.div3pending').css('display', 'none');
                        $('.div3done').css('display', 'block');
                        $('.sub-tk-msg3').css('display', 'none');
                        $('#btnsief1').css('display', 'none');
                        $('#sub-tk-msg13').css('display', 'block');
                        $('#request15').css('display', 'block');
                        $('#request15_d').css('display', 'none');
                        $('#ts').text(result.ts);
                        const getmessages = result.getmessages;
                        const replymessages = result.replymessages;
                        const userData = result.userData;

                        $('#data-container1').empty();
                        if (getmessages.length > 0) {
                            var htmlContent = '';
                            $.each(getmessages, function(index, messages) {
                                var user = 'Smarthub-Support';
                                var firstTwoLetters = user.substring(0, 1);
                                var iconUrl = '';

                                // Logic to check userData and set user and iconUrl
                                if (messages.user) {
                                    if (userData.length > 0) {
                                        $.each(userData, function(i, datas) {
                                            if (messages.user == datas.user.id) {
                                                user = datas.user.real_name || 'Smarthub-Support';
                                                firstTwoLetters = user.substring(0, 1);
                                                iconUrl = datas.image_32 || '';
                                                return false; // Break the loop
                                            }
                                        });
                                    } else {
                                        user = messages.user;
                                        firstTwoLetters = user.substring(0, 2);
                                        iconUrl = messages.bot_profile.icons.image_36 || '';
                                    }
                                }

                                var count = 0;
                                var replyHtml = '';
                                if (replymessages.length > 0) {
                                    $.each(replymessages, function(i, message) {
                                        if (message.messages[0].text == messages.text) {
                                            $.each(message.messages, function(j, m) {
                                                if (m.text != messages.text) {
                                                    count++;
                                                    $.each(userData, function(k, datas) {
                                                        if (m.user == datas.user
                                                            .id) {
                                                            var user1 = datas.user
                                                                .real_name;
                                                            var firstTwoLetters1 =
                                                                user1.substring(0,
                                                                    1);
                                                            var iconUrl1 = datas
                                                                .image_32 || '';

                                                            replyHtml += `
                                                        <div class="reply_cont">
                                                            <div style="margin: auto 0;background: #ffab40;padding: 5px 10px;border-radius: 6px;">
                                                                <span>
                                                                    ${iconUrl1 ? `<img src="${iconUrl1}" alt="User Icon" style="width: 100%; border-radius: 50%;">` : firstTwoLetters1}
                                                                </span>
                                                            </div>
                                                            <div>
                                                                <div>
                                                                    <div style="font-weight: 600;">${user1}</div>
                                                                </div>
                                                                <div class="replay_text">
                                                                    ${m.text}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    `;
                                                            return false; // Break the loop
                                                        }
                                                    });
                                                }
                                            });
                                        }
                                    });
                                }

                                htmlContent += `
                            <div id="data-container2" style="width:100%;display: flex;align-items: start;gap: 1rem;margin: 12px 0;">
                                <div style="height:3.5rem;width:3.5rem;background-color:#ffab40;border-radius:50%;display: flex;justify-content: center;align-items: center;">
                                    ${iconUrl ? `<img src="${iconUrl}" alt="User Icon" style="width: 100%; border-radius: 50%;">` : firstTwoLetters}
                                </div>
                                <div style="width: 86%;">
                                    <div style="display: flex;gap: 1rem;">
                                        <span>${user}</span><span style="color:#b4b4b4;"></span>
                                    </div>
                                    <div style="margin-top: 5px;">${messages.text}</div>
                                    <div class="reply_div">
                                        ${count != 0 ? count + '&nbsp; <strong onclick="toggleReplies(this, event)">reply</strong>' : ''}
                                        <div class="replay_div_slide" style="display: none;">
                                            ${replyHtml}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                            });

                            $('#data-container1').html(htmlContent);



                        }



                    }
                })

            }


            // Toggle replies
            function toggleReplies(element, event) {
                event.preventDefault();
                const slideDiv = $(element).next('.replay_div_slide');
                slideDiv.toggle();
            }


            function request16(id) {
                $('#formid2').val(id);
                $('#confirmSLACK').css('display', 'block');
                $('.modal-dialog').css('left', '-16%');
                $('.modal-dialog').css('max-width', '53%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');

            }

            function request6(id) {
                $('#formid1').val(id);
                $('#approveFSA').css('display', 'block');
                $('.modal-dialog').css('left', '-16%');
                $('.modal-dialog').css('max-width', '53%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');

            }

            function slackok() {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('revenueslackapprove') }}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        formid: $('#formid2').val()
                    },
                    success: function(result) {
                        $('#confirmSLACK').css('display', 'none');
                        $('#div3text').text('Completed');
                        $('#numberdiv3').css('background', '#0069d9');
                        $('#div3number').css('color', '#fff');
                        $('#approveslack').text('Approved');
                        $('#approveslack1').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                        $('#rejectslack').css('display', 'none');
                        $('.modal-dialog').css('left', '0');
                        $('.modal-dialog').css('max-width', '500px');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    }
                })
            }

            function fsaok() {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('revenueasanaapprove') }}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        formid: $('#formid1').val()
                    },
                    success: function(result) {
                        $('#approveFSA').css('display', 'none');
                        $('#div2text').text('Completed');
                        $('#numberdiv2').css('background', '#0069d9');
                        $('#div2number').css('color', '#fff');
                        $('#fsaapprove').text('Approved');
                        $('#fsaapprove1').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                        $('#rejectfsa').css('display', 'none');
                        $('.modal-dialog').css('left', '0');
                        $('.modal-dialog').css('max-width', '500px');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    }
                })
            }

           

            function request7_d() {
                $('.denied').html(`
            <div style="padding: 10px;background: #4573d1;color: #fff">INFO</div>
                                    <div style="padding: 0;background: #fff;">   
                                     <div style="display: none; padding: 20px;" class="ok_dnt"> Denied Successfully.</div> 
                                    </div>
        `);
                $('.ass-crt-suf-popup3').css('top', '13rem');
                $('.modal-dialog').css('max-width', '50%');
                $('.sou-yt-pupop').css('display', 'none');


                $('.dnt_info').css('display', 'none');
                $('.ok_dnt').css('display', 'block');
                $('.ass-crt-suf-popup3').css('display', 'block');

                setTimeout(function() {
                    $('.ass-crt-suf-popup3').css('display', 'none');
                    $('.modal-dialog').css('left', '0');
                    $('.modal-dialog').css('max-width', '500px');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');

                }, 3000);
            }

            function request5() {



                $.ajax({
                    type: 'GET',
                    url: '{{ route('getcomments') }}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        subtaskid: $('#gid').text()
                    },
                    success: function(result) {
                        $('#data-container').empty();
                        $('.modal-dialog').css('left', '-16%');
                        $('.modal-dialog').css('max-width', '43%');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');

                        var html = '';
                        $('#data-container').html(html);

                        let comments = result.comments.data; // Access the comments array

                        $.each(comments, function(index, value) {
                            // Get the first two letters of the name
                            let firstTwoLetters = value.created_by.name.substring(0, 2);

                            // Calculate time difference
                            let timestamp = new Date(value.created_at);
                            let currentDate = new Date();
                            let diff = Math.floor((currentDate - timestamp) /
                                1000); // Difference in seconds

                            let days = Math.floor(diff / (60 * 60 * 24));
                            diff -= days * (60 * 60 * 24);

                            let hours = Math.floor(diff / (60 * 60));
                            diff -= hours * (60 * 60);

                            let minutes = Math.floor(diff / 60);
                            let htmlTime = '';

                            if (days > 0) {
                                htmlTime = `${days} Days`;
                            } else if (hours > 0) {
                                htmlTime = `${hours} Hours`;
                            } else if (minutes > 0) {
                                htmlTime = `${minutes} Minutes`;
                            } else {
                                htmlTime = 'Less than a minute ago';
                            }

                            // Build HTML string
                            html += `
        <div style="width:100%; display: flex; align-items: center; gap: 1rem; margin: 12px 0;">
            <div style="height:3.5rem; width:3.5rem; background-color:#ffab40; border-radius:50%; display: flex; justify-content: center; align-items: center;">
                ${firstTwoLetters}
            </div>
            <div style="width: 86%;">
                <div style="display: flex; gap: 1rem;">
                    <span>${value.created_by.name}</span>
                    <span style="color:#b4b4b4;">${htmlTime}</span>
                </div>
                <div style="margin-top: 5px;">${value.text}</div>
            </div>
        </div>
    `;
                        });

                        // Insert the HTML into the container
                        $('#data-container').html(html);



                        $('#sou-yt-pupop').css('display', 'block');
                        $('#request5').css('display', 'none');
                        $('#request5_d').css('display', 'block');
                        $('.ttop').css({
                            'bottom': '-5px',
                            'position': 'relative'
                        });
                    }
                })
            }

            function fsacancel() {
                $('#approveFSA').css('display', 'none');
                $('.modal-dialog').css('left', '-100px');
                $('.modal-dialog').css('max-width', '500px');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
            }

            function slackcancel() {
                $('#confirmSLACK').css('display', 'none');
                $('.modal-dialog').css('left', '-100px');
                $('.modal-dialog').css('max-width', '500px');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
            }

            function request15() {

                $.ajax({
                    type: 'GET',
                    url: '{{ route('getcommentslack') }}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        formid: $('#formid').val()
                    },
                    success: function(result) {
                        $('#data-container1').empty();
                        $('.modal-dialog').css('left', '-6%');
                        $('.modal-dialog').css('max-width', '70%');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                        const getmessages = result.getmessages;
                        const replymessages = result.replymessages;
                        const userData = result.userData;
                        console.log(replymessages);
                        $('#data-container1').empty();
                        if (getmessages.length > 0) {
                            var htmlContent = '';
                            $.each(getmessages, function(index, messages) {
                                var user = 'Smarthub-Support';
                                var firstTwoLetters = user.substring(0, 1);
                                var iconUrl = '';

                                // Logic to check userData and set user and iconUrl
                                if (messages.user) {
                                    if (userData.length > 0) {
                                        $.each(userData, function(i, datas) {
                                            if (messages.user == datas.user.id) {
                                                user = datas.user.real_name || 'Smarthub-Support';
                                                firstTwoLetters = user.substring(0, 1);
                                                iconUrl = datas.image_32 || '';
                                                return false; // Break the loop
                                            }
                                        });
                                    } else {
                                        user = messages.user;
                                        firstTwoLetters = user.substring(0, 2);
                                        iconUrl = messages.bot_profile.icons.image_36 || '';
                                    }
                                }

                                var count = 0;
                                var replyHtml = '';
                                if (replymessages.length > 0) {
                                    $.each(replymessages, function(i, message) {
                                        if (message.messages[0].text == messages.text) {
                                            $.each(message.messages, function(j, m) {
                                                if (m.text != messages.text) {
                                                    count++;
                                                    $.each(userData, function(k, datas) {
                                                        if (m.user == datas.user
                                                            .id) {
                                                            var user1 = datas.user
                                                                .real_name;
                                                            var firstTwoLetters1 =
                                                                user1.substring(0,
                                                                    1);
                                                            var iconUrl1 = datas
                                                                .image_32 || '';

                                                            replyHtml += `
                                                        <div class="reply_cont">
                                                            <div style="margin: auto 0;background: #ffab40;padding: 5px 10px;border-radius: 6px;">
                                                                <span>
                                                                    ${iconUrl1 ? `<img src="${iconUrl1}" alt="User Icon" style="width: 100%; border-radius: 50%;">` : firstTwoLetters1}
                                                                </span>
                                                            </div>
                                                            <div>
                                                                <div>
                                                                    <div style="font-weight: 600;">${user1}</div>
                                                                </div>
                                                                <div class="replay_text">
                                                                    ${m.text}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    `;
                                                            return false; // Break the loop
                                                        }
                                                    });
                                                }
                                            });
                                        }
                                    });
                                }

                                htmlContent += `
                            <div id="data-container2" style="width:100%;display: flex;align-items: start;gap: 1rem;margin: 12px 0;">
                                <div style="height:3.5rem;width:3.5rem;background-color:#ffab40;border-radius:50%;display: flex;justify-content: center;align-items: center;">
                                    ${iconUrl ? `<img src="${iconUrl}" alt="User Icon" style="width: 100%; border-radius: 50%;">` : firstTwoLetters}
                                </div>
                                <div style="width: 86%;">
                                    <div style="display: flex;gap: 1rem;">
                                        <span>${user}</span><span style="color:#b4b4b4;"></span>
                                    </div>
                                    <div style="margin-top: 5px;">${messages.text}</div>
                                    <div class="reply_div">
                                        ${count != 0 ? count + '&nbsp; <strong onclick="toggleReplies(this, event)">reply</strong>' : ''}
                                        <div class="replay_div_slide" style="display: none;">
                                            ${replyHtml}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                            });

                            $('#data-container1').html(htmlContent);



                        }

                        $('#sou-yt-pupop1').css('display', 'block');
                        $('#request15').css('display', 'none');
                        $('#request15_d').css('display', 'block');
                        $('.ttop').css({
                            'bottom': '-5px',
                            'position': 'relative'
                        });
                    }
                })
            }

            function request15_d() {

                $('.modal-dialog').css('left', '0');
                $('.modal-dialog').css('max-width', '500px');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                $('#sou-yt-pupop1').css('display', 'none');
                $('#request15_d').css('display', 'none');
                $('#request15').css('display', 'block');
            }

            function request5_d() {

                $('.modal-dialog').css('left', '-100px');
                $('.modal-dialog').css('max-width', '500px');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                $('#sou-yt-pupop').css('display', 'none');
                $('#request5_d').css('display', 'none');
                $('#request5').css('display', 'block');
            }



            function send_mail() {
                $('.modal-dialog').css('left', '-6%');
                $('.modal-dialog').css('max-width', '70%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                $('#send_mail').css('width', '50%');
                $('#send_mail').css('transition', 'width 0.4s ease');
                $('#send_mail').css('display', 'block');
                $('.svg2').css('display', 'block');
            }
            function extractfull(data) {
  return data.map(item => {
    // Remove outer quotes and unescape the JSON string
    const cleanedJsonString = item.RevenueShareTo.replace(/^"|"$/g, '').replace(/\\"/g, '"');
    
    // Parse the JSON string into an object
    const jsonObject = JSON.parse(cleanedJsonString);
    
    // Return the UPCid value
    return jsonObject;
  });
}
            function payment() {
                $('.modal-dialog').css('left', '-6%');
                $('.modal-dialog').css('max-width', '70%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                // $('#payment_div').css('width', '50%');
                // $('#payment_div').css('transition', 'width 0.4s ease');
                // $('#payment_div').css('display', 'block');
                // $('.svg3').css('display', 'block');
                $('.sou-pay-pupop').css('display', 'block');
            }

            function send() {
                $('.box').css('display', 'none');
                $('.modal-dialog').css('left', '-6%');
                $('.modal-dialog').css('max-width', '50%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                $('#request_div').css('display', 'none');
                $('#send_mail').css('display', 'none');
                $('#payment_div').css('display', 'none');
                $('#email_send_div').css('display', 'block');
                $('.ass-crt-suf-popup').css('display', 'none');


                $('#partially_5').text('Admin Action Completed');
                $('.slacksvg1').css('display', 'none');
                $('.slacksvg2').css('display', 'block');
                $('#slackhide').css('display', 'none');
                $('#slackshow').css('display', 'block');

                $('.ass-crt-suf-popup1').css('display', 'block');
                setTimeout(function() {
                    $('#email_send_div').css('display', 'none');
                    $('.modal-dialog').css('max-width', '500px');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('.ass-crt-suf-popup1').css('display', 'none');
                    $('#request_div').css('width', '0');
                    $('#request_div').css('transition', 'width 0.4s ease');
                    $('#request_div').css('display', 'none');
                    $('#ass-crt-suf-popup').css('display', 'none');
                    $('#send_mail').css('width', '0');
                    $('#send_mail').css('transition', 'width 0.4s ease');
                    $('#send_mail').css('display', 'none');

                    $('#payment_div').css('width', '0');
                    $('#payment_div').css('transition', 'width 0.4s ease');
                    $('#payment_div').css('display', 'none');

                    $('#email_send_div').css('display', 'none');

                    $('.svg').css('display', 'none');
                    $('.svg2').css('display', 'none');
                    $('.svg3').css('display', 'none');
                }, 2000);
            }

            function close_mail() {
                $('.modal-dialog').css('max-width', '500px');
                $('.modal-dialog').css('left', '-200px');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');

                $('#request_div').css('width', '0');
                $('#request_div').css('transition', 'width 0.4s ease');
                $('#request_div').css('display', 'none');

                $('#send_mail').css('width', '0');
                $('#send_mail').css('transition', 'width 0.4s ease');
                $('#send_mail').css('display', 'none');

                $('#payment_div').css('width', '0');
                $('#payment_div').css('transition', 'width 0.4s ease');
                $('#payment_div').css('display', 'none');

                $('#email_send_div').css('display', 'none');

                $('.svg').css('display', 'none');
                $('.svg2').css('display', 'none');
                $('.svg3').css('display', 'none');
                $('#unlink_mail').css('display', 'none');
                $('#div22_div').css('width', '100%');
                $('.ass-crt-suf-popup3').css('display', 'none');
                $('.ass-crt-suf-popup33').css('display', 'none');
                $('.approve_sale').css('display', 'none');
            }


            let notiemailnameEditor;
            let notiemailnameEditor1;
document.addEventListener('DOMContentLoaded', function () {
  // Initialize Quill editors

  

  notiemailnameEditor1 = new Quill('#notiemailname1', {
    theme: 'snow',
    modules: {
      toolbar: '#toolbar-notiemailname1'
    },
    placeholder: 'Compose your message here...'
  });

  document.getElementById('toggle-source-notiemailname1').addEventListener('click', function () {
        const isSourceMode = this.classList.contains('source-mode');
        const quillContainer = document.getElementById('notiemailname1');
        const sourceTextarea = document.getElementById('notiemailname-source1');
        const toolbarButtons = document.querySelectorAll('#toolbar-notiemailname1 button, #toolbar-notiemailname1 select');
        const toolbarPickers = document.querySelectorAll('#toolbar-notiemailname1 .ql-picker');

        if (!isSourceMode) {
            // Switch to source mode
            sourceTextarea.value = notiemailnameEditor1.root.innerHTML;
            quillContainer.style.display = 'none';
            sourceTextarea.style.display = 'block';
            this.classList.add('source-mode');

            // Disable all toolbar buttons except this one
            toolbarButtons.forEach(btn => {
            if (btn !== this) {
                btn.disabled = true;
                btn.style.opacity = '0.5';
                btn.style.pointerEvents = 'none';
            }
            });

            // Disable all .ql-picker dropdowns (font, size, color, etc.)
            toolbarPickers.forEach(picker => {
            picker.classList.add('ql-disabled');
            picker.style.opacity = '0.5';
            picker.style.pointerEvents = 'none';
            });

            // Highlight the toggle button
            this.style.border = '2px solid #1355AC';
            this.style.color = '#1355AC';
            this.style.borderRadius = '5px';
        } else {
            // Switch back to editor mode
            notiemailnameEditor1.clipboard.dangerouslyPasteHTML(sourceTextarea.value);
            quillContainer.style.display = 'block';
            sourceTextarea.style.display = 'none';
            this.classList.remove('source-mode');

            // Re-enable all toolbar buttons
            toolbarButtons.forEach(btn => {
            btn.disabled = false;
            btn.style.opacity = '';
            btn.style.pointerEvents = '';
            });

            // Re-enable all .ql-picker dropdowns
            toolbarPickers.forEach(picker => {
            picker.classList.remove('ql-disabled');
            picker.style.opacity = '';
            picker.style.pointerEvents = '';
            });

            // Remove toggle button highlight
            this.style.border = '';
            this.style.color = '';
            this.style.borderRadius = '';
        }
     });


  notiemailnameEditor = new Quill('#notiemailname', {
    theme: 'snow',
    modules: {
      toolbar: '#toolbar-notiemailname'
    },
    placeholder: 'Compose your message here...'
  });

  document.getElementById('toggle-source-notiemailname').addEventListener('click', function () {
        const isSourceMode = this.classList.contains('source-mode');
        const quillContainer = document.getElementById('notiemailname');
        const sourceTextarea = document.getElementById('notiemailname-source');
        const toolbarButtons = document.querySelectorAll('#toolbar-notiemailname button, #toolbar-notiemailname select');
        const toolbarPickers = document.querySelectorAll('#toolbar-notiemailname .ql-picker');

        if (!isSourceMode) {
            // Switch to source mode
            sourceTextarea.value = notiemailnameEditor.root.innerHTML;
            quillContainer.style.display = 'none';
            sourceTextarea.style.display = 'block';
            this.classList.add('source-mode');

            // Disable all toolbar buttons except this one
            toolbarButtons.forEach(btn => {
            if (btn !== this) {
                btn.disabled = true;
                btn.style.opacity = '0.5';
                btn.style.pointerEvents = 'none';
            }
            });

            // Disable all .ql-picker dropdowns (font, size, color, etc.)
            toolbarPickers.forEach(picker => {
            picker.classList.add('ql-disabled');
            picker.style.opacity = '0.5';
            picker.style.pointerEvents = 'none';
            });

            // Highlight the toggle button
            this.style.border = '2px solid #1355AC';
            this.style.color = '#1355AC';
            this.style.borderRadius = '5px';
        } else {
            // Switch back to editor mode
            notiemailnameEditor.clipboard.dangerouslyPasteHTML(sourceTextarea.value);
            quillContainer.style.display = 'block';
            sourceTextarea.style.display = 'none';
            this.classList.remove('source-mode');

            // Re-enable all toolbar buttons
            toolbarButtons.forEach(btn => {
            btn.disabled = false;
            btn.style.opacity = '';
            btn.style.pointerEvents = '';
            });

            // Re-enable all .ql-picker dropdowns
            toolbarPickers.forEach(picker => {
            picker.classList.remove('ql-disabled');
            picker.style.opacity = '';
            picker.style.pointerEvents = '';
            });

            // Remove toggle button highlight
            this.style.border = '';
            this.style.color = '';
            this.style.borderRadius = '';
        }
     });
});




function noteligiblesend1() {
    var id = $('#formid').val();

    $.ajax({
                    type: 'POST',
                    url: '{{ route('revenueasanaapprove') }}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        formid: $('#formid').val(),
                        text:'email',
                    },
                    success: function(result) {
                        $('.ass-crt-suf-popup3').css('display', 'none');
                        $('#div2text').text('Completed');
                        $('#numberdiv2').css('background', '#0069d9');
                        $('#div2number').css('color', '#fff');
                        $('#rejectfsa1').text('Denied');
                        $('#rejectfsa').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                        $('#fsaapprove').css('display', 'none');
                        $('.modal-dialog').css('left', '-100px');
                        $('.modal-dialog').css('max-width', '500px');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    }
                })

}

function noteligiblesend() {



    var selectedFlag = $('#flagSelect').val();
    if (!selectedFlag) {
    selectedFlag = $('#flagSelect1').val();
}
if (!selectedFlag) {
    selectedFlag = $('#flagSelect2').val();
}
if (!selectedFlag) {
    selectedFlag = $('#flagSelect3').val();
}
if (!selectedFlag) {
    selectedFlag = $('#flagSelect4').val();
}

    var body = notiemailnameEditor.root.innerHTML;
var formid = $('#formidss').val();
$.ajax({
type: 'GET',
url: 'reviewflag',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
    formid: formid,
body:encodeURIComponent(body),
flag:selectedFlag,
text:'email',
},
success: function(result) {

    let fsaOption = '';
if (result.fsacheck != 'No') {
  fsaOption = '<option value="FSA">FSA</option>';
}
    $('#div11').html(`

  <div> <b>Flag Type:</b> ${selectedFlag} </div><br>
    <div> <button id="matchcolor3" onclick="request711()" style="  padding: 3px;color: white;width: 63%;border-radius: 7px;background: #0069d9;" >Modify Flag Type</button>
    </div>
  </div>

  <div id="hideflag" style="display:none;"><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect1" class="form-control">
        <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
    ${fsaOption}

    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">
<button id="matchcolor" style="  padding: 3px;color: white;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','no')" style="  padding: 3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>

    `);

    $('.number11').css('color','#fff');
$('#number11').css('background-color','#0069d9');
$('#hover11').text('Completed');
$('#done11').css('display','block');
$('#notdone11').css('display','none');
$('#noteligible').css('display','none');

$('.approve_sale').css('display','none');
$('#email_done_div_text').text('Email Sent Successfully.');
$('#div22_div').css('width','100%');
$('#email_done_div').css('display','block');
$('#email_done_div').css('top','9%');
$('.modal-dialog').css('left', '-14%');
                $('.modal-dialog').css('max-width', '40%');
             
                $('.modal-dialog').css('height', '700px');
                // $('.modal-content').css('height', 'inherit');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                setTimeout(function() {
    $('#email_done_div').css('display', 'none');
}, 2000);


//$('#div11').html(`<b>Flag Type:</b> ${selectedFlag}`);







if (result.fsacheck == 'Yes') {
    if ((result.data[0].percentage_userid == 'No issue in Flag' && result.data[0].percentage != '2') || (result.data[0].percentage || !(result.data[0].percentage_userid))) {
        $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });

    }
} else {
    if (result.data[0].percentage_userid == 'No issue in Flag') {
        $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
    } 
}


           
          

           



}
})
}
function request711() {
    const flagDiv = $('#hideflag');
    
    if (flagDiv.css('display') === 'none') {
        flagDiv.css('display', 'block');
        $('#matchcolor3').text('Keep Current Flag Type');
        $('#matchcolor3').css('width','75%');
    } else {
        flagDiv.css('display', 'none');
        $('#matchcolor3').text('Modify Flag Type');
        $('#matchcolor3').css('width','63%');
    }
}

            function request71(name,email,id,textt) {


              
                $('#formidss').val(id);


if(textt != 'no'){

$('#notiemailto').text(email);
var username = name;

var selectedFlag = $('#flagSelect').val();



if (!selectedFlag) {
    selectedFlag = $('#flagSelect1').val();
}


if (!selectedFlag) {
    selectedFlag = $('#flagSelect2').val();
}


if (!selectedFlag) {
    selectedFlag = $('#flagSelect3').val();
}


if (!selectedFlag) {
    selectedFlag = $('#flagSelect4').val();
}


//let content;
if(selectedFlag == 'FSA'){


    var selectedFlag = $('#flagSelect').val();
var formid = $('#formidss').val();
$.ajax({
type: 'GET',
url: 'reviewflag',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
    formid: formid,
flag:selectedFlag,
},
success: function(result) {

   

    $('#div11').html(`

  <div> <b>Flag Type:</b> ${selectedFlag} </div><br>
    <div> <button id="matchcolor3" onclick="request711()" style="  padding: 3px;color: white;width: 63%;border-radius: 7px;background: #0069d9;" >Modify Flag Type</button>
    </div>
  </div>

  <div id="hideflag" style="display:none;"><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect" class="form-control">
        <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
        <option value="FSA">FSA</option>

    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">
<button id="matchcolor" style="  padding: 3px;color: white;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','no')" style="  padding: 3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>

    `);

    $('.number11').css('color','#fff');
$('#number11').css('background-color','#0069d9');
$('#hover11').text('Completed');
$('#done11').css('display','block');
$('#notdone11').css('display','none');
$('#noteligible').css('display','none');

$('.approve_sale').css('display','none');
$('#email_done_div_text').text('Flag Updated Successfully.');
$('#div22_div').css('width','100%');
$('#email_done_div').css('display','block');
$('#email_done_div').css('top','9%');
$('.modal-dialog').css('left', '-14%');
                $('.modal-dialog').css('max-width', '40%');
             
                $('.modal-dialog').css('height', '700px');
                // $('.modal-content').css('height', 'inherit');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                setTimeout(function() {
    $('#email_done_div').css('display', 'none');
}, 2000);


//$('#div11').html(`<b>Flag Type:</b> ${selectedFlag}`);







if (result.fsacheck == 'Yes') {
    if ((result.data[0].percentage_userid == 'No issue in Flag' && result.data[0].percentage != '2') || (result.data[0].percentage || !(result.data[0].percentage_userid))) {
        $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });

    }
} else {
    if (result.data[0].percentage_userid == 'No issue in Flag') {
        $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
    } 
}


        


       return false;    

           



}
})

    return false;
}


if(!selectedFlag){
    alert('Please choose a Flag Type');
    return false;
}





let content ='';
if($('#flagSelect').val() == 'CR Abuse Red' || $('#flagSelect1').val() == 'CR Abuse Red' || $('#flagSelect2').val() == 'CR Abuse Red' || $('#flagSelect3').val() == 'CR Abuse Red' || $('#flagSelect4').val() == 'CR Abuse Red'){


                 content=` <p style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
Hey ${username},                                       </p><br><p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
                            We couldn't process your revenue sharing request because your content was used to improperly claim ineligible video content on YouTube through Content ID.
                        </p><br>
                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
                        As a result, we're unable to process revenue sharing for you.

                        </p><br>
                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 28px;">
                            Many warm regards&comma;
                        </p>`;
}else{
              content=`
<p><span style="color: rgb(0, 0, 0);">Hey ${username}, 
</span></p><p><br></p>
<p><span style="color: rgb(0, 0, 0);">We couldn't process your revenue sharing request because content on your account falls into one or more of these categories:</span></p><p><br></p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">Likely to fail partner store content requirements.</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">Uncertainty regarding user's rights for commercial distribution.</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">High risk for fraudulent streaming.</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">Uploaded for spam/advertising.</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">Considered generic content.</span></li></ol><p><br></p><p><span style="color: rgb(0, 0, 0);">For more details, see Section 4.2 of our </span><strong style="color: rgb(19, 69, 172);"><a href="https://www.routenote.com/rn/artistlabelagreement" rel="noopener noreferrer" target="_blank">Artist Agreement</a></strong><span style="color: rgb(0, 0, 0);">.</span></p><p><br></p><p><span style="color: rgb(0, 0, 0);">RouteNote reserves the right to disapprove or remove content for distribution, or deny account features, if it falls into these categories.</span></p><p><br></p><p><span style="color: rgb(0, 0, 0);">If you want to continue distributing your music or request a channel upgrade, you may need to explore other platforms.</span></p><p><br></p><p><strong style="color: rgb(0, 0, 0);">This decision is final, and we may not respond to further correspondence on this issue.</strong></p><p><br></p><p><span style="color: rgb(0, 0, 0);">Many warm regards,</span></p>`;

                                            }

// const content=`
// <p><span style="color: rgb(0, 0, 0);">Hey ${username}, 
// </span></p><p><br></p>
// <p><span style="color: rgb(0, 0, 0);">We couldn't process your revenue sharing request because content on your account falls into one or more of these categories:</span></p><p><br></p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">Likely to fail partner store content requirements.</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">Uncertainty regarding user's rights for commercial distribution.</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">High risk for fraudulent streaming.</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">Uploaded for spam/advertising.</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(0, 0, 0);">Considered generic content.</span></li></ol><p><br></p><p><span style="color: rgb(0, 0, 0);">For more details, see Section 4.2 of our </span><strong style="color: rgb(19, 69, 172);"><a href="https://www.routenote.com/rn/artistlabelagreement" rel="noopener noreferrer" target="_blank">Artist Agreement</a></strong><span style="color: rgb(0, 0, 0);">.</span></p><p><br></p><p><span style="color: rgb(0, 0, 0);">RouteNote reserves the right to disapprove or remove content for distribution, or deny account features, if it falls into these categories.</span></p><p><br></p><p><span style="color: rgb(0, 0, 0);">If you want to continue distributing your music or request a channel upgrade, you may need to explore other platforms.</span></p><p><br></p><p><strong style="color: rgb(0, 0, 0);">This decision is final, and we may not respond to further correspondence on this issue.</strong></p><p><br></p><p><span style="color: rgb(0, 0, 0);">Many warm regards,</span></p>`;

if (notiemailnameEditor) {
  //  notiemailnameEditor.setContents(content);
    notiemailnameEditor.clipboard.dangerouslyPasteHTML(content);
    notiemailnameEditor.enable(false);
  
    

}


$('#forfsa').css('display','none');
    $('#fornotfsa').css('display','block');
                $('#noteligible').css('display', 'block');
                $('.modal-dialog').css('left', '-20%');
                $('.modal-dialog').css('max-width', '45%');
                $('#div22_div').css('width', '44%');
                $('.modal-dialog').css('height', '700px');
                $('#noteligible').css('right', '7rem');
                $('#noteligible').css('top', '2rem');
               
                // $('.modal-content').css('height', 'inherit');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');

}
else{
   // alert();
   // $('#formidss').val(id);
    $('.approve_sale').css('display','block');

    
   


}
            }

            function request7(username,id,email) {
                $('#fsa2').text(email);
                $('#formid1').val(id);
                $('.dnt_info').css('display', 'block');
                $('.ok_dnt').css('display', 'none');
                $('.sou-yt-pupop').css('display', 'none');

                const content=` <p style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
Hey ${username},                                       </p><br>
                                        <p style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
                                            We couldn't process your revenue sharing request because your content, or content from the parties you've included, matches artificial streaming patterns.
                                        </p><br>
                                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
                                            For more information, see:
                                        </p><br>
                                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 20px;">
                                            <a href="https://routenote.com/blog/what-does-an-fsa-fraud-streaming-claim-mean/" target="_blank" style="font-weight: 700; color: #1345ac; display: inline; vertical-align: baseline;">What does a fraud streaming claim mean?</a>
                                            <br>
                                            <a href="https://support.routenote.com/kb-article/how-can-i-avoid-artificial-or-fraudulent-streaming/" target="_blank" style="font-weight: 700; color: #1345ac; display: inline; vertical-align: baseline;">How can I avoid artificial or fraudulent streaming?</a>
                                        </p><br>
                                        <p class="rn_text rn_text-default" style="color: #000000; font-size: 14px; line-height: 24px; margin-top: 0px; margin-bottom: 28px;">
                                            Many warm regards,
                                        </p>`;
                                            
if (notiemailnameEditor1) {
  //  notiemailnameEditor.setContents(content);
    notiemailnameEditor1.clipboard.dangerouslyPasteHTML(content);
    notiemailnameEditor1.enable(false);
  

}

                $('.ass-crt-suf-popup2').css('display', 'none');
                $('.ass-crt-suf-popup3').css('display', 'block');



                setTimeout(function() {
                    $('.ass-crt-suf-popup3').css('display', 'none');
                    $('.modal-dialog').css('left', '-100px');
                    $('.modal-dialog').css('max-width', '500px');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');

                }, 992000);

                $('.modal-dialog').css('left', '-16%');
                $('.modal-dialog').css('max-width', '53%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
            }


            function noissue(){
                
                $.ajax({
    type: 'GET',
    data: {
        formid: $('#formidss').val(),
    },
    url: 'reviewflag',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(result) {
//if(result.data == 'success'){

$('.number11').css('color','#fff');
$('#number11').css('background-color','#0069d9');
$('#hover11').text('Completed');
$('#done11').css('display','block');
$('#notdone11').css('display','none');
$('.approve_sale').css('display','none');
$('#email_done_div_text').text('Updated Successfully');
$('#email_done_div').css('display','block');
$('#email_done_div').css('top','9%');
setTimeout(function() {
    $('#email_done_div').css('display', 'none');
}, 2000);

//$('#div11').html(`<b>No Issue In Flag.</b>`);

let fsaOption = '';
if (result.fsacheck != 'No') {
  fsaOption = '<option value="FSA">FSA</option>';
}

$('#div11').html(`
  
  <div>  <b>No Inhibition Flag Detected.</b>  </div><br>
    <div> <button id="matchcolor3" onclick="request711()" style="  padding: 3px;color: white;width: 63%;border-radius: 7px;background: #0069d9;" >Modify Flag Type</button>
    </div>
  </div>

  <div id="hideflag" style="display:none;"><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect2" class="form-control">
    <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
    
${fsaOption}

    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">




<button id="matchcolor" style="  padding: 3px;color: white;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${result.data[0].username}','${result.data[0].email}','${result.data[0].id}','no')" style=" color: white;padding: 3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>

    `);


    if (result.fsacheck == 'Yes') {
    if ((result.data[0].percentage_userid == 'No issue in Flag' && result.data[0].percentage != '2') || (result.data[0].percentage || !(result.data[0].percentage_userid))) {
        $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });

    }
} else {
    if (result.data[0].percentage_userid == 'No issue in Flag') {
        $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
    } 
}
          


//}

    }
    })
            }

            $(document).ready(function() {

                var analysisData = <?php echo json_encode($data); ?>;

                var analysisData1 = <?php echo json_encode($data1); ?>;

                var analysisData2 = <?php echo json_encode($data2); ?>;

                var analysisData3 = <?php echo json_encode($data3); ?>;
                var analysisData4 = <?php echo json_encode($data4); ?>;

             

                $('#yourDataTableId').on('click', '.view', function() {  
               // $('.view').click(function() {
                    var formId = $(this).data('form-id');
                    var details = analysisData;
                    var detail = details.find(function(item) {
                        return item.id == formId;
                    });

                    $('#email').text(detail.email);
                    $('#userid').text(detail.userid);
                    $('#username').text(detail.username);
                   




                    $.ajax({
    type: 'GET',
    data: {
        formid: formId,
    },
    url: 'getallvalues_revenue',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(result) {

        $('#revenuedetails').empty();
        const dataArray = result.data;
console.log(result.data2);
const datas = extractfull(dataArray);
let htmlContent1 = '';
let htmlContent11 = '';
// Function to get values based on dynamic key
const getValue = (obj, prefix) => {
    const keys = Object.keys(obj);
    const key = keys.find(k => k.startsWith(prefix));
    return key ? obj[key] : '';
};
// Loop through each record (assuming this is a data array you're processing)
datas.forEach(record => {
    const { UPCid, ISRC, RevenueShareTo } = record;
    const totalRevenueShare = result.data3[0].percentage;
   // const rnPercentage = 100 - totalRevenueShare;
    const rnPercentage = result.routenote_val;
    const referrar = result.per_val;

  //  let referrar = 0; // Placeholder if not using AJAX

    let ISRC1;

if (ISRC === 'Apply to all tracks') {
    ISRC1 =  `<span>ISRC: <strong>All tracks</strong></span>`;
} else {
  
if (ISRC === 'Select an option') {
    ISRC1 = '';
}else{
    ISRC1 =  `<span>ISRC: <strong>${ISRC}</strong></span>`;

}
}

    let htmlContent = `
        <div style="text-align: center;">
            <span>UPCid: <strong >${UPCid}</strong></span>
           ${ISRC1}
        </div>`;

     htmlContent += `<div style="column-count: 2; break-inside: avoid; margin-bottom: 30px;">`;

    // ABSOLUTE VIEW
    htmlContent += `<div style="break-inside: avoid;">
        
        <div style="font-weight: 800; margin-top: 10px;">Absolute view</div>`;

    let totalPercentageUsed = 0;

    RevenueShareTo.forEach(user => {
        const userId = getValue(user, 'Userid');
        const userName = getValue(user, 'Username');
        const userPercentage = parseFloat(getValue(user, 'Percentage'));
        const userRevenueShare = (userPercentage / 100) * totalRevenueShare;

        totalPercentageUsed += userRevenueShare;

        htmlContent += `
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center;">
            <div>UserID:<br><strong class="frm_vals">${userId}</strong></div>
            <div>UserName:<br><strong class="frm_vals custom-tooltip" data-title="${userName}">${userName}</strong></div>
            <div>Revenue Share:<br><strong class="frm_vals">${userRevenueShare.toFixed(2)}%</strong></div>
        </div>`;
    });

    const remaining = totalRevenueShare - totalPercentageUsed;

    htmlContent += `
       
        <div style="display: flex;gap:6%;grid-template-columns: 1fr 1fr 1fr;text-align: center;">
            <div>RN: <strong class="frm_vals">${rnPercentage}%</strong></div>
            <div>Referrer: <strong class="frm_vals">${referrar}%</strong></div>
        </div>
    </div>`;

    // USER VIEW
    htmlContent += `<div style="break-inside: avoid;">
        <div style="font-weight: 800;">User-facing view</div>`;

    let totalPercentageUsed1 = 0;

    RevenueShareTo.forEach(user => {
        const userId = getValue(user, 'Userid');
        const userName = getValue(user, 'Username');
        const userPercentage = parseFloat(getValue(user, 'Percentage'));

        totalPercentageUsed1 += userPercentage;

        htmlContent += `
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center;">
            <div>UserID:<br><strong class="frm_vals">${userId}</strong></div>
            <div>UserName:<br><strong class="frm_vals custom-tooltip" data-title="${userName}">${userName}</strong></div>
            <div>Revenue Share:<br><strong class="frm_vals">${userPercentage.toFixed(2)}%</strong></div>
        </div>`;
    });

    const remaining1 = totalRevenueShare - totalPercentageUsed1 + rnPercentage;

    htmlContent += `
       
    </div></div>`;

    // Append each record’s combined layout
    $('#revenuedetails').append(htmlContent);
});



    }

                
                    
                    })


                    var link = $('#exportdata');

                    link.attr('href', '{{ route('exportform3') }}?id=' + detail.id);
                    $('.modal-dialog').css('max-width','');
                    $('.modal-dialog').css('left',''); $('.modal-dialog').css('transition','');
                    $('#viewpop').modal('show');

                   
                  
                });


             


                $('#yourDataTableId').on('click', '.analysis', function() {  

               // $('.analysis').click(function() {

                $('.modal-dialog').css('max-width','500px');
                    $('.modal-dialog').css('left','-200px'); $('.modal-dialog').css('transition','max-width 0.4s');

                    $('#sub-tk-msg11').css('display', 'none');
                    $('#sub-tk-msg').css('display', 'none');
                    $('#btnsief').css('display', 'none');
                    var formId = $(this).data('form-id');
                    $('#analysismodal1').modal('show');
                    $('#analysismodal1').css('padding-right','200px');
           
                    $('#showsecondone').css('display','none');

                    var matchingEntry = analysisData.find(function(item) {
                        return item.id === formId;
                    });

                    $('#formid').val(matchingEntry.id);






                    $('#gid').text();
                    if (matchingEntry) {
                        var matchingEntry1 = analysisData1.find(function(item) {
                            return item.userid.toString() === matchingEntry.id.toString() && item.type === 'revenueform';

                        });
                        var matchingEntry11 = analysisData1.find(function(item) {
                            return item.userid.toString() === matchingEntry.id.toString() && item.type === 'revenueform4';

                        });
                        if (matchingEntry11) {
                        $('#gid4').text(`${matchingEntry11.gid}`);
                        }
                        if (matchingEntry1) {
                            $('.sub-tk-msg11').css('display', 'block');
                            $('#gid').text(`${matchingEntry1.gid}`);
                            $('.div2done').css('display', 'block');
                            $('.div2pending').css('display', 'none');
                            $('#div2text').text('Admin Action Completed');
                        }
                        else{
                            $('.sub-tk-msg11').css('display', 'none');
                        }



                        var matchingEntry3 = analysisData2.find(function(item) {
                            return item.unique_identifier_value === matchingEntry.keys1;

                        });
                        console.log(matchingEntry3);

                        var uidref = '';
                        if(matchingEntry3){
                            if(matchingEntry3.user_type == 'secondary'){
                               uidref =  matchingEntry3.submitted_by;
                            }
                        }

                        


                        
                        $.ajax({
                    
                            type: 'GET',
                            // data: {
                            //     uid: matchingEntry.userid
                            // },
                            url: `https://smarthub.rn-test.com/fsacheck?uid=${matchingEntry.userid}`,
                            
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },



                        // $.ajax({
                        //     url: 'fsacheck',
                        //     method: 'GET',
                        //     data: {
                        //         uid: matchingEntry.userid
                        //     },
                        //     dataType: 'json',

                        success: function(response) {
                            console.log(response);
                            $('#usename').val(response.username);

                            let flagImages = '';

                        if (response.flagcolors && Array.isArray(response.flagcolors) && response.flagcolors
                            .length > 0) {
                            console.log('Processing flagcolors:', response.flagcolors); // Log the flagcolors array

                            // Loop through the flagcolors
                            response.flagcolors.forEach(flagObj => {
                                const flag = flagObj.flag_color;
                                const comment = flagObj.comment;
                                console.log('Processing flag:', flag);
                                let flagImageSrc = '';
                                let flagTitle = '';
                                let color = '';
                                // Map flag type to corresponding image and title
                                switch (flag) {
                                    case 'Approved':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/Flag-Approved.png';
                                        flagTitle = 'Approved';comments = comment; color ='#4BDF37';
                                        break;
                                    case 'Blacklisted':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/flag-blacklist.png';
                                        flagTitle = 'Blacklisted';comments = comment;color ='#000000';
                                        break;
                                    case 'Copyright infringeme':
                                        flagImageSrc =
                                            'https://smarthub.rn-test.com/images/Copyright_infri-removebg-preview.png';
                                        flagTitle = 'Copyright infringement';comments = comment;color ='#000000';
                                        break;
                                    case 'Blocklisted':
                                        flagImageSrc =
                                        'https://routenotetest.com/rn22/themes/rnmusic/images/flag-blacklist.png';
                                        flagTitle = 'Blocklisted';comments = comment;color ='#000000';
                                        break;
                                    case 'FraudStrike':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/Flag-Fraud.png';
                                        flagTitle = 'FraudStrike';comments = comment;color ='#ff0000';
                                        break;
                                    case 'fraud_streaming':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/Fraud_Streaming.png';
                                        flagTitle = 'Fraud Streaming'; comments = comment;color ='#EA4887';
                                        break;
                                    case 'Suspicious':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/Flag-suspicious.png';
                                        flagTitle = 'Suspicious';comments = comment;color ='#FF6C00';
                                        break;
                                    case 'Warning':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/Flag-Warning.png';
                                        flagTitle = 'Warning';comments = comment; color ='#FADA0A';
                                        break;
                                    case 'Priority':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/Flag-priority.png';
                                        flagTitle = 'Priority';comments = comment; color ='#9C27B0';
                                        break;
                                    case 'star_artist':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/star_artist.png';
                                        flagTitle = 'Star artist';comments = comment;color ='#FADA0A';
                                        break;
                                    case 'yt_network_abuse':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/ytblockflag.png';
                                        flagTitle = 'YouTube Network Abuse';comments = comment;color ='#c4302b';
                                        break;
                                    case 'xpress':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/XPressflag.png';
                                        flagTitle = 'Xpress';comments = comment; color ='#999';
                                        break;
                                    case 'support_note':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/support_note.png';
                                        flagTitle = 'Support Note';comments = comment;color ='#51a4f7';
                                        break;
                                    case 'payment':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/payment-icon.png';
                                        flagTitle = 'Payment';comments = comment;  color ='#51a4f7';
                                        break;
                                    case 'Publishing Information':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/publishing.svg';
                                        flagTitle = 'Publishing Information';comments = comment;color ='#0BAAB5';
                                        break;
                                        case 'korean_account':
                                        flagImageSrc =
                                            'https://routenotetest.com/rn22/themes/rnmusic/images/Korea_flag.png';
                                        flagTitle = 'Publishing Information';comments = comment; color ='#ED4C5C';
                                        break;
                                        
                                        
                                    default:
                                        console.log('Unmatched flag:', flag); // Log unmatched flags
                                        break;
                                }

                                comments = $('<div/>').text(comments).html();


                        if (flagImageSrc) {
                            if (flagImageSrc == 'https://smarthub.rn-test.com/images/Copyright_infri-removebg-preview.png') {
                                flagImages += `
                                                <img class="cursor-pointer flag-icon" style="height:27px;display:inline;cursor:pointer" src="${flagImageSrc}"  data-title='${comments}' data-color="${color}" alt="${flagTitle}">
                                            `;
                            }else{
                                flagImages += `
                                                <img class="cursor-pointer flag-icon" style="display:inline;cursor:pointer" src="${flagImageSrc}"  data-title='${comments}' data-color="${color}" alt="${flagTitle}">
                                            `;
                            }
                        }
                            });
                        } else {
                            if (!flagImages && response.flagcolors !== '' && response.uid !== '') {
                                flagImages = `
                                            No Flags
                                            `;
                            }

                        }
                      

                        if (flagImages.trim() === 'No Flags') {


                            if(uidref != ''){

                                $.ajax({
                            // url: "../settingmail.php",
                            // method: "POST",
                            type: "post",
                            url: "{{ route('uncategorised') }}",
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                                ref: "sgsgsg",
                                usuid: matchingEntry.email,
uid:uidref
                            },
                            success: function(result) {

                                if(matchingEntry3){
 if(matchingEntry3.user_type == 'secondary'){
                                
                                


  $('#div1').html(`
  <span style="padding: 10px;">EMAIL: ${matchingEntry.email}</span>
  <span style="display:none;padding: 10px;" id="orginalname" >${matchingEntry.email},${matchingEntry.username}</span>
                                <span style="padding: 10px;">Flags - ${flagImages}</span>
                                <span style="padding: 10px;">Base percentage: ${response.artistpercentage[0].percentage}%</span>
                                
    <div style="display: grid;">
      <span style="display: flex; padding: 10px;">
        Submitted By Alternative Contact: <p style="font-weight: bold; margin: 0 0 0 5px;">Yes</p>
      </span>
      <span style="font-weight: bold; padding: 10px;">Sub Account Details:</span>
      <span style="padding: 10px;">USERNAME: ${result.datas2[0].name}</span>
      <span style="padding: 10px;">EMAIL: ${result.datas2[0].mail}</span>
      <span style="padding: 10px;">UID: ${matchingEntry3.submitted_by}</span>
    </div>
  `);



                            }

                        }

                    }
                })
                            }else{
                                $('#div1').html(`
                                <span style="padding: 10px;">EMAIL: ${matchingEntry.email}</span>
                                <span style="display:none;padding: 10px;" id="orginalname" >${matchingEntry.email},${matchingEntry.username}</span>
                                <span style="padding: 10px;" >Flags - ${flagImages}</span>
                                <span style="padding: 10px;">Base percentage: ${response.artistpercentage[0].percentage}%</span>
                            `);
                            }


                          

                        } else {

                            if(uidref != ''){

                                $.ajax({
                            // url: "../settingmail.php",
                            // method: "POST",
                            type: "post",
                            url: "{{ route('uncategorised') }}",
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                                ref: "sgsgsg",
                                usuid: matchingEntry.email,
uid:uidref
                            },
                            success: function(result) {
if(matchingEntry3){
if(matchingEntry3.user_type == 'secondary'){




$('#div1').html(`
<span style="padding: 10px;">EMAIL: ${matchingEntry.email}</span>
<span style="display:none;padding: 10px;" id="orginalname" >${matchingEntry.email},${matchingEntry.username}</span>

                                <span style="padding: 10px;">Flags - ${flagImages}</span>
                                <span style="padding: 10px;">Base percentage: ${response.artistpercentage[0].percentage}%</span>
<div style="display: grid;">
<span style="display: flex; padding: 10px;">
Submitted By Alternative Contact: <p style="font-weight: bold; margin: 0 0 0 5px;">Yes</p>
</span>
<span style="font-weight: bold; padding: 10px;">Sub Account Details:</span>
<span style="padding: 10px;">USERNAME: ${result.datas2[0].name}</span>
<span style="padding: 10px;">EMAIL: ${result.datas2[0].mail}</span>
<span style="padding: 10px;">UID: ${matchingEntry3.submitted_by}</span>
</div>
`);



}

}
                            }
                        })

}

                            else{
                                $('#div1').html(`
                                <span style="padding: 10px;">EMAIL: ${matchingEntry.email}</span>
                                <span style="display:none;padding: 10px;" id="orginalname" >${matchingEntry.email},${matchingEntry.username}</span>

                                <span style="padding: 10px;">Flags - <a href="https://www.rnadmin.com/flags/${matchingEntry.userid}">${flagImages}</a></span>
                                <span style="padding: 10px;">Base percentage: ${response.artistpercentage[0].percentage}%</span>
                                `);
                            }
                          

                        }

                        // $('#div1').html(`
                        //     <span style="padding: 10px;">EMAIL: ${matchingEntry.email}</span>
                        //     <span style="padding: 10px;">Flags - ${flagImages}</span>
                        // `);









                        resetFsaCheckboxes();
             
             function resetFsaCheckboxes() {
                 $('input[name="fsa-status"]').each(function () {
                     const $checkbox = $(this);
                     const $label = $checkbox.closest('label');

                     $checkbox.show().prop('disabled', false).prop('checked', false);
                     $label.find('.tick-icon').remove();
                   
                     // $('.success-message2').css('display','none');
                     // $('.success-message1').css('display','none');
                     $label.find('.fsa-success-br').remove(); // ✅ remove previous <br>
                 });

             }

             let fsaOption = '';
if (response.fsacheck != 'No') {
  fsaOption = '<option value="FSA">FSA</option>';
}
             if(matchingEntry.percentage_userid)
{
    

    $('.number11').css('color','#fff');
$('#number11').css('background-color','#0069d9');
$('#hover11').text('Completed');
$('#done11').css('display','block');
$('#notdone11').css('display','none');

if(matchingEntry.percentage_userid == 'No issue in Flag'){
    $('#div11').html(`
   
  <div><b>No Inhibition Flag Detected.</b>  </div><br>
    <div> <button id="matchcolor3" onclick="request711()" style="  padding: 3px;color: white;width: 63%;border-radius: 7px;background: #0069d9;" >Modify Flag Type</button>
    </div>
  </div>


  <div id="hideflag" style="display:none;"><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect" class="form-control">
    <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
    
${fsaOption}

    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">
<button id="matchcolor" style="  padding: 3px;color: white;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${matchingEntry.username}','${matchingEntry.email}','${matchingEntry.id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${matchingEntry.username}','${matchingEntry.email}','${matchingEntry.id}','no')" style=" color: white; padding: 3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>

    `);
}else{
    $('#div11').html(`<div>
    <div><b>Flag Type:</b> ${matchingEntry.percentage_userid}   </div><br>
    <div> <button id="matchcolor3" onclick="request711()" style="  padding: 3px;color: white;width: 63%;border-radius: 7px;background: #0069d9;" >Modify Flag Type</button>
    </div>
  </div>

  <div id="hideflag" style="display:none;"><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect" class="form-control">
    <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
        ${fsaOption}


    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">
<button id="matchcolor" style="color: white;  padding: 3px;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${matchingEntry.username}','${matchingEntry.email}','${matchingEntry.id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${matchingEntry.username}','${matchingEntry.email}','${matchingEntry.id}','no')" style=" color: white; padding: 3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>

   `);
   
}




}
else{
    $('.number11').css('color','#000');
$('#number11').css('background-color','#ccc');
$('#hover11').text('Admin Action Needed');
$('#done11').css('display','none');
$('#notdone11').css('display','block');

$('#div11').html(`<div><label for="flagSelect">Select Flag Type:</label>
    <select id="flagSelect" class="form-control">
    <option value="">-- Select a flag --</option>
        <option value="Blocklist">Blocklisted</option>
       
        <option value="CR Abuse Red">CR Abuse Red</option>

        <option value="Copyright Strike">Copyright Strike</option>
        ${fsaOption}

    </select><br>
    <div style="
    gap: 3%;
    display: flex;
">
<button id="matchcolor" style="padding:3px;color: white;width: 46%;border-radius: 7px;background: #008809;" onclick="request71('${matchingEntry.username}','${matchingEntry.email}','${matchingEntry.id}','confirm')">Confirm Flag</button>

<button id="matchcolor2" onclick="request71('${matchingEntry.username}','${matchingEntry.email}','${matchingEntry.id}','no')" style="color: white;padding:3px;width: 65%;border-radius: 7px;background: red;">No Inhibition Flag</button>
 </div>


   ` );


}

             if(response.fsacheck == 'No'){
                 $('.verfiyfsaa').css({
                     'cursor': 'pointer',
                     'pointer-events': 'auto'
                 });
                 $('#showsecondone').css('display','none');
                
                 $('#div2number').text('3')
                 
                 $('#div3number').text('4')
                 $('#div4number').text('5');
                 $('#div5number').text('6');
                 $('#half6').text('3');
                 $('.halflast').text('4');
                 $('#divlasttext1').text('5');
                 


             }else{

            
               //  $('#showsecondone').css('display','flex');
                 $('#div22number').text('2a');
                 $('#div2number').text('4');
                 $('#div3number').text('5');
                
                 $('#div4number').text('6');
                 $('#div5number').text('7');
                 $('#half6').text('3');
                 $('.halflast').text('4');
                 $('#divlasttext1').text('5');
                 
                console.log('okok',matchingEntry.percentage);


                 if (matchingEntry.percentage == 0 || !(matchingEntry.percentage)) {
                    
                         $('.verfiyfsaa').css({
                                         'cursor': 'not-allowed',
                                         'pointer-events': 'none'
                                     }); 
                                 
                         $('.div22pending').css('display', 'block');
                         $('.div22done').css('display', 'none');

                         $('#div22text').text('Admin Action Need');
                         $('#number2div').css('background', '#ccc');
                       
                         $('#div22number').css('color', '#000');
                         $('#alerttext').css('display', 'none');
                        $('#updatedone').css('display', 'block'); 
                     } else {
                        console.log('okok',matchingEntry.percentage);
                         if(matchingEntry.percentage == 2) {  
                         $('.verfiyfsaa').css({
                                         'cursor': 'not-allowed',
                                         'pointer-events': 'none'
                                     }); 
                                 }else{
                                     $('.verfiyfsaa').css({
                                         'cursor': 'pointer',
                                         'pointer-events': 'auto'
                                     });
                                 }
                        
                         $('.div22pending').css('display', 'none');
                         $('.div22done').css('display', 'block');

                         $('#div22text').text('Completed');
                         $('#number2div').css('background', '#0069d9');
                         $('#div22number').css('color', '#fff');
                         $('#alerttext').css('display', 'none');
                     }
      
             if (matchingEntry.percentage == 0 || matchingEntry.percentage == 3 || matchingEntry.percentage == 4 || !(matchingEntry.percentage)) {
                 $('#showbuttonnn, #hidebuttonnn, #slackbuttonnn').hide();
             } else {
                 $('#showbuttonnn, #slackbuttonnn').show();
                 $('#hidebuttonnn').hide();
             }

             if(matchingEntry.percentage_userid == 'FSA' || matchingEntry.percentage){

                $('#showsecondone').css('display','flex');
             }
           
             if (matchingEntry.percentage != 0) {
                 const fsaValue = matchingEntry.percentage;

                 $('input[name="fsa-status"]').each(function () {
                     const $checkbox = $(this);
                     const value = $checkbox.val();
                     const $label = $checkbox.closest('label');
                     const $textSpan = $label.find('.fsa-label-text');

                     if (value === fsaValue) {
                         $checkbox.prop('checked', true).prop('disabled', true).hide();

                         $label.find('.tick-icon').remove();
                         $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
                         $('.success-message1').css('display','none');
                         $label.find('.fsa-success-br').remove(); // ✅ remove previous <br>

                         // ✅ Add tick icon inside label using inline-flex
                         const tickIcon = `
                             <svg class="tick-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                 <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                     d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                             </svg>
                         `;
                         $textSpan.before(tickIcon);

                         

                         if (fsaValue === '1') {
                         
                             $('.success-message1').css('display', 'inline-flex');

                             $("input[type='checkbox'][value='2']").prop('disabled', true);
                             $("input[type='checkbox'][value='3']").prop('disabled', true);
                             $("input[type='checkbox'][value='4']").prop('disabled', true);

                         }
                      if (fsaValue === '2') {
                         $('.success-message2').css('display', 'inline-flex');

                         $('.success-message22').css('display','block');
                         $("input[type='checkbox'][value='1']").prop('disabled', true);
                             $("input[type='checkbox'][value='3']").prop('disabled', true);
                             $("input[type='checkbox'][value='4']").prop('disabled', true);
                         //$textSpan.after(successMessage);
                     }

                     if (fsaValue === '3' || fsaValue === '4') {
                         // $('.success-message2').css('display','none');
                         // $('.success-message1').css('display','none');
                     //$textSpan.after(successMessage);
                     }
                    
                   

                     } else {
                       
                        $("input[type='checkbox']").prop('disabled', false);
                        

                        $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
                         $('.success-message1').css('display','none');
                        // $checkbox.prop('checked', false).prop('disabled', true).show();
                         $label.find('.tick-icon').remove();
                         // $('.success-message2').css('display','none');
                         // $('.success-message1').css('display','none');
                         $label.find('.fsa-success-br').remove(); // ✅ clean <br>
                     }
                 });

                // $('.div22done').show();
               //  $('.div22pending').hide();
             } else {
              
                     $('input[name="fsa-status"]').each(function () {
                         const $checkbox = $(this);
                         const $label = $checkbox.closest('label');
                         $checkbox.prop('checked', false).prop('disabled', false);
                         $label.find('.tick-icon').remove();
                         $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
                         $('.success-message1').css('display','none');
                         $label.find('.fsa-success-br').remove(); // ✅ clean <br>
                     });

                     const anyChecked = $('input[name="fsa-status"]:checked').length > 0;
                     if (!anyChecked) {
                         $('.div22done').hide();
                         $('.div22pending').show();
                     }
                 }

             }





             if (matchingEntry.percentage == '2' || matchingEntry.percentage == '1') {
   

                if (matchingEntry.percentage == '1') {
                         
                         $('.success-message1').css('display', 'inline-flex');
                         $("input[type='checkbox'][value='2']").prop('disabled', true);
                          //   $("input[type='checkbox'][value='3']").prop('disabled', true);
                            // $("input[type='checkbox'][value='4']").prop('disabled', true);
                            
         
                     }
                  if (matchingEntry.percentage == '2') {
                     $('.success-message2').css('display', 'inline-flex');

                     $('.success-message22').css('display','block');
                     $("input[type='checkbox'][value='1']").prop('disabled', true);
                             $("input[type='checkbox'][value='1']").prop('disabled', true);
                            // $("input[type='checkbox'][value='4']").prop('disabled', true);
                     //$textSpan.after(successMessage);
                 }


             }else{
                if (matchingEntry.percentage == '3' || matchingEntry.percentage == '4') {
                    if(matchingEntry.percentage == '3'){
                        $("input[type='checkbox'][value='4']").prop('disabled', true);

                    }else{
                        $("input[type='checkbox'][value='3']").prop('disabled', true);

                    }
                }

                $('.success-message2').css('display','none'); $('.success-message22').css('display','none');
                         $('.success-message1').css('display','none');
                        
             }



            



                    }
                })

                        var data2 = '';
                        if (matchingEntry1) {
                            data2 = '';

                        } else {
                            data2 =
                                `<div class="sub-tk-msg" 
style="font-size:14px;font-weight: 600;color: #7d7d7d;padding: 0px 0;left: 48px;
position: relative;">Please raise FSA Review on Asana.</div>  
<button onclick="subtask_create('${matchingEntry.id}','${matchingEntry.email}')" id="btnsief" style="background: #0069d9; padding: 10px 14px; border: none; border-radius: 6px; color: #fff; margin: 9px 17px 0px 45px; font-weight: bold; width: 65%; cursor: pointer; display: flex; align-items: center; justify-content: center;gap: 10px;">
  Create Subtask
  <img src="https://smarthub.rn-test.com/images/asana_logo.svg" style="width: 66px; height: 15px;" alt="logo">
</button>
 `;
                        }
                        $.ajax({
                            
                            type: "get",
                            url: "{{ route('fsacheck') }}",
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                               gid:$('#gid').text(),gid4:$('#gid4').text(),
                                uid: matchingEntry.userid,
                            },
                            success: function(response) {
                                $('#status4').html('<b>Status:</b><span>' + response.status + '</span>');
                                console.log(response);
                                var varible='<ul style="text-align: left;">';
                                if (response.fsacheck == 'No') {
                                    varible+='<li> <b>FSA - NO</b>&nbsp;&nbsp;</li>' ;
                                }else{
                                     varible+='<li> <b>FSA - YES</b>&nbsp;&nbsp;</li>' ;  
                                }
                                
                                $('#slackLinkk').attr('href', response.asanaLink);
                                if (response.stdpayment == 'Yes' || response.status =='Completed') {
                                    
                                    $('.sub-tk-msg').css('display','none');
                                    $('#btnsief').css('display','none')              
                                    $('.div2done').css('display', 'block');
                                    $('.div2pending').css('display', 'none');
                                    $('#div2text').text('Completed');
                                    $('#numberdiv2').css('background', '#0069d9');
                                    $('#div2number').css('color', '#fff');
                                   
                                }else if(matchingEntry1){
                                    $('.div2done').css('display', 'block');
                                    $('.div2pending').css('display', 'none');
                                    $('#div2text').text('Admin Action Completed');
                                    $('#numberdiv2').css('background', '#ccc');
                                    $('#div2number').css('color', '#000'); 
                                }
                                else{
                                   
                                    $('.div2done').css('display', 'none');
                                    $('.div2pending').css('display', 'block');
                                    $('#div2text').text('Admin Action Needed');
                                    $('#numberdiv2').css('background', '#ccc');
                                    $('#div2number').css('color', '#000'); 
                                }
                                
                                if (response.stdpayment == 'Yes') {
                                    varible+=' <li> <b> Is the User in Standard Payment List? </b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>   <span  style="padding: 3px 1rem;background: green;color: #fff;border-radius: 5px;font-weight: 600;" >Yes</span> </li>' ;
                                }else{
                                     varible+=`<li> <b> Is the User in Standard Payment List? </b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>   <span  style="padding: 3px 1rem;background: #f40505;color: #fff;border-radius: 5px;font-weight: 600;" >No</span> </li></ul>${data2}` ;  
                                }
                                $('#div2sub').html(`

${varible}



`);

                        }
                        })


                      
$('.sub-tk-msg11').html(`
<div 
style="font-weight: 600;color: #7d7d7d;padding: 7px 0;position: relative;">
Subtask Created..</div>

<div style="margin: -9px 0 0 0px;padding: 10px 0; ">
<ul style="list-style: none;text-align: initial;">
    <li><b>Assignee:</b> Bryan</li>
    <!--li><b>Description:</b> Can you Please check the <br>userid(72567) for the FSA Payment Tracker?</li-->
    <li id="status4"></li>
</ul>
</div>

<div style="display:flex;gap:2%">       

<div style="cursor: pointer;color: #1010ffde;" ><span  id="request5" onclick="request5()" style="padding: 8px 1rem;  background: #0069d9;  color: #fff;  border-radius: 5px;  font-weight: 600;">View Comments</span>
<span onclick="request5_d()" id="request5_d" style="padding: 8px 1rem;  background: #0069d9;  color: #fff;  border-radius: 5px;  font-weight: 600;display:none">Hide Comments</span>
</div>
<div id="fsaapprove1" style="cursor: pointer;color: #1010ffde;margin: auto 0;" onclick="request6('${matchingEntry.id}')"><span id="fsaapprove" style="padding: 8px 1rem;background: #158a1d;color: #fff;border-radius: 5px;font-weight: 600;" >Approve</span></div>
<div id="rejectfsa" style="cursor: pointer;color: #1010ffde;margin: auto 0;" onclick="request7('${matchingEntry.username}','${matchingEntry.id}','${matchingEntry.email}')"><span  style="padding: 8px 1rem;background: #f40505;color: #fff;border-radius: 5px;font-weight: 600;" id="rejectfsa1">Deny</span></div>

</div>
`);




                  
                       
                        console.log(analysisData2);
                        var data4 = '';
                      
                        //if (matchingEntry3.email_to != matchingEntry.email) {
                            $.ajax({
                            // url: "../settingmail.php",
                            // method: "POST",
                            type: "post",
                            url: "{{ route('uncategorised') }}",
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                                ref: "sgsgsg",
                                usuid: matchingEntry.email,

                            },
                            success: function(result) {



                             

                                if(result.ememail_data){
                                    data4 = ` <li> <b> Is this Associated Email Address? </b>&nbsp;&nbsp;&nbsp;&nbsp;
         <span style="padding: 3px 1rem; background:#158a1d; color: #fff; border-radius: 5px; font-weight: 600;">
     YES
</span> </li>`;
                                }else{
                                    data4 = `  <li> <b> Is this Associated Email Address? </b>&nbsp;&nbsp;&nbsp;&nbsp;
         <span style="padding: 3px 1rem; background:#f40505; color: #fff; border-radius: 5px; font-weight: 600;">
     NO
</span> </li>`;
                                }
    }
})
                        
                       // }


                        $('#div3sub').html(`
<ul style="text-align: left;">
<li> <b>Revenue request came from (email address)?</b>  ${matchingEntry.email}&nbsp;&nbsp;
</li>
<li> <b> Is this Registered Email Address from RN? </b>&nbsp;
<span style="padding: 3px 3rem; background: ${matchingEntry.email === matchingEntry.email ? '#158a1d' : '#f40505'}; color: #fff; border-radius: 5px; font-weight: 600;">
      ${matchingEntry.email === matchingEntry.email ? 'Yes' : 'No'}
</span> 
</li> 
${data4}
</ul>
<div class="sub-tk-msg3" style="display:none;font-size:14px;font-weight: 600;color: #7d7d7d;padding: 7px 0;left: 2px;position: relative;">
Please Raise UPC & Email Address on Slack Channel.</div>  
<button onclick="slack_create('${matchingEntry.userid}','${matchingEntry.username}','${matchingEntry.email}','${matchingEntry.id}')" id="btnsief1" style="background: #fff;display:none;padding: 10px 14px;border: none;border-radius: 6px;color: black;margin: 9px 17px 0px -7px;font-weight:bold;width: 81%;cursor: pointer;">#as-support<span><img src="https://smarthub.rn-test.com/images/slack.png" style="left: 9px;width: 36px;height: 30px;position: relative;" alt="logo"></span></button>  
`);
                        if (matchingEntry.email != matchingEntry.email) {
                            $('#btnsief1').css('display', 'block');
                            $('.sub-tk-msg3').css('display', 'block');
                            $('.div3done').css('display', 'none');
                            $('.div3pending').css('display', 'block');
                            $('#div3text').text('Admin Action needed');
                            $('#numberdiv3').css('background', '#ccc');
                            $('#div3number').css('color', 'black');

                        }
                        $('#sub-tk-msg13').html(`
<div style="display: flex; gap: 20px;">                                                    
<div style="cursor: pointer;color: #1010ffde;" ><span  id="request15" onclick="request15()" style="padding: 8px 1rem;  background: #0069d9;  color: #fff;  border-radius: 5px;  font-weight: 600;">View Comments</span>
<span onclick="request15_d()" id="request15_d" style="padding: 8px 1rem;  background: #0069d9;  color: #fff;  border-radius: 5px;  font-weight: 600;display:none">View Comments</span>
</div>
<div id="approveslack1" style="cursor: pointer;color: #1010ffde;margin: auto 0;" onclick="request16(${matchingEntry.id})"><span id="approveslack" style="padding: 8px 1rem;background: #158a1d;color: #fff;border-radius: 5px;font-weight: 600;" >Approve</span></div>
<div id="rejectslack" style="cursor: pointer;color: #1010ffde;margin: auto 0;" onclick="request17()"><span  style="padding: 8px 1rem;background: #f40505;color: #fff;border-radius: 5px;font-weight: 600;" >Deny</span></div>
`);
                        if (matchingEntry.email == matchingEntry.email) {
                            $('.sub-tk-msg3').css('display', 'none');
                        }
                        var matchingEntry4 = analysisData3.find(function(item) {
                            return item.form_id === formId;
                        });
                        if (matchingEntry4) {
                            $('#btnsief1').css('display', 'none');
                            $('.sub-tk-msg3').css('display', 'none');
                            $('#sub-tk-msg13').css('display', 'block');
                            $('.div3done').css('display', 'block');
                            $('.div3pending').css('display', 'none');
                            $('#div3text').text('Admin Action Completed');
                            $('#ts').text(matchingEntry4.message_ts);
                        }  
                        function extractUPCid(data) {
  return data.map(item => {
    // Remove outer quotes and unescape the JSON string
    const cleanedJsonString = item.RevenueShareTo.replace(/^"|"$/g, '').replace(/\\"/g, '"');
    
    // Parse the JSON string into an object
    const jsonObject = JSON.parse(cleanedJsonString);
    
    // Return the UPCid value
    return jsonObject.UPCid;
  });
}

                        if (matchingEntry) {

                            $.ajax({
    type: 'GET',
    data: {
        formid: $('#formid').val(),
    },
    url: 'getallvalues_revenue',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(result) {

      
        const dataArray = result.data;

       const rn = 100 - result.data3[0].percentage;

const upcidValues = extractUPCid(dataArray);

       var  htmlContent ='';
         htmlContent = `<ul style="text-align: left;"><li ><b>USER ID: </b>${matchingEntry.userid}&nbsp;&nbsp;</li>`;

         $.each(upcidValues, function(index, upcid) {


htmlContent += `<li ><b>UPC: </b>${upcid}&nbsp;&nbsp;
</li>
<li style="display:flex;gap:5%"><p><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green" viewBox="0 0 24 24" style="position: absolute;z-index: 1;width: 20px;">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
</path>
</svg></p><p>Given UPC that has been provided on the Revenue Share Request belongs to UserId</p>
</li>`;
         })
htmlContent += `</ul>`;               
               
          
        $('#div4').html(`
        <ul style="text-align: left;">
            ${htmlContent}
        </ul>
        `);


        let datas = extractfull(dataArray);
console.log(datas);

        let htmlContent1 = '';
        let htmlContent11 = '';
// Function to get values based on the dynamic key
const getValue = (obj, prefix) => {
  const keys = Object.keys(obj);
  const key = keys.find(k => k.startsWith(prefix));
  return key ? obj[key] : '';
};


$('#div6sub').html(`
<div style="
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    display: grid;
">
<div>
<div style="font-weight: 600;">Absolute View</div>
<div style="
column-gap: 4px;
border-right: 1px solid #ccc;
    padding-right: 20px;
width: max-content;
    display: grid;
    grid-template-columns: 0fr 2fr 1fr;

">
<div>
<span>User Id:</span><br>
<strong class="frm_vals">${matchingEntry.userid}</strong>
</div> 

<div>
<span>Email Id:</span><br>
<strong class="frm_vals custom-tooltip" data-title="${matchingEntry.email}">${matchingEntry.email}</strong>
</div>

<div>
<span>Revenue Share Info:</span><br>
<strong class="frm_vals">${result.data3[0].percentage}%</strong>
</div>

<div style="display: flex;gap: 50%;grid-template-columns: 1fr 1fr 1fr;text-align: center;">
            <div>RN:<br><strong class="frm_vals">${rn}%</strong></div>
            <div>Referrer:<br><strong class="frm_vals">0%</strong></div>
        </div>




</div>
</div>

<div>
<div style="font-weight: 600;">User View</div>

<div style="
column-gap: 4px;
width: max-content;
    display: grid;
    grid-template-columns: 0fr 2fr 1fr;

">
<div>
<span>User Id:</span><br>
<strong class="frm_vals">${matchingEntry.userid}</strong>
</div> 

<div>
<span>Email Id:</span><br>
<strong class="frm_vals custom-tooltip" data-title="${matchingEntry.email}">${matchingEntry.email}</strong>
</div>

<div >
<span>Revenue Share Info:</span><br>
<strong class="frm_vals">100%</strong>
</div>
</div>
</div>
</div>
`);

let finalHtml = ''; // Initialize final container

datas.forEach(record => {
    const { UPCid, ISRC, RevenueShareTo } = record;
    const totalRevenueShare = result.data3[0].percentage;
    // const rnPercentage = 100 - totalRevenueShare;
    // let referrar = 0;

    const rnPercentage = result.routenote_val;
    const referrar = result.per_val;

    let htmlAbsolute = '';
    let htmlUser = '';
    let totalPercentageUsed = 0;
    let totalPercentageUsed1 = 0;
    
    let ISRC1;
console.log(ISRC);
// if (ISRC === 'Apply to all tracks') {
//     ISRC1 = 'All tracks';
// } else {
//     ISRC1 = ISRC;
// }


if (ISRC === 'Apply to all tracks') {
    ISRC1 =  `<span>ISRC: <strong>All tracks</strong></span><br>`;
} else {
  
if (ISRC === 'Select an option') {
    ISRC1 = '<br>';
}else{
    ISRC1 =  `<span>ISRC: <strong>${ISRC}</strong></span><br>`;

}
}
    
    // Header sections
    htmlAbsolute += `
        <div style="text-align: center;">
            <span>UPCid: <strong>${UPCid}</strong></span>
           ${ISRC1}
            <strong>Absolute View</strong>
        </div>
    `;

    htmlUser += `
        <div style="text-align: center;">
            <strong>User View</strong>
        </div><br>
    `;

    RevenueShareTo.forEach(user => {
        const userId = getValue(user, 'Userid');
        const userName = getValue(user, 'Username');
        const userPercentage = parseFloat(getValue(user, 'Percentage'));

        const userRevenueShare = (userPercentage / 100) * totalRevenueShare;
        totalPercentageUsed += userRevenueShare;
        totalPercentageUsed1 += userPercentage;

        // Absolute view
        htmlAbsolute += `
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                <div>UserID:<br><strong class="frm_vals">${userId}</strong></div>
                <div>UserName:<br><strong class="frm_vals custom-tooltip" data-title="${userName}">${userName}</strong></div>
                <div>Revenue Share:<br><strong class="frm_vals">${userRevenueShare.toFixed(2)}%</strong></div>
            </div>
        `;

        // User-facing view
        htmlUser += `
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                <div>UserID:<br><strong class="frm_vals">${userId}</strong></div>
                <div>UserName:<br><strong class="frm_vals custom-tooltip" data-title="${userName}">${userName}</strong></div>
                <div>Revenue Share:<br><strong class="frm_vals">${userPercentage.toFixed(2)}%</strong></div>
            </div>
        `;
    });

    // Remaining percentages
    const remaining1 = totalRevenueShare - totalPercentageUsed;
    const remaining2 = totalRevenueShare - totalPercentageUsed1 + rnPercentage;

    htmlAbsolute += `
   
        <div style="display: flex;gap:6%;grid-template-columns: 1fr 1fr 1fr;text-align: center;">
            <div>RN:<br><strong class="frm_vals">${rnPercentage}%</strong></div>
            <div>Referrer:<br><strong class="frm_vals">${referrar}%</strong></div>
        </div>
    `;

    htmlUser += `
       
    `;

    // Wrap both views side by side
    finalHtml += `
        <div style="display: flex; gap: 30px; margin-bottom: 40px;">
            <div style="flex: 1; border-right: 1px solid #ccc; padding-right: 20px;">${htmlAbsolute}</div>
            <div style="flex: 1; padding-left: 20px;">${htmlUser}</div>
        </div>
    `;
});

$('#div7sub').html(finalHtml);

// Loop through each record (assuming this is a data array you're processing)
// datas.forEach(record => {
//     const { UPCid, ISRC, RevenueShareTo } = record;
//     const totalRevenueShare = result.data3[0].percentage
//     const rnPercentage = 100 - totalRevenueShare ; 

   
//     let referrar = 0; // Default value

//     ; 
//     // Start the HTML content for UPCid and ISRC
//     htmlContent1 += `
//         <div style="width: 100%; text-align: center;">
//             <span>UPCid: <strong>${UPCid}</strong></span>
//             <span>ISRC: <strong>${ISRC}</strong></span><br>
//        <strong>Absolute View</strong>
//         </div>
//         <br>
//     `;
//     htmlContent11 += `
//         <div style="width: 100%; text-align: center;">
//       <strong>User View</strong>
         
//         </div>
//         <br>
//     `;
//     let totalPercentageUsed = 0; // Track how much of the 85% has been used by users
//     let totalPercentageUsed1 = 0;
//     // Loop through the RevenueShareTo users and calculate their shares
//     RevenueShareTo.forEach(user => {
//         const userId = getValue(user, 'Userid');
//         const userName = getValue(user, 'Username');
//         const userPercentage = parseFloat(getValue(user, 'Percentage'));  // The user's percentage of the 85%

//         // Calculate the user's share from the 85% total
//         const userRevenueShare = (userPercentage / 100) * totalRevenueShare;
//         const userRevenueShar1e = userPercentage ;
//         // Add this user's percentage to the total percentage used
//         totalPercentageUsed += userRevenueShare;
//         totalPercentageUsed1 += userRevenueShar1e;

//         // Add the user's info to the HTML content
//         htmlContent1 += `
//             <div style="width: 100%; gap: 40px; display: flex; text-align: center; margin-bottom: 20px;">
//                 <div>UserID: <br> <strong class="frm_vals">${userId}</strong></div>
//                 <div>UserName: <br><strong class="frm_vals">${userName}</strong></div>
//                 <div>Revenue Share: <br><strong class="frm_vals">${userRevenueShare.toFixed(2)}%</strong></div>
//             </div>
//         `;
//         htmlContent11 += `
//             <div style="width: 100%; gap: 40px; display: flex; text-align: center; margin-bottom: 20px;">
//                 <div>UserID: <br> <strong class="frm_vals">${userId}</strong></div>
//                 <div>UserName: <br><strong class="frm_vals">${userName}</strong></div>
//                 <div>Revenue Share: <br><strong class="frm_vals">${userRevenueShar1e.toFixed(2)}%</strong></div>
//             </div>
//         `;
//     });

//     // Calculate the remaining percentage for the detail user
//     const remainingPercentageForDetailUser = totalRevenueShare - totalPercentageUsed;
//     const remainingPercentageForDetailUser1 = totalRevenueShare - totalPercentageUsed1 +rnPercentage;

//     // Display the remaining percentage for the detail user (once, outside the loop)
//     htmlContent1 += `
//         <div style="width: 100%; gap: 40px; display: flex;text-align: center; margin-top: 20px;">
//             <div>UserID: <br> <strong class="frm_vals">${matchingEntry.userid}</strong></div>
//             <div>UserName: <br><strong class="frm_vals">${matchingEntry.username}</strong></div>
//             <div>Revenue Share: <br><strong class="frm_vals">${remainingPercentageForDetailUser.toFixed(2)}%</strong></div>
//         </div>
//     `;

//     // Display RN (fixed at 15%)
//     htmlContent1 += `
//     <br> <div style="display: flex;width: 10%; gap: 40px; text-align: center; margin-bottom: 20px;">
//             <div style="display: flex; gap: 13%;">RN: <strong class="frm_vals">${rnPercentage}%</strong></div>
//             <div style="display: flex;">Referrer: <strong class="frm_vals">${referrar}%</strong></div>
//         </div>
//     `;
//     htmlContent11 += `
//         <div style="width: 100%; gap: 40px; display: flex;text-align: center; margin-top: 20px;">
//             <div>UserID: <br> <strong class="frm_vals">${matchingEntry.userid}</strong></div>
//             <div>UserName: <br><strong class="frm_vals">${matchingEntry.username}</strong></div>
//             <div>Revenue Share: <br><strong class="frm_vals">${remainingPercentageForDetailUser1.toFixed(2)}%</strong></div>
//         </div>
//     `;
//     htmlContent1 += '<br><br>';
//   // Add a line break to separate records
// });


// $('#div7sub').html(`${htmlContent1}${htmlContent11}`);


    }
});

                        }

                     
                        $('#div5').html(`
<table  style="font-size: 14px;text-align: center" class="stripe bordered">
                    <thead
                        style="width: 100%;background-color: #807a7a; justify-content: space-between;color: #fff;font-size: 14px; font-weight: 500;text-align: center;">
                        <tr>             
                            <th style="width:10%">USER ID</th>
                            <th style="width:10%">USERNAME</th>
                            <th style="width:10%">Match</th>
                        </tr>
                    </thead>
                    <tbody >
                       
                            <tr>
                                <td>${matchingEntry.userid}</td>
                                <td>${matchingEntry.username}</td>
                                
                                <td style="
    display: flex;
    justify-content: center;
"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green" viewBox="0 0 24 24" style="z-index: 1;width: 20px;">
                                        <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                        </path>
                                    </svg></td>

                            </tr>

</tbody>
</table>
`);
      




                    

                 





                        if (matchingEntry.asana_confirm == '1') {
                            console.log(matchingEntry.asana_confirm);
                            $('#rejectfsa').css('display', 'none');
                            $('.div3done').css('display', 'block');
                            $('.div3pending').css('display', 'none');
                            $('#div2text').text('Completed');

                            $('#numberdiv2').css('background', '#0069d9');
                            $('#div2number').css('color', '#fff');
                            $('#fsaapprove').text('Approved');
                            $('#fsaapprove1').css({
                                'pointer-events': 'none',
                                'cursor': 'not-allowed',
                            });
                        }

                        if (matchingEntry.asana_confirm == '2') {
                            console.log(matchingEntry.asana_confirm);
                            $('#fsaapprove1').css('display', 'none');
                            $('.div3done').css('display', 'block');
                            $('.div3pending').css('display', 'none');
                            $('#div2text').text('Completed');

                            $('#numberdiv2').css('background', '#0069d9');
                            $('#div2number').css('color', '#fff');
                            $('#rejectfsa1').text('Denied');
                            $('#rejectfsa').css({
                                'pointer-events': 'none',
                                'cursor': 'not-allowed',
                            });
                        }

                        if (matchingEntry.slack_confirm == '1') {
                            $('#rejectslack').css('display', 'none');
                            $('.div3done').css('display', 'block');
                            $('.div3pending').css('display', 'none');
                            $('#div3text').text('Completed');

                            $('#numberdiv3').css('background', '#0069d9');
                            $('#div3number').css('color', '#fff');
                            $('#approveslack').text('Approved');
                            $('#approveslack1').css({
                                'pointer-events': 'none',
                                'cursor': 'not-allowed',
                            });
                        }
                        
                   
           


                        var matchingEntry4 = analysisData4.find(function(item) {
                            return item.form_id === matchingEntry.id && item.type === 'revenue';
                        })
                        console.log('testttt',matchingEntry4);
                        if (matchingEntry4) {
                    $('#reject').css('display', 'none');
                    $('#request').css('display', 'none');
                    $('#approve').css('display', 'none');
                    $('#divlasttext').css('display', 'flex');
                    if (matchingEntry4.status == 'approve') {
                        $('#approve').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                         $('#divlasttext').css('display', 'flex');
                         $('#textfinal').text('Approved');
                       // $('#approvetext').text('Approved & Assigned it to Luna');
                       // $('#reject').css('display', 'none');
                       // $('#request').css('display', 'none');
                    } else if (matchingEntry4.status == 'request') {
                        $('#request').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                        $('#divlasttext').css('display', 'flex');
                         $('#textfinal').text('Requested Information');
                        // $('#requesttext').text('Requested Information');

                        // $('#approve').css('display', 'none');
                        // $('#reject').css('display', 'none');
                        // $('#request').css('display', 'block');
                    } else {

                        $('#reject').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                        $('#divlasttext').css('display', 'flex');
                       
                        if(matchingEntry4.status == 'Denied'){
                            if(matchingEntry.percentage == '2'){
                            $('#reject').css('display', 'flex');
                    $('#request').css('display', 'flex');
                    $('#approve').css('display', 'flex');
                    $('#divlasttext').css('display', 'none');
                            }

                            $('#textfinal').text('Denied');
                        }else{
                            $('#textfinal').text('Rejected');

                        }
                        
                        // $('#rejecttext').text('Rejected');

                        // $('#approve').css('display', 'none');
                        // // $('#reject').css('display', 'block');
                        // $('#request').css('display', 'none');

                    }
                } else {
                    $('#divlasttext').css('display', 'none');
                    $('#reject').css('display', 'flex');
                    $('#request').css('display', 'flex');
                    $('#approve').css('display', 'flex');
                    $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
     if(!(matchingEntry.percentage)) {
                
              
                $('#request').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                    $('#reject').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                $('#approve').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });


           }
           else{
            if(matchingEntry.percentage == '2'){

$('#request').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

$('#reject').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

$('#approve').css({
'pointer-events': 'none',
'cursor': 'not-allowed',
});

}
           }




           if(!(matchingEntry.percentage_userid)) {
                
              
                $('#request').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                    $('#reject').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });

                $('#approve').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });


           }
           else{
            if(matchingEntry.percentage_userid == 'No issue in Flag'){
            $('#approve').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#request').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });
                        $('#reject').css({
                            'pointer-events': '',
                            'cursor': 'pointer',
                        });

                    }
           }










                }


                    }

                })




            });

            let requestEditor, rejectEditor;

  // Whitelist font sizes
  const Size = Quill.import('formats/size');
  Size.whitelist = ['small', 'normal', 'large', 'huge', 'medium-large'];
  Quill.register(Size, true);

  document.addEventListener('DOMContentLoaded', function () {
    // Initialize Quill editors
    requestEditor = new Quill('#requestname', {
      theme: 'snow',
      modules: {
        toolbar: '#toolbar-request'
      },
      placeholder: 'Compose your message here...'
    });

    rejectEditor = new Quill('#rejectname', {
      theme: 'snow',
      modules: {
        toolbar: '#toolbar-reject'
      },
      placeholder: 'Compose your rejection message here...'
    });

    // Toggle source button for request editor only
    document.getElementById('toggle-source').addEventListener('click', function () {
        const isSourceMode = this.classList.contains('source-mode');
        const quillContainer = document.getElementById('requestname');
        const sourceTextarea = document.getElementById('request-source');
        const toolbarButtons = document.querySelectorAll('#toolbar-request button, #toolbar-request select');
        const toolbarPickers = document.querySelectorAll('#toolbar-request .ql-picker');

        if (!isSourceMode) {
            // Switch to source mode
            sourceTextarea.value = requestEditor.root.innerHTML;
            quillContainer.style.display = 'none';
            sourceTextarea.style.display = 'block';
            this.classList.add('source-mode');

            // Disable all toolbar buttons except this one
            toolbarButtons.forEach(btn => {
            if (btn !== this) {
                btn.disabled = true;
                btn.style.opacity = '0.5';
                btn.style.pointerEvents = 'none';
            }
            });

            // Disable all .ql-picker dropdowns (font, size, color, etc.)
            toolbarPickers.forEach(picker => {
            picker.classList.add('ql-disabled');
            picker.style.opacity = '0.5';
            picker.style.pointerEvents = 'none';
            });

            // Highlight the toggle button
            this.style.border = '2px solid #1355AC';
            this.style.color = '#1355AC';
            this.style.borderRadius = '5px';
        } else {
            // Switch back to editor mode
            requestEditor.clipboard.dangerouslyPasteHTML(sourceTextarea.value);
            quillContainer.style.display = 'block';
            sourceTextarea.style.display = 'none';
            this.classList.remove('source-mode');

            // Re-enable all toolbar buttons
            toolbarButtons.forEach(btn => {
            btn.disabled = false;
            btn.style.opacity = '';
            btn.style.pointerEvents = '';
            });

            // Re-enable all .ql-picker dropdowns
            toolbarPickers.forEach(picker => {
            picker.classList.remove('ql-disabled');
            picker.style.opacity = '';
            picker.style.pointerEvents = '';
            });

            // Remove toggle button highlight
            this.style.border = '';
            this.style.color = '';
            this.style.borderRadius = '';
        }
     });

    document.getElementById('toggle-reject-source').addEventListener('click', function () {
        const isSourceMode = this.classList.contains('source-mode');
        const quillContainer = document.getElementById('rejectname');
        const sourceTextarea = document.getElementById('reject-source');
        const toolbarButtons = document.querySelectorAll('#toolbar-reject button, #toolbar-reject select');
        const toolbarPickers = document.querySelectorAll('#toolbar-reject .ql-picker');

        if (!isSourceMode) {
            // Switch to source mode
            sourceTextarea.value = rejectEditor.root.innerHTML;
            quillContainer.style.display = 'none';
            sourceTextarea.style.display = 'block';
            this.classList.add('source-mode');

            // Disable all toolbar buttons except this one
            toolbarButtons.forEach(btn => {
            if (btn !== this) {
                btn.disabled = true;
                btn.style.opacity = '0.5';
                btn.style.pointerEvents = 'none';
            }
            });

            // Disable all .ql-picker dropdowns (font, size, color, etc.)
            toolbarPickers.forEach(picker => {
            picker.classList.add('ql-disabled');
            picker.style.opacity = '0.5';
            picker.style.pointerEvents = 'none';
            });

            // Highlight the toggle button
            this.style.border = '2px solid #1355AC';
            this.style.color = '#1355AC';
            this.style.borderRadius = '5px';
        } else {
            // Switch back to editor mode
            rejectEditor.clipboard.dangerouslyPasteHTML(sourceTextarea.value);
            quillContainer.style.display = 'block';
            sourceTextarea.style.display = 'none';
            this.classList.remove('source-mode');

            // Re-enable all toolbar buttons
            toolbarButtons.forEach(btn => {
            btn.disabled = false;
            btn.style.opacity = '';
            btn.style.pointerEvents = '';
            });

            // Re-enable all .ql-picker dropdowns
            toolbarPickers.forEach(picker => {
            picker.classList.remove('ql-disabled');
            picker.style.opacity = '';
            picker.style.pointerEvents = '';
            });

            // Remove toggle button highlight
            this.style.border = '';
            this.style.color = '';
            this.style.borderRadius = '';
        }
     });
  });

  // Toggle source mode for reject editor





            function request() {
                var analysisData = <?php echo json_encode($data); ?>;
            var formId = $('#formid').val();
            var username = $('#usename').val();
            var matchingEntry = analysisData.find(function(item) {
                    return item.id == formId;
                });
                console.log(matchingEntry);
                $('#requestto').text(matchingEntry.email);
                $('.modal-dialog').css('max-width','500px');
                    $('.modal-dialog').css('magin','auto'); $('.modal-dialog').css('transition','max-width 0.4s');
                    $('.modal-dialog').css('left','');
                    

                $('#requestmail').modal('show');
                $('#analysismodal1').modal('hide');
            }

            function reject() {
                var analysisData = <?php echo json_encode($data); ?>;
                $('#toolbar').css('display', 'block');
            var formId = $('#formid').val();
            var username = $('#usename').val();
            var matchingEntry = analysisData.find(function(item) {
                    return item.id == formId;
                });
                console.log(matchingEntry);
                $('#rejectto').text(matchingEntry.email);

                $('.modal-dialog').css('max-width','500px');
                    $('.modal-dialog').css('magin','auto'); $('.modal-dialog').css('transition','max-width 0.4s');
                    $('.modal-dialog').css('left','');

                $('#rejectmail').modal('show');
                $('#analysismodal1').modal('hide');
                $('#approvemodal').modal('hide');

            }

            function mailsent(value) {
                if (value === 'reject') {
                    body = rejectEditor.root.innerHTML;
                to = $('#rejectto').text();
                } else if (value === 'request') {
                    body = requestEditor.root.innerHTML;
                to = $('#requestto').text();
                }else{
                var body = '';
                var to = $('#approveto').val();
            }

            $.ajax({
                type: 'POST',
                data: {
                    formid: $('#formid').val(),
                    value: value,
                    type: 'revenue',
                    body: encodeURIComponent(body),
                    to:to
                },
                    url: 'actiondone',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function(result) {
                        console.log(result);
                        $('.modal-dialog').css('max-width','500px');
                    $('.modal-dialog').css('magin','auto'); $('.modal-dialog').css('transition','max-width 0.4s');
                    $('.modal-dialog').css('left','');
                    


                        $('#mailsentinfo').modal('show');
                        $('#requestmail').modal('hide');
                        $('#rejectmail').modal('hide');
                    }
                })
            }

            function approve() {
                
                var analysisData = <?php echo json_encode($data); ?>;
            var formId = $('#formid').val();
            var matchingEntry = analysisData.find(function(item) {
                    return item.id == formId;
                });
                $('#approveto').val(matchingEntry.email);
                $.ajax({
                    type: 'POST',
                    data: {
                        formid: $('#formid').val(),
                        value: 'approve',
                        type: 'revenue',
                        to:$('#approveto').val()
                    },
                    url: 'actiondone',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function(result) {
                        $('.modal-dialog').css('max-width','500px');
                    $('.modal-dialog').css('magin','auto'); $('.modal-dialog').css('transition','max-width 0.4s');
                    $('.modal-dialog').css('left','');
                    

                        $('#approvemodal').modal('show');
                        $('#analysismodal1').modal('hide');
                    }
                })

            }
        </script>

    <body class="w-full h-1/2">

        <!-- Full Container Start -->
        <div class="full_container_start" style="width: 100%;overflow: scroll;height: 75vh;    padding: 17px;">

            <h4>Revenue Request OTL Forms</h4><br>




            <table id="yourDataTableId" style="font-size: 14px;" class="stripe bordered">
                <thead
                    style="width: 100%;background-color: #807a7a; justify-content: space-between;color: #fff;font-size: 14px; font-weight: 500;text-align: center;">
                    <tr>
                        <th style="width:5%">#</th>
                        <th style="width:10%">Form Type</th>
                        <th style="width:10%">UserName</th>
                        <th style="width:10%">Submitted On</th>
                        <th style="width:10%">Status</th>
                        <th style="width:15%">Form Details</th>
                        <th style="width:10%">Smarthub Report</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                @foreach ($data as $item)
                        <tr>
                            @if($item->type == '1' || $item->type == '2')
                            <td>{{ $item->ids }}</td>
                            @else
                            <td>{{ $item->id }}</td>
                            @endif

                            
                            <td>Revenue Request Form</td>
                            <td>{{ $item->username }}
                            </td>
                            <td>{{ $item->submitted_at }}</td>
                            <td>
                                @if($item->status == 'approve')
                                    Approved
                                @elseif($item->status == 'reject')
                                    Rejected
                                @elseif($item->status == '')
                                    Admin Action Needed
                                    @elseif($item->status == 'request')
                                    Requested Information
                                @else
                                    {{ $item->status }}
                                @endif
                            </td>

                            <td><button class="btn btn-secondary view" style="border-radius: 9px;background-color: #0069d9;"
                                    data-form-id="{{ $item->id }}">View Details</button></td>
                            <td><button class="btn btn-secondary analysis"
                                    style="width: 128px;height: 37px;border-radius: 9px;background-color: #0069d9;"
                                    data-form-id="{{ $item->id }}">View Details</button></td>

                        </tr>
                    @endforeach

                </tbody>
            </table>

        </div>


        <script>
            function revenue_request() {
                $('#revenueshare').toggle();
            }

            function revenue_request_close() {
                $('#revenueshare').toggle();
            }
        </script>


        <!-- Modal HTML -->
        <div class="modal fade" id="analysismodal1" tabindex="-1" role="dialog" aria-labelledby="customPopupLabel"
            aria-hidden="true" style="padding-right: 200px !important;">
            <div class="modal-dialog" role="document" style="left: -175px;">
                <div class="modal-content" style="width: 235%;height: ;margin-left: -7%;">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="customPopupLabel">Processing the Revenue Share
                            Request</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span onclick="close_mail()" style="color: #fff">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">




                        <div class="full">
                            <div style="display: flex;">
                                <div style="padding: 20px;position: relative;" class="hover_div">
                                    <span class="number" style="background-color: #0069d9;"> <span
                                            style="color:#fff;font-weight: bold">1</span></span>

                                    <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                        viewBox="0 0 24 24"
                                        style="position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                        <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                        </path>
                                    </svg>
                                    <span class="hover_txt">Completed</span>

                                </div>

                                <div style="padding: 20px;">
                                    <span id="sentence_1" onclick="toggleDiv()" style="font-size: medium;"> Checking Email
                                        Addresses</span>

                                    <div class="open_div" id="div1" style="display:grid;">

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

                            <div style="display: flex;">
                                <div style="padding: 20px;position: relative;" class="hover_div">
                                    <span class="number" id="number11" style="background-color: #ccc;"> <span
                                            class="number11" style="color:#000;font-weight: bold">2</span></span>

                                    <svg id="done11" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                        viewBox="0 0 24 24"
                                        style="position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;display: none;">
                                        <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                        </path>
                                    </svg>



                                    <svg id="notdone11" class=" exelen_half5 w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 24 24" style="position: absolute; z-index: 1; width: 18px; top: 35px; right: 20px; ">
                                        <path stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V8m0 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                        </path>
                                    </svg>


                                    <span class="hover_txt" id="hover11">Completed</span>

                                </div>

                                <div style="padding: 20px;">
                                    <span id="sentence_1" onclick="toggleDiv2()" style="font-size: medium;">Flag Review</span>

                                    <div class="open_div" id="div11" style="width:155%;display:grid;">

    
                                    </div>





                                <div class="approve_sale"
                                style="position: absolute;right: 5%;top: 11%;width: 40%;border-radius: 10px;overflow: hidden;border: 1px solid #bbb;display:none">
                                    <div style="padding: 10px; background: #0069d9;color: #fff">Action
                                        <button type="button" class="close">
                                            <span onclick="close_mail()" style="color: #fff">×</span>
                                        </button>
                                    </div>
<input type="hidden" id="formidss">
                                    <div id="saleapprove" style="padding: 20px;">
                                    Do you want to mark this as ‘No Inhibiting Flag Detected’?
                                    </div>

                                    <div class="modal-footer"
                                        style="padding: 0px;display: flex;gap: 0px;justify-content: end;">
                                        <button class="ok_btn" onclick="noissue()" id="approve_sale_ok">ok</button>
                                        <button class="ok_btn" style="background-color: #ccc" id="approve_sale_no"
                                            onclick="close_mail()">Cancel</button>

                                    </div>
                                </div>


                                    <div
                                    style="position: absolute;right: 5%;top: 9%;width: 30%;border-radius: 10px;overflow: hidden;border: 1px solid #bbb;display:none"id="email_done_div">
                                    <div style="padding: 10px; background: #0069d9;color: #fff">INFO</div>
                                    <div style="padding: 20px;" id="email_done_div_text">
                                        Email Sent Successfully
                                    </div>
                                </div>


                                    <div class="ass-crt-suf-popup33" id="noteligible"
                                        style="box-shadow: 4px 6px 11px -1px #ddd;display:none;overflow: hidden;border-radius: 7px;position: absolute;right: 7rem;top: 2rem; width: 43%;">


                                        <div id=" " style=" width: 100%;">
                                            <div class="modal-content" style="border: none !important;">
                                                <div class="modal-header">
                                                    <h5 style="color: white;" class="modal-title" id="customPopupLabel">
                                                        Email</h5>
                                                    <button type="button" class="close">
                                                        <span onclick="close_mail()" style="color: #fff">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <label class="modalabel">To:</label><br>
                                                    <label disabled class="login-form__input" id="notiemailto">
                                                        </label><br>
                                                    <label class="modalabel">Subject:</label><br>
                                                    <input class="login-form__input" type="text" name="Email"
                                                        id="subname" readonly size="59px" value="We couldn’t complete your revenue share request">
                                                    <br><br>
                                                    <label class="modalabel">Body:</label><br>
                                                    <div id="toolbar-notiemailname" style="    pointer-events: none;">
                                                    <span class="ql-formats">
                                                        <select class="ql-font"></select>
                                                        <select class="ql-size"></select>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-bold"></button>
                                                        <button class="ql-italic"></button>
                                                        <button class="ql-underline"></button>
                                                        <button class="ql-strike"></button>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <select class="ql-color"></select>
                                                        <select class="ql-background"></select>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-header" value="1"></button>
                                                        <button class="ql-header" value="2"></button>
                                                        <button class="ql-header" value="3"></button>
                                                        <button class="ql-blockquote"></button>
                                                        <button class="ql-code-block"></button>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-list" value="ordered"></button>
                                                        <button class="ql-list" value="bullet"></button>
                                                        <button class="ql-indent" value="-1"></button>
                                                        <button class="ql-indent" value="+1"></button>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-direction" value="rtl"></button>
                                                        <select class="ql-align"></select>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-link"></button>
                                                        <button class="ql-image"></button>
                                                        <button type="button" id="toggle-source-notiemailname" class="btn btn-sm btn-outline-secondary ml-2"><svg viewBox="0 0 18 18"><polyline class="ql-even ql-stroke" points="5 7 3 9 5 11"></polyline><polyline class="ql-even ql-stroke" points="13 7 15 9 13 11"></polyline><line class="ql-stroke" x1="10" x2="8" y1="5" y2="13"></line></svg></button>
                                                    </span>
                                                </div>

                                                <div id="notiemailname" style="max-height: 131px; overflow-y: auto;height: 200px;"></div>
                                            <textarea id="notiemailname-source" style="display:none; width: 100%; height: 200px; border-radius: 0px !important;"></textarea>

                                                <!-- <textarea class="login-form__input" type="text" name="Email" id="notiemailname" style="position: relative;height: 150px;width: 100%;text-align: left">
                                                </textarea> -->

                                                </div>
                                                
                                                <div class="modal-footer">

                                                    <!-- <button type="button" class="btn btn-secondary"
                                                        onclick="close()">Close</button> -->
                                                    <button type="button" class="btn btn-secondary"
                                                        onclick="close_mail()">Close</button>
                                                        <button type="submit" style="display:none" class="btn btn-secondary login maill" id="forfsa"
                                                        onclick="fsaverify2()">Send</button>
                                                    <button type="submit" class="btn btn-secondary login maill" id="fornotfsa"
                                                        onclick="noteligiblesend()">Send</button>
                                                </div>
                                            </div>
                                        </div>

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



                            <div style="display: none;" id="showsecondone">
                                <div style="padding: 20px;position: relative;" class="hover_div">

                                    <span class="number" id="number2div" style="padding:9px 10px !important;">
                                    
                                    <span
                                            style="color:#000;font-weight: bold" id="div22number">2a</span></span>

                                    <svg class="div22pending w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff"
                                        viewBox="0 0 24 24"
                                        style="position: absolute;z-index: 1;width: 18px;top: 35px;right: 20px;">
                                        <path stroke="red" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M12 13V8m0 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                    </svg>


                                    <svg class="div22done w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                        viewBox="0 0 24 24"
                                        style="display:none;position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                        <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                        </path>
                                    </svg>



                                    <span id="div22text" class="hover_txt">Admin Action Needed</span>


                                </div>
                                <!-- <span class="hidden" id="fsaverfifyy"></span> -->

<div style="padding: 20px; width: 100%; gap: 10px;">
    <span id="sentence_1" onclick="toggleDiv222()" style="font-size: medium;">
      Security Check process for 'FSA USER'
    </span>

    <style>
        .tooltip-custom {
    position: absolute;
    background: #333;
    color: #000000;
    padding: 3px 6px 3px 6px;
  
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}
        .fsa-option {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: nowrap;
        }

        .fsa-checkbox {
            width: 20px;
            height: 20px;
            accent-color: green;
            flex-shrink: 0;
            margin-left: 10px;
        }

        .tick-icon {
            display: inline-block;
            margin-left: -5px;
            width: 30px !important;
            height: 30px !important;
            fill: green;
            vertical-align: middle;
            flex-shrink: 0;
        }

        .fsa-label-text {
            flex: 1;
            margin-left: 5px;
        }

    </style>

<div id="div22_div" style="width: 100%;">
    <div id="div22" class="open_div" style="display: grid; width: auto; z-index: 11;">
        <div>

<!--  -->


        <label class="fsa-option" style="display: flex !important">
        <span class="fsa-icon">   <input type="checkbox" name="fsa-status" value="1" class="fsa-checkbox" onclick="onlyOne(this)">  </span>
            <span class="fsa-label-text">The user is not listed on the FSA tracker (meaning they need to be reviewed for eligibility to be moved back to the standard payment list)</span>
        </label>
        <p class="success-message1" style="font-size: 12px;display: none;align-items: center;justify-content: flex-start;gap: 5px;margin-left: 60px;line-height: 1.5;">
            Created SubTasks in "Asana" successfully
            <svg class="w-6 h-6 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="green" viewBox="0 0 24 24" style="z-index: 1;">
                <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
            </svg>
        </p>

        <br>
        <label class="fsa-option" style="display: flex !important">
        <span class="fsa-icon"> <input type="checkbox" name="fsa-status" value="2" class="fsa-checkbox" onclick="onlyOne(this)"></span>
            <span class="fsa-label-text">The user is listed on the FSA tracker, but hasn't been reviewed for eligibility to be moved back to the standard payment list</span>
        </label>
    
        <p class="success-message2" style="font-size: 12px;display: none;align-items: center;justify-content: flex-start;gap: 5px;margin-left: 60px;line-height: 1.5;">
            Created SubTasks in "Asana" successfully
            <svg class="w-6 h-6 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="green" viewBox="0 0 24 24" style="z-index: 1;">
                <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
            </svg>
        </p>
        <br> 
        <label class="fsa-option" style="display: flex !important">
        <span class="fsa-icon"> <input type="checkbox" name="fsa-status" value="3" class="fsa-checkbox" onclick="onlyOne(this)"></span>
            <span class="fsa-label-text">The user is listed on the FSA tracker, has been reviewed, and is remaining on the fraud payment list.</span>
        </label>
        <br>
        <label class="fsa-option" style="display: flex !important">
        <span class="fsa-icon"> <input type="checkbox" name="fsa-status" value="4" class="fsa-checkbox" onclick="onlyOne(this)"></span>
            <span class="fsa-label-text">The user is listed on the FSA tracker, has been reviewed, and has been moved back to the standard payment list</span>
        </label>
<br>
        <div>
         

            <div style="display: flex; gap: 10px; align-items: center; margin-top: -10px;">    
            <span  style="display: none;" id="fraud_list"></span>
            <div id="updatedone" onclick="fsaverify()" style="cursor: pointer; color: #0000ffbd;">
                    <span style="padding: 8px 1rem; background: #0069d9; color: #fff; border-radius: 5px; font-weight: 600;">
                    Update
                    </span>
                </div>

                <div id="hidebuttonnn" onclick="request445()" style="display: none; cursor: pointer; color: #0000ffbd;">
                    <span style="padding: 8px 1rem; background: #0069d9; color: #fff; border-radius: 5px; font-weight: 600;">
                        Hide Comments
                    </span>
                </div>

                <div id="showbuttonnn" onclick="request45()" style="cursor: pointer; color: #0000ffbd;">
                    <span style="padding: 8px 1rem; background: #0069d9; color: #fff; border-radius: 5px; font-weight: 600;">
                        View Comments
                    </span>
                </div>

                <div id="slackbuttonnn" style="">
                    <a href="#" id="slackLinkk" target="_blank" style="text-decoration: none; display: inline-block;">
                        <span style="padding: 6px 1rem; background: #0069d9; color: #fff; border-radius: 5px; font-weight: 600; display: flex; align-items: center;">
                            View in 
                            <img src="https://smarthub.rn-test.com/images/asana_logo.svg" alt="asana" style="height: 12px; margin-left: 5px;">
                        </span>
                    </a>
                </div>
            
            </div>
            <br>
            <p class="success-message22" style="
    color: red;
    font-weight: 800;
    display: none; 
    font-size: 14px;
">The closure process is paused until a verdict from the review is received.</p><br>
          </div>
        </div>
        <!-- <div style="color: red; margin-left: 116px; display: none;" id="alerttext">* Must completed this step</div> -->


                             <div class="sou-yt-pupopp" id="firstt" style="display: none;">
                                        <div class="yt-headerr">
                                            <div class="flex items-center gap-2 justify-center">
                                                <div>All Activity in</div>
                                                <img src="https://smarthub.rn-test.com/images/asana_logo.svg"
                                                    alt="ansana" class="h-3">
                                            </div>
                                        </div>
                                        <div id="data-containerr" class="space-y-3"
                                            style="height: 14rem;width: 100%;padding: 1.5rem;overflow:auto">


                                        </div>
                                        <div class="w-full">
                                            <div class="relative">
                                                <input type="text" id="texst_value"
                                                    class="w-full pl-3 pr-10 py-2 bg-transparent placeholder:text-slate-400 text-slate-600 text-sm border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
                                                    placeholder="comments *" />

                                                <svg xmlns="http://www.w3.org/2000/svg" Onclick="comment_postt()"
                                                    width="16" height="16" fill="currentColor"
                                                    class="bi bi-send absolute w-5 h-5 top-2.5 right-2.5 text-slate-600"
                                                    viewBox="0 0 16 16">
                                                    <path
                                                        d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z" />
                                                </svg>
                                            </div>
                                        </div>
                                </div>
                     </div>
            </div>

        </div>

</div>
<script>




$(document).on('mouseenter', '.flag-icon', function(e) {
    const color = $(this).data('color');
    const title = $(this).data('title');
    const tooltip = $('<div class="tooltip-custom"></div>').html(title);
    $('body').append(tooltip);

    // Position the tooltip near the cursor

    const rawTitle = $('<div>').html(title).text().trim(); // Extract text only

    if (!rawTitle) return;
    const altText = $(this).attr('alt'); 

    if(altText == 'Blocklisted' || altText == 'Blacklisted' || altText == 'Copyright infringeme'){
        tooltip.css({
        backgroundColor: color,
        color: '#fff',
        top: e.pageY + 10 + 'px',
        left: e.pageX + 10 + 'px'
    });
    }else{
        tooltip.css({
        backgroundColor: color,
        top: e.pageY + 10 + 'px',
        left: e.pageX + 10 + 'px'
    });
    }

    

    // Delay and fade-in effect
    setTimeout(() => {
        tooltip.css('opacity', 1);
    }, 500); // 500ms delay
});

$(document).on('mousemove', '.flag-icon', function(e) {
    $('.tooltip-custom').css({
        top: e.pageY + 10 + 'px',
        left: e.pageX + 10 + 'px'
    });
});

$(document).on('mouseleave', '.flag-icon', function() {
    $('.tooltip-custom').remove();
});
</script>

<script>
function onlyOne(checkbox) {
    const checkboxes = document.getElementsByName('fsa-status');
    const updateButton = document.getElementById('updatedone');

    checkboxes.forEach((item) => {
        if (item !== checkbox) item.checked = false;
    });

    const selectedValue = checkbox.checked ? checkbox.value : null;

    if (selectedValue === "1" || selectedValue === "2") {

updateButton.innerHTML = `
    <span style="padding: 8px 1rem; background: #0069d9; color: #fff; border-radius: 5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;">
        Create
        <img src="https://smarthub.rn-test.com/images/asana_logo.svg" alt="asana" style="height: 14px;">
    </span>
`;
} else {
updateButton.innerHTML = `
    <span style="padding: 8px 1rem; background: #0069d9; color: #fff; border-radius: 5px; font-weight: 600;">
        Update
    </span>
`;
}
}
</script>



                            <div style="display: none;">
                                <div style="padding: 20px;position: relative;" class="hover_div">

                                    <span class="number" id="numberdiv2" style="background-color: #ccc;"><span
                                            id="div2number" style="color:black;font-weight: bold">2</span></span>


                                    <svg class="div2done w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                        viewBox="0 0 24 24"
                                        style="display:none;position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                        <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                        </path>
                                    </svg>

                                    <svg class="div2pending exelen_half5 w-6 h-6 text-gray-800 dark:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" fill="#fff" viewBox="0 0 24 24"
                                        style="position: absolute;z-index: 1;width: 18px;top: 35px;right: 20px;">
                                        <path stroke="red" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M12 13V8m0 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                        </path>
                                    </svg>

                                    <span id="div2text" class="hover_txt">
                                        Admin Action Needed</span>

                                </div>

                                <div style="padding: 20px;width: 100%;gap: 10px;">
                                    <span id="sentence_1" onclick="toggleDiv2()" style="font-size: medium;">
                                        Is the Account FSA?</span>
                                    <span style="display:none" id="gid"></span>
                                    <span style="display:none" id="gid4"></span>
                                    <div style="width: 100%;display: flex;">
                                        <div id="div2" class="open_div" style=" display:grid;width: 36%;height: 10%;z-index:11">
                                            <div style="display: grid;" id="div2sub">


                                            </div>
                                            <div>
                                                <div class="sub-tk-msg11" style="display:none;">


                                                </div>
                                            </div>

                                        </div>

                                        <div class="box svg" style="display: none;margin-top: -31px;"></div>


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


                        <div class="sou-yt-pupop" id="sou-yt-pupop">
                            <div class="yt-header">
                                <div>All Activity in&nbsp;<span><img
                                            src="https://smarthub.rn-test.com/images/asana_logo.svg" style="height: 15px;"
                                            alt="logo" /></span></div>
                            </div>
                            <div id="data-container" style="height: 12rem;width: 100%;padding: 1.5rem;overflow:auto">

                            </div>
                            <div style="display: flex;align-items: baseline;gap: 1rem;">
                                <input type="text" id="texst_value" style="width: 85%;padding: 6px;"
                                    placeholder="comments *">
                                <button
                                    style="background: #0069d9;padding: 7px 14px;border: none;border-radius: 6px;color: #fff;margin-top:1rem"
                                    Onclick="comment_asana()">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
                                        <path
                                            d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z" />
                                    </svg>
                                </button>
                            </div>

                        </div>



                        <div id="approveFSA"
                            style="display:none;box-shadow: 4px 6px 11px -1px #ddd;overflow: hidden;border-radius: 7px;position: absolute;right: 19rem;top: 61rem;width: 25rem;">
                            <div style="padding: 10px;background: #4573d1;color: #fff">INFO</div><input type="hidden"
                                id="formid1">
                            <div style="padding: 0;background: #fff;">
                                <div style=" padding: 20px;border-bottom:1px solid #ccc" class="apr_info"> FSA Payment
                                    Tracker Confirmed via Asana.</div>
                                <div style="padding: 10px;display: flex;justify-content: end;gap:20px">
                                    <div class="apr_cancel btnn " onclick="fsacancel()">Cancel</div>
                                    <div class="apr_ok btnn "
                                        style="color:white;background:rgb(0, 105, 217);cursor:pointer;" onclick="fsaok()">
                                        ok</div>
                                </div>
                            </div>

                        </div>



                        <div style="display: none;">
                            <div style="padding: 20px;position: relative;" class="hover_div">



                                <span id="numberdiv3" class="number" style="background-color: #0069d9;"><span
                                        id="div3number" style="color:#fff;font-weight: bold">3</span></span>

                                <svg class="div3pending exelen_half5 w-6 h-6 text-gray-800 dark:text-white"
                                    aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    fill="#fff" viewBox="0 0 24 24"
                                    style="display:none;position: absolute;z-index: 1;width: 18px;top: 35px;right: 20px;">
                                    <path stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 13V8m0 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                </svg>

                                <svg class="div3done exelen_half5 w-6 h-6 text-gray-800 dark:text-white"
                                    aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    fill="green" viewBox="0 0 24 24"
                                    style="position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                    </path>
                                </svg>


                                <span class="hover_txt" id="div3text">Completed</span>

                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv3()" style="font-size: medium;">Are they an
                                    Artist Services Account Requests</span>
                                <span style="display:none" id="ts"></span>

                                <div class="open_div" id="div3" style="width: 26rem;display:grid;">

                                    <div style="width:100%;">

                                        <div style="width: 95%;text-align: center;">
                                            <div
                                                style="font-weight:bold;font-size: larger;left: -138px;position: relative;">
                                            </div>
                                            <div id="div3sub">

                                            </div>
                                            <div id="sub-tk-msg13" style="display:none;">


                                            </div>
                                        </div>

                                    </div>

                                </div>


                                <style>
                                    .ass-crt-suf-popup {
                                        height: auto;
                                        width: 28rem;
                                        background-color: #fff;
                                        position: absolute;
                                        right: 6rem;
                                        top: 17rem;
                                        border-radius: 8px;
                                        box-shadow: 0px 2px 7px 1px #dddddd96;
                                        display: none;
                                        overflow: hidden;
                                    }

                                    .ass-crt-suf-popup .suf-header {
                                        height: 3rem;
                                        width: 100%;
                                        background-color: #0069d9;
                                        color: #fff;
                                        padding: 12px 1rem;
                                        font-weight: bolder;
                                    }
                                </style>


                                <div class="sou-yt-pupop" style="display:none" id="sou-yt-pupop1">
                                    <div class="yt-header">
                                        <div>All Activity in&nbsp;<span><img
                                                    src="https://smarthub.rn-test.com/images/slack.png"
                                                    style="left: 9px;width: 36px;height: 30px;position: relative;"
                                                    alt="logo"></span></div>
                                    </div>
                                    <div id="data-container1"
                                        style="height: 12rem;width: 100%;padding: 1.5rem;overflow:auto">



                                    </div>
                                    <div style="display: flex;align-items: baseline;gap: 1rem;">
                                        <input type="hidden" id="formid"><input type="hidden" id="usename">
                                        <input type="text" id="commentslack" style="width: 85%;padding: 6px;"
                                            placeholder="comments *">
                                        <button
                                            style="background: #0069d9;padding: 7px 14px;border: none;border-radius: 6px;color: #fff;margin-top:1rem"
                                            Onclick="comment_slack()">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
                                                <path
                                                    d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z" />
                                            </svg>
                                        </button>
                                    </div>




                                </div>
                                <div id="confirmSLACK"
                                    style="display:none;box-shadow: 4px 6px 11px -1px #ddd;overflow: hidden;border-radius: 7px;position: absolute;right: 2rem;top: 13rem;width: 20rem;">
                                    <div style="padding: 10px;background: #4573d1;color: #fff">INFO</div><input
                                        type="hidden" id="formid2">
                                    <div style="padding: 0;background: #fff;">
                                        <div style=" padding: 20px;border-bottom:1px solid #ccc" class="apr_info"> Email
                                            Address confirmed via Slack.</div>
                                        <div style="padding: 10px;display: flex;justify-content: end;gap:20px">
                                            <div class="apr_cancel btnn " onclick="slackcancel()">Cancel</div>
                                            <div class="apr_ok btnn "
                                                style="color:white;background:rgb(0, 105, 217);cursor:pointer;"
                                                onclick="slackok()">ok</div>
                                        </div>
                                    </div>

                                </div>

                                <style>
                                    .btnn {
                                        background: #ccc;
                                        color: #000;
                                        padding: 5px 10px;
                                        border: none;
                                        border-radius: 6px;
                                    }
                                </style>


                                <div class="ass-crt-suf-popup3"
                                    style="width: 41%;box-shadow: 4px 6px 11px -1px #ddd;display:none;overflow: hidden;border-radius: 7px;position: absolute;right: 16rem;top: 58rem; ">


                                    <div id="" style=" width: 100%;">
                                        <div class="modal-content denied" style="border: none !important;">
                                            <div class="modal-header">
                                                <h5 style="color: white;" class="modal-title" id="customPopupLabel">
                                                Reject - FSA</h5>
                                                <button type="button" class="close">
                                                    <span onclick="close_mail()" style="color: #fff">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <label class="modalabel">To:</label><br>
                                                <label id="fsa2" disabled class="login-form__input">
                                                    mcltest022@gmail.com</label><br>
                                                <label class="modalabel">Subject:</label><br>
                                                <input class="login-form__input" type="text" name="Email"
                                                    id="name" size="59px" value="We couldn’t complete your revenue share request">
                                                <br><br>
                                                <label class="modalabel">Body:</label><br>
                                               
                                                   
                                                    <div id="toolbar-notiemailname1" style="    pointer-events: none;">
                                                    <span class="ql-formats">
                                                        <select class="ql-font"></select>
                                                        <select class="ql-size"></select>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-bold"></button>
                                                        <button class="ql-italic"></button>
                                                        <button class="ql-underline"></button>
                                                        <button class="ql-strike"></button>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <select class="ql-color"></select>
                                                        <select class="ql-background"></select>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-header" value="1"></button>
                                                        <button class="ql-header" value="2"></button>
                                                        <button class="ql-header" value="3"></button>
                                                        <button class="ql-blockquote"></button>
                                                        <button class="ql-code-block"></button>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-list" value="ordered"></button>
                                                        <button class="ql-list" value="bullet"></button>
                                                        <button class="ql-indent" value="-1"></button>
                                                        <button class="ql-indent" value="+1"></button>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-direction" value="rtl"></button>
                                                        <select class="ql-align"></select>
                                                    </span>
                                                    <span class="ql-formats">
                                                        <button class="ql-link"></button>
                                                        <button class="ql-image"></button>
                                                        <button type="button" id="toggle-source-notiemailname1" class="btn btn-sm btn-outline-secondary ml-2"><svg viewBox="0 0 18 18"><polyline class="ql-even ql-stroke" points="5 7 3 9 5 11"></polyline><polyline class="ql-even ql-stroke" points="13 7 15 9 13 11"></polyline><line class="ql-stroke" x1="10" x2="8" y1="5" y2="13"></line></svg></button>
                                                    </span>
                                                </div>

                                                <div id="notiemailname1" style="max-height: 131px; overflow-y: auto;height: 200px;"></div>
                                            <textarea id="notiemailname1-source" style="display:none; width: 100%; height: 200px; border-radius: 0px !important;"></textarea>

                                            </div>
                                            <div class="modal-footer">

                                                    <!-- <button type="button" class="btn btn-secondary"
                                                        onclick="close()">Close</button> -->
                                                    <button type="button" class="btn btn-secondary" onclick="close_mail()">Close</button>
                                                    <button type="submit" class="btn btn-secondary login maill" onclick="noteligiblesend1()">Send</button>
                                                </div>
                                                
                                            <!-- <div class="modal-footer">
                                                <button type="button" onclick="close_mail()" class="dnt_ok btnn dnt_info">Close</button>
                                                <button type="submit" class="dnt_ok btnn dnt_info">Send</button>
                                            </div> -->
                                        </div>
                                    </div>

                                </div>


                            </div>
                        </div>



                        <div style="display: none;">
                            <div style="padding: 20px;position: relative;" class="hover_div">



                                <span class="number" style="background-color:#0069d9;"><span  id="div4number" 
                                        style="color:#fff;font-weight: bold">4</span></span>


                                <svg class="earning_tick w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                    viewBox="0 0 24 24"
                                    style="position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
                                </svg>
                                <span class="hover_txt" id="action_6">Completed</span>



                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv4()" style="font-size: medium;">Individual Track
                                    Requests - Checking ISRC and UPC matches</span>

                                <div style="width: 100%;display:flex;">
                                    <div id="div4" class="open_div"
                                        style="height: 10%;z-index:11;text-align: center;width: 30rem;display:grid;">



                                    </div>

                                </div>
                            </div>
                        </div>
                        <div style="display: none;">
                            <div style="padding: 20px;position: relative;" class="hover_div">


                                <span class="number" style="background-color:#0069d9;"><span  id="div5number" 
                                        style="color:#fff;font-weight: bold">5</span></span>


                                <svg class="earning_tick w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                    viewBox="0 0 24 24"
                                    style="position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
                                </svg>
                                <span class="hover_txt" id="action_6">Completed</span>


                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv5()" style="font-size: medium;">Checking User ID
                                    and Username matches</span>

                                <div style="width: 100%;display:flex;">
                                    <div id="div5" class="open_div"
                                        style="height: 10%;z-index:11;width: 30rem;padding: 0;overflow: hidden;display:grid;">

                                    </div>

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

                        <div style="display: flex;">
                            <div style="padding: 20px;position: relative;" class="hover_div">



                                <span class="number half6" style="background-color:#0069d9;"><span id="half6"
                                        style="color:#fff;font-weight: bold">3</span></span>


                                <svg class="earning_tick w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                    viewBox="0 0 24 24"
                                    style="position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
                                </svg>
                                <span class="hover_txt" id="action_6">Completed</span>



                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv6()" style="font-size: medium;">Viewing the
                                    Existing Shares</span>

                                <div style="width: 100%;display:flex;">
                                    <div id="div6" class="open_div"
                                        style="height: 10%;z-index:11;text-align: center;width: 65rem;display:grid;">

                                        <div style="text-align: left;font-weight: 600;">
                                            Share details:
                                        </div>

                                        <div id="div6sub" style="display: flex; justify-content: space-around;">


                                        </div>


                                    </div>

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

                        <div style="display: flex;">
                            <div style="padding: 20px;position: relative;" class="hover_div">



                                <span class="number half6" style="background-color:#0069d9;"><span class="halflast" id="half6"
                                        style="color:#fff;font-weight: bold">4</span></span>

                                <svg class="earning_tick w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                    viewBox="0 0 24 24"
                                    style="position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
                                </svg>
                                <span class="hover_txt" id="action_6">Completed</span>



                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv7()" style="font-size: medium;">Requested
                                    Percentage Share</span>

                                <div style="width: 100%;display:flex;">
                                    <div id="div7" class="open_div"
                                        style="height: 10%;z-index:11;text-align: center;width: 65rem;display:grid;">

                                        <div style="font-weight: 600;padding: 20px 5px;text-align: left;">
                                            Revenue Share To
                                        </div>

                                        <div id="div7sub" style="width: 100%;" class="form_input">


                                        </div>
                                      

                                    </div>


                                </div>
                            </div>



                        </div>


                        <div id="divlasttext" style="display: none;">
                            <div style="padding: 20px;position: relative;" class="hover_div">

                                <span class="number " style="background:#0069d9"><span 
                                        style="color:white;font-weight: bold" id="divlasttext1">8</span></span>

                                <svg class="divlastdone w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="green"
                                    viewBox="0 0 24 24"
                                    style="position: absolute;z-index: 1;width: 20px;top: 35px;right: 20px;">
                                    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                                    </path>
                                </svg>
                           

                                <span class="hover_txt" >Completed</span>

                            </div>

                            <div style="padding: 20px;">
                                <span id="textfinal" style=" font-weight: 600;font-size: medium;"></span>

                                <div style="width: 100%;display:flex;">
                                   
                                  


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

                    <div style="display: flex;padding: 10px;justify-content: center;gap: 7px;">

                        <button id="approve" onclick="approve()" class="!h-[2.5rem] w-max rounded-md bg-green-600 !py-2 !px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none !ml-2 flex items-center gap-1" type="button">
                                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                    viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
                                </svg>
                                <div id="approvetext" class="font-sans text-xs">Approve & Apply Album and Tracks</div>
                            </button>
                            <button id="reject" onclick="reject()" class="!h-[2.5rem] w-max rounded-md bg-red-600 !py-2 !px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-red-700 focus:shadow-none active:bg-red-700 hover:bg-red-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none !ml-2 flex items-center gap-1" type="button">
                                <svg class="w-6 h-6 text-gray-800 dark:text-white " aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                viewBox="0 0 24 24">
                                <path fill-rule="evenodd"
                                    d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z"
                                    clip-rule="evenodd"></path></svg>
                                <div id="rejecttext" class="font-sans text-xs">Reject</div>
                            </button>
                            <button id="request" onclick="request()" class="!h-[2.5rem] w-max rounded-md bg-[#fcba03] !py-2 !px-4 border border-transparent text-center text-sm text-slate-800 transition-all shadow-md hover:shadow-lg focus:bg-amber-700 focus:shadow-none active:bg-amber-700 hover:bg-amber-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none !ml-2 flex items-center gap-1" type="button">
                                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                viewBox="0 0 24 24">
                                <path fill-rule="evenodd"
                                    d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z"
                                    clip-rule="evenodd"></path>
                                </svg>
                                <div id="rejecttext" class="text-white font-sans text-xs">Request Information</div>
                            </button>


                        {{--<button id="approve" class="ap_rej_btns" style="background: #00a000;height: 51px;display: flex;" onclick="approve()">

                            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
                            </svg>


                            <span id="approvetext">Approve &amp; Apply Album and Tracks</span></button>


                        <button id="reject" class="ap_rej_btns" style="background: #d41111;height: 50px;display: flex;" onclick="reject()">

                            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z" clip-rule="evenodd"></path>
                            </svg>


                            <span id="rejecttext"> Reject</span>
                        </button>

                        <button id="request" class="ap_rej_btns" style="background: #fcba03;height: 53px;display: flex;gap: 10%;" onclick="request()">

                            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z" clip-rule="evenodd"></path>
                            </svg>


                            <span id="requesttext" style="
    margin-left: -33px;
"> Request Information</span>
                        </button>
                    </div>--}}
                    <!-- <div style="display: flex;padding: 10px;justify-content: end;gap: 10px;">


                        <button id="approve" class="ap_rej_btns" style="background: #00a000;height: 40px;display: flex;" onclick="approve()">

                            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                viewBox="0 0 24 24">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                            </svg>


                            <span id="approvetext">Approve & Apply Album and Tracks</span></button>


                        <button id="reject" class="ap_rej_btns" style="background: #d41111;height: 40px;display: flex;" onclick="reject()">

                            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                viewBox="0 0 24 24">
                                <path fill-rule="evenodd"
                                    d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z"
                                    clip-rule="evenodd" />
                            </svg>


                            <span id="rejecttext"> Reject</span>
                        </button>

                        <button id="request" class="ap_rej_btns" style="background: #fcba03;height: 40px;display: flex;" onclick="request()">

                            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                viewBox="0 0 24 24">
                                <path fill-rule="evenodd"
                                    d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z"
                                    clip-rule="evenodd" />
                            </svg>


                            <span id="requesttext"> Request Information</span>
                        </button>
                    </div> -->

                </div>


                <div class="bar"
                    style="width: 6px;left: 52px;position: absolute;background-color: #0069d9;top: 94px;bottom:83px;">
                </div>




            </div>

        </div>
        <style>
             .frm_vals {
                padding: 3px 5px;
                background: #eee;
                border: none;
                border-radius: 5px;
                display: block;
                width: 100%;
            } 

            .ap_rej_btns {
                padding: 5px 5px;
                border: 1px solid;
                border-radius: 8px;
                color: #fff;
            }

            .form_input input {
                width: 95%;
                border: 1px solid #ccc;
                padding: 5px;
                border-radius: 6px;
                margin-top: 5px;
            }

            .user_detailss {
                display: flex;

                background: #f7f7f7;
                border-radius: 10px;
                padding: 10px;
            }

            .user_detailss span {
                margin: auto 0;
            }
        </style>




        </div>

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




        <!-- Modal HTML -->


        <style>
            .ass-crt-suf-popup {
                height: auto;
                width: 28rem;
                background-color: #fff;
                position: absolute;
                right: 6rem;
                top: 17rem;
                border-radius: 8px;
                box-shadow: 0px 2px 7px 1px #dddddd96;
                display: none;
                overflow: hidden;
            }

            .ass-crt-suf-popup .suf-header {
                height: 3rem;
                width: 100%;
                background-color: #0069d9;
                color: #fff;
                padding: 12px 1rem;
                font-weight: bolder;
            }
        </style>


        <style>
            .hover_div:hover {
                cursor: pointer;
            }

            .hover_div:hover .hover_txt {
                display: block;
                cursor: pointer;
                color: #01216a;
            }

            .hover_txt {
                width: max-content;
                left: 50px;
                top: 20px;
                display: none;
                position: absolute;
                z-index: 9999;
                background: white;
                padding: 3px 14px;
                box-shadow: 0px 0px 15px 0px;
                border-radius: 7px;
            }

            input {
                width: 100%;
            }
        </style>





        <div class="modal fade" id="approvemodal" tabindex="-1" role="dialog" aria-labelledby="customPopupLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width:130%">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="customPopupLabel">
                            INFO</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="color: white;">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="modal-body">
                        <input type="hidden" id="approveto">
                            Revenue Share Request Form Is Approved And Applied In Album & Tracks..
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" id="approvesend"
                                data-dismiss="modal">Close</button>
                        </div>

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





        <div class="modal fade" id="requestmail" tabindex="-1" role="dialog" aria-labelledby="customPopupLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document"
                style="max-width: 500px !important;left: 0 !important;transition: max-width 0.4s ease 0s;">
                <div class="modal-content" style="width:122%">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="customPopupLabel">INFO</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="color: white;">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <label class="modalabel">To:</label>
                        <label disabled="" class="login-form__input" id="requestto"> mcldevtest@gmail.com</label><br>
                        <label class="modalabel">Subject:</label>
                        <input class="login-form__input" type="text" name="Email" id="name" size="59px" disabled
                            value="We couldn't complete your revenue share request">
                        <br><br>
                        <label class="modalabel">Body:</label><br>

                    <div id="toolbar-request">
                        <span class="ql-formats">
                            <select class="ql-font"></select>
                            <select class="ql-size"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                            <button class="ql-strike"></button>
                        </span>
                        <span class="ql-formats">
                            <select class="ql-color"></select>
                            <select class="ql-background"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-header" value="1"></button>
                            <button class="ql-header" value="2"></button>
                            <button class="ql-header" value="3"></button>
                            <button class="ql-blockquote"></button>
                            <button class="ql-code-block"></button>
                            
                        </span>
                        <span class="ql-formats">
                            <button class="ql-list" value="ordered"></button>
                            <button class="ql-list" value="bullet"></button>
                            <button class="ql-indent" value="-1"></button>
                            <button class="ql-indent" value="+1"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-direction" value="rtl"></button>
                            <select class="ql-align"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-link"></button>
                            <button class="ql-image"></button>
                            <button type="button" id="toggle-source" class="btn btn-sm btn-outline-secondary ml-2"><svg viewBox="0 0 18 18"><polyline class="ql-even ql-stroke" points="5 7 3 9 5 11"></polyline><polyline class="ql-even ql-stroke" points="13 7 15 9 13 11"></polyline><line class="ql-stroke" x1="10" x2="8" y1="5" y2="13"></line></svg></button>
                        </span>
                    </div>


                    <div id="requestname" style="height: 200px;"></div>
                    <textarea id="request-source" style="display:none; width: 100%; height: 200px;border-radius: 0px !important;"></textarea>
     
           </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-secondary login maill"
                            onclick="mailsent('request')">Send</button>
                        <button type="button" class="btn btn-secondary" id="approvesend"
                            data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>





        <div class="modal fade" id="rejectmail" tabindex="-1" role="dialog" aria-labelledby="customPopupLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document"
                style="max-width: 500px !important;left: 0 !important;transition: max-width 0.4s ease 0s;">
                <div class="modal-content" style="width:122%">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="customPopupLabel">INFO</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="color: white;">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <label class="modalabel">To:</label>
                        <label disabled="" class="login-form__input" id="rejectto"> mcldevtest@gmail.com</label><br>
                        <label class="modalabel">Subject:</label>
                        <input class="login-form__input" type="text" name="Email" id="name" size="59px"
                            value="We couldn’t complete your revenue share request">
                        <br><br>
                        <label class="modalabel">Body:</label><br>

                        <div id="toolbar-reject">
                        <span class="ql-formats">
                            <select class="ql-font"></select>
                            <select class="ql-size"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                            <button class="ql-strike"></button>
                        </span>
                        <span class="ql-formats">
                            <select class="ql-color"></select>
                            <select class="ql-background"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-header" value="1"></button>
                            <button class="ql-header" value="2"></button>
                            <button class="ql-header" value="3"></button>
                            <button class="ql-blockquote"></button>
                            <button class="ql-code-block"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-list" value="ordered"></button>
                            <button class="ql-list" value="bullet"></button>
                            <button class="ql-indent" value="-1"></button>
                            <button class="ql-indent" value="+1"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-direction" value="rtl"></button>
                            <select class="ql-align"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-link"></button>
                            <button class="ql-image"></button>
                            <button type="button" id="toggle-reject-source" class="btn btn-sm btn-outline-secondary ml-2"><svg viewBox="0 0 18 18"><polyline class="ql-even ql-stroke" points="5 7 3 9 5 11"></polyline><polyline class="ql-even ql-stroke" points="13 7 15 9 13 11"></polyline><line class="ql-stroke" x1="10" x2="8" y1="5" y2="13"></line></svg></button>
                        </span>
                    </div>

                    <div id="rejectname" style="height: 200px;"></div>
                 <textarea id="reject-source" style="display:none; width: 100%; height: 200px; border-radius: 0px !important;"></textarea>
      
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-secondary login maill"
                            onclick="mailsent('reject')">Send</button>
                        <button type="button" class="btn btn-secondary" id="approvesend"
                            data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>






        <div class="modal fade" id="mailsentinfo" tabindex="-1" role="dialog" aria-labelledby="customPopupLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document"
                style="max-width: 500px !important;left: 0 !important;transition: max-width 0.4s ease 0s;">
                <div class="modal-content" style="">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="customPopupLabel">INFO</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="color: white;">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Email sent successfully.
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" id="approvesend"
                            data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal HTML -->


        </div>







        </div>
        </div>
        <!-- Full Container End -->











        <div class="modal fade" id="viewpop" tabindex="-1" role="dialog" aria-labelledby="customPopupLabel"
            aria-hidden="true" >
            <div class="modal-dialog" style="" role="document">
                <div class="modal-content" style="width:200% !important;margin-left: -49%;">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="customPopupLabel">Revenue Share Form
                            Details</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="color: white;">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- <div style="right: 10px;position: absolute;"><a id="exportdata" href=""> 
                            <img src="{{ asset('images/upload.png') }}" style="width: 30px;border-radius: 50%;box-shadow: 0 0 10px #bbb;"></a></div><br> -->
                        <div>

                            <div>
                                <div style="display: flex;">
                                    <strong style="width: 25%">
                                        Email
                                    </strong>:&nbsp;&nbsp;&nbsp;
                                    <span id="email" style="width: 70%">
                                    </span>
                                </div>
                                <div style="display: flex;">
                                    <strong style="width: 25%">
                                        User ID
                                    </strong>:&nbsp;&nbsp;&nbsp;
                                    <span id="userid" style="width: 70%">

                                    </span>
                                </div>
                                <div style="display: flex;">
                                    <strong style="width: 25%">
                                        User Name
                                    </strong>:&nbsp;&nbsp;&nbsp;
                                    <span id="username" style="width: 70%">

                                    </span>
                                </div>
                                <!-- <hr>
                                <div style="display: flex; ">
                                    <strong style="width: 30%">
                                        UPC
                                    </strong>
                                    <span id="upc" style="width: 70%">

                                    </span>
                                </div>
                                <div style="display: flex;">
                                    <strong style="width: 30%">
                                        ISRC
                                    </strong>
                                    <span id="isrc" style="width: 70%">

                                    </span>
                                </div> -->
                                <hr>

                                <div style="font-weight: 600;padding: 20px 0;">
                                    Revenue Share To
                                </div>
                                <div id="revenuedetails">
                                    
                                    <!-- <div id="revenuedetails1">  -->
                                    
                                </div> 
                            </div>
                        </div>


                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>






        </div>


    </body>

    </html>
<script>
    $('#div11').on('change', '#flagSelect', function() {
        const selectedFlag = $(this).val();
        if(selectedFlag == 'FSA')
   {
    $('#showsecondone').css('display','flex');
   }
   else{
    $('#showsecondone').css('display','none');
   }
    });
    $('#div11').on('change', '#flagSelect1', function() {
        const selectedFlag = $(this).val();
        if(selectedFlag == 'FSA')
   {
    $('#showsecondone').css('display','flex');
   }
   else{
    $('#showsecondone').css('display','none');
   }
    });
    $('#div11').on('change', '#flagSelect2', function() {
        const selectedFlag = $(this).val();
        if(selectedFlag == 'FSA')
   {
    $('#showsecondone').css('display','flex');
   }
   else{
    $('#showsecondone').css('display','none');
   }
    });
    $('#div11').on('change', '#flagSelect3', function() {
        const selectedFlag = $(this).val();
        if(selectedFlag == 'FSA')
   {
    $('#showsecondone').css('display','flex');
   }
   else{
    $('#showsecondone').css('display','none');
   }
    });
    $('#div11').on('change', '#flagSelect4', function() {
        const selectedFlag = $(this).val();
        if(selectedFlag == 'FSA')
   {
    $('#showsecondone').css('display','flex');
   }
   else{
    $('#showsecondone').css('display','none');
   }
    });

</script>

@endsection
