@extends('includes.layout')
@section('content')
    <style>
        /* slide nav bar css */
        #menu5 span {
            width: max-content !important;
        }

        .ok_btn {
            background-color: #0069d9;
            color: #fff;
            padding: 5px 20px;
            border: none;
            border-radius: 5px;
        }

        .sou-yt-pupop {
            width: 100%;

            height: 20rem;
            /* width: 39rem; */
            background-color: white;
            position: relative;
            top: auto;
            right: auto;
            box-shadow: 4px 6px 11px -1px #ddd;
            border-radius: 8px;
            padding: 1rem;
            display: none;
        }

        .sou-pay-pupop {
            height: 20rem;
            width: 100%;
            background-color: white;
            top: auto;
            right: auto;
            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%;
        }

        .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-radius: 10px;
            border: 0;
            overflow: hidden;
        }

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

        #yourDataTableId td {
            padding: 8px;
            border: 1px solid #ccc !important;
            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-body {
            z-index: 11;
        }

        .modal-content {
            /* box-shadow: 0px 0px 10px -2px #000 !important; */
            border-radius: 10px 10px 0 0 !important;
            border: none !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;
        }
    </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="{{ asset('css/stackpath.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": []
            });
        });
    </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>
          var analysisData = null;
            var analysisData1 = null;
            var analysisData2 = null;
        function toggleDiv() {
            $('.all_releases').hide();

            $('.approve_sale').hide();
            $('#div1').toggle();
            // $('#div2').hide();
            // $('#div3').hide();
            // $('#div5').hide();
            // $('#div4').hide();
            // $('#div6').hide();
            $('#request_div').hide();
            $('#send_mail').hide();
            $('.svg').hide();
            $('.svg2').hide();
            $('.svg3').hide();
            $('.modal-dialog').css('max-width', '500px');
            $('.sou-yt-pupop').hide();
            $('.sou-pay-pupop').hide();
            $('#unlink_mail').css('display', 'none');
            $('.ass-crt-suf-popup').hide();
        }

        function toggleDiv2() {
            $('.all_releases').hide();
            $('.approve_sale').hide();
            $('#div2').toggle();
            // $('#div1').hide();
            // $('#div5').hide();
            // $('#div3').hide();
            // $('#div4').hide();
            // $('#div6').hide();
            $('#request_div').hide();
            $('#send_mail').hide();
            $('#payment_div').hide();
            $('.svg').hide();
            $('.svg2').hide();
            $('.svg3').hide();
            $('.modal-dialog').css('max-width', '500px');
            $('.sou-yt-pupop').hide();
            $('.sou-pay-pupop').hide();
            $('#unlink_mail').css('display', 'none');
            $('.ass-crt-suf-popup').hide();
        }

        function toggleDiv6() {
            $('.all_releases').hide();
            $('.approve_sale').hide();

            //  $('#div6').css('display', 'grid');
            $('#div6').toggle();


            // $('#div1').hide();
            // $('#div2').hide();
            // $('#div3').hide();
            // $('#div5').hide();
            // $('#div4').hide();
            $('#request_div').hide();
            $('#send_mail').hide();
            $('#payment_div').hide();
            $('.svg').hide();
            $('.svg2').hide();
            $('.svg3').hide();
            $('.modal-dialog').css('max-width', '500px');
            $('.sou-yt-pupop').hide();
            $('.sou-pay-pupop').hide();
            $('#unlink_mail').css('display', 'none');
            $('.ass-crt-suf-popup').hide();
        }

        function toggleDiv3() {
            $('.all_releases').hide();
            $('.approve_sale').hide();
            $('#div3').toggle();
            // $('#div1').hide();
            // $('#div2').hide();
            // $('#div5').hide();
            // $('#div4').hide();
            // $('#div6').hide();
            $('#request_div').hide();
            $('#send_mail').hide();
            $('#payment_div').hide();
            $('.svg').hide();
            $('.svg2').hide();
            $('.svg3').hide();
            $('.modal-dialog').css('max-width', '500px');
            $('.sou-yt-pupop').hide();
            $('.sou-pay-pupop').hide();
            $('#unlink_mail').css('display', 'none');
            $('.ass-crt-suf-popup').hide();
        }

        function toggleDiv4() {


            $('#div4').toggle();
            // $('#div1').hide();
            // $('#div2').hide();
            // $('#div3').hide();
            // $('#div5').hide();
            // $('#div6').hide();
            $('#request_div').hide();
            $('#send_mail').hide();
            $('#payment_div').hide();
            $('.svg').hide();
            $('.svg2').hide();
            $('.svg3').hide();
            $('.modal-dialog').css('max-width', '500px');
            $('.sou-yt-pupop').hide();
            $('.sou-pay-pupop').hide();
            $('#unlink_mail').css('display', 'none');
            $('.ass-crt-suf-popup').hide();
        }

        function toggleDiv5() {
            $('.all_releases').hide();
            $('.approve_sale').hide();
            $('#unlink_mail').css('display', 'none');
            // $('#div5').css('display', 'grid');
            $('#div5').toggle();
            // $('#div1').hide();
            // $('#div2').hide();
            // $('#div3').hide();
            // $('#div4').hide();
            // $('#div6').hide();
            $('#request_div').hide();
            $('#send_mail').hide();
            $('#payment_div').hide();
            $('.svg').hide();
            $('.svg2').hide();
            $('.svg3').hide();
            $('.modal-dialog').css('max-width', '500px');
            $('.sou-pay-pupop').hide();
            $('.sou-yt-pupop').hide();
            $('#unlink_mail').css('display', 'none');
            $('.ass-crt-suf-popup').hide();
        }


        function toggleDiv44() {
            $('.all_releases').hide();
            $('.approve_sale').hide();
            $('#div4text').text('Admin Action Needed');
            $('#yes_txt').css('display', 'none');
            $('#click_yes').css('display', 'block');

            $('.half').css('background', '#ccc');

            $('#half').css('color', '#000');
            $('#div4').toggle();
            // $('#div1').hide();
            // $('#div2').hide();
            // $('#div3').hide();
            // $('#div5').hide();
            // $('#div6').hide();
            $('#request_div').hide();
            $('#send_mail').hide();
            $('#payment_div').hide();
            $('.svg').hide();
            $('.svg2').hide();
            $('.svg3').hide();
            $('.modal-dialog').css('max-width', '500px');
            $('.sou-yt-pupop').hide();
            $('.sou-pay-pupop').hide();
            $('#unlink_mail').css('display', 'none');
            $('.ass-crt-suf-popup').hide();

        }

        function toggleDiv444() {
            $('.all_releases').hide();
            $('.approve_sale').hide();
            $('#div4text').text('Admin Action Needed');
            $('#remove_txt').css('display', 'none');
            $('#click_remove').css('display', 'block');

            $('.half').css('background', '#ccc');

            $('#half').css('color', '#000');
            $('#div4').toggle();
            $('#div1').hide();
            $('#div2').hide();
            $('#div3').hide();
            $('#div5').hide();
            $('#div6').hide();
            $('#request_div').hide();
            $('#send_mail').hide();
            $('#payment_div').hide();
            $('.svg').hide();
            $('.svg2').hide();
            $('.svg3').hide();
            $('.modal-dialog').css('max-width', '500px');
            $('.sou-yt-pupop').hide();
            $('.sou-pay-pupop').hide();
            $('#unlink_mail').css('display', 'none');
            $('.ass-crt-suf-popup').hide();

        }

        function subtask_create() {
            $.ajax({
                type: 'POST',
                url: 'subtaskcreate1',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    formid: $('#formid').val(),
                },
                success: function(result) {
                    $('#gid1').text(result.gid);
                    console.log('result', result);
                    var matchingEntry = analysisData.find(function(item) {


                        return item.form_id === $('#formid').val();
                    });

                    if (matchingEntry.verify_soundlink == 1) {
                        $('#div5text').text('Admin Action Completed');
                        $('.div5pending').css('display', 'none');
                        $('.div5done').css('display', 'block');
                    } else {
                        $('#div5text').text('Admin Action needed');
                        $('.div5pending').css('display', 'block');
                        $('.div5done').css('display', 'none');
                    }





                    $('#btnsief').css('display', 'none');
                    $('#chanel_link1').css('display', 'none');
                    $('#chanel_link2').css('display', 'block');
                    $('#show').css('display', 'block');
                    $('#show1').css('display', 'block');
                    $('#show2').css('display', 'block');
                    $('.sub-tk-msg').css('display', 'block');
                    $('.modal-dialog').css('left', '-6%');
                    $('.modal-dialog').css('max-width', '70%');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('.ass-crt-suf-popup').toggle();

                    setTimeout(function() {
                        $('.modal-dialog').css('max-width', '500px');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                        $('.ass-crt-suf-popup').hide();
                    }, 2000);

                }
            })




        }

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

                    console.log('result', result);

                    $('#gid2').text(result.gid);
                    $('#div6text').text('Completed');
                    $('.div6pending').css('display', 'none');
                    $('.div6done').css('display', 'block');
                    $('#taskdone').css('display', 'block');
                    $('#taskhide').css('display', 'none');
                    $('#btnsief1').css('display', 'none');
                    $('#showbutton').css('display', 'block');
                    $('#hidebutton').css('display', 'none');
                    $('#show5').css('display', 'block');

                    $('.modal-dialog').css('left', '-6%');
                    $('.modal-dialog').css('max-width', '70%');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('.ass-crt-suf-popup').toggle();

                    setTimeout(function() {
                        $('.modal-dialog').css('max-width', '500px');
                        $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                        $('.ass-crt-suf-popup').hide();
                    }, 2000);

                }
            })




        }

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

        function comment_post1() {

            var cmts = document.getElementById('texst_value1').value;
            var gid = $('#gid2').text();

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

                    $('#texst_value1').val('');

                    $('#data-container1').empty();
                    let html = '';
                    $('#data-container1').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';
                        }

                        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>
                        `;

                        // 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-container1').html(html);
                    $('.modal-dialog').css('left', '-6%');
                    $('.modal-dialog').css('max-width', '70%');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('#last').css('display', 'block');


                }
            })

        }

        function comment_post() {

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

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

                    $('#texst_value').val('');

                    $('#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>
                    // `;
                        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>
                        `;
                    });

                    // Insert the HTML into the container
                    $('#data-container').html(html);
                    $('.modal-dialog').css('left', '-6%');
                    $('.modal-dialog').css('max-width', '70%');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('#first').css('display', 'block');
                    $('#show2').css('display', 'none');
                    $('#show3').css('display', 'block');

                }
            })

        }


        function request15() {
            $('#div5').css('grid-template-columns', '1fr auto'); 
            $('#div6').css('grid-template-columns', '1fr auto'); 
            
             $('#div6').css('width', '100%');
             $('#div6_div').css('width', '100%');

            $('#first').css('display', 'none'); 
            $('#show3').css('display', 'none');
            $('#show2').css('display', 'block');
            $('#last').css('display', 'none');
            $('#hidebutton').css('display', 'none');
            $('#showbutton').css('display', 'block');
            
            // if ($('#first').css('display') === 'block') {
            //         $('.modal-dialog').css('max-width', '70%');
            //     } else {
            //         $('.modal-dialog').css('max-width', '500px');
            //     } 

            // if ($('#last').css('display') === 'block') {
            //         $('.modal-dialog').css('max-width', '70%');
            //     } else {
            //         $('.modal-dialog').css('max-width', '500px');
            //     } 
             if ($('#first').css('display') === 'block' || $('#last').css('display') === 'block') {
                $('.modal-dialog').css('max-width', '70%');
            } else {
                $('.modal-dialog').css('max-width', '500px');
            }
            // $('.modal-dialog').css('transition', 'max-width 0.4s ease');
        }

        function request16() {
            $('#div6').css('grid-template-columns', '1fr auto'); 
             $('#div6').css('width', '100%'); 
             $('#div6_div').css('width', '100%');



           
            $('#last').css('display', 'none'); 
            $('#hidebutton').css('display', 'none');
            $('#showbutton').css('display', 'block');
            //   $('.modal-dialog').css('max-width', '500px');

             if ($('#first').css('display') === 'block' || $('#last').css('display') === 'block') {
                    $('.modal-dialog').css('max-width', '70%');
                } else {
                    $('.modal-dialog').css('max-width', '500px');
                }

            
            // $('.modal-dialog').css('transition', 'max-width 0.4s ease');
        }

        function request5() {

            $('#div6').css('grid-template-columns', '1fr auto'); 

 
            $('#last').css('display', 'none');
            $('#hidebutton').css('display', 'none');
            $('#showbutton').css('display', 'block');

                $('#div6_div').css('width', '50%');

            if ($('#div6').css('width') === '50%') {
                $('#div6').css('width', '50%');
            } else {
                $('#div6').css('width', '100%');
            }
            
            $.ajax({
                type: 'GET',    
                url: 'getcomments1',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    gid: $('#gid1').text(),
                },
                success: function(result) {
                    console.log(result);
                    $('#data-container').empty();
                    let html = '';
                    $('#data-container').html(html);
                    $('#status').html('<b>Status:</b><span>' + result.status + '</span>');
                    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>
                    // `;
                        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>
                        `;
                    });

                    // Insert the HTML into the container
                    $('#data-container').html(html);
                    $('#div5').css('grid-template-columns', '1fr 1fr');
                    $('.modal-dialog').css('left', '-6%');
                    $('.modal-dialog').css('max-width', '70%');
                    // $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('#first').css('display', 'block');
                    $('#show2').css('display', 'none');
                    $('#show3').css('display', 'block');
                }
            })

        }

        function request6() {
            $('#div6').css('grid-template-columns', '1fr 1fr'); 
             $('#div6').css('width', '100%');
             $('#div6_div').css('width', '100%');

            $.ajax({
                type: 'GET',
                url: 'getcomments2',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    gid: $('#gid2').text(),
                },
                success: function(result) {
                    console.log(result);
                    $('#data-container1').empty();
                    let html = '';
                    $('#data-container1').html(html);
                    let comments = result.comments.data; // Access the comments array
                    $('#status1').html('<b>Status:</b><span>' + result.status + '</span>');
                    document.getElementById('status1').innerHTML = '<b>Status:</b><span>' + result.status + '</span>';

                    if (result.status1 == 'Completed') {
                        $('.half6').css('background', '#0069d9');
                        $('#half6').css('color', '#fff');
                    }
                    $.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>
                    // `;
                        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>
                        `;
                    });

                    // Insert the HTML into the container
                    $('#data-container1').html(html);
                    $('.modal-dialog').css('left', '-6%');
                    $('.modal-dialog').css('max-width', '70%');
                    // $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('#last').css('display', 'block');
                    $('#hidebutton').css('display', 'block');
                    $('#showbutton').css('display', 'none');
                }
            })

        }


        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 close_mail() {
            $('.modal-dialog').css('max-width', '500px');
            $('.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');

        }




        function request1() {
            var formId = $('#formid').val();
            var details = {!! json_encode($data) !!};


            var details = details.find(function(item) {
                return item.form_id == formId;
            });

            $('#paypalto').text(`${details.username}`);
            $('#paypalbody').html(`Dear ${details.username},

