@extends('header.topnav')

@section('title', 'Welcome')

@section('content')




    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../images/favicon.png">
    <title>Smarthub - RN</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">




    <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 {
            height: 19rem;
            width: 39rem;
            background-color: white;
            position: absolute;
            top: 27rem;
            right: 1rem;
            box-shadow: 4px 6px 11px -1px #ddd;
            border-radius: 8px;
            padding: 1rem;
            display: none;
        }

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


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

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

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

        .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;
        }

        #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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- jQuery UI library -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js">
    </script>
    <script>
        $.noConflict();
        jQuery(document).ready(function($) {
            $('#yourDataTableId').DataTable({
                "pageLength": 10,
                "stripeClasses": []
            });
        });
    </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>
        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').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() {
            $('.all_releases').hide();
            $('.approve_sale').hide();
            $('#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').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 subtask_create() {
            $.ajax({
                type: 'POST',
                url: 'subtaskcreate1',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    formid: $('#formid').val(),
                },
                success: function(result) {

                    console.log('result', result);
                    $('#gid1').text(result.gid);



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

                        // 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>
    `;
                    });

                    // 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() {
            $('#first').css('display', 'none');
            $('#show3').css('display', 'none');
            $('#show2').css('display', 'block');
            $('.modal-dialog').css('max-width', '500px');
            $('.modal-dialog').css('transition', 'max-width 0.4s ease');
        }

        function request16() {
            $('#last').css('display', 'none');
            $('#hidebutton').css('display', 'none');
            $('#showbutton').css('display', 'block');
            $('.modal-dialog').css('max-width', '500px');
            $('.modal-dialog').css('transition', 'max-width 0.4s ease');
        }

        function request5() {
            $.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>' + result.status);
                    let comments = result.comments.data; // Access the comments array

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

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

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

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

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

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

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

                    // Insert the HTML into the container
                    $('#data-container').html(html);
                    $('.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() {
            $.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>' + result.status);
                    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>
    `;
                    });

                    // 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) !!};
            console.log(details);

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

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


            $('.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');


                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: NO</span>' ;
                                }else{
                                    var varible='<span style="padding: 10px;">FSA USER: YES</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="mail" onclick="send_mail()">Send mail</button></span--> 
`);
                        if (result.artist == 0) {

                            $('#artistno').css('display', 'block');
                            $('#artistyes').css('display', 'none');
                        } else {
                            $('#artistyes').css('display', 'block');
                            $('#artistno').css('display', 'none');
                        }
                        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">
                    <button style="background: #0069d9;" class=" btn-secondary actiondone11" id="requestt"
                    onclick="request1()">Request for Paypal info</button>
                    </span>
                    </div>
                    `);



                    }
                })

                $('#div6sub').html(`
            <div id="taskhide" style="width: 86%;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> 

            <div style="width: 72%;left: -46px;position: relative;">

            <button id="btnsief1" 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="display:none;font-weight: 600;color: #7d7d7d;padding: 7px 0;left: -34px;position: relative;">Subtask Created..</div>    
            <div id="show5" style="display:none;margin: -9px 0px 0px 51px;padding: 10px 0; ">
            <ul style="list-style: none;text-align: initial;width: 161%;">
            <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 id="status1"><b>Status:</b> Not Completed</li>
            </ul>
            </div>
            <div id="hidebutton" onclick="request16()" style="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 id="showbutton" onclick="request6()" style="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('Completed');
                    $('.half').css('background', 'linear-gradient(to right, #ccc 50%, #0069d9 50%)');

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

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

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

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

                        $('#click_remove').css('display', 'none');
                    }
                } else {
                    $('#div4text').text('Admin Action Needed');

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

                    $('#mail').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });
                    $('.div3pending').css('display', 'none');
                    $('.div3done').css('display', 'block');
                    $('#div3text').text('Completed');
                }
                if (matchingEntry.verify_paypal == '1') {
                    $('.div2pending').css('display', 'none');
                    $('.div2done').css('display', 'block');
                    $('#div2text').text('Completed');
                    $('#requestt').css({
                        'pointer-events': 'none',
                        'cursor': 'not-allowed',
                    });
                    $('#number2div').css('background', '#0069d9');
                    $('#div2number').css('color', '#fff');
                    $('#requestt').text('Request Sent');
                }

                if (matchingEntry.verify_soundlink == '1') {
                    $('.div5pending').css('display', 'none');
                    $('.div5done').css('display', 'block');
                    $('#div5text').text('Completed');
                    $('#SoundCloud').css('display', 'none');
                    $('#chanel_unlink').css('display', 'block');
                    $('#chanel_link').css('display', 'none');

                    $('#requestt').text('Request Sent');
                }

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

                }

                $.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) {
                        $('#status').html('<b>Status:</b>' + result.status);
                        $('#status1').html('<b>Status:</b>' + result.status1);
                        var status = result.status;
                        if (status != 'Not Completed') {
                            $('#number5div').css('background', '#0069d9');
                            $('#div5number').css('color', '#fff');
                        }

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

                var matchingEntry2 = analysisData2.find(function(item) {
                    return item.form_id.toString() === matchingEntry.form_id.toString() && item
                        .type === 'account';
                })
                if (matchingEntry2) {
                    if (matchingEntry2.status == 'approve') {
                        $('#approve').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                        $('#approve').css('display', 'block');
                        $('#approvetext').text('Approved & Assigned to Luna');
                        $('#reject').css('display', 'none');
                        $('#request').css('display', 'none');
                    } else if (matchingEntry2.status == 'request') {
                        $('#request').css({
                            'pointer-events': 'none',
                            'cursor': 'not-allowed',
                        });
                        $('#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',
                        });
                        $('#rejecttext').text('Rejected');

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

                    }
                }






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

                if (detail.other_distrubutor) {
                    $('#other_distrubutor_label').show();
                    $('#other_distrubutor').text(detail.other_distrubutor_value);
                } 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;
                });
                $('.approve_sale').toggle();
                $('.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
                    .form_id);

                $('#action_4').css('display', 'none');
                $('#div4text').text('Completed');
                $('#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'
                });

            });




            $('#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.form_id);

                $('#click_remove').css('display', 'none');
                $('#remove_txt').css('display', 'block');
                $('.half').css('background', '#0069d9');
                $('#half').css('color', '#fff');

                $('#div4text').text('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) {
                        $('.half').css('background',
                            'linear-gradient(to right, #ccc 50%, #0069d9 50%)');
                        $('.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) {
                        $('.half').css('background', '#0069d9');
                        $('.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>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 onclick="close_mail()" 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">

                                    </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=" 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%;">
                                            <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">
                                                        mcldevtest@gmail.com</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"
                                                        data-dismiss="modal">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="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">
                                    <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="toggleDiv4()">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="toggleDiv4()">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 class="open_div" id="div5" style="width: 30rem;">

                                    <div style="width:100%;">
                                        <div style="width:100%;text-align: center;font-weight:600">
                                            <span
                                                style="font-weight:bold;font-size: larger;right: 174px;position: relative;">SoundCloud</span>
                                            <div style="left: -71px;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;margin: 11px 0 0 -379px;
  font-weight: 500;">
                                                <div style="left: 116px;position: relative;"> <span><b>Channel:
                                                        </b>https://soundcloud.com/routenote</span></div><br>

                                                <div style="left: 381px;position: relative;font-size: 16px;">
                                                    <ul style="width: 54%;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="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>
                                                        <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="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>
                                                    </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"
                                                            data-dismiss="modal">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: center;">
                                            <div
                                                style="font-weight:bold;font-size: larger;left: -138px;position: relative;">
                                                YouTube channels</div>
                                                                                        <span id="gid1" style="display:none;"></span> <span id="gid2"
                                                style="display:none;"></span>
                                            <div style="left: -19px;position: relative;"> <span
                                                    id="chanel_link1"><b>Channel:
                                                    </b>https://www.youtube.com/channel/zzzzzzzzzz</span></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;left: -16px;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="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>
                                                <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="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>&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;left: -130px;
  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>Description:</b> Channel :
                                                        https://www.youtube.com/channel/zzzzzzzzzz</li>
                                                    <li id="status"><b>Status:</b> Not Completed</li>
                                                </ul>
                                            </div>
                                            <br />
                                            <div id="show3"
                                                style="display:none;cursor: pointer;color: #1010ffde;margin: -33px 221px 0 0;"
                                                onclick="request15()"><span
                                                    style="padding: 8px 1rem;
  background: #0069d9;
  color: #fff;
  border-radius: 5px;
  font-weight: 600;">View
                                                    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>
                                <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 class="sou-yt-pupop" id="first">
                                    <div class="yt-header">
                                        <div>All Activity in&nbsp;<span><img
                                                    src="https://smarthub.rn-test.com/images/asana_logo.svg"
                                                    style="height: 15px;" alt="logo" /></span></div>
                                    </div>
                                    <div id="data-container"
                                        style="height: 12rem;width: 100%;padding: 1.5rem;overflow:auto">


                                    </div>
                                    <div style="display: flex;align-items: baseline;gap: 1rem;">
                                        <input type="text" id="texst_value" style="width: 85%;padding: 6px;"
                                            placeholder="comments *">
                                        <button
                                            style="background: #0069d9;padding: 7px 14px;border: none;border-radius: 6px;color: #fff;margin-top:1rem"
                                            Onclick="comment_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>
                        </div>


                        <div style="display: flex;">
                            <div style="padding: 20px;position: relative;" 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;">
                                    <div id="div6" class="open_div"
                                        style="height: 10%;z-index:11;text-align: center;width: 30rem;">

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

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

                                        </div>
                                        <div style="display: flex;align-items: baseline;gap: 1rem;">
                                            <input type="text" id="texst_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>
                            </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;">
                        <button id="approve" class="ap_rej_btns" style="background: #00a000;" onclick="approve()">

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


                            <span id="approvetext"> Approve & Assign to Luna</span></button>


                        <button id="reject" class="ap_rej_btns" style="background: #d41111;" onclick="reject()">

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


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

                        <button id="request" class="ap_rej_btns" style="background: #fcba03;" onclick="request()">

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


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


                </div>

            </div>
        </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: 640px;" role="document">
                <div class="modal-content" style="width:173% !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: 0;position: absolute;"><a id="exportdata" href=""> <img
                                    src="{{ asset('images/upload.png') }}" style="width: 30px"></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>
                        <div id="elaborate_reason_label" style="display:none;left: 17px;position: relative;"><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;left: 17px;position: relative;">
                            <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="left: 17px;position: relative;"><label class="modalabel">Before you go, is there
                            anything you'd like to suggest to improve the RouteNote experience?</label></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');
                        $('#div5text').text('Completed');
                        $('.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();



                        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