If you'd like to receive the earnings on your account, you'll first need to add a payment method to your account. 

To link up your PayPal email to your account, you'll need to log in to your RouteNote account, hover over 'Your Account' and then click 'Payment Profile'. You'll see a prompt for a One-Time passcode which will have been sent to your registered email address. 
If you'd rather close your account without receiving your final earnings, we can proceed without the need to add a payment method to your account. 

This is in relation to the RouteNote account with the username ${details.username} and UID ${details.userID}.

Please confirm in your reply when you've registered these details, or if you'd like to have your account closed without receiving the earnings. If you do not respond within 30 days, we will close the account as initially requested.


Many Warm Regards,
The RouteNote Team
`);
            $('#Request').toggle();
            $('.modal-dialog').css('left', '-6%');
            $('.modal-dialog').css('max-width', '70%');
            $('.modal-dialog').css('transition', 'max-width 0.4s ease');
            $('#request_div').css('width', '50%');
            $('#request_div').css('transition', 'width 0.4s ease');
            $('#request_div').css('display', 'block');

        }

        function send() {

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

                success: function(result) {
                    $('.box').css('display', 'none');
                    $('.modal-dialog').css('left', '-6%');
                    $('.modal-dialog').css('max-width', '70%');
                    $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                    $('#request_div').css('display', 'none');
                    $('#email_send_div').css('display', 'block');
                    $('#requestt').text('Request Sent');

                    $('.div2pending').css('display', 'none');
                    $('.div2done').css('display', 'block');
                    $('#div2text').text('Completed');
                    $('#number2div').css('background', '#0069d9');
                    $('#div2number').css('color', '#fff');
                    setTimeout(function() {
                        $('#email_send_div').css('display', 'none');
                        $('.modal-dialog').css('max-width', '500px');
                        $('.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');



                    }, 2000);
                }
            })
        }

        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');
        }
        //     function send3() {
        //         $.ajax({
        //             type: 'GET',
        //             data: {     
        //                 formid: $('#formid').val()
        //             },
        //             url: 'verifyartist',
        //             headers: {
        //                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //             },

        //             success: function(result) {
        //         $('.box').css('display', 'none');
        //         $('.modal-dialog').css('left', '-6%');
        //         $('.modal-dialog').css('max-width', '70%');
        //         $('.modal-dialog').css('transition', 'max-width 0.4s ease');
        //         $('#send_mail').css('display', 'none');
        //         $('#email_send_div').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');

        //             $('.div3pending').css('display', 'none');
        //             $('.div3done').css('display', 'block');
        //             $('#div3text').text('Completed');
        //         }, 2000);
        //     }
        // })
        //     }


        $(document).ready(function() {


            //             $('#analysismodal').on('hidden.bs.modal', function () {
            //     $('#div1').hide();
            //     $('#div2').hide();
            //     $('#div3').hide();
            //     $('#div4').hide();
            //     $('#div5').hide();
            //     $('#div6').hide();
            //   });

            $('.toggle-confirmation').change(function() {
                // Get the checkbox element
                var checkbox = $(this);

                // Get the ID of the item from the data-id attribute
                var itemId = checkbox.data('id');

                // Get the checked status
                var isChecked = checkbox.is(':checked');

                $.ajax({
                    url: 'update-confirmation-email',
                    type: 'POST', // Method type
                    data: {
                        _token: '{{ csrf_token() }}', // CSRF token for security
                        id: itemId,
                        confirmation_email: isChecked ? 1 : 0 // Send 1 if checked, 0 if not
                    },
                    success: function(response) {
                        // Handle the success response
                        console.log('Status updated successfully:', response);
                    },
                    error: function(xhr) {
                        // Handle errors
                        console.error('Error updating status:', xhr.responseText);
                    }
                });
            });




            var analysisData = null;
            var analysisData1 = null;
            var analysisData2 = null;

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

                var formId = $(this).data('form-id');

                $('#gid1').text('');
                $('#gid2').text('');


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

                $('#formid').val(matchingEntry.form_id);
                $.ajax({
                    url: 'fsacheck',
                    method: 'GET',
                    data: {
                        uid: matchingEntry.userid
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        if (response.fsacheck == '1') {
                            var varible = '<span style="padding: 10px;">FSA USER: YES</span>';
                        } else {
                            var varible = '<span style="padding: 10px;">FSA USER: NO</span>';
                        }
                        $('#div1').html(`
                
            <span style="padding: 10px;">USER ID: ${matchingEntry.userID}</span><br>
            <span style="padding: 10px;">USERNAME:  ${matchingEntry.username}</span><br>
            <span style="padding: 10px;">EMAIL: ${matchingEntry.email}</span><br>
           ${varible}
            `);
                    }
                })

                $.ajax({
                    type: 'GET',
                    data: {
                        uid: matchingEntry.userID
                    },
                    url: 'getstatus1',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function(result) {
                        console.log(result);
                        $('#div3').html(`
<span id="artistno" style="padding: 10px;">NO</span>
<span  id="artistyes" style="padding: 10px;">YES</span>
<!--span style="padding: 10px;"><button class="mail" style=" " id="artistmail" onclick="send_mail()">Send mail</button></span--> 
`);
                        if (result.artist > 0) {

                            $('#artistno').css('display', 'none');
                            $('#artistyes').css('display', 'block');
                        } else {
                            $('#artistyes').css('display', 'none');
                            $('#artistno').css('display', 'block');
                        }
                        if (result.outstandings) {

                        }
                        if (result.paypal) {

                        }


                        $('#div2').html(`
                    <div style="display: grid;">
                    <span style="padding: 10px;">Outstand Earnings: ${result.outstandings}</span>
                    <span style="padding: 10px;" id="changetext">Paypal Info:${result.paypal}</span>
                    </div>
                    <div>
                    <span style="padding: 10px;" id="addcontent">
                
                    </span>
                    </div>
                    `);
                        if (matchingEntry.verify_paypal == '1') {
                            $('.div2pending').css('display', 'none');
                            $('.div2done').css('display', 'block');
                            $('#div2text').text('Completed');
                            $('#addcontent').html(`
                    <button style="background: #0069d9;display:none;" class=" btn-secondary actiondone11" id="requesttdone"
                    >Request Sent</button>`);

                            $('#requesttdone').css({
                                'pointer-events': 'none',
                                'cursor': 'not-allowed',
                            });
                            $('#number2div').css('background', '#0069d9');
                            $('#div2number').css('color', '#fff');

                            $('#requesttdone').css('display', 'block');
                        } else {
                            $('.div2pending').css('display', 'block');
                            $('.div2done').css('display', 'none');
                            $('#div2text').text('Admin Action needed');
                            $('#addcontent').html(`<button style="background: #0069d9;" class=" btn-secondary actiondone11" id="requestt"
                    onclick="request1()">Request for Paypal info</button>
                   `);
                            $('#number2div').css('background', '#ccc');
                            $('#div2number').css('color', '#000');
                        }


                    }
                })

            //     <div id="taskhide" style="width: 100%%;text-align: initial;">
            // <div><b>USER&nbsp;:&nbsp;</b> sellerrnn(72567)</div>
            // <div><b>Paypal Email Address&nbsp;:&nbsp;</b> ${matchingEntry.email}</div>
            // <!--div><b>Outstand Earnings&nbsp;:&nbsp;</b> $40</div-->
            // <div><b> Payment Option:</b>${matchingEntry.like_to_wait_value}</div>
            // </div>
                $('#div6sub').html(`
                <ul class="space-y-2 !text-start" id="taskhide">
                    <li class="grid grid-cols-2"><b>USER:</b><span>sellerrnn(72567)</span></li>
                    <li class="grid grid-cols-2"><b>Paypal Email Address:</b><span>${matchingEntry.email}</span></li>
                    <li class="grid grid-cols-2"><b>Payment Option:</b><span>${matchingEntry.like_to_wait_value}</span></li>
                </ul> 

            <div style="width: 100%;position: relative;text-align:left;">

            <button id="btnsief1" class="flex items-center gap-2" onclick="subtask_create1()" style="background: #0069d9;padding: 10px 14px;border: none;border-radius: 6px;color: #fff;margin-top:1rem">
            Create Subtask in  <span><img src="https://smarthub.rn-test.com/images/asana_logo.svg" style="height: 15px;" alt="logo" /></span></button>


            <div id="taskdone" class="sub-tk-msg" style="text-align:left;display:none;font-weight: 600;color: #7d7d7d;padding: 7px 0;position: relative;">Subtask Created..</div>    
            <div id="show5" style="display:none;margin:auto;padding: 10px 0; ">
            <ul class="hidden" style="list-style: none;text-align: initial;width: 100%;">
            <li><b>Assignee:</b> Bryan</li>
            <li><b>Description:</b></li>
            <li><b> Paypal Email:</b> ${matchingEntry.email}<li>
            <!--li><b> Outstand Earnings:</b> $40</li-->
            <li><b> Payment Option:</b>${matchingEntry.like_to_wait_value}</li>
            <li ><b>Status:</b> Not Completed</li>
            </ul>
            <ul class="space-y-2">
                <li class="grid grid-cols-2"><b>Assignee:</b><span>Bryan</span></li>
                <li class="grid grid-cols-2"><b>Description:</b><span>-</span></li>
                <li class="grid grid-cols-2"><b>Paypal Email:</b><span>${matchingEntry.email}</span></li>
                <li class="grid grid-cols-2"><b>Payment Option:</b><span>${matchingEntry.like_to_wait_value}</span></li>
                <li id="status1" class="grid grid-cols-2"></li>
            </ul>
            </div>
            <div id="hidebutton" onclick="request16()" style="text-align:left;display:none;margin-top: 11px;cursor: pointer;color: #0000ffbd;margin: -13px 10px 0 0;">
            <span style="padding: 8px 1rem;background: #0069d9;color: #fff;border-radius: 5px;font-weight: 600;">Hide Comments</span></div>

            <div id="showbutton" onclick="request6()" style="text-align:left;display:none;margin-top: 11px;cursor: pointer;color: #0000ffbd;margin: -13px 10px 0 0;">
            <span style="padding: 8px 1rem;background: #0069d9;color: #fff;border-radius: 5px;font-weight: 600;">View Comments</span></div>
            </div>

            `);
                if (matchingEntry.verify_rfs == '1' && matchingEntry.verify_disapprove == '1') {
                    $('#div4text').text('Completed');
                    $('.half').css('background', '#0069d9');
                    $('#half').css('color', '#fff');

                    $('.div4done').css('display', 'block');
                    $('.div4pending').css('display', 'none');
                    $('#yes_txt').css('display', 'block');
                    $('#remove_txt').css('display', 'block');

                    $('#click_yes').css('display', 'none');
                    $('#click_remove').css('display', 'none');

                } else if (matchingEntry.verify_rfs == '1' || matchingEntry.verify_disapprove == '1') {
                    $('#div4text').text('Admin Action needed');
                    $('.half').css('background', 'linear-gradient(to right, #ccc 50%, #0069d9 50%)');

                    $('.div4done').css('display', 'none');
                    $('.div4pending').css('display', 'block');

                    if (matchingEntry.verify_rfs == '1') {
                        $('#yes_txt').css('display', 'block');

                        $('#click_yes').css('display', 'none');
                    } else {
                        $('#yes_txt').css('display', 'none');

                        $('#click_yes').css('display', 'block');
                    }
                    if (matchingEntry.verify_disapprove == '1') {

                        $('#remove_txt').css('display', 'block');

                        $('#click_remove').css('display', 'none');
                    } else {
                        $('#remove_txt').css('display', 'none');

                        $('#click_remove').css('display', 'block');
                    }
                } else {
                    $('#div4text').text('Admin Action needed');
                    $('.half').css('background', '#ccc');
                    $('#half').css('color', '#000');

                    $('.div4done').css('display', 'none');
                    $('.div4pending').css('display', 'block');
                    if (matchingEntry.verify_rfs == '1') {
                        $('#yes_txt').css('display', 'block');

                        $('#click_yes').css('display', 'none');
                    } else {
                        $('#yes_txt').css('display', 'none');

                        $('#click_yes').css('display', 'block');
                    }
                    if (matchingEntry.verify_disapprove == '1') {

                        $('#remove_txt').css('display', 'block');

                        $('#click_remove').css('display', 'none');
                    } else {
                        $('#remove_txt').css('display', 'none');

                        $('#click_remove').css('display', 'block');
                    }
                }

                // if (matchingEntry.verify_artist == '1') {

                //     $('#mail').css({
                //         'pointer-events': 'none',
                //         'cursor': 'not-allowed',
                //     });
                //     $('.div3pending').css('display', 'none');
                //     $('.div3done').css('display', 'block');
                //     $('#div3text').text('Completed');
                // }else{

                // }




                if (matchingEntry) {
                    var matchingEntry1 = analysisData1.find(function(item) {
                        return item.userid.toString() === matchingEntry.form_id.toString() && item
                            .type === 'accountform';

                    });
                    var matchingEntry2 = analysisData1.find(function(item) {
                        return item.userid.toString() === matchingEntry.form_id.toString() && item
                            .type === 'accountform2';

                    });

                }
                if (matchingEntry1) {
                    $('#chanel_link1').css('display', 'none');
                    $('#btnsief').css('display', 'none');
                    $('#chanel_link2').css('display', 'block');
                    $('#show').css('display', 'block');
                    $('#show1').css('display', 'block');
                    $('#show2').css('display', 'block');
                    $('#gid1').text(`${matchingEntry1.gid}`);

                }
                if (matchingEntry2) {
                    $('#taskdone').css('display', 'block');
                    $('#taskhide').css('display', 'none');
                    $('#gid2').text(`${matchingEntry2.gid}`);
                    $('#btnsief1').css('display', 'none');
                    $('#showbutton').css('display', 'block');
                    $('#hidebutton').css('display', 'none');
                    $('#show5').css('display', 'block');
                    $('#div6text').text('Completed');

                    $('.div6pending').css('display', 'none');
                    $('.div6done').css('display', 'block');

                }



                if (matchingEntry.verify_soundlink == '1' && $('#gid1').text() != '') {
                    $('.div5pending').css('display', 'none');
                    $('.div5done').css('display', 'block');
                    $('#div5text').text('Admin Action Completed');
                    $('#SoundCloud').css('display', 'none');
                    $('#chanel_unlink').css('display', 'block');
                    $('#chanel_link').css('display', 'none');
                    $('#number5div').css('background', '#0069d9');
                    $('#div5number').css('color', '#fff');
                    $('#btnsief').css('display', 'none');
                    $('#chanel_link1').css('display', 'none');
                    $('#chanel_link2').css('display', 'block');
                    $('#show').css('display', 'block');
                    $('#show1').css('display', 'block');
                    $('#show2').css('display', 'block');


                } else if (matchingEntry.verify_soundlink == '1' || $('#gid1').text() != '') {
                    $('#number5div').css('background', '#ccc');
                    $('#div5number').css('color', '#000');
                    $('.div5pending').css('display', 'block');
                    $('.div5done').css('display', 'none');
                    $('#div5text').text('Admin Action Needed');
                    if (matchingEntry.verify_soundlink == '1') {


                        $('#SoundCloud').css('display', 'none');
                        $('#chanel_unlink').css('display', 'block');
                        $('#chanel_link').css('display', 'none');

                    } else {
                        $('#SoundCloud').css('display', 'block');
                        $('#chanel_unlink').css('display', 'none');
                        $('#chanel_link').css('display', 'block');
                    }
                    if ($('#gid1').text() != '') {

                        $('#btnsief').css('display', 'none');
                        $('#chanel_link1').css('display', 'none');
                        $('#chanel_link2').css('display', 'block');
                        $('#show').css('display', 'block');
                        $('#show1').css('display', 'block');
                        $('#show2').css('display', 'block');
                    } else {
                        $('#btnsief').css('display', 'block');
                        $('#chanel_link1').css('display', 'block');
                        $('#chanel_link2').css('display', 'none');
                        $('#show').css('display', 'none');
                        $('#show1').css('display', 'none');
                        $('#show2').css('display', 'none');
                    }


                } else {
                    $('#number5div').css('background', '#ccc');
                    $('#div5number').css('color', '#000');
                    $('.div5pending').css('display', 'block');
                    $('.div5done').css('display', 'none');
                    $('#div5text').text('Admin Action Needed');
                    $('#SoundCloud').css('display', 'block');
                    $('#chanel_unlink').css('display', 'none');
                    $('#chanel_link').css('display', 'block');
                    $('#chanel_link1').css('display', 'block');
                    $('#chanel_link2').css('display', 'none');
                    $('#show').css('display', 'none');
                    $('#show1').css('display', 'none');
                    $('#show2').css('display', 'none');
                    $('#btnsief').css('display', 'block');
                }


                if ($('#gid2').text() != '') {
                    $('#div6text').text('Admin Action Completed');

                    $('.div6pending').css('display', 'none');
                    $('.div6done').css('display', 'block');
                } else {
                    $('#div6text').text('Admin Action needed');

                    $('.div6pending').css('display', 'block');
                    $('.div6done').css('display', 'none');
                }

                $.ajax({
                    type: 'GET',
                    data: {
                        gid1: $('#gid1').text(),
                        gid2: $('#gid2').text()
                    },
                    url: 'getstatus',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function(result) {
                        console.log(result);
                        $('#status').html('<b>Status:</b><span>' + result.status + '</span>');
                        $('#status1').html('<b>Status:</b><span>' + result.status1 + '</span>');

                        document.getElementById('status1').innerHTML = '<b>Status:</b><span>' + result.status1 + '</span>';
                        document.getElementById('status').innerHTML = '<b>Status:</b><span>' + result.status + '</span>';

                        var status = result.status;
                        if (status != 'Not Completed') {

                            $('#div5text').text('Completed');
                        } else {


                            if ($('#gid1').text() != '') {
                                $('#number5div').css('background', '#ccc');
                                $('#div5number').css('color', '#000');
                                $('.div5pending').css('display', 'none');
                                $('.div5done').css('display', 'block');
                                $('#div5text').text('Admin Action Completed');
                                $('#btnsief').css('display', 'none');
                                $('#chanel_link1').css('display', 'none');
                                $('#chanel_link2').css('display', 'block');
                                $('#show').css('display', 'block');
                                $('#show1').css('display', 'block');
                                $('#show2').css('display', 'block');
                            } else {
                                $('#number5div').css('background', '#ccc');
                                $('#div5number').css('color', '#000');
                                $('.div5pending').css('display', 'block');
                                $('.div5done').css('display', 'none');
                                $('#div5text').text('Admin Action needed');

                                $('#btnsief').css('display', 'block');
                                $('#chanel_link1').css('display', 'block');
                                $('#chanel_link2').css('display', 'none');
                                $('#show').css('display', 'none');
                                $('#show1').css('display', 'none');
                                $('#show2').css('display', 'none');
                            }
                        }

                        if (result.status1 != 'Not Completed') {
                            $('#div6text').text('Completed');
                            $('.half6').css('background', '#0069d9');
                            $('#half6').css('color', '#fff');

                        } else {
                            if ($('#gid2').text() != '') {
                                $('.half6').css('background', '#ccc');
                                $('#half6').css('color', '#000');
                                $('#div6text').text('Admin Action Completed');

                                $('.div6pending').css('display', 'none');
                                $('.div6done').css('display', 'block');
                            } else {
                                $('.half6').css('background', '#ccc');
                                $('#half6').css('color', '#000');
                                $('#div6text').text('Admin Action needed');

                                $('.div6pending').css('display', 'block');
                                $('.div6done').css('display', 'none');
                            }
                        }



                    }
                })

                var matchingEntry2 = analysisData2.find(function(item) {
                    return item.form_id.toString() === matchingEntry.form_id.toString() && item
                        .type === 'account';
                })
                if (matchingEntry2) {
                    $('#reject').css('display', 'none');
                    $('#request').css('display', 'none');
                    $('#approve').css('display', 'none');

                    if (matchingEntry2.status == 'approve') {
                        $('#approve').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                         $('#divlasttext').css('display', 'flex');
                         $('#textfinal').text('Approved & Assigned it to Luna');
                       // $('#approvetext').text('Approved & Assigned it to Luna');
                       // $('#reject').css('display', 'none');
                       // $('#request').css('display', 'none');
                    } else if (matchingEntry2.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');
                         $('#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');

                }






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




            $('.view').click(function() {
                var formId = $(this).data('form-id');
                var details = {!! json_encode($data) !!};
                var detail = details.find(function(item) {
                    return item.form_id == formId;
                });

                $('#email').text(detail.email);
                $('#comments').text(detail.comments);

                if (detail.elaborate_reason) {
                    $('#elaborate_reason_label').show();
                    $('#elaborate_reason').text(detail.elaborate_reason_value);
                } else {
                    $('#elaborate_reason_label').hide();
                }
                $('#other_distrubutor').text(detail.other_distributor_value);
                if (detail.other_distrubutor) {
                    $('#other_distrubutor_label').show();

                } else {
                    $('#other_distrubutor_label').hide();
                }

                $('#rating').text(detail.rating);
                $('#reason').text(detail.reason_value);
                $('#userID').text(detail.userID);
                $('#username').text(detail.username);
                $('#would_you_like_to_wait').text(detail.like_to_wait_value);

                var link = $('#exportdata');

                link.attr('href', '{{ route('exportform') }}?id=' + detail.form_id);

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

            $('#click_yes').click(function() {
                var id = parseInt($('#formid').val(), 10);
                var matchingEntry = analysisData.find(function(item) {
                    console.log('Current item:', item);

                    return item.form_id === id;
                });

                $('.all_releases').css('display', 'none');
                $('#click_yes').css('display', 'none');
                $('#yes_txt').css('display', 'block');

                $('#saleapprove').text('Do you want to RFS all active releases for user id ' + matchingEntry
                    .userID);

                $('#action_4').css('display', 'none');
                if (matchingEntry.verify_disapprove == 1) {
                    $('#div4text').text('Completed');
                } else {
                    $('#div4text').text('Admin Action Completed');
                }

                $('.approve_sale').toggle();
                $('#click_remove').css('display', 'block');
                $('#remove_txt').css('display', 'none');
                // $('.div4done').css('display', 'block');
                // $('.div4pending').css('display', 'none');
                $('.modal-dialog').css('left', '-6%');
                $('.modal-dialog').css('max-width', '70%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');

                $('.approve_sale').css({
                    'left': '60%',
                    'opacity': '1',
                    'z-index': '1',
                    'top': '35%',
                    'transition': 'left 1s, opacity 2s',
                    'display': 'block'
                });

            });




            $('#click_remove').click(function() {
                var id = parseInt($('#formid').val(), 10);
                var matchingEntry = analysisData.find(function(item) {
                    console.log('Current item:', item);

                    return item.form_id === id;
                });
                $('.all_releases').toggle();

                $('.approve_sale').css('display', 'none');
                $('.all_releases').css('display', 'block');

                $('#removesale').text('Do you want to disapprove all pending releases for user id ' +
                    matchingEntry.userID);


                $('.half').css('background', '#0069d9');
                $('#half').css('color', '#fff');

                if (matchingEntry.verify_rfs == 1) {
                    $('#div4text').text('Completed');
                } else {
                    $('#div4text').text('Admin Action Completed');
                }
                // $('.div4done').css('display', 'block');
                // $('.div4pending').css('display', 'none');

                $('.modal-dialog').css('left', '-6%');
                $('.modal-dialog').css('max-width', '70%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');

                $('.all_releases').css({
                    'left': '60%',
                    'opacity': '1',
                    'z-index': '1',
                    'transition': 'left 1s, opacity 2s'
                });

            });


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

                    success: function(result) {
                        var analysisData = null;
                        var matchingEntry = analysisData.find(function(item) {


                            return item.form_id === $('#formid').val();
                        });

                        if (matchingEntry.verify_rfs == 1 && matchingEntry.verify_disapprove == 1) {
                            $('#div4text').text('Completed');
                            $('.div4done').css('display', 'block');
                            $('.div4pending').css('display', 'none');
                            $('.half').css('background', '#0069d9');
                            $('#half').css('color', '#fff');
                        } else if (matchingEntry.verify_rfs == 1 || matchingEntry.verify_disapprove == 1) {
                            $('.half').css('background', '#ccc');
                            $('#half').css('color', '#000');
                            $('#div4text').text('Admin Action needed');
                            $('.div4done').css('display', 'none');
                            $('.div4pending').css('display', 'block');
                        } else {
                            $('.half').css('background', '#ccc');
                            $('#half').css('color', '#000');
                            $('#div4text').text('Admin Action needed');
                            $('.div4done').css('display', 'none');
                            $('.div4pending').css('display', 'block');
                        }

                        $('.approve_sale').css('display', 'none');
                        $('.approve_sale_completed').css('display', 'block');
                        $('.approve_sale_completed').css('opacity', '1');
                        $('.approve_sale_completed').css('left', '60%');

                        setTimeout(function() {
                            $('.approve_sale_completed').css('display', 'none');
                            $('#approve_sale').css('opacity', '0');
                            $('.modal-dialog').css('max-width', '500px');
                            $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                        }, 2000);
                    }
                })
            });




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

                    success: function(result) {

                        var matchingEntry = analysisData.find(function(item) {


                            return item.form_id === $('#formid').val();
                        });

                        if (matchingEntry.verify_rfs == 1 && matchingEntry.verify_disapprove ==
                            1) {
                            $('#div4text').text('Completed');
                            $('.div4done').css('display', 'block');
                            $('.div4pending').css('display', 'none');
                            $('.half').css('background', '#0069d9');
                            $('#half').css('color', '#fff');
                        } else if (matchingEntry.verify_rfs == 1 || matchingEntry
                            .verify_disapprove == 1) {
                            $('.half').css('background', '#ccc');
                            $('#half').css('color', '#000');
                            $('#div4text').text('Admin Action needed');
                            $('.div4done').css('display', 'none');
                            $('.div4pending').css('display', 'block');
                        } else {
                            $('.half').css('background', '#ccc');
                            $('#half').css('color', '#000');
                            $('#div4text').text('Admin Action needed');
                            $('.div4done').css('display', 'none');
                            $('.div4pending').css('display', 'block');
                        }
                        $('#click_remove').css('display', 'none');
                        $('#remove_txt').css('display', 'block');

                        $('.all_releases').css('display', 'none');
                        $('.approve_sale_completed').css('display', 'block');
                        $('.approve_sale_completed').css('opacity', '1');
                        $('.approve_sale_completed').css('left', '60%');
                        setTimeout(function() {
                            $('.approve_sale_completed').css('display', 'none');
                            $('#approve_sale').css('opacity', '0');
                            $('.modal-dialog').css('max-width', '500px');
                            $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                        }, 2000);
                    }
                })
            });








        });


        function request() {
            var analysisData = null;
            var formId = $('#formid').val();
            var matchingEntry = analysisData.find(function(item) {
                return item.form_id == formId;
            });
            console.log(matchingEntry);
            $('#requestto').text(matchingEntry.email);
            $('#requestname').text(`Dear ${matchingEntry.username},
Account Closure form request is under-progress status. Please provide the following details to proceed






Many Warm Regards,
The RouteNote Team`);
            $('#requestmail').modal('show');
            $('#analysismodal').modal('hide');
            $('#approvemodal').modal('hide');

        }


        function reject() {
            var analysisData = null;
            var formId = $('#formid').val();
            var matchingEntry = analysisData.find(function(item) {
                return item.form_id == formId;
            });
            console.log(matchingEntry);
            $('#rejectto').text(matchingEntry.email);
            $('#rejectname').text(`Dear ${matchingEntry.username},
Account Closure form rejected for the following reasons:






Many Warm Regards,
The RouteNote Team`);
            $('#rejectmail').modal('show');
            $('#analysismodal').modal('hide');
            $('#approvemodal').modal('hide');

        }

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

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

                success: function(result) {
                    console.log(result);
                    $('#mailsentinfo').modal('show');
                    $('#requestmail').modal('hide');
                    $('#rejectmail').modal('hide');
                }
            })
        }

        function approve() {
            var analysisData = null;
            var formId = $('#formid').val();
            var matchingEntry = analysisData.find(function(item) {
                return item.form_id == formId;
            });
            console.log(matchingEntry);
            $('#approveto').val(matchingEntry.email);
            $.ajax({
                type: 'GET',
                data: {
                    formid: $('#formid').val(),
                    value: 'approve',
                    type: 'account',
                    to: $('#approveto').val()
                },
                url: 'actiondone',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                success: function(result) {

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

        }
    </script>

    <body>


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

            <h4>Account Closure OTL Forms</h4><br>


            <style>
                .switch {
                    position: absolute;
                    display: inline-block;
                    width: 34px;
                    height: 20px;
                }

                .switch input {
                    opacity: 0;
                    width: 0;
                    height: 0;
                }

                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    transition: .4s;
                    border-radius: 20px;
                }

                .slider:before {
                    position: absolute;
                    content: "";
                    height: 12px;
                    width: 12px;
                    border-radius: 50%;
                    left: 4px;
                    bottom: 4px;
                    background-color: white;
                    transition: .4s;
                }

                input:checked+.slider {
                    background-color: #2196F3;
                }

                input:checked+.slider:before {
                    transform: translateX(14px);
                }
            </style>


            <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%">Confirmation Email</th>
                        <th style="width:15%">Account Closure Form Details</th>
                        <th style="width:10%">Smarthub Report</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    @foreach ($data as $item)
                        <tr>
                            <td>{{ $item->form_id }}</td>
                            <td>Account Closure Form</td>
                            <td>{{ $item->username }}
                            </td>
                            <td>{{ $item->submitted_at }}</td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox" class="toggle-confirmation" data-id="{{ $item->form_id }}"
                                        {{ $item->confirmation_email ? 'checked' : '' }}>
                                    <span class="slider round"></span>
                                </label>
                            </td>



                            <td><button class="btn btn-secondary view" style="border-radius: 9px;background-color: #0069d9;"
                                    data-form-id="{{ $item->form_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->form_id }}">View Details</button></td>

                        </tr>
                    @endforeach
                </tbody>
            </table>

        </div>


        <!-- Modal HTML -->
        <div class="modal fade" id="analysismodal" tabindex="-1" role="dialog" aria-labelledby="customPopupLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 122%;height: ;">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="customPopupLabel">Processing the Closure</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span style="color: #fff">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <input type="hidden" id="formid">


                        <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;"> Security
                                        Check - do the details match?</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="number2div" style=""><span
                                            style="color:#000;font-weight: bold" id="div2number">2</span></span>

                                    <svg class="div2pending 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="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>



                                    <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;">
                                        Does the account have any outstanding earnings?</span>

                                    <div style="width: 100%;display: flex;">
                                        <div id="div2" class="open_div"
                                            style=" display:grid;width: auto;height: 10%;z-index:11">

                                        </div>

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

                                        <div id="request_div" style=" width: 50%;top:143px">
                                            <div class="modal-content" style=" ">
                                                <div class="modal-header">
                                                    <h5 style="color: white;" class="modal-title" id="customPopupLabel">
                                                        Request for Paypal</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>
                                                    <label id="paypalto" disabled class="login-form__input">
                                                    </label><br>
                                                    <label class="modalabel">Subject:</label><br>
                                                    <input class="login-form__input" type="text" name="Email"
                                                        id="name" size="59px"
                                                        value="Closure - No Payment Method">
                                                    <br><br>
                                                    <label class="modalabel">Body:</label><br>
                                                    <textarea class="login-form__input" type="text" name="paypalbody" id="paypalbody"
                                                        style="position: relative;height: 150px;width: 100%;text-align: left">

                                                    </textarea>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-secondary login maill"
                                                        onclick="send()" id="send">Send</button>
                                                    <button type="button" class="btn btn-secondary" id="approvesend"
                                                        onclick="close_mail()">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <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">3</span></span>

                                <svg class="div3done 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>
                                <svg class="div3pending 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>
                                <span id="div3text" class="hover_txt">Completed</span>
                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv3()" style="font-size: medium;"> Are they an
                                    Artist Services managed account?</span>

                                <div style="width: 100%;display: flex;">
                                    <div id="div3" class="open_div" style="display:grid;height: 10%;z-index:11">

                                    </div>

                                    <div class="box svg2" style="display: none;"></div>



                                    <!--div id="send_mail" style=" width: 50%;">
                                                                                                    <div class="modal-content" style=" ">
                                                                                                        <div class="modal-header">
                                                                                                            <h5 style="color: white;" class="modal-title" id="customPopupLabel">
                                                                                                                Email Confirmation</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>
                                                                                                            <label disabled class="login-form__input">
                                                                                                                mcldevtest@gmail.com</label><br>
                                                                                                            <label class="modalabel">Subject:</label>
                                                                                                            <input class="login-form__input" type="text" name="Email"
                                                                                                                id="name" size="59px"
                                                                                                                value="Closure - No Payment Method">
                                                                                                            <br><br>
                                                                                                            <label class="modalabel">Body:</label><br>
                                                                                                            <textarea class="login-form__input" type="text" name="Email" id="name"
                                                                                                                style="position: relative;height: 150px;width: 100%;text-align: left">Dear sellerrnn,

                                                If you'd like to receive the earnings on your account, you'll first need to add a payment method to your account. 

                                                To link up your PayPal email to your account, you'll need to log in to your RouteNote account, hover over 'Your Account' and then click 'Payment Profile'. You'll see a prompt for a One-Time passcode which will have been sent to your registered email address. 
                                                If you'd rather close your account without receiving your final earnings, we can proceed without the need to add a payment method to your account. 

                                                This is in relation to the RouteNote account with the username sellerrnn and UID 725567.

                                                Please confirm in your reply when you've registered these details, or if you'd like to have your account closed without receiving the earnings. If you do not respond within 30 days, we will close the account as initially requested.

                                                Many Warm Regards,
                                                The RouteNote Team

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

                        <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 style="display: flex;">
                            <div style="padding: 20px;position: relative;" class="hover_div">
                                <span class="number half" id="number4div" style=" "><span id="half"
                                        style="color:black;font-weight: bold">4</span></span>

                                <svg class="div4pending 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="div4done 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>

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

                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv4()" style="font-size: medium;">
                                    Removing approved releases from sale/disapproving pending releases</span>
                                <div id="div4" class="open_div" style="display:grid;">
                                    <div style=" " id="remove_flex">
                                        <span style="padding: 10px; margin: auto 0;">
                                            <button style="background: #0069d9;color:white;" class="remove"
                                                id="click_yes">RFS all Active Releases</button>
                                            <span id="yes_txt" style="display:none;position: relative;">
                                                <li style="display:flex"> <span>Removing
                                                        approved releases from
                                                        sale
                                                    </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;">
                                                            <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></li>



                                            </span>
                                        </span>
                                        
                                        <span style="padding: 10px; margin: auto 0;">
                                            <button style="background: #0069d9;color:white;" class="remove"
                                                id="click_remove">Disapprove all pending releases</button>
                                            <span id="remove_txt" style="display:none;position: relative;">


                                                <li style="display:flex"> <span> Disapproving all pending
                                                        releases
                                                    </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;">
                                                            <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></li>





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

                                <style>
                                    .approve_sale_completed,
                                    .all_releases,
                                    .approve_sale {
                                        padding: 20px;
                                        background-color: #f8f8f8;
                                        width: 35%;
                                        left: 0;
                                        top: 50%;
                                        opacity: 0;
                                        z-index: -1;
                                        position: absolute;
                                        border-radius: 6px;
                                        box-shadow: 3px 3px 4px -4px;
                                    }
                                </style>

                                <div class="approve_sale"
                                    style="padding: 0;top: 25%;border-radius: 6px;overflow: hidden;">
                                    <div style="padding: 20px; background: #0069d9;color: #fff">Action
                                        <button type="button" class="close">
                                            <span onclick="close_mail()" style="color: #fff">×</span>
                                        </button>
                                    </div>

                                    <div id="saleapprove" style="padding: 20px;">
                                    </div>

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

                                    </div>
                                </div>

                                <div class="all_releases "
                                    style="padding: 0;top: 25%;border-radius: 6px;overflow: hidden;">
                                    <div style="padding: 20px; background: #0069d9;color: #fff">Action
                                        <button type="button" class="close">
                                            <span onclick="close_mail()" style="color: #fff">×</span>
                                        </button>
                                    </div>

                                    <div id="removesale" style="padding: 20px;">
                                    </div>

                                    <div class="modal-footer"
                                        style="padding: 20px;display: flex;gap: 20px;justify-content: end;">
                                        <button class="ok_btn" id="all_releases_ok">ok</button>
                                        <button class="ok_btn" style="background-color: #ccc" id="all_releases_no"
                                            onclick="toggleDiv444()">Cancel</button>

                                    </div>
                                </div>







                                <div class="approve_sale_completed "
                                    style="top: 42%;display: none;padding: 0px;overflow: hidden;">
                                    <div style="padding: 10px; background: #0069d9;color: #fff">Action
                                        <button type="button" class="close">
                                            <span onclick="close_mail()" style="color: #fff">×</span>
                                        </button>
                                    </div>

                                    <div style="padding: 20px;">
                                        Updated Successfully..
                                    </div>

                                    <div class="modal-footer"
                                        style="padding: 0px;display: flex;gap: 20px;justify-content: end;">
                                        <button class="ok_btn" id="all_releases_ok">ok</button>
                                    </div>

                                </div>



                            </div>
                        </div>

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



                                <span class="number" id="number5div" style="background-color: #ccc;"><span
                                        id="div5number" style="color:black;font-weight: bold">5</span></span>

                                <svg class="div5done 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>

                                <svg class="div5pending 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>





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


                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv5()" style="font-size: medium;"> Unlinking
                                    any linked SoundCloud/YouTube channels</span>

                                <!-- <div id="div5_div" style="display:grid"> -->
                                <div class="open_div" id="div5"
                                    style="display:grid;width: 98%;grid-template-columns: 1fr auto;">

                                    <div style="width:100%;">
                                        <div style="width:100%;text-align: left;font-weight:600">
                                            <span
                                                style="font-weight:bold;font-size: larger;position: relative;">SoundCloud</span>
                                            <div style="position: relative;"> <span id="chanel_link"><b>Channel:
                                                    </b>https://soundcloud.com/routenote</span></div>
                                            <div id="chanel_unlink"
                                                style="display:none;font-size: 14px;font-weight: 500;">
                                                <div style="position: relative;"> <span><b>Channel:
                                                        </b>https://soundcloud.com/routenote</span></div><br>

                                                <div style="position: relative;font-size: 16px;">
                                                    <ul style="text-align: left;">
                                                        <li style="display:flex"><span>Soundcloud Unliked in "RN"
                                                                successfully</span> &nbsp;&nbsp;
                                                            <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=" ;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></span>
                                                        </li>
                                                        <li style="display:flex"><span>Email sent to "soundcloud@route.com" successfully</span>&nbsp;&nbsp;
                                                            <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="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></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>


                                            <div style="background: #0069d9;padding: 9px;width: 11rem;margin: 11px 371px 0px 12px;border-radius: 6px;cursor: pointer;color: #fff;width: 66%;"
                                                id="SoundCloud">
                                                Unlink &amp; Notify soundcloud Network

                                            </div>

                                            <!-- unlink mail -->

                                            <div id="unlink_mail" style=" width: 50%;display:none">
                                                <div class="modal-content" style=" ">
                                                    <div class="modal-header">
                                                        <h5 style="color: white;" class="modal-title"
                                                            id="customPopupLabel">Request for Soundlink</h5>
                                                        <button type="button" class="close">
                                                            <span onclick="toggleDiv5()"
                                                                style="color: #fff">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <label class="modalabel">To:</label>
                                                        <label disabled class="login-form__input">
                                                            soundcloud@routenote.com</label><br>
                                                        <label class="modalabel">Subject:</label><br>
                                                        <input class="login-form__input" type="text" name="Email"
                                                            id="name" size="59px" value=" Unlink">
                                                        <br><br>
                                                        <label class="modalabel">Body:</label><br>
                                                        <textarea class="login-form__input" type="text" name="Email" id="name"
                                                            style="position: relative;height: 150px;width: 100%;text-align: left">https://soundcloud.com/routenote
                                                    </textarea>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-secondary login maill"
                                                            id="SoundCloud_send">Send</button>
                                                        <button type="button" class="btn btn-secondary" id="approvesend"
                                                            onclick="toggleDiv5()">Close</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- unlink mail end-->




                                            <!-- <div>
                                                                                                            <button
                                                                                                                style="background: #0069d9;border-radius: 8px;border: none;padding: 10px;color: #fff;">channel:https://routenotetest.com/rn22/monetize/soundcloud-old</button>
                                                                                                        </div> -->
                                        </div>
                                        <br>
                                        <div style="width: 95%;text-align: left;">
                                            <div
                                                style="font-weight:bold;font-size: larger;text-align: left;position: relative;">
                                                YouTube channels</div>
                                                                                        <span id="gid1" style="display:none;"></span> <span id="gid2"
                                                style="display:none;"></span>
                                            <div style="position: relative;"> <span id="chanel_link1"><b>Channel:
                                                    </b>https://www.youtube.com/channel/zzzzzzzzzz</span></div>
                                                    <div id="btnsief">
                                                        <button onclick="subtask_create()"  class="mt-2 bg-[#0069d9] text-white p-2 w-max flex items-center gap-2 rounded-md">
                                                            <div class="font-medium">Unlink & Create Subtask</div>
                                                            <img src="https://smarthub.rn-test.com/images/asana_logo.svg" alt="asana" class="h-3">
                                                        </button>
                                                    </div>
                                            {{--<button onclick="subtask_create()" id="btnsief"
                                                style="background: #0069d9;padding: 10px 14px;
                                    border: none;
                                    border-radius: 6px;
                                    color: #fff;
                                    margin: 11px 371px 0px 12px;font-weight:bold;width:94%">Unlink
                                                & Create Subtask <span><img
                                                        src="https://smarthub.rn-test.com/images/asana_logo.svg"
                                                        style="height: 15px;" alt="logo" /></span></button>--}}

                                            <div id="chanel_link2" style="display:none;position: relative;">
                                                <span><b>Channel: </b>https://www.youtube.com/channel/zzzzzzzzzz</span>
                                            </div>
                                            <ul id="show" style="display:none;text-align: left;">
                                                <li style="display:flex"><span>Youtube channel Unliked in "RN" successfully
                                                    </span>&nbsp;&nbsp;
                                                    <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=" 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></span>
                                                </li>
                                                <li style="display:flex">
                                                    <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="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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span>Created this task as a subtask of "Unlinks" task under "YouTube Requests from Support Project" in Asana</span> &nbsp;&nbsp;
                                                </li>
                                            </ul>

                                            <div class="sub-tk-msg"
                                                style="display:none;font-weight: 600;color: #7d7d7d;padding: 7px 0;position: relative;">
                                                Subtask Created.</div>




                                            <div id="show1"
                                                style="display:none;margin: -9px 0 0 0px;padding: 10px 0; ">
                                                {{--<ul style="list-style: none;text-align: initial;">
                                                    <!-- <li><b>Assignee:</b> Liam</li>  -->
                                                    <li><b>Assignee:</b> Bryan</li>
                                                    <li><b>Description:</b> Channel :
                                                        https://www.youtube.com/channel/zzzzzzzzzz</li>
                                                    <li ><b>Status:</b>Completed</li>
                                                </ul>--}}
                                                <ul class="space-y-2">
                                                    <li class="grid" style="grid-template-columns: 1fr 1fr;"><b>Assignee:</b><span>Bryan</span></li>
                                                    <li class="grid" style="grid-template-columns: 1fr 1fr;"><b>Description:</b><span>Channel: https://www.youtube.com/channel/zzzzzzzzzz</span></li>
                                                    <li id="status" class="grid grid-cols-2"></li>
                                                </ul>
                                            </div>
                                            <br />
                                            {{--<button id="show3" onclick="request15()" class="">View Comments</button>--}}
                                            <div id="show3"
                                                style="display:none;cursor: pointer;color: #1010ffde;"
                                                onclick="request15()"><span
                                                    style="padding: 8px 1rem;
                                            background: #0069d9;
                                            color: #fff;
                                            border-radius: 5px;
                                            font-weight: 600;">Hide Comments</span></div>
                                            <div id="show2"
                                                style="display:none;cursor: pointer;color: #1010ffde;margin: -33px 221px 0 0;"
                                                onclick="request5()"><span
                                                    style="padding: 8px 1rem;
                                            background: #0069d9;
                                            color: #fff;
                                            border-radius: 5px;
                                            font-weight: 600;">View Comments</span></div>

                                        </div>

                                    </div>

                                    <div class="sou-yt-pupop" id="first">
                                        <div class="yt-header">
                                            <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-container" 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_post()" 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 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_post()">
                                                <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>
                                <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="ass-crt-suf-popup">
                                    <div class="suf-header">INFO</div>
                                    <div style="padding: 2rem;">
                                        <!-- Payment Task Created in Asana Successfully. -->
                                        Youtube channel has been unlinked in RN & Subtask created.
                                    </div>
                                </div>


                            </div>
                        </div>


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



                                <span class="number half6" style=" "><span id="half6"
                                        style="color:black;font-weight: bold">6</span></span>



                                <svg class="div6done 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>
                                <svg class="div6pending 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>

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

                            </div>

                            <div style="padding: 20px;">
                                <span id="sentence_1" onclick="toggleDiv6()" style="font-size: medium;">Creating a
                                    payment task</span>

                                <div style="width: 100%;display:flex;" id="div6_div">
                                    <div id="div6" class="open_div"
                                        style="display:grid;z-index:11;text-align: center;width: 100%; grid-template-columns: 1fr auto;">

                                        <div id="div6sub" style="width: 100%">

                                        </div>

                                        <div class="sou-pay-pupop" id="last">
                                            <div class="yt-header">
                                                <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-container1" 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_value1"
                                                        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_post1()" 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 style="display: flex;align-items: baseline;gap: 1rem;">
                                            <input type="text" id="texst_value1" 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_post1()">
                                                <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>
                                    <style>
                                        .box {
                                            width: 500px;
                                            height: 100px;
                                            border: dashed 5px #000;
                                            border-color: #4573d1 transparent transparent transparent;
                                            border-radius: 50%/100px 100px 0 0;
                                            rotate: 150deg;
                                            margin-left: -68px;
                                            left: 19px;
                                            margin-top: -85px;
                                            display: none;

                                        }
                                    </style>




                                    <div class="email_send_div" id="email_send_div"
                                        style="display: none;width: 500px;height: 150px;position: absolute;top: 20%;border: 1px solid;padding: 0;z-index: ;left: 50%;border-radius: 9px; box-shadow: 1px 1px 13px -3px #000;overflow: hidden;z-index: 1; background: #fff;">
                                        <div
                                            style="display: flex; justify-content: space-between;padding: 10px;background-color: #4573d1;color: #fff;font-weight: bold;z-index: 11111;position: relative;">
                                            <span>INFO</span>
                                            <span onclick="close_mail()" style="color: #fff">&times;</span>
                                        </div>

                                        <div style="padding: 40px;">
                                            Email Send Successfully.
                                        </div>
                                    </div>














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



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

                                <span class="number " style="background:#0069d9"><span 
                                        style="color:white;font-weight: bold">7</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 class="bar"
                            style="width: 6px;left: 52px;position: absolute;background-color: #0069d9;top: 30px;bottom: 30px;">
                        </div>
                    </div>

                    <style>
                        .ap_rej_btns {
                            padding: 5px 15px;
                            border: 1px solid;
                            border-radius: 8px;
                            color: #fff;
                        }
                    </style>

                    <div style="display: flex;padding: 10px;justify-content: end;gap: 10px;background:#fff;margin-top: -1px;
    mix-blend-mode: darken;
    width: 122%;
    border-radius: 0 0 .3rem .3rem;">
                       


                                {{-- <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 and assign it to Luna</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>
                                    
                                    --}}

                            <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 and Assign it to Luna</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>


                        

                        
                    </div>


                </div>

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

        <!-- Modal HTML -->
        <div class="modal fade" id="mail" 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">
                    <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>




        <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"
                            value="Closure - Request for more Information">
                        <br><br>
                        <label class="modalabel">Body:</label><br>
                        <textarea class="login-form__input" type="text" name="Email" id="requestname"
                            style="position: relative;height: 150px;width: 100%;text-align: left">
                            Dear sellerrnn,
Account Closure form request is under-progress status. Please provide the following details to proceed
 

Many Warm Regards,
The RouteNote Team

</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"> </label><br>
                        <label class="modalabel">Subject:</label>
                        <input class="login-form__input" type="text" name="Email" id="name" size="59px"
                            value="Closure - Reject">
                        <br><br>
                        <label class="modalabel">Body:</label><br>
                        <textarea class="login-form__input" type="text" name="Email" id="rejectname"
                            style="position: relative;height: 150px;width: 100%;text-align: left">Dear sellerrnn,
If you'd like to receive the earnings on your account, you'll first need to add a payment method to your account. 

To link up your PayPal email to your account, you'll need to log in to your RouteNote account, hover over 'Your Account' and then click 'Payment Profile'. You'll see a prompt for a One-Time passcode which will have been sent to your registered email address. 
If you'd rather close your account without receiving your final earnings, we can proceed without the need to add a payment method to your account. 

This is in relation to the RouteNote account with the username sellerrnn and UID 72567.

Please confirm in your reply when you've registered these details, or if you'd like to have your account closed without receiving the earnings. If you do not respond within 30 days, we will close the account as initially requested.


Many Warm Regards,
The RouteNote Team

</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 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">
                            Account Closure form is Approved and request queued in luna successfully..
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" id="approvesend"
                                data-dismiss="modal">Close</button>
                        </div>

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




 

        <!-- Modal HTML -->
        <div class="modal fade" id="viewpop" tabindex="-1" role="dialog" aria-labelledby="customPopupLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="margin-right: auto;" role="document">
                <div class="modal-content" style="width: auto !important;">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="customPopupLabel">Account Closure 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 title="Export PDF" src="{{ asset('images/upload.png') }}" style="width: 30px;border-radius: 50%;box-shadow: 0 0 10px #bbb;"></a></div>
                        <div>
                            <label class="modalabel">Email:</label>
                            <label disabled class="login-form__input" id="email"> </label>
                        </div>
                        <div><label class="modalabel">Username:</label>
                            <label disabled class="login-form__input" id="username"> </label>
                        </div>
                        <div> <label class="modalabel">User ID:</label>
                            <label disabled class="login-form__input" id="userID"> </label>
                        </div>
                        <hr style="margin-top: 0rem !important;">
                        <div><label class="modalabel">Would you like to wait for your final sales report or close your
                                account immediately?
                            </label><br></div>
                        <div> <label disabled class="login-form__input" id="would_you_like_to_wait"> </label></div>
                        <hr style="margin-top: 0rem !important;">
                        <div><label class="modalabel">Were you satisfied with RouteNote?
                            </label></div>
                        <div><label disabled class="login-form__input" id="rating"> </label></div>
                        <hr style="margin-top: 0rem !important;">
                        <div> <label class="modalabel">Why have you decided to close your account?
                            </label></div>
                        <label disabled class="login-form__input" id="reason"> </label>
                        <hr style="margin-top: 0rem !important;">
                   

                    <div>
                        <div id="elaborate_reason_label" style="display:none; "><label
                                class="modalabel">To help us improve, could you please elaborate?</label><br>
                            <label style="position: relative;" disabled class="login-form__input" id="elaborate_reason">
                            </label>
                            <hr style="margin-top: 0rem !important;">
                        </div>

                        <div id="other_distrubutor_label" style="display:none; ">
                            <label class="modalabel">Where are you heading?</label><br>
                            <label style="position: relative;" disabled class="login-form__input" id="other_distrubutor">
                            </label>
                            <hr style="margin-top: 0rem !important;">
                        </div>
                    </div>

                    <div style=" "><label class="modalabel">Before you go, is there
                            anything you'd like to suggest to improve the RouteNote experience?</label></div> 
                    </div>

                    <div><label style="left: 17px;position: relative;" disabled class="login-form__input" id="comments">
                        </label></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>

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







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


        </div>


    </body>




    <script>
        $(document).ready(function() {

            $('#SoundCloud').click(function() {
                $('.modal-dialog').css('left', '-6%');
                $('.modal-dialog').css('max-width', '70%');
                $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                $('#unlink_mail').css('width', '35%');
                $('#unlink_mail').css('position', 'absolute');
                $('#unlink_mail').css('top', '10%');
                $('#unlink_mail').css('right', '5%');
                $('#unlink_mail').css('text-align', 'left');
                $('#unlink_mail').css('display', 'block');

            });




            $('#SoundCloud_send').click(function() {

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

                    success: function(result) {
                        $('#div5pending').css('display', 'none');
                        $('#div5done').css('display', 'block');
                        $('.half5').css('background',
                            'linear-gradient(to right, #ccc 50%, #0069d9 50%)');
                        $('#half5').css('color', '#fff');
                        $('#unlink_mail').css('display', 'none');
                        $('.approve_sale_completed').css('display', 'block');
                        $('.approve_sale_completed').css('opacity', '1');
                        $('.approve_sale_completed').css('left', '60%');

                        $('#SoundCloud').hide();
                        $('#chanel_link').hide();
                        $('#chanel_unlink').toggle();

                        if ($('#gid1').text() != '') {
                            $('#number5div').css('background', '#ccc');
                            $('#div5number').css('color', '#000');
                            $('#div5text').text('Admin Action Completed');

                        } else {
                            $('#number5div').css('background', '#ccc');
                            $('#div5number').css('color', '#000');
                            $('#div5text').text('Admin Action needed');

                        }


                        setTimeout(function() {
                            $('.exelen_half5').css('display', 'none');
                            $('.tick_half5').css('display', 'block');

                            $('.approve_sale_completed').css('display', 'none');
                            $('#approve_sale').css('opacity', '0');
                            $('.modal-dialog').css('max-width', '500px');
                            $('.modal-dialog').css('transition', 'max-width 0.4s ease');
                        }, 2000);
                    }
                })
            });





            $('#send1').click(function() {
                $('.earning_untick').css('display', 'none');
                $('.earning_tick').css('display', 'block');
                $('#earning_untick').css('display', 'none');
                $('#earning_tick').css('opacity', '1');
            });

        });
    </script>
@endsection