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


<head>
	
	<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://rn-test.com/kr/revenueshare/css/app.css">

	  <link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/modules/aggregator/aggregator.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/modules/node/node.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/modules/system/defaults.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/modules/system/system.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/modules/system/system-menus.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/modules/user/user.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/sites/all/modules/cck/theme/content-module.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/sites/all/modules/jtooltips/jtooltips.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/sites/all/modules/logintoboggan/logintoboggan.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/modules/forum/forum.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/sites/all/modules/cck/modules/fieldgroup/fieldgroup.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/sites/all/modules/views/css/views.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/themes/rnmusic/style.css?T" />
<link type="text/css" rel="stylesheet" media="all" href="https://rn-test.com/kr/themes/rnmusic/suckerfish.css?T" />


        <link rel="stylesheet" type="text/css" href="https://rn-test.com/kr/rnb_app.css">
  
  <link rel="stylesheet" type="text/css" href="https://rn-test.com/kr/themes/rnmusic/font/frontpage.css">
  <link rel="stylesheet" type="text/css" href="https://rn-test.com/kr/image_db/font_app.css">




    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" href="{{ asset('header/header.css') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="shortcut icon" href="{{ asset('images/favicon.png') }}">
    <title>Magiclink - RN</title>

    <style>
input:-webkit-autofill {
    background-color: #F5F5F5 !important;
    color: #000 !important;
    -webkit-box-shadow: 0 0 0px 1000px #F5F5F5 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
input.input-error {
  background-color: #FDE9E8 !important;
  color: #EF6966 !important;
  border: 2px solid #EF6966 !important;
}

/* Autofill override */
input.input-error:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FDE9E8 inset !important;
  -webkit-text-fill-color: #EF6966 !important;
  border: 2px solid #EF6966 !important;
}
.right_nav_menu_logout {
    background: #000000 !important;
    height: 65px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}



        .shareUPCDropdown {
            height: 150px;
            overflow: auto;
            width: auto;
            scrollbar-width: thin !important;
            border-radius: 0;
            padding: 0;

        }
        body {
            font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif !important;
            background-color: #efebf8;
        }

        .pad {
            padding: 5px 20px;
        }

        a {
            // text-decoration: none;
        }

        p {
            text-align: justify;
            font-size: 15px;
            font-family: system-ui
        }

        input:focus-visible {
            border: none;
            outline: none;
        }

        input[type="radio"] {
            width: 18px;
            height: 18px;
            filter: hue-rotate(45deg);
            cursor: pointer;
        }

        .uncheck_btn {
            float: right;
            margin: 20px 0;
            background: none;
            border: none;
            padding: 10px;
            border-radius: 7px;
            display: none;
        }

        .uncheck_btn:hover {
            background: #f0f0f0;
        }

        .success {
            background-color: #5a39b6;
            color: #fff;
            padding: 10px 25px;
            border-radius: 5px;
            border: none;
            filter: drop-shadow(0px 2px 2px black);
        }

        .top_bg {
            /* background-image: url('https://magiclink.rn-test.com/images/banner.png');
            background-size: cover;
            max-height: 23vw;
            max-width: 90vw;
            height: 160px;
            width: 640px; */
        }

        .cont1 {
            background-color: #fff;
            border: 1px solid #dfdfdf;
            margin-top: 12px;
            border-top: 11px solid #1345AC;
        }

        .cont2 {
            background-color: #fff;
            border: 1px solid #dfdfdf;
            margin-top: 12px;
            overflow: hidden;
        }

  .btn {
    background-color: #1345AC;
    color: #fff;
    width: 130px;
    height: 50px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
  }

  .btn:hover {
    background-color: #ffffff;
    color: #1345AC;
    border: 2px solid #1345AC;
  }

        select {
            cursor: pointer !important;
        }

        #form3,
        #form2,
        #form2nd,
        #form3rd,
        #success {
            display: none;
        }

        .headings p {
            margin: auto 0;
            font-weight: 400;
        }

        .headings div {
            height: 40px;
        }


        .badge_right_menu {
            color: white;
            transform: scale(1.8);
            line-height: normal;
            width: 13rem;
            margin-left: 34px;
        }

        .badge_right_menu ion-icon {
            cursor: pointer;
        }

        .top_user_inert {
            display: none;
            position: fixed;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 22px;
            /* max-width: 400px; */
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
            z-index: 99;
            /* width: max-content; */
            width: 25rem;
            border-radius: 8px;
            right: 2.5rem;
            top: 4.5rem;
        }

        .top_user_open {
            display: block;
            animation: slideDown 0.3s ease-in-out;
        }

        .top_user_inert .user_head {
            display: flex;
        }

        .top_user_inert .user_head .logout_head {
            width: 20%;
            display: flex;
            justify-content: end;
        }

        .top_user_inert .user_head .logout_head ion-icon {
            height: 24px;
            width: 24px;
            cursor: pointer;
        }

        .top_user_inert .split_head {
            // width: 80%;
            width: 100%;
            display: flex;
            height: 70px;
        }

        .top_user_inert .user_head .split_head div {
            /*            width: 19%;*/
            margin-right: 14px;
            position: relative;
        }

        .top_user_inert .user_head .split_head div img {
            width: 100% !important;
        }

        .top_user_inert .user_head .split_head div p {
            margin: 1px;
            font-weight: 700;
            margin-bottom: 0;
        }

        .top_user_inert .user_head .split_head div .unqiue {
            font-size: 11px;
            color: #7e7e7e;
        }

        .top_user_inert .user_head .split_head div .sub_time {
            font-size: 11px;
            background: #0080002e;
            padding: 2px 9px;
            border-radius: 31px;
            color: green;
            width: max-content;
        }

        .top_user_inert .user_body {
            padding: 1.5rem 0rem 1rem 0;
            position: relative;
            /* height: 200px;
            overflow-x: auto; */
        }

        .top_user_inert .user_body .out_of_card_first {
            padding: 1rem;
            border: 1px solid #dfdfdf;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
        }

        .top_user_inert .user_body .out_of_card_first ion-icon {
            /*            transform: scale(2);*/
        }

        .top_user_inert .user_head .split_head div .status_res {
            height: 14px;
            width: 14px;
            background: green;
            border: 2px solid #fff;
            border-radius: 50%;
            position: absolute;
            right: -8px;
            bottom: 5px;
            /* cursor: pointer; */
        }

        
        /* .top_user_inert .user_head .split_head div .status_res:hover {
        background-color: #bbb !important;
    } */

        /* .top_user_inert .user_head .split_head div .status_res:hover::before {
        content: "^";
        display: flex;
        align-items: center;
        justify-content: center;
        margin: -10px 0 0;
        transform: rotate(180deg);
    } */

        .top_user_inert .user_head .split_head .popup_status {
            position: absolute;
            height: max-content;
            width: 5rem;
            background: #fff;
            border-radius: 4px;
            top: 74px;
            left: 71px;
            z-index: 9999;
            border: 1px solid #ddd;
            display: none;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .top_user_inert .user_head .split_head .popup_status p {
            font-size: small;
            font-weight: 400;
            text-align: center;
            display: flex;
            justify-content: space-around;
            padding: 4px;
            margin: 0;
            cursor: pointer;
        }

        .top_user_inert .user_head .split_head .popup_status p:hover {
            background-color: #ddd;
        }

        .top_user_inert .user_head .split_head div .status_res div {
            border: 3px solid #fff;
            border-radius: 50%;
            position: relative;
            right: -2px;
            bottom: -2px;
            display: none;
        }

        .top_user_inert .user_body .dont_dis_card_sec {
            padding: 1rem;
            border: 1px solid #dfdfdf;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }

        .top_user_inert .user_body .dont_dis_card_sec .moon_circle_in {
            background: #ff9a03;
            padding: 2px;
            border: 2px solid #ff9a03;
            display: flex;
            align-items: center;
            border-radius: 50%;
            height: 26px;
            width: 26px;
            position: relative;
        }

        /*    .top_user_inert .user_body .dont_dis_card_sec .moon_circle_in div {
            border-right: 2px solid;
            height: 1.3rem;
            transform: rotate(-45deg);
            position: absolute;
            left: 10px;
            border-color: #000000;
            top: 1px;
        }*/
        .top_user_inert .user_body .dont_dis_card_sec .moon_circle_in span {
            background: white;
            width: 2px;
            height: 21px;
            transform: rotate(-45deg);
            position: absolute;
            left: 9px;
            top: 1px;
            border: 1px solid #ff9a03;
            padding-right: 2px;
            display: none;
            border-bottom: none;
            border-top: none;
            border-radius: 11px;
        }

        .top_user_inert .option_out {
            display: flex;
            justify-content: end;
        }

        .top_user_inert .option_out .logout_outline {
            display: flex;
            align-items: center;
            gap: 2px;
            cursor: pointer;
        }

        .top_user_inert .option_out .logout_outline ion-icon {
            color: black;
            transform: scale(1.2);
        }

        .top_user_inert .option_out .logout_outline span {
            color: black;
        }

        .top_user_inert .user_body .schedule_timeset {
            padding: 1rem;
            border: 1px solid #dfdfdf;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }

        .top_user_inert .user_body .schedule_timeset .moon_circle_in {
            background: #ff9a03;
            padding: 3px;
            border: 2px solid #ff9a03;
            display: flex;
            align-items: center;
            border-radius: 50%;
            height: 26px;
            width: 26px;
            justify-content: center;
            position: relative;
        }

        .top_user_inert .user_body .schedule_timeset .moon_circle_in #jUF221fvd {
            height: 8px;
            width: 8px;
            position: absolute;
            background: #ff9a03;
            display: flex;
            justify-content: center;
            border-radius: 50%;
            align-items: center;
            color: white;
            top: 1px;
            left: 13px;
            font-size: 8px;
        }

        .top_user_inert .user_body .schedule_timeset .moon_circle_in img {
            width: 18px;
            height: 24px;
        }

        .top_user_inert .user_body .schedule_timeset input {
            background: #cfcfcf47;
            border: none;
            border-radius: 7px;
            width: 44%;
            color: #212121;
            font-size: small;
            padding: 3px;
            font-size: 12px;
        }

        .top_user_inert .user_body .schedule_timeset span {
            font-size: 12px;
            padding: 0 2px;
        }

        /* switch */
        .user_head_uni_switch .bell_switch {
            position: relative;
            display: inline-block;
            width: 36px;
            /*            height: 22px;*/
            height: 29px;
        }

        .user_head_uni_switch .bell_switch input {
            display: none;
        }

        .user_head_uni_switch .bell_switch label {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            border-radius: 34px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-bottom: 0.5rem;
        }

        .user_head_uni_switch .bell_switch input:checked+label {
            background-color: #2196F3;
        }

        .user_head_uni_switch .bell_switch label:before {
            position: absolute;
            content: "";
            height: 13px;
            width: 13px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }

        .user_head_uni_switch .bell_switch input:checked+label:before {
            transform: translateX(16px);
        }

        .top_user_inert .user_head .split_head div .sub_time {
            display: block;
        }

        .top_user_inert .user_head .split_head div .sub_time_do {
            // padding: 2px 9px;
            // border-radius: 31px;
            // font-size: 11px;
            // background: #ff9a033d;
            // color: #ff9a03;
            // width: max-content;
            display: none;
        }

        .top_user_inert .user_head .split_head div .sub_time_out {
            // padding: 2px 9px;
            // border-radius: 31px;
            // font-size: 11px;
            // background: #ffc4c4;
            // color: #ff4e4e;
            // width: max-content;
            display: none;
        }

        .admin_box {
            display: none;
        }

        .shareUPCDropdown {
            display: block;
            background: #F5F5F5;
                width: 250px !important;
        }

        .shareUPCDropdown .dropdown-item {
  height: 50px;
  padding: 14px 40px 14px 20px;
  background: #F5F5F5;
  font-family: Arial;
  font-size: 14px;
  border: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  width:100%;
        }

        .shareUPCDropdown .dropdown-item:hover {
             background: #fafafa !important;
        }

        .shareUPCDropdown .dropdown-item:last-child {
  padding: 14px 40px 14px 20px;
            border-bottom: 0;
        }
    </style>
    <style>
        .error-message {
            color: red;
            font-size: 14px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>



document.addEventListener("DOMContentLoaded", function () {
    const backLink = document.getElementById("backToFormLink");
    if (backLink) {
        backLink.addEventListener("click", function (e) {
            e.preventDefault();

            fetch("{{ route('clear.flash') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if(data.status === 'cleared') {
                    // Redirect or reload the page without flash message
                    window.location.href = "{{ url()->current() }}";
                }
            })
            .catch(err => {
                console.error('Error clearing session:', err);
                // fallback reload anyway
                window.location.href = "{{ url()->current() }}";
            });
        });
    }
});



       document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('myForm');

    form.addEventListener('submit', async (event) => {
        event.preventDefault(); // Stop the form from submitting immediately

        const isValid = await success(); // Run your async validation
//alert(isValid);
        if (isValid) {
            form.submit();
        }

    })
});
       
async function success() {
    const containers = document.querySelectorAll('#main-container .container');
    const userId = $('input[name="userid"]').val();

    let allValid = true;
    let allISRCs = [];
    for (const container of containers) {
        const id = container.dataset.id;
        const upcInput = document.getElementById(`upcInput-${id}`);
        const selectedUPC = upcInput.value.trim();
        const isrcinput = document.getElementById(`isrc-${id}`);
        const selectedISRC = isrcinput?.textContent?.trim() || '';

        // === UPC EMPTY CHECK ===
        if (!selectedUPC) {
            upcInput.style.background = "#FDE9E8";
            upcInput.style.border = "2px solid #EF6966";
            upcInput.style.color = "#EF6966";
            $('#reason' + id).css('display', 'block');
            $('#reasontext' + id).text('Please fill in this field.');
            $('#optionsContainer' + id).css('display', 'none');
            allValid = false;
        } else {
            const validationResult = await validateUPC(selectedUPC, userId);

            if (!validationResult.isValid && validationResult.reason === 'not_found') {
                upcInput.style.background = "#FDE9E8";
                upcInput.style.border = "2px solid #EF6966";
                upcInput.style.color = "#EF6966";
                $('#reason' + id).css('display', 'block');
                $('#reasontext' + id).text('Invalid UPC. Please select a valid UPC.');
                $('#optionsContainer' + id).css('display', 'none');
                allValid = false;
            } else {
                upcInput.style.background = "#F5F5F5";
                upcInput.style.border = "none";
                upcInput.style.color = "black";
                $('#reason' + id).css('display', 'none');
            }
        }

        allISRCs.push(selectedISRC);
        
        // === NEW SHARE VALIDATION ===
        const shareValid = await isAtLeastOneNewShareFilled(id);
        if (shareValid === null) {
            $('#share' + id).css('display', 'block');
            $(`#sharetext${id}`).text('Please add at least one new share.');
            allValid = false;
        } else if (!shareValid) {
            allValid = false;
        }
    }



    const isrcCounts = {};
allISRCs.forEach(isrc => {
    if (isrc) {
        isrcCounts[isrc] = (isrcCounts[isrc] || 0) + 1;
    }
});

let duplicateFound = false;

containers.forEach(container => {
    const id = container.dataset.id;
    const isrcDiv = document.getElementById(`isrc-${id}`);
    const selectedISRC = isrcDiv?.textContent?.trim() || '';

    if (isrcCounts[selectedISRC] > 1) {
        // Show inline error message
        $(`#isrcreason${id}`).css('display', 'block');
        $(`#isrcresontext${id}`).text('Duplicate ISRCs are not allowed. Please select a different ISRC.');
        duplicateFound = true;
    }
});

if (duplicateFound) {
    return false;
}
    

    return allValid;
}

async function isAtLeastOneNewShareFilled(containerId) {
    const inputs = document.querySelectorAll(`#additional-inputs-${containerId} .coverform_input${containerId}`);
    if (inputs.length === 0) return null;

    $(`#shareUPCDropdown${containerId}`).css('display','none');
    let totalPercent = 0;
    let hasFilledGroup = true;

    for (let index = 0; index < inputs.length; index++) {
        const group = inputs[index];
        const textInputs = group.querySelectorAll('input');
        const [userIdInput, userNameInput, percentInput] = textInputs;

        const isUserIdFilled = userIdInput.value.trim() !== '';
        const isUserNameFilled = userNameInput.value.trim() !== '';
        const isPercentFilled = percentInput.value.trim() !== '';

        // const percentValue = parseFloat(percentInput.value) || 0;
        // totalPercent += percentValue;



        // const percentValue = parseFloat(percentInput.value) || 0;
        // totalPercent += percentValue;

        const percentStr = percentInput.value.trim();
        const percentValue = parseFloat(percentStr);
        const isPercentValidNumber = !isNaN(percentValue) && isFinite(percentValue);

        if (isPercentFilled && isPercentValidNumber) {
            totalPercent += percentValue;
        }

//console.log('index',index);

        $(`#newreason${index+1}${containerId}`).hide();
        $(`#usernewreason${index+1}${containerId}`).hide();
        $(`#pernewreason${index+1}${containerId}`).hide();

        if (!isUserIdFilled) {
            userIdInput.style.background = "#FDE9E8";
            userIdInput.style.border = "2px solid #EF6966";
            userIdInput.style.color = "#EF6966";
            $(`#newreason${index+1}${containerId}`).show().text('Please fill in this field.');
            //$(`#searchIcon${index+1}${containerId}`).css('right','22px');
            hasFilledGroup = false;
        } else {
            userIdInput.style.background = "#F5F5F5";
            userIdInput.style.border = "none";
            userIdInput.style.color = "black";
        }

        if (!isUserNameFilled) {
            userNameInput.style.background = "#FDE9E8";
            userNameInput.style.border = "2px solid #EF6966";
            userNameInput.style.color = "#EF6966";
            $(`#usernewreason${index+1}${containerId}`).show().text('Please fill in this field.');
            hasFilledGroup =  false;
        } else {
            userNameInput.classList.remove('input-error');
            userNameInput.style.background = "#F5F5F5";
            userNameInput.style.border = "none";
            userNameInput.style.color = "black";
        }

        if (!isPercentFilled || !isPercentValidNumber) {
            percentInput.style.background = "#FDE9E8";
            percentInput.style.border = "2px solid #EF6966";
            percentInput.style.color = "#EF6966";
            if(!isPercentFilled){
                $(`#pernewreason${index+1}${containerId}`).show().text('Please fill in this field.');

               
            }else{
                $(`#pernewreason${index+1}${containerId}`).show().text('Please enter a valid number.');
            }
           return false;
        } else {
            percentInput.style.background = "#F5F5F5";
            percentInput.style.border = "none";
            percentInput.style.color = "black";
        }

        if (userIdInput.value || userNameInput.value) {
            try {
                const response = await ajaxPost("{{ route('getupcDetails11') }}", {
                    query: userIdInput.value,
                    query2: userNameInput.value
                });

                if (response.errorMessage) {
        window.location.reload();
        return false; 
    }

            } catch (error) {
                console.error("AJAX error:", error);
                return false;
            }
        }

        // // At least one fully filled group
        // if (isUserIdFilled && isUserNameFilled && isPercentFilled) {
        //     hasFilledGroup = true;
        // }
    }

   // alert(`Total Percent: ${totalPercent}`);
    if (totalPercent != 100) {
   
        $(`#newshare${containerId}`).show().text('Entered new share percentages do not total 100%'); 
console.log(inputs);

        for (let index = 0; index < inputs.length; index++) {
            const group = inputs[index];
            console.log(group);
            const percentInput = group.querySelectorAll('input')[2]; // 3rd input
            console.log(percentInput);
            percentInput.style.background = "#FDE9E8";
            percentInput.style.border = "2px solid #EF6966";
            percentInput.style.color = "#EF6966";
        }

        return false;
    }

    return hasFilledGroup;
}
function ajaxPost(url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: "POST",
            url: url,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
            },
            data: data,
            success: resolve,
            error: reject
        });
    });
}



        function validateUPC(selectedUPC, userId) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: "POST",
            url: "{{ route('getupcDetails1') }}",
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: {
                query: 'two',
                upc: selectedUPC,
                user_id: userId
            },
            success: function (response) {


                if (!response.upcs || response.upcs.length === 0) {
                    resolve({ isValid: false, reason: 'not_found' });
                }  else {
                    resolve({ isValid: true });
                }

                // else if (response.validation === 'false') {
                //     if(response.validation == 'redCrAbuseCount'){
                //         resolve({ isValid: false, reason: 'redCrAbuseCount' });
                //     }else{
                //         resolve({ isValid: false, reason: 'redCopyrightCount' });
                //     }

                // }
                // if (response.upcs && response.upcs.length > 0 && response.validation == 'true') {
                //     resolve(true);
                // } else {
                //     resolve(false);
                // }
            },
            error: function () {
                reject(false); // or handle error case differently
            }
        });
    });
}

    </script>

</head>

<style>
#main-menu .menu > li {
  margin-right: 16px !important;   
}

.nav_menu_main .menu li#Distribution ul {
    height: initial;
    margin-left: -40px !important;
    margin-top: 12px !important;
}
.nav_menu_main .menu li#YouTube ul {
    height: initial;
    margin-left: -28px !important;
    margin-top: 12px !important;
}
.nav_menu_main .menu li#SoundCloud ul {
    height: initial;
    margin-left: -42px !important;
    margin-top: 12px !important;
}
.nav_menu_main .menu li#Artist_Services ul
 {
    margin-left: -41px;
    height: initial;
    margin-top: 12px !important;
}
.nav_menu_main .menu li#Sales__Reports ul
 {
    margin-left: -46px;
    height: initial;
    margin-top: 12px !important;
}
.nav_menu_main .menu li#Community__Support ul
 {
    margin-left: -116px !important;
    height: initial;
    margin-top: 12px !important;
}

#main-menu .menu > li {
    width: auto;
}
#suckerfishmenu .menu li:hover {
    background-color: #ebebeb;
    color: #0071bc;
    width: auto;
}

#bottom-wrapper a {
    text-decoration: none;
    color: #fff !important;
}


#main-menu .menu li ul {
    z-index: 9999;
}
#main-menu .menu li {
    position: relative;        
}

</style>

<body style="width: 100%; overflow: scroll; height: 100vh;" id="revshare-body">
<!-- Google Tag Manager (noscript) -->
<!-- End Google Tag Manager (noscript) -->
<div id="page">

	<div id="header-wrapper">
		
	</div> <!-- end header wrapper-->

	<div style="clear:both"></div>
					<div id="menu-wrapper" class="right_nav_menu_logout">
			
				<div>
			<div class="rn_toplogo_logout">
				<a href="https://rn-test.com/kr/users/outertone" style="z-index: 9;"><div><img class="rn_logo_logout"  src="https://rn-test.com/kr/images/Shape_2.png" /></div></a>
								<div id="suckerfishmenu"  class="clear-block">
								<div id="suckerfishmenu-right" >
									<div id="block-menu-menu-navigation-right" class="block ">
					</div>
								</div>
								</div>
				</div></div></div>
				<div id="menu-wrapper" class="nav_menu"><div id="menu-inner" >
			    <div id="main-menu" class="nav_menu_main"  >
				<div id="suckerfish_container" >
								<div style="clear:both"></div>
				<div id="suckerfishmenu" class="clear-block" style="float:left;"><div id="block-user-1" class="block ">
<!--  <h3>outertone</h3>-->
  <div class="content"><ul class="menu"><li class="expanded first" id="Distribution"><a href="#"><span id="white_sp">Distribution</span><br><span></span></a><ul class="menu"><li class="leaf first" id="Create_New_Release"><a class="menu-Create New Release" href="https://rn-test.com/kr/create_album">Create New Release<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Upload your music to the top stores all around the world today!</span></a></li>
<li class="leaf last" id="Discography"><a class="menu-Discography" href="https://rn-test.com/kr/releases">Discography<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >See all of the music you've uploaded and manage your changes.</span></a></li>
</ul></li>
<li class="expanded" id="YouTube"><a href="#"><span id="white_sp">YouTube</span><br><span></span></a><ul class="menu"><li class="leaf first" id="Network"><a class="menu-Network" href="https://rn-test.com/kr/network/youtube">Network<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Get the world watching as part of our global YouTube network.</span></a></li>
<li class="leaf" id="Content_ID"><a class="menu-Content ID" href="https://rn-test.com/kr/youtube/contentid">Content ID<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Protect your music and your channel on YouTube.</span></a></li>
<li class="expanded last" id="Tools"><a href="#" class="menu-Tools">Tools<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;"><br><span >Spice up your videos with a load of fun and free resources for YouTube.</span></a><ul class="menu" style="    margin-left: -68px !important;
    margin-top: -138px !important;"><li class="leaf first" id="Music_Database"><a class="menu-Music Database" href="https://rn-test.com/kr/yt_music">Music Database<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >In collaboration with other RouteNote artists. Access and freely share your music!</span></a></li>
<li class="leaf last" id="Image_Database"><a class="menu-Image Database" href="https://rn-test.com/kr/yt_photo_db">Image Database<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Browse our list of copyright free image sites for all your photograph needs.</span></a></li>
</ul></li>
</ul></li>
<li class="expanded" id="SoundCloud"><a href="#"><span id="white_sp">SoundCloud</span><br><span></span></a><ul class="menu"><li class="leaf first" id="User_Guide"><a class="menu-User Guide" href="https://rn-test.com/kr/soundcloud/guide">User Guide<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Everything you need to know to join our SoundCloud Network and get paid.</span></a></li>
<li class="leaf last" id="Management"><a class="menu-Management" href="https://rn-test.com/kr/monetize/soundcloud">Management<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Monetise your music on SoundCloud and start getting paid!</span></a></li>
</ul></li>
<li class="expanded" id="Artist_Services"><a href="#"><span id="white_sp">Artist Services</span><br><span></span></a><ul class="menu"><li class="leaf first" id="Spotify_for_Artists"><a class="menu-Spotify for Artists" href="https://rn-test.com/kr/spotify_interface">Spotify for Artists<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Claim your artist profile on Spotify instantly!</span></a></li>
<li class="expanded" id="Marketing"><a href="#" class="menu-Marketing">Marketing<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;"><br><span >Check out our collection of music marketing tools to take your music to the next level.</span></a><ul class="menu" style="
    margin-left: 257px !important;
    margin-top: -112px !important;
"><li class="leaf first" id="Premiere"><a class="menu-Premiere" href="https://rn-test.com/kr/premiere">Premiere<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Turn your tracks into promo videos for socials.</span></a></li>
<li class="leaf" id="PUSH.fm"><a class="menu-PUSH.fm" href="https://rn-test.com/kr/push_fm">PUSH.fm<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Pre-saves, Smart Links & many more great digital marketing tools for your music!</span></a></li>
<li class="leaf last" id="URL_Requests"><a class="menu-URL Requests" href="https://rn-test.com/kr/push_fm_url_request_form">URL Requests<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Get your URL request underway. with your release URL's you'll be able to start making Pre-save campaigns & more with PUSH.fm.</span></a></li>
</ul></li>
<li class="leaf" id="Referral_Program"><a class="menu-Referral Program" href="https://rn-test.com/kr/referral/view">Referral Program<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Take a slice of our pie and earn more when you refer a friend!</span></a></li>
<li class="leaf" id="RouteNote_Advance"><a class="menu-RouteNote Advance" href="https://rn-test.com/kr/https://routenote.com/advance-royalties">RouteNote Advance<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Receive your royalties early, fund your music career and focus on the music.</span></a></li>
<li class="leaf" id="RouteNote_Create"><a class="menu-RouteNote Create" href="https://rn-test.com/kr/https://create.routenote.com/">RouteNote Create<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Affordable royalty-free samples to use in your music.</span></a></li>
<li class="leaf" id="Revenue_sharing"><a class="menu-Revenue sharing" href="https://rn-test.com/kr/revenue_sharing">Revenue sharing<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Share the revenue from your releases with the featuring or collaborative artists.</span></a></li>
<li class="leaf last" id="Song_Analysis"><a class="menu-Song Analysis" href="https://rn-test.com/kr/music_analysis">Song Analysis<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Dive inside the details of any song that is available to play on Spotify.</span></a></li>
</ul></li>
<li class="expanded" id="Sales__Reports"><a href="#"><span id="white_sp">Sales & Reports</span><br><span></span></a><ul class="menu"><li class="leaf first" id="Statistics"><a class="menu-Statistics" href="https://rn-test.com/kr/mystats">Statistics<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Don't stay in the dark, keep track of how well your music is doing.</span></a></li>
<li class="leaf" id="Reports"><a class="menu-Reports" href="https://rn-test.com/kr/myreports">Reports<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Get a breakdown of your earnings and see where the love is coming from.</span></a></li>
<li class="leaf last" id="Earnings"><a class="menu-Earnings" href="https://rn-test.com/kr/my_earnings">Earnings<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Where's my money? See past earnings and when more are coming.</span></a></li>
</ul></li>
<li class="expanded" id="Community__Support"><a href="#"><span id="white_sp">Community & Support</span><br><span></span></a><ul class="menu"><li class="leaf first" id="Support_Hub"><a class="menu-Support Hub" href="http://support.routenote.com/">Support Hub<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Everything you need to know about RouteNote and more.</span></a></li>
<li class="leaf" id="Support_Tickets"><a class="menu-Support Tickets" href="https://rn-test.com/kr/support/user/49271">Support Tickets<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Need a helping hand? Create a ticket here.</span></a></li>
<li class="leaf last" id="Tools"><a class="menu-Tools" href="https://rn-test.com/kr/tools">Tools<img src="https://rn-test.com/kr/images/Rectangle_9_copy_4.png" style="width: 10px;height: 15px;margin-top: 7px;float: right;background: none;display: none;"><br><span >Uploading your music is a breeze with the right tools for the job. Find anything you might need here.</span></a></li>
</ul></li>

</ul></div> <!-- end block content-->
</div> <!-- end block -->				</div>
								</div>
						<!--suckerfish_container-->
				</div> <!-- end main menu -->
	</div>
	</div> <!-- end menu wrapper -->
	<div style="clear:both"></div>

		
		
	
			<div id="container" style="width:100%;">
		<div id="container-outer">
		<div id="container-inner">
			<div id="content-wrapper">
										
															<div id="main-content">
					
																									<div style="width:990px; font-size:22px;padding-left:20px;padding-top:25px;color:#990066;">
												
																									</div>															<!-- <h1 class="title">Revenue Sharing</h1> -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=600, maximum-scale=1" name="viewport">

	
	<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://rn-test.com/kr/revenueshare/css/app.css">
</head>

    <main id="revshare-app">
        <div id="revshare-banner">
            <div id="revshare-banner-inner">
                <div id="revshare-banner-inner-left">
                    <h2>Revenue Sharing</h2>

                    <p>Are you a record label with multiple artists on the book? Do you need to share the money for one
                        of your collaborative
                        releases with another Artist?</p>

                    <p>Well, we can manage this for you, easily! Revenue Shares can be applied to any or all tracks on
                        a
                        release by simply
                        filling in the form below.</p>

                    <p style="margin-bottom: 40px">To share revenue with another artist all they need is their own
                        RouteNote username and they will automatically receive their share of stats and earnings,
                        saving you the hassle of reporting and multiple payouts.</p>
                </div>

                <div id="revshare-banner-inner-right">
                    <img src="https://rn-test.com/kr/revenueshare/images/Illustration.png">
                </div>
            </div>
        </div>
       

        </div>

    </div>

    <div class="full_container_start" >
        <div style="">
            <div style="">
                @if (session('success'))
                    <div class="top_bg">
                    </div>

                    <div style="
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;padding-top:24px;">

                        <br>
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="83px" width="1038.99px">
    <title>Notification/Success</title>
    <g id="RouteNote-UI-Kit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="RouteNote-UI-KIt" transform="translate(-146, -11988)">
            <g id="06.-Notifications-🚦" transform="translate(87, 11833)">
                <g id="Alerts" transform="translate(59, 117.2578)">
                    <g id="Notification/Success" transform="translate(0, 38)">
                        <rect id="Rectangle" stroke="#75DD7D" fill="#EBFAEC" x="0.5" y="0.5" width="1019" height="82"></rect>
                        <text id="Lorem-ipsum-dolor-si" font-family="ArialMT, Arial" font-size="14" font-weight="normal" line-spacing="22" fill="#000000">
                            <tspan x="18.9893617" y="55">Thanks for submitting your revenue sharing request! This has been received successfully and you will be contacted via email soon with any updates. </tspan>
                        </text>
                        <text id="Success-Heading!" font-family="Arial-BoldMT, Arial" font-size="16" font-weight="bold" line-spacing="21" fill="#75DD7D">
                            <tspan x="18.0851064" y="30.1648352">Success!</tspan>
                        </text>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
                        <!--div style="left: 287px;position: relative;">
                            <img src="{{ asset('images/tick.png') }}" style="width: 81px; height: 81px;">
                        </div>

                        <h2 style="font-weight: 600;position: relative;font-size: x-large;"> {{ session('success') }}</h2> -->
                        <div style="width:100%;">
                            <br>

                            @elseif (session('error'))
                    <div class="top_bg">
                    </div>

                    <div style="
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;padding-top:24px;">

                        <br>
      
<!-- Container div to simulate the SVG box -->
<div style="
    position: relative;
    width: 1039px;
    height: 86px;
    border: 1px solid #FDA400;
    background-color: #FFF2D9;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    padding: 15px 20px;
    color: #000000;
    ">

    <!-- Warning heading -->
    <div style="
        font-weight: bold;
        font-size: 16px;
        color: #FDA400;
        margin-bottom: 8px;
        ">
        Warning Heading!
    </div>

    <!-- Warning message with inline link -->
    <div style="font-size: 14px; line-height: 22px;">
        There was a problem, please ensure all details are correct and try again&nbsp;
        <a href="#" id="backToFormLink" style="
        font-weight: 600;
            color: #1354AC;
            text-decoration: underline;
            cursor: pointer;
            ">
            Go back to the form
        </a>
    </div>

</div>

                        <!--div style="left: 287px;position: relative;">
                            <img src="{{ asset('images/tick.png') }}" style="width: 81px; height: 81px;">
                        </div>

                        <h2 style="font-weight: 600;position: relative;font-size: x-large;"> {{ session('success') }}</h2> -->
                        <div style="width:100%;">
                            <br>

                        @elseif($data == '0')
                            <div class="top_bg">
                            </div>

                            <div style="
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;padding-top:24px;">
                                <br>
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="83px" width="1038.99px">
    <title>Notification/Success</title>
    <g id="RouteNote-UI-Kit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="RouteNote-UI-KIt" transform="translate(-146, -11988)">
            <g id="06.-Notifications-🚦" transform="translate(87, 11833)">
                <g id="Alerts" transform="translate(59, 117.2578)">
                    <g id="Notification/Success" transform="translate(0, 38)">
                        <rect id="Rectangle" stroke="#75DD7D" fill="#EBFAEC" x="0.5" y="0.5" width="1019" height="82"></rect>
                        <text id="Lorem-ipsum-dolor-si" font-family="ArialMT, Arial" font-size="14" font-weight="normal" line-spacing="22" fill="#000000">
                            <tspan x="18.9893617" y="55">Thanks for submitting your revenue sharing request! This has been received successfully and you will be contacted via email soon with any updates. </tspan>
                        </text>
                        <text id="Success-Heading!" font-family="Arial-BoldMT, Arial" font-size="16" font-weight="bold" line-spacing="21" fill="#75DD7D">
                            <tspan x="18.0851064" y="30.1648352">Success!</tspan>
                        </text>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
                                <!-- <div style="left: 287px;position: relative;">
                                    <img src="{{ asset('images/tick.png') }}" style="width: 81px; height: 81px;">
                                </div>

                                <h2 class="" style="font-weight: 600;position: relative;font-size: x-large;"> Thanks for submitting your revenue sharing request! This has been received successfully and you will be contacted via email soon with any updates.
                                </h2> -->
                                <div style="width:100%;">
                                    <br>
                                @else
                                    <div class="top_bg">
                                    </div>
                                    <form id="myForm" action="{{ route('revenueformsubmit') }}" method="GET" style="align-content: baseline;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;">
                                        @csrf
                                        <div id="form1" style="width: 1019px;">
                                            <div class="cont1 space-y-2">
                                                <div class="pad space-y-4">
                                                    <h1 class="text-2xl font-semibold mt-3" style="font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color: #1345AC;">Revenue Share Request Form
                                                    </h1>
                                                    <p style="font-family: Arial; font-size: 14px;">

                                                    The percentage share of your release will depend on the distribution plan you have selected. For free releases, the account holder will automatically get 85% of total earnings, while Premium releases will get 100%.
 <br> <br>
 Account holders are able to split their percentages between multiple parties using this revenue share request form.
 <br> <br>
 Revenue shares submitted before the 20th of each month will be applied to the following month. Revenue shares submitted on or after the 20th will be applied in two months time.  <br>
 For example, a share submitted on 17th January will be in place for February earnings run, whereas a share submitted on 25th January will be in place for March earnings run.
                                                    </p>
                                                </div>


                                                <hr>
                                                <div class="pad">
                                                    <span style="color: red; font-family: Arial; font-size: 14px;">* Indicates required question</span>
                                                </div>
                                            </div>

                                            <div class="cont2" style="padding: 25px;">

                                                <div>
                                                    <p style="margin-bottom: 18px;font-family: Arial; font-size: 16px; color: #1345AC; font-weight: bold;">Email <span style="color: red">*</span></p>
                                                    <input type="hidden" name="email1"
                                                        value="{{$users->mail}}"> <input type="hidden" name="key"
                                                        value="{{$key}}">
<input
  type="text"
  disabled
  name="email"
  id="email"
  placeholder="Your Answer"
  value="{{ $users->mail }}"
  style="
  color:#CCCCCC;
    width: 250px;
    height: 50px;
    padding: 14px 20px 12px 20px;
    border: none;
    font-family: Arial;
    font-size: 14px;
    background: #FAFAFA;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;"
>

</div>
                                                <div id="email-error"></div>
<br>
                                                <div>
                                                    <p style="margin-bottom: 18px;font-family: Arial; font-size: 16px; color: #1345AC; font-weight: bold;">User ID <span style="color: red">*</span></p><input
                                                        type="hidden" name="userid" value="{{ $users->uid }}">

                                                    <input type="text" disabled class=""
                                                        placeholder=" Your Answer"
                                                        style="
    width: 250px;
    height: 50px;
    padding: 14px 20px 12px 20px;
    border: none;
    font-family: Arial;
    font-size: 14px;
    color:#CCCCCC; background: #FAFAFA;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;"


                                                        value="{{ $users->uid }}">
                                                </div>
                                                <div id="email-error"></div>
                                                <br>
                                                <div>
                                                    <p style="margin-bottom: 18px;font-family: Arial; font-size: 16px; color: #1345AC; font-weight: bold;">User Name
                                                        <span style="color: red">*</span>
                                                    </p>

                                                    <input type="hidden" name="username1"
                                                        value="{{$users->name}}">
                                                    <input type="text" disabled name="username" id="username"
                                                        class="" placeholder=" Your Answer"
                                                        style="
    width: 250px;
    height: 50px;
    padding: 14px 20px 12px 20px;
    border: none;
    font-family: Arial;
    font-size: 14px;
    color:#CCCCCC; background: #FAFAFA;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;"


                                                        value=" {{$users->name}}">
                                                </div>
                                                <div id="username-error"></div>
                                                <br>
                                                <div class="cont2" style="padding: 0px 10px 0 0;border: none;"
                                                    id="input_fields_container">

                                                    <input type="hidden" id="click">
                                                    <input type="hidden" name="addupcdetails" value="">

                                                    <div id="input_fields_container">
                                                        <input type="hidden" name="hid-vls" id="hid-vls" value="">

                                                        {{-- <div class="space-y-8">
                                                            <div class="flex items-center gap-4">
                                                                <div class="flex items-center">
                                                                    <span>Add UPC</span>
                                                                    <span style="color: red">*</span>
                                                                    <img src="{{ asset('images/add_circle_outline.svg') }}"
                                                                        onclick="addTextField()" alt="add"
                                                                        class="add_img">
                                                                </div>
                                                                <div class="flex flex-col relative">
                                                                    <label>UPC</label>
                                                                    <input type="text" id="upcInput0"
                                                                        placeholder="Start typing UPC" onchange="generateJSON(0)"
                                                                        oninput="filterOptions(0)" autocomplete="off"
                                                                        class="select_btn input-field0">
                                                                        <div id="optionsContainer0" class="options-container top-16"></div>
                                                                </div>
                                                                <div class="flex flex-col">
                                                                    <label>ISRC</label>
                                                                    <select name="isrc" id="isrc0" onchange="generateJSON(0)"
                                                                        class="select_btn input-field0"></select>
                                                                </div>
                                                            </div>
                                                            <div class="space-y-4">
                                                                <div class="flex items-center">
                                                                    <span>Revenue Share To </span>
                                                                    <span style="color: red">*</span>
                                                                    <img src="{{ asset('images/add_circle_outline.svg') }}"
                                                                        onclick="addMoreFields(0)" alt="add"
                                                                        class="add_img">
                                                                </div>
                                                                <div class="input-group mb-3">
                                                                    <div class="user_detailss" style="">
                                                                        <span>UserID: <strong>{{ $users->uid }} </strong></span>
                                                                        <span>UserName: <strong>{{ $users->name }} </strong></span>
                                                                        <span>Percentage: <strong id="remaining-percentage">100%</strong></span>
                                                                    </div>
                                                                </div>
                                                                <div id="input_more_add0"></div>
                                                            </div>
                                                        </div> --}}
                                                        {{-- <button type="button" id="add-container">Add New Container</button> --}}

                                                        <div id="main-container"></div>

                                                        <script>
                                                            let totalPercentageLeft = 100;
                                                            let defaultTotalValue1 = 100;
                                                            document.addEventListener('DOMContentLoaded', () => {
                                                                let containerIdCounter = 0;

                                                                let rowCount = 0;
                                                                let defaultTotalValue2 = 100;

                                              

                                                                function createContainer() {
                                                                    containerIdCounter++;

                                                                    // Create container elements
                                                                    const container = document.createElement('div');
                                                                    container.classList.add('container', 'p-2');
                                                                    container.setAttribute('data-id', containerIdCounter);
                                                                    container.innerHTML = `
${containerIdCounter == 1 ? '' : '<div class="remove-container-btn remove-btn cursor-pointer" style="width:50%"><img src="/images/remove.svg" alt="add"  class="add_img2 w-6 h-6" style="max-width: none !important;"></div>'}
                                                                        <div class="mt-8 space-y-5">
                                                                            <div class="flex gap-5">
                                                                                <!--div class="flex items-center">
                                                                                    <span>Add UPC</span>
                                                                                    <span style="color: red">*</span>

                                                                                </div-->
<div class="flex flex-col relative">
  <label for="upcInput-${containerIdCounter}" style="    margin-bottom: 18px;font-family: Arial; font-size: 16px; color: #1345AC; font-weight: bold;">
    UPC:<span style="color: red">*</span>
  </label>

  <input
    type="text"
    id="upcInput-${containerIdCounter}"
    oninput="filterOptions(${containerIdCounter})"
    placeholder="Search UPC..."
    autocomplete="off"
    style="
      background: #F5F5F5;
      width: 250px;
      height: 50px;
      padding: 14px 20px 12px 20px;
      border: none;
      font-family: Arial;
      font-size: 14px;
      color: black;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;"
  >

    <img src="https://magiclink.rn-test.com/images/Search.svg"
         alt="Search"
         style="position: absolute; top: 67px; right: 15px; transform: translateY(-50%); width: 20px; height: 20px;" />

  <div
    id="optionsContainer${containerIdCounter}"
    class="options-container top-16"
    style="
      background: #F5F5F5;
      width: 250px;
      font-family: Arial;
      font-size: 14px;
      box-sizing: border-box;
      top: 92px;">
  </div>


  <div id="reason${containerIdCounter}" style="margin-top:20px;color: rgb(239, 105, 102);
display:none;font-size: 14px;"><span id="reasontext${containerIdCounter}">Invalid UPC. Please select a valid UPC.</span></div>
</div>


<div class="flex flex-col">
  <label for="isrc-${containerIdCounter}" style="    margin-bottom: 18px;font-family: Arial; font-size: 16px; color: #1345AC; font-weight: bold;">
    ISRC:
  </label>

  <div class="custom-select-wrapper" id="selectWrapper-${containerIdCounter}" tabindex="0">
    <div class="custom-select" id="isrc-${containerIdCounter}">Select an option</div>

    <img src="https://magiclink.rn-test.com/images/Down.svg" class="custom-select-icon" alt="Arrow" />

    <div class="custom-options custom-options-${containerIdCounter}" style="display: none;">
      <!-- JS will dynamically fill these -->
    </div>
  </div>
  <div id="isrcreason${containerIdCounter}" style="margin-top:20px;color: rgb(239, 105, 102);
display:none;font-size: 14px;"><span id="isrcresontext${containerIdCounter}">Invalid ISRC. Please select a valid ISRC.</span></div>
</div>
</div>


<style>
  .custom-select-wrapper {
    position: relative;
    width: 250px;
    font-family: Arial;
  }

  .custom-select {
    width: 100%;
    height: 50px;
    padding: 14px 40px 14px 20px;
    background: #F5F5F5;
    font-size: 14px;
    border: none;
    cursor: pointer;
    user-select: none;
  }

  .custom-select-icon {
    position: absolute;
    width: 15px;
    height: 10px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    pointer-events: none;
  }

  .custom-select-wrapper.open .custom-select-icon {
    transform: translateY(-50%) rotate(180deg);
  }

  .custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 250px;
    background-color: #F5F5F5;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    display: none;
  }

  .custom-option {
    padding: 14px 40px 14px 20px;
    cursor: pointer;
    font-size: 14px;
  }

  .custom-option:hover {
    background-color: #FAFAFA;
  }
</style>

                                                                            </div>
                                                                            ${containerIdCounter == 1 ? '<div style="display:flex; font-family: Arial; font-size: 18px; color: #1345AC; font-weight: bold;margin-top:1.25rem;"> <label for="">Add Another UPC: &nbsp;&nbsp;</label> <img src="/images/Add.svg" alt="add" id="add-container" class="add_img w-6 h-6"></div>':''}


                                                                            <div class="space-y-4">
                                                                                <div style="margin-top: 10px !important;" class="flex items-center">
                                                               <span style="font-weight: bold;color: #1345ac;font-family: Arial; font-size: 16px;">Revenue Share To</span>
                                                                                </div>
                                                                                <h4 id="exit${containerIdCounter}" class="ml-4 font-medium text-gray-600" style="display:none;font-size: 14px;color: #1345ac;font-weight: bold;font-family: Arial;margin-bottom: 15px;">Existing Share:</h4>
                                                                                <div class="input-group mb-3">
                                                                                    <div class="user_detailss${containerIdCounter}" style="">
                                                                                    </div>
                                                                                </div>
																				 <div class="flex items-center">
                                                                                <h4 class="ml-4 font-medium text-gray-600" style="font-family: Arial; font-size: 14px; color: #1345AC; font-weight: bold;margin-bottom: 15px;">New Share:<span style="color: red">*</span></h4>

                                                                                    <data-container-id="${containerIdCounter}" alt="add" class="add-inputs add_img1 w-6 h-6"></div>
                                                                                <div id="additional-inputs-${containerIdCounter}" class="additional-inputs space-y-2" style="margin:0 !important"></div>
                                                                                <div id="newshare${containerIdCounter}" style="display:none;color:#EF6966;"></div>
                                                                            </div>
                                                                            <div id="share${containerIdCounter}" style="margin-top: 20px; color: rgb(239, 105, 102); display: none; font-size: 14px;"><span id="sharetext${containerIdCounter}">Please add atleast one new share.</span></div>
                                                                        </div>
                                                                        <input type="hidden" id="json-input-${containerIdCounter}" name="json-input-${containerIdCounter}">
                                                                    `;


                                                                    document.getElementById('main-container').appendChild(container);



                                                                    const nameInput = document.getElementById(`upcInput-${containerIdCounter}`);
                                                                    const genderSelect = document.getElementById(`isrc-${containerIdCounter}`);
                                                                    const additionalInputsContainer = document.getElementById(`additional-inputs-${containerIdCounter}`);
                                                                    const jsonInput = document.getElementById(`json-input-${containerIdCounter}`);
                                                                    const addInputsButton = container.querySelector('.add-inputs');

                                                                    const removeContainerButton = container.querySelector('.remove-container-btn');
                                                                    const RnRevenname = ["Userid", "Username", "Percentage"];
                                                                    const RnRevenname1 = ["Username", "%"];
                                                                    function updateJson() {
                                                                        const jsonData = {
                                                                            UPCid: nameInput.value,
                                                                            ISRC: genderSelect.textContent,
                                                                            RevenueShareTo: [] // Initialize as empty
                                                                        };


                                                                        const currentInputs = Array.from(additionalInputsContainer.querySelectorAll('input'));
                                                                        for (let i = 0; i < currentInputs.length; i += 3) {
                                                                            const group = {};
                                                                            for (let j = 0; j < 3; j++) {
                                                                                if (currentInputs[i + j]) {
                                                                                    group[RnRevenname[j] + `${i + j + 1}`] = currentInputs[i + j].value;
                                                                                
                                                                                };
                                                                            };
                                                                            jsonData.RevenueShareTo.push(group);
                                                                        };
                                                                         console.log('jsonData', jsonData)
                                                                        jsonInput.value = JSON.stringify(jsonData);
                                                                        document.getElementById('hid-vls').value = document.querySelectorAll('#main-container .container').length;
                                                                    };

                                                                    function updateAllShares() {
                                                                        const percentages = document.querySelectorAll(`coverform_input${containerIdCounter} input[name="percentage${cnt}[]"`);
                                                                        percentages.forEach(input => {
                                                                            updatePercentage(input, defaultTotalValue1 - getSumOfPreviousPercentages());
                                                                        });
                                                                    }

                                                                    function updatePercentage1(input, maxPercentage, cnt) {
                                                                        const percentage = parseFloat(input.value || 0);
                                                                        if (percentage > maxPercentage) {
                                                                            input.value = maxPercentage;
                                                                        }
                                                                      //  updateRemainingPercentage2(input, cnt);
                                                                        // updateAllShares();
                                                                    }
                                                                    let droplist = 0;
                                                                    addAdditionalInputs(containerIdCounter);

                                                                    function addAdditionalInputs(containerId) {

                                                                        droplist++;
                                                                        const inputGroup = document.createElement('div');
                                                                        $('#share' + containerId).css('display', 'none');
                                                                        $(`#newreason${droplist}${containerId}`).hide();
        $(`#usernewreason${droplist}${containerId}`).hide();
        $(`#pernewreason${droplist}${containerId}`).hide();
        $(`#newshare${containerId}`).hide();
    
 

                                                                        inputGroup.classList.add(`coverform_input${containerId}`, 'input-group', 'flex', 'items-top', 'gap-4');

const mainnn = document.createElement('div');
mainnn.style.position = 'relative';
mainnn.style.width = '27%';


// Input field
const UsernewInput = document.createElement('input');
UsernewInput.type = 'text';
UsernewInput.placeholder = "Userid";
UsernewInput.classList.add('select_btn', `list${droplist}`);
UsernewInput.setAttribute('name', "shareUPC[]");
UsernewInput.setAttribute('autocomplete', "off");
//UsernewInput.required = true;
UsernewInput.setAttribute('oninput', `RevenupdateNameField(this, ${droplist}, ${containerId})`);
UsernewInput.style.paddingRight = '27px';
UsernewInput.style.width = '250px';
UsernewInput.style.height = '50px';
if(droplist == 1)
{
    UsernewInput.disabled = true;
    UsernewInput.value = "<?php echo htmlspecialchars($users->uid, ENT_QUOTES, 'UTF-8'); ?>";
}
mainnn.appendChild(UsernewInput);

// SVG icon
if(droplist > 1)
{
//const arrowIcon = document.createElement('img');
// arrowIcon.src = "https://magiclink.rn-test.com/images/Search.svg";
// arrowIcon.alt = "Arrow";
// arrowIcon.id = `searchIcon${containerId}`; // <-- Set ID here

// arrowIcon.style.width = '20px';
// arrowIcon.style.height = '20px';
// arrowIcon.style.position = 'absolute';
// arrowIcon.style.right = '22px';
// arrowIcon.style.top = '25px';
// arrowIcon.style.transform = 'translateY(-50%)';
// arrowIcon.style.pointerEvents = 'none';
// mainnn.appendChild(arrowIcon);
}



// Dropdown container
const mainspan = document.createElement('span');
mainspan.classList.add('dropdown-menu', 'shareUPCDropdown', 'w-max');
mainspan.style.display = 'none';
mainspan.setAttribute('id', `shareUPCDropdown${droplist}`);
mainnn.appendChild(mainspan);


const reasonDiv = document.createElement('div');
reasonDiv.id = `newreason${droplist}${containerId}`;
reasonDiv.style.marginTop = '20px';
reasonDiv.style.color = 'rgb(239, 105, 102)';
reasonDiv.style.lineHeight='1.4' ;
reasonDiv.style.fontSize = '14px';
reasonDiv.style.width = '94%';

reasonDiv.style.display = 'none'; // Hide by default

const reasonSpan = document.createElement('span');
reasonSpan.textContent = 'Please fill in this field';

reasonDiv.appendChild(reasonSpan);

// Append reason div to mainnn
mainnn.appendChild(reasonDiv);


// Append to main group
inputGroup.appendChild(mainnn);



// ▼▼▼ Show dropdown only when user types something ▼▼▼
UsernewInput.addEventListener('input', () => {
  const val = UsernewInput.value.trim();
  if (val !== "") {
    toggleDropdown(true);
  } else {
    toggleDropdown(false);
  }
});

// ▼▼▼ Hide dropdown after blur ▼▼▼
UsernewInput.addEventListener('blur', () => {
  setTimeout(() => toggleDropdown(false), 200);
});

function toggleDropdown(show) {

}

// Keep your updateJson logic
UsernewInput.addEventListener('input', updateJson);


for (let i = 0; i < 2; i++) {
    // Create wrapper div
    const inputWrapper = document.createElement('div');
    inputWrapper.style.position = 'relative';
    inputWrapper.style.width = '26.5%';


    // Create input
    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.placeholder = RnRevenname1[i];
    newInput.classList.add('select_btn');
    newInput.style.width = '250px';
    newInput.style.height = '50px';
    newInput.addEventListener('input', updateJson);

    newInput.addEventListener('input', function () {
        const inputstext = document.querySelectorAll(`input[name="percentage${containerId}[]"]`);
 
 inputstext.forEach(input => {
input.style.background = '#F5F5F5';
input.style.border = 'none';
input.style.color = 'black';
});


        $(`#newshare${containerId}`).hide();
    
        console.log('droplist',droplist);
        newInput.style.background = '#F5F5F5';
        newInput.style.border = 'none';
        newInput.style.color = 'black';
        $(newInput).removeClass('input-error');

        $(`#usernewreason${droplist}${containerId}`).hide();
        $(`#pernewreason${droplist}${containerId}`).hide();

    });


    let errorDivId = '';

    if (RnRevenname1[i] === "Username") {
        newInput.setAttribute('name', "sharename[]");
       
        if(droplist == 1)
{
    newInput.disabled = true;
    newInput.value = "<?php echo htmlspecialchars($users->name, ENT_QUOTES, 'UTF-8'); ?>";
}
        errorDivId = `usernewreason${droplist}${containerId}`;
      
    }
    

    if (RnRevenname1[i] === "%") {
        newInput.setAttribute('name', `percentage${containerId}[]`);
       
        errorDivId = `pernewreason${droplist}${containerId}`;
        newInput.addEventListener('input', function () {
            updatePercentage1(this, totalPercentageLeft, containerId);
        });
    }

    // Create error message div
    const errorDiv = document.createElement('div');
    errorDiv.id = errorDivId;
    errorDiv.textContent = 'Please fill in this field.';
    errorDiv.style.marginTop = '20px';
    errorDiv.style.color = '#EF6966';
    errorDiv.style.fontSize = '14px';
    errorDiv.style.display = 'none'; // Hidden by default
    errorDiv.style.width = '80%';
   
    // Append input and error to wrapper
    inputWrapper.appendChild(newInput);
    inputWrapper.appendChild(errorDiv);

    // Append wrapper to the parent group
    inputGroup.appendChild(inputWrapper);
}




const controlButtons = document.createElement('div');
controlButtons.classList.add('flex', 'items-center', 'gap-2');

const addButton = document.createElement('img');
addButton.src = '/images/Add.svg';
addButton.alt = 'add';
addButton.classList.add('add_img', 'w-6', 'h-6', 'relative', 'top-[9px]');
addButton.style.maxWidth = 'none';
addButton.dataset.containerId = containerId;
addButton.style.cursor = 'pointer';

addButton.addEventListener('click', function () {
  const containerId = this.dataset.containerId;
  addAdditionalInputs(containerId);
});


if(droplist > 1)
{
const removeButton = document.createElement('div');
removeButton.classList.add(
  'remove-container-btn',
  'remove-btn',
  'cursor-pointer'
);

// Create the <img> element
const img = document.createElement('img');
img.src = '/images/remove.svg';
img.alt = 'remove';
img.classList.add('add_img', 'w-6', 'h-6','relative', 'top-[9px]');
img.setAttribute("style", "max-width: none !important;");

// Append the image to the div
removeButton.appendChild(img);

// Set the click event
removeButton.addEventListener('click', () => {
  inputGroup.remove();
  updateJson();
});
inputGroup.appendChild(removeButton);
}

const addButtonWrapper = document.createElement('div');
addButtonWrapper.classList.add('cursor-pointer');
addButtonWrapper.appendChild(addButton);

controlButtons.appendChild(addButtonWrapper);

inputGroup.appendChild(controlButtons);

                                                                      
                                                                        additionalInputsContainer.appendChild(inputGroup);
                                                                        updateJson();
                                                                    };
                                                                    nameInput.addEventListener('input', updateJson);
                                                                    genderSelect.addEventListener('change', updateJson);

                                                                  //  addInputsButton.addEventListener('click', addAdditionalInputs);
                                                                  addInputsButton.addEventListener('click', function(e) {
  const containerId = this.dataset.containerId; // e.g. "2"
  console.log('container id:', containerId);
  addAdditionalInputs(containerId);
});

                                                                    $(removeContainerButton).click(function() {
                                                                        container.remove();
                                                                        document.getElementById('hid-vls').value = document.querySelectorAll('#main-container .container').length;
                                                                    });
                                                                    updateJson(); // Initial JSON update
                                                                };

                                                                // document.getElementById('add-container').addEventListener('click', createContainer);
                                                                 createContainer();

                                                                 document.addEventListener('click', function(e) {
    if (e.target && e.target.id === 'add-container') {
        createContainer();
    }


});

                                                            });












                                                            // ---------------------------------------- New Last ---------------------
                                                            let rowcntss = 0;

                                                            function addMoreFields(id) {
                                                                const container = document.getElementById('input_more_add' + id);
                                                                container.classList.add('space-y-2');
                                                                const inputfeilddiv = document.createElement('div');
                                                                inputfeilddiv.classList.add('coverform_input', 'input-fields', 'grid', 'grid-cols-4', 'grid-flow-col', 'gap-32',
                                                                    'items-center');

                                                                const input = `

                                                                    <div class="">
                                                                        <input style="width:250px" type="text" onchange="generateJSON(${id})" name="shareUPC[]" onkeyup="checkInput()" placeholder="Enter value" class=" input-field${id} shareUPC border px-1.5 py-1 select_btn" autocomplete="off" oninput="RevenupdateNameField(this, ${rowcntss})">

                                                                        <span class="dropdown-menu shareUPCDropdown w-max " id="shareUPCDropdown${rowcntss}" style="display: none;"></span>
                                                                    </div>
                                                                    <input style="width:250px" type="text" placeholder="Enter value" name="sharename[]" required autocomplete="off" class="form-control select-field input-field${id} border px-1.5 py-1 select_btn" readonly>
                                                                    <input  style="width:250px" type="text" placeholder="%" onchange="generateJSON(${id})" name="percentage[]" class="input-field${id} border px-1.5 py-1 select_btn form-control percentageinput">

                                                                `;
                                                                inputfeilddiv.insertAdjacentHTML('beforeend', input);
                                                                const image = document.createElement("img");
                                                                image.src = "{{ asset('images/remove_circle_outline.svg') }}";
                                                                image.alt = "remove";
                                                                image.classList.add('h-6', 'w-6', 'cursor-pointer')
                                                                image.onclick = function() {
                                                                    removeInputFields(this);
                                                                };
                                                                inputfeilddiv.appendChild(image);
                                                                container.appendChild(inputfeilddiv);
                                                                rowcntss++;
                                                            };

                                                            function removeInputFields(button) {
                                                                const wrapper = button.parentElement;
                                                                wrapper.remove();
                                                            }


                                                            function updateIsrcOptions(selectedUpc, id) {
                                                               console.log('selectedUpc', selectedUpc)

                                                             const userId = $('input[name="userid"]').val();



                                                             $.ajax({
                                                            type: "POST",
                                                                url: "{{ route('getupcDetails1') }}",
                                                                headers: {
                                                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                                },
                                                                data: {
                                                                    query: 'one',
                                                                    upc:selectedUpc,
                                                                    user_id: userId
                                                                },
success: function (response) {



    $(`.user_detailss${id}`).empty(); 
if(response.split.length > 0){
    

response.split.forEach(function (user) {
const html = `
   <div class="user_detailss">
        <span>UserID: <strong>${user.selected_uid}</strong></span>
        <span>UserName: <strong>${user.user_name}</strong></span>
        <span>Percentage: <strong>${user.percent}%</strong></span>
   </div>
`;
$(`.user_detailss${id}`).append(html);

});

$(`#exit${id}`).css('display','block'); 
}


  const upcToIsrcMap = response.upcToIsrcMap || {};
  const isrcList = upcToIsrcMap[selectedUpc] || [];
  console.log(upcToIsrcMap);
  const isrcSelect = document.getElementById("isrc-" + id);
  const selectWrapper = document.getElementById("selectWrapper-" + id);
  const optionsContainer = selectWrapper.querySelector(".custom-options-" + id);

  // Clear options
  optionsContainer.innerHTML = "";

  // Reset selected text
  isrcSelect.textContent = "Select an option";

  console.log(isrcSelect);
  // Populate options
  if (isrcList.length > 1) {
    const applyToAll = document.createElement("div");
 applyToAll.className = "custom-option";
    isrcSelect.textContent = "Apply to all tracks";
   applyToAll.textContent = "Apply to all tracks";
    applyToAll.dataset.value = "all";
    optionsContainer.appendChild(applyToAll);
  }

  if (isrcList.length > 0) {
    isrcList.forEach(function (isrc) {
      const option = document.createElement("div");
      option.className = "custom-option";
     // isrcSelect.textContent = "Apply to all tracks";
      option.textContent = isrc;
      option.dataset.value = isrc;
      optionsContainer.appendChild(option);
    });
  } else {
    const empty = document.createElement("div");
    empty.className = "custom-option";
   // empty.textContent = "No ISRC found";
    empty.dataset.value = "";
    optionsContainer.appendChild(empty);
  }

  // Show dropdown on click
  isrcSelect.onclick = function () {





    isrcSelect.style.background = '#F5F5F5';
    isrcSelect.style.border = 'none';
    isrcSelect.style.color = 'black';

    $('#isrcreason' + id).css('display', 'none');
    $('[id^="isrcreason"]').css('display', 'none');

    const isOpen = selectWrapper.classList.toggle("open");
    optionsContainer.style.display = isOpen ? "block" : "none";
  };

  // Close dropdown on blur
  selectWrapper.addEventListener("blur", function () {
    selectWrapper.classList.remove("open");
    optionsContainer.style.display = "none";
  });

  // Handle option selection
  optionsContainer.querySelectorAll(".custom-option").forEach(function (option) {
    option.addEventListener("click", function () {

       // if(this.textContent != 'Apply to all tracks'){

        
$.ajax({
                                                    type: "POST",
                                                        url: "{{ route('getupcDetails1') }}",
                                                        headers: {
                                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                        },
                                                        data: {
                                                            query: 'three',
                                                            upc:selectedUpc,
                                                            uid: userId,
                                                            isrc:this.textContent
                                                        },
success: function (response) {
$(`.user_detailss${id}`).empty(); 
if(response.split.length > 0){
    

response.split.forEach(function (user) {
const html = `
   <div class="user_detailss">
        <span>UserID: <strong>${user.selected_uid}</strong></span>
        <span>UserName: <strong>${user.user_name}</strong></span>
        <span>Percentage: <strong>${user.percent}%</strong></span>
   </div>
`;
$(`.user_detailss${id}`).append(html);

});

$(`#exit${id}`).css('display','block'); 
}
}
});
// }
// else{
// $(`#exit${id}`).css('display','none'); 
// $(`.user_detailss${id}`).empty(); 
// }


      isrcSelect.textContent = this.textContent;
      selectWrapper.classList.remove("open");
      optionsContainer.style.display = "none";
    });
  });

                                                                }
                                                            })

                                                            }

                                                            function handleInputSelection(selectedText, events) {


                                                                    updateIsrcOptions(selectedText, events);


                                                            }






                                                            function filterOptions(events) {

                                                                const input = document.getElementById('upcInput-' + events).value.toLowerCase();

                                                                const container = document.getElementById('optionsContainer' + events);
                                                                const upcInput1 = document.getElementById('upcInput-' + events);

                                                                $(`#exit${events}`).css('display','none'); 
                                                                $(`.user_detailss${events}`).empty(); 

                                                                upcInput1.style.background = "#F5F5F5";
                                                                upcInput1.style.border = "none";
                                                                upcInput1.style.color = "black";
                                                                $('#reason'+events).css('display','none');

                                                                const query = input;
                                                                const userId = $('input[name="userid"]').val();
                                                                $.ajax({
                                                                    type: "POST",
                                                                    url: "{{ route('getupcDetails1') }}",
                                                                    headers: {
                                                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                                    },
                                                                    data: {
                                                                        query: query,
                                                                        user_id: userId
                                                                    },
                                                                    success: function (response) {
                                                                        const options1 = response.upcs || [];





                                                                        const options = options1.map(item => ({
                                                                            value: item.upc,
                                                                            text: item.upc

                                                                        }));



            //                                                             const selectedUPCs = Array.from(document.querySelectorAll('[id^="upcInput-"]'))
            //     .map(input => input.value.trim().toLowerCase())
            //     .filter(val => val !== '');

            // const filteredOptions = options.filter(option => {
            //     const optionText = String(option.text).toLowerCase();
            //     return optionText.includes(input) && !selectedUPCs.includes(optionText);
            // });



                                                                const filteredOptions = options.filter(option => {
                // Convert option.text to string before calling toLowerCase
                const optionText = String(option.text);
                return optionText.toLowerCase().includes(input);
            });
                                                              //  const filteredOptions = options.filter(option => option.text.toLowerCase().includes(input));



                                                                container.innerHTML = '';
                                                                if (filteredOptions.length > 0 && input) {
                                                                    filteredOptions.forEach(option => {
                                                                        const listelement = document.createElement('div');
                                                                        listelement.textContent = option.text;
                                                                        listelement.onclick = function() {
                                                                            document.getElementById('upcInput-' + events).value = this.textContent;
                                                                            document.getElementById('upcInput-' + events).setAttribute('data-id', this.textContent)
                                                                            container.style.display = 'none';
                                                                            handleInputSelection(this.textContent, events);
                                                                        };
                                                                        container.appendChild(listelement);
                                                                    });
                                                                    container.style.display = 'block';
                                                                } else {
                                                                    container.style.display = 'none';
                                                                }

                                                            }
                                                        });
                                                            }





    //console.log(formattedOptions);
    let debounceTimer;
                                                            const MAX_RESULTS = 10;


 function RevenupdateNameField(inputElement, id, mid) {
   // clearTimeout(debounceTimer);
    //debounceTimer = setTimeout(function () {
      //  const inputValue = inputElement.value.trim().toLowerCase();
        // const dropdownMenu = document.querySelector(`.coverform_input${mid} #shareUPCDropdown${id}`);
        // dropdownMenu.innerHTML = '';


        $(`#newreason${id}${mid}`).hide();
        $(`#usernewreason${id}${mid}`).hide();
        $(`#pernewreason${id}${mid}`).hide();


}


function callfunctiontoupdate(mid){

                    
const nameInput22 = document.getElementById(`upcInput-${mid}`);
const genderSelect22 = document.getElementById(`isrc-${mid}`);
const additionalInputsContainer22 = document.getElementById(`additional-inputs-${mid}`);
const jsonInput22 = document.getElementById(`json-input-${mid}`);

const RnnRevenname = ["Userid", "Username", "Percentage"];
const RnnRevenname1 = ["Username", "%"];

    
    const jsonData22 = {
        UPCid: nameInput22.value,
        ISRC: genderSelect22.textContent,
        RevenueShareTo: [] // Initialize as empty
    };


    const currentInputs22 = Array.from(additionalInputsContainer22.querySelectorAll('input'));
    for (let i = 0; i < currentInputs22.length; i += 3) {
        const group = {};
        for (let j = 0; j < 3; j++) {
            if (currentInputs22[i + j]) {
                group[RnnRevenname[j] + `${i + j + 1}`] = currentInputs22[i + j].value;
            
            };
        };
        jsonData22.RevenueShareTo.push(group);
        
    };
        console.log('jsonData', jsonData22)
        jsonInput22.value = JSON.stringify(jsonData22);
    document.getElementById('hid-vls').value = document.querySelectorAll('#main-container .container').length;

}

                                                            // function RevenupdateNameField(inputElement, id, mid) {

                                                            //     console.log('Input changed - 1'); // Debug statement
                                                            //     const inputValue = inputElement.value.trim().toLowerCase();
                                                            //     const dropdownMenu = document.querySelector(`.coverform_input${mid} #shareUPCDropdown${id}`);
                                                            //     dropdownMenu.innerHTML = '';
                                                            //     $data.forEach(function(user) {
                                                            //         if (user.uid.toString().toLowerCase().includes(inputValue)) {
                                                            //             var option = document.createElement('div');
                                                            //             option.classList.add('dropdown-item');
                                                            //             option.textContent = user.uid;
                                                            //             option.onclick = function() {
                                                            //                 inputElement.value = user.uid;

                                                            //                 // Set the corresponding name in the sharename input field
                                                            //                 var sharenameInput = inputElement.closest(`.coverform_input${mid}`).querySelector('[name="sharename[]"]');
                                                            //                 // console.log('inputValue', sharenameInput, user)
                                                            //                 sharenameInput.value = user.name;
                                                            //                 dropdownMenu.style.display = 'none';

                                                            //             };
                                                            //             dropdownMenu.appendChild(option);
                                                            //         }
                                                            //     });
                                                            //     if (inputElement.value == '') {
                                                            //         var sharenameInput = inputElement.closest(`.coverform_input${mid}`).querySelector('[name="sharename[]"]');
                                                            //         sharenameInput.value = '';
                                                            //     }

                                                            //     // Display the dropdown menu
                                                            //     if (inputValue.length > 0) {
                                                            //         dropdownMenu.style.display = 'block';
                                                            //     } else {
                                                            //         dropdownMenu.style.display = 'none';
                                                            //     }
                                                            // }

                                                            function generateJSON(id) {
                                                                // Select all input fields related to the given ID
                                                                const inputs = document.querySelectorAll(".input-field" + id);
                                                                const data = [{}];
                                                                // const data = {};

                                                                // Iterate through inputs in pairs
                                                                for (let i = 0; i < inputs.length; i += 3) {
                                                                    if (i + 2 < inputs.length) { // Ensure there are enough elements in the pair
                                                                        const uniqueId = Math.floor(i / 3);
                                                                        // data.push({
                                                                        // value1: inputs[i].value,
                                                                        // value2: inputs[i + 1].value,
                                                                        // Revenue: [
                                                                        //     {
                                                                        //         uid: inputs[i + 2].value,
                                                                        //         user: inputs[i + 3].value,
                                                                        //         percentage: inputs[i + 4].value,
                                                                        //     }
                                                                        // ]
                                                                        // });
                                                                        data[`text${uniqueId}`] = {
                                                                            value1: inputs[i].value,
                                                                            value2: inputs[i + 1].value,
                                                                            Revenue: [{
                                                                                uid: inputs[i + 2].value,
                                                                                user: inputs[i + 3].value,
                                                                                percentage: inputs[i + 4].value,
                                                                            }]
                                                                        };
                                                                    }
                                                                }

                                                                // Convert to JSON format and log it
                                                                const json = JSON.stringify(data, null, 2);
                                                                // console.log('json', data);
                                                            }
                                                        </script>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>




                                                <div
                                                    style="padding: 20px;display: flex;justify-content: space-between;">

<button class="btn" id="submit3">Submit</button>

                                                    <style>
                                                        .enabled {
                                                            cursor: pointer !important;
                                                        }
                                                    </style>

                                                    <script>
                                                        function checkInput() {
                                                            var inputValue = document.getElementById('form_value').value.trim();
                                                            var submitButton = document.getElementById('submit3');
                                                            if (inputValue !== '') {
                                                                submitButton.removeAttribute('disabled');
                                                                submitButton.classList.add('enabled');
                                                            } else {
                                                                submitButton.setAttribute('disabled', 'disabled');
                                                                submitButton.classList.remove('enabled');
                                                            }
                                                        }
                                                    </script>
<a class="clear-btn" onclick="location.reload();">Clear Form</a>
                                                </div>
                                            </div>

                                        </div>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                @endif
                <style>
  .clear-btn {
    cursor: pointer;
    text-decoration: none;
    margin: auto 0;
    float: right;
    background-color: #ffffff;
    color: #1345AC;
    border: 2px solid #1345AC;
    width: 130px;
    height: 50px;
    font-family: Arial;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .clear-btn:hover {
    background-color: #1345AC;
    color: #ffffff;
  }
</style>

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

                    .verify_btn {
                        background: #f0eaf8;
                        padding: 3px 10px;
                        border-radius: 5px;
                        border: none;
                        color: #5a39b6;
                        box-shadow: 1px 1px 4px #000;
                    }

                    .select_btn {
                        padding: 14px 40px 14px 20px;
                        background: #F5F5F5;
                        color: #000;
                        width: 163px;
                        cursor: pointer;
                        box-sizing: border-box;
                        transition: border-color 0.3s ease;
                    }

                    .select_btn:focus {
                        outline: none;
                        border-color: #ccc;
                    }



                    .user_detailss {
                        display: flex;
                        justify-content: space-evenly;
                        background: #f5f5f5;
                        padding: 10px;
                        height:50px;
                    }

                    .user_detailss span {
                        margin: auto 0;
                    }

                    @keyframes blink {
                        0% {
                            outline: 2px solid red;
                        }

                        50% {
                            outline: 2px solid rgba(228, 228, 228, 0);
                        }

                        100% {
                            outline: 2px solid red;
                        }
                    }

                    .blinking {
                        animation: blink 1.5s infinite;
                    }
                </style>



<script>
    let array = [];

    function getarray(val, event, name) {

        // console.log('event', val, event);
        if (array.length == event + 1) {

        }
        if (array.length > 0) {
            if (name == 'isrc') {
                array[0]['isrc'] = val.value;
                console.log('event', val.value, event, array)
            }
        } else {
            if (name == 'upc') {
                array.push({
                    "upc": val.value
                });
                console.log('event', val.value, event, array)
            }
        }

    }


    //populateOptions();
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const scrollBtn = document.getElementById('scrollToTopBtn');

        window.addEventListener('scroll', function () {
            if (window.scrollY > 100) {
                scrollBtn.style.display = 'flex';
            } else {
                scrollBtn.style.display = 'none';
            }
        });

        scrollBtn.addEventListener('click', function () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    });
</script>

<style>
    .options-container {
        display: none;
        max-height: 150px;
        overflow-y: auto;
        position: absolute;
        background: white;
        z-index: 1000;
    }

    .options-container div {
      padding: 14px 20px 14px 20px;
        cursor: pointer;
    }

    .options-container div:hover {
        background: #fafafa;
    }
</style>
<script>
    let totalPercentageLefta = 100; // Initial total percentage
    let rowcnt = 0;

    function addTextField1() {
        const container = document.getElementById('input_fields_containerr0');
        // const rowcnt = container.children.length + 1;
        // for (let i = 0; i < 1; i++) {
        const newDiv = document.createElement('div');
        // newDiv.className = 'form_input';
        newDiv.classList.add('form_wrappers')
        // <input type="text" class="form-control percentageinput" name="percentage[]" placeholder="%" oninput="updatePercentage(this, ${totalPercentageLefta})">
        newDiv.innerHTML = `
				<br>
                    <div style="width: 100%; gap:20px; display:flex; font-size: 12px" class="form_input">
                        <div style="">UserID:<br>
                            <input type="text" class="form_input form-control shareUPC input-field" onkeyup="checkInput()" name="shareUPC[]" required autocomplete="off" oninput="updateNameField(this, ${rowcnt})">
                            <span class="dropdown-menu shareUPCDropdown" id="shareUPCDropdown${rowcnt}" style="display: none;"></span>
                        </div>
                        <div>
                            UserName:<br>
                            <input style="width:250px" type="text" class="form-control select-field" name="sharename[]" required autocomplete="off" readonly>
                        </div>
                        <div>
                            Enter Percentage:<br>
                            <input style="width:250px" type="text" class="form-control percentageinput" name="percentage[]" placeholder="%" >
                        </div>
                        <div style="margin: auto; width: 5%">
                            <br>
                            <img src="{{ asset('images/remove_circle_outline.svg') }}" alt="remove" onclick="removeTextField(this)" class="remove_img">
                        </div>
                    </div>
                `;

        container.appendChild(newDiv);

        // newDiv.addEventListener("input", generateJSON);
        const inputFields = newDiv.querySelectorAll('.input-field');
        const percentageFields = newDiv.querySelectorAll('.percentageinput');

        inputFields.forEach(input => input.addEventListener('input', generateJSON));
        percentageFields.forEach(input => input.addEventListener('input', generateJSON));
        rowcnt++;

        // }
    }

    function generateJSON_() {
        const inputFields = document.querySelectorAll(".input-field");
        const selectFields = document.querySelectorAll(".select-field");
        const percentageFields = document.querySelectorAll(".percentageinput");
        const inputPairs = [];

        inputFields.forEach((input, index) => {
            const select = index < selectFields.length ? selectFields[index] : null;
            const percentage = index < percentageFields.length ? percentageFields[index].value : '';

            if (input instanceof HTMLInputElement && select instanceof HTMLInputElement) {
                inputPairs.push({
                    userID: input.value,
                    userName: select ? select.value : '',
                    percentage: percentage
                });
            }
        });

        const json = JSON.stringify(inputPairs, null, 2);
        console.log('inputPairs', json)
    }

    function removeTextField(element) {
        const fieldContainer = element.closest('.form_input');
        if (fieldContainer) {
            const percentageInput = fieldContainer.querySelector('input[name="percentage[]"]');
            if (percentageInput) {
                totalPercentageLeft += parseFloat(percentageInput.value) || 0; // Restore the removed percentage
            }
            fieldContainer.remove();
        }
    }

    function checkInput() {
        // Add your implementation here
    }



    function updateNameField(inputElement, id) {

        console.log('Input changed - 1', inputElement, id); // Debug statement
        const inputValue = inputElement.value.trim().toLowerCase();
        const dropdownMenu = document.getElementById('shareUPCDropdown' + id);
        console.log('dropdownMenu', dropdownMenu)
        // Clear the dropdown menu
        dropdownMenu.innerHTML = '';

        // Filter and display similar values from $data
        $data.forEach(function(user) {
            if (user.uid.toString().toLowerCase().includes(inputValue)) {
                var option = document.createElement('div');
                option.classList.add('dropdown-item');
                option.textContent = user.uid;
                option.onclick = function() {
                    inputElement.value = user.uid;
                    // Set the corresponding name in the sharename input field
                    var sharenameInput = inputElement.closest(
                        '.form_input').querySelector(
                        '[name="sharename[]"]');
                    sharenameInput.value = user.name;
                    dropdownMenu.style.display = 'none';
                };
                dropdownMenu.appendChild(option);
            }
        });
        if (inputElement.value == '') {
            var sharenameInput = inputElement.closest(
                '.form_input').querySelector(
                '[name="sharename[]"]');
            sharenameInput.value = '';
        }
        // Display the dropdown menu
        if (inputValue.length > 0) {
            dropdownMenu.style.display = 'block';
        } else {
            dropdownMenu.style.display = 'none';
        }
    }

    function updatePercentage(input, totalPercentageLeft) {
        console.log('totalPercentageLeft', input)
        const percentage = parseFloat(input.value || 0);
        if (percentage > maxPercentage) {
            input.value = maxPercentage;
        }
        updateRemainingPercentage();
        updateAllShares();
    }
</script>



<script>
    function getSumOfPreviousPercentages() {
        const percentages = document.querySelectorAll('input[name="percentage[]"]');
        return Array.from(percentages).reduce((acc, input) => acc + parseFloat(input.value || 0), 0);
    }

    function updateRemainingPercentage() {

        const remainingPercentage = defaultTotalValue1 - getSumOfPreviousPercentages();
        document.getElementById('remaining-percentage').innerText = remainingPercentage + '%';
    }
    let rowcnt2 = 0;
    // let totalPercentageLeft = 100; // Example total percentage left
    // function addTextField2(number) {
    //     const container = document.getElementById('input_fields_container' + number);

    //     // Ensure totalPercentageLeft is valid and non-negative
    //     if (totalPercentageLefta <= 0) {
    //         alert('No percentage left to allocate.');
    //         return;
    //     }

    //     const newDiv = document.createElement('div');
    //     newDiv.className = 'form_input';
    //     // <div style=""> Enter Percentage:<br><input type="text" class="form-control" name="percentage[]" placeholder="%" oninput="updatePercentage(this, ${totalPercentageLeft})"> </div>
    //     newDiv.innerHTML = `
    //             <div style="width: 100%; gap:20px; display:flex; font-size: 12px">
    //                 <div>
    //                     UserID:<br>
    //                    <input type="text" class="form-control shareUPC input-field" onkeyup="checkInput()" name="shareUPC[]" required autocomplete="off" oninput="updateNameField(this, ${rowcnt2})">
    //             <span class="dropdown-menu" id="shareUPCDropdown" style="display: none;"></span>
    //                 </div>
    //                 <div>
    //                     UserName:<br>
    //                     <input type="text" class="form-control select-field" name="sharename[]" required autocomplete="off" readonly>
    //                 </div>
    //                  <div style=""> Enter Percentage:<br><input type="text" class="form-control percentageinput" name="percentage[]" placeholder="%" oninput="updatePercentage(this, ${totalPercentageLeft})"> </div>
    //                 <div style="margin: auto; width: 5%">
    //                     <br>
    //                     <img src="{{ asset('images/remove_circle_outline.svg') }}" alt="remove" onclick="removeTextField(this)" class="remove_img">
    //                 </div>
    //             </div>
    //         `;

    //     container.appendChild(newDiv);
    //     rowcnt2++;
    //     const inputFields = newDiv.querySelectorAll('.input-field');
    //         const percentageFields = newDiv.querySelectorAll('.percentageinput');

    //         inputFields.forEach(input => input.addEventListener('input', generateJSON));
    //         percentageFields.forEach(input => input.addEventListener('input', generateJSON));
    // }


    function addTextField2(rowCount) {
        const inputFieldsDiv = document.getElementById('input_fields_containerr' + rowCount);
        console.log('inputFieldsDiv', inputFieldsDiv, rowCount)

        // Create a wrapper for the input fields and remove button using HTML string
        const htmlString = `
            <div class="input-wrapper">
                <input type="text" placeholder="Enter value" class="input-field">
                <input type="text" placeholder="Enter value" class="input-field">
                <button class="remove-button" onclick="removeInputFields(this)">Remove</button>
            </div>
        `;

        // Insert the HTML string into the input fields container
        inputFieldsDiv.insertAdjacentHTML('beforeend', htmlString);
    }

    function removeTextField(element) {
        const fieldContainer = element.closest('.form_input');
        if (fieldContainer) {
            const percentageInput = fieldContainer.querySelector('input[name="percentage[]"]');
            if (percentageInput) {
                totalPercentageLeft += parseFloat(percentageInput.value) || 0; // Restore the removed percentage
            }
            fieldContainer.remove();
        }
    }

    function removeTextField1(element) {
        document.getElementById('input_fields_container').removeChild(element.closest('.input-group'));
        rowCount--;
        updateRemainingPercentage();
        updateAllShares();
    }



    function updatePercentage(input, maxPercentage) {
        const percentage = parseFloat(input.value || 0);
        if (percentage > maxPercentage) {
            input.value = maxPercentage;
        }
        updateRemainingPercentage();
        updateAllShares();
    }


</script>


<style>
    .form_input {
        margin-bottom: 10px;
    }

    .remove_img {
        cursor: pointer;
        width: 25px;
        height: 25px;
    }
    .add_img2 {
        cursor: pointer;
        width: 25px;
        height: 25px;

    }
    .add_img {
        cursor: pointer;
        width: 25px;
        height: 25px;
        margin-left: -8px;
    margin-top: 2px;
    }
    .add_img1 {
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin-top: -12px;
    margin-left: 2px;
    }
            .dropdown-option {
    padding: 14px 20px 12px 20px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .dropdown-option:hover {
    background-color: #FAFAFA;
  }


</style>
<script>




  function toggleSelectOpen(id, isOpen) {
    const wrapper = document.getElementById(`selectWrapper-${id}`);
    if (wrapper) {
      wrapper.classList.toggle('open', isOpen);
    }
  }
</script>
<div><div id="bottom-wrapper"  class="rn_btmwra">

   
	
      
	<footer id="rnb_footer"
            x-data="{
                links: window.rnb_links,
                scrolled: false,
                checkIfScrolled(value) { if (window.scrollY > 0) { this.scrolled = true } else { this.scrolled = false } },
                scrollToTop() { document.querySelector('html').scrollIntoView({ alignToTop: true, behavior: 'smooth', block: 'start', inline: 'start' }); this.scrolled = false }
            }"
            x-init="checkIfScrolled()"
            @scroll.window="checkIfScrolled()">
            <div class="rnb_footer_inner">
                <div class="rnb_footer_columns rnb_margin_top_lg">
                    <div class="rnb_footer_column">
                        <h5 class="rnb_h5 rnb-text-white rnb_text_oswald">
                            ROUTENOTE
                        </h5>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/about" target="_blank" class="rnb-text-white rnb_a">
                                About us
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/whychoose" target="_blank" class="rnb-text-white rnb_a">
                                Why RouteNote?
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/pricing" target="_blank" class="rnb-text-white rnb_a">
                                Pricing
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/partner" target="_blank" class="rnb-text-white rnb_a">
                                Partners
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="http://routenote.com/blog/" target="_blank" class="rnb-text-white rnb_a">
                                    Blog
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://www.youtube.com/user/routenote" target="_blank" class="rnb-text-white rnb_a">
                                    Videos
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/release-music-online" target="_blank" class="rnb-text-white rnb_a">
                                    Release Your Music
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/best-music-distribution" target="_blank" class="rnb-text-white rnb_a">
                                    Earn Money
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/free-or-premium" target="_blank" class="rnb-text-white rnb_a">
                                    Free vs Premium
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/switch-to-routenote" target="_blank" class="rnb-text-white rnb_a">
                                    Switch to RouteNote
                            </a>
                        </span>
                    </div>

                    <div class="rnb_footer_column">
                        <h5 class="rnb_h5 rnb-text-white rnb_text_oswald">
                            PRODUCTS
                        </h5>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/distribution" target="_blank" class="rnb-text-white rnb_a">
                                Distribution
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/monetise" target="_blank" class="rnb-text-white rnb_a">
                                Monetisation
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/free-music-distribution" target="_blank" class="rnb-text-white rnb_a">
                                Free
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/premium-music-distribution" target="_blank" class="rnb-text-white rnb_a">
                                Premium
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/all-access-distribution" target="_blank" class="rnb-text-white rnb_a">
                                All Access
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/label-distribution" target="_blank" class="rnb-text-white rnb_a">
                                Record Labels
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/push" target="_blank" class="rnb-text-white rnb_a">
                                Promotion
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/music-marketing" target="_blank" class="rnb-text-white rnb_a">
                                Marketing
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/referrals" target="_blank" class="rnb-text-white rnb_a">
                                Affiliate
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://create.routenote.com/" target="_blank" class="rnb-text-white rnb_a">
                                Sample Packs
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://synchedin.com/" target="_blank" class="rnb-text-white rnb_a">
                                Synchedin
                            </a>
                        </span>
                    </div>

                    <div class="rnb_footer_column">
                        <h5 class="rnb_h5 rnb-text-white rnb_text_oswald">
                            FEATURES
                        </h5>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/analytics" target="_blank" class="rnb-text-white rnb_a">
                                Analytics
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/royalty-split-tool"  target="_blank" class="rnb-text-white rnb_a">
                                Revenue Sharing
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/pitching" target="_blank" class="rnb-text-white rnb_a">
                                Pitching
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/spotify-distribution" target="_blank" class="rnb-text-white rnb_a">
                                Get on Spotify
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/spotify" target="_blank" class="rnb-text-white rnb_a">
                                Spotify for Artists
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/youtube-content-id" target="_blank" class="rnb-text-white rnb_a">
                                YouTube Content ID
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/youtube-sync" target="_blank" class="rnb-text-white rnb_a">
                                YouTube Sync
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/facebook-and-instagram" target="_blank" class="rnb-text-white rnb_a">
                                Facebook and Instagram
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/soundcloud-monetisation" target="_blank" class="rnb-text-white rnb_a">
                                SoundCloud
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/artist-profiles" target="_blank" class="rnb-text-white rnb_a">
                                Artist Profiles
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/sync-licensing" target="_blank" class="rnb-text-white rnb_a">
                                Sync Licensing
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/free-codes" target="_blank" class="rnb-text-white rnb_a">
                                Free Codes
                            </a>
                        </span>
                    </div>

                    <div class="rnb_footer_column">
                        <h5 class="rnb_h5 rnb-text-white rnb_text_oswald">
                            CONTACT
                        </h5>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/contact" target="_blank" class="rnb-text-white rnb_a">
                                Contact
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="http://support.routenote.com/" target="_blank" class="rnb-text-white rnb_a">
                                Support
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/content/brand-assets" target="_blank" class="rnb-text-white rnb_a">
                                Brand Assets
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/termsandconditions" target="_blank" class="rnb-text-white rnb_a">
                                Terms &#38; conditions
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/privacypolicy" target="_blank" class="rnb-text-white rnb_a">
                                Privacy policy
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://routenote.com/modern-slavery-statement" target="_blank" class="rnb-text-white rnb_a">
                                Modern slavery statement
                            </a>
                        </span>

                        <span class="rnb_h7 rnb_darken rnb_fade rnb_margin_top_sm">
                            <a href="https://docs.google.com/forms/d/e/1FAIpQLSdt6ThFWDu-Ha_tnZI1HJeCXM2jLvXiZnEcAI5xVJCW9kj2Hg/viewform" target="_blank" class="rnb-text-white rnb_a">
                                Reporting Infringements
                            </a>
                        </span>
                    </div>
                </div>

                <div class="rnb_footer_bottom rnb_margin_top_md">
              


                    <span class="rnb_footer_copyright rnb_p_sb rnb-text-white">
                        <svg class="rnb_footer_copyright_logo rnb_footer_copyright_logo_lg" width="18px" height="18px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                            <title>icon/copyright</title>
                            <desc>Created with Sketch.</desc>
                            <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="Footer" transform="translate(-451.000000, -429.000000)" fill="#FFFFFF">
                                    <g id="Group-8" transform="translate(0.000000, -0.000000)">
                                        <g id="Group-2" transform="translate(451.000000, 427.000000)">
                                            <g id="Group-3">
                                                <g id="icon/copyright" transform="translate(0.000000, 2.000000)">
                                                    <g id="iconfinder_BT_copyright_905542">
                                                        <path d="M9,0 C4.0418325,0 0,3.81728668 0,8.5 C0,13.1827138 4.0418325,17 9,17 C13.9581675,17 18,13.1827138 18,8.5 C18,3.81728668 13.9581675,0 9,0 Z M9.22571007,2.125 C13.0905148,2.125 16.2,5.06307774 16.2,8.71317062 C16.2,12.3632639 13.0905148,15.3 9.22571007,15.3 C5.36090584,15.3 2.25,12.3632639 2.25,8.71317062 C2.25,5.06307774 5.36090584,2.125 9.22571007,2.125 Z M9.17045904,4.2513922 C7.41959744,4.21793682 5.65749708,5.30680876 5.2135839,6.90824029 C4.75633088,8.30136415 4.88312806,9.90356911 5.67918087,11.1664585 C6.36979277,12.1741278 7.64828435,12.7589246 8.92717414,12.7444888 C9.80611607,12.7745866 10.7242713,12.6870683 11.5222131,12.3412288 C11.8887794,12.0189054 11.6253878,11.5084371 11.7277469,11.1107023 C11.7606229,10.8511649 11.4938525,10.5592953 11.2020278,10.6841025 C10.2019861,10.923522 9.06119134,11.1692871 8.098048,10.7139256 C7.25555563,10.2521443 7.03442028,9.25871907 7.06478626,8.41495453 C7.06981303,7.59351364 7.38022085,6.66710087 8.21549589,6.26509893 C9.08808758,5.85394944 10.1242267,6.06289279 10.974123,6.41421437 C11.3719442,6.46237652 11.6644655,6.11963073 11.7319415,5.79311615 C11.8714959,5.51457537 12.0256918,5.24179961 12.15,4.95677305 C11.2577214,4.46214921 10.2099225,4.2296644 9.17045904,4.2513922 Z" id="text2985" fill-rule="nonzero"></path>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                        <svg class="rnb_footer_copyright_logo rnb_footer_copyright_logo_sm" width="11px" height="11px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                            <title>icon/copyright</title>
                            <desc>Created with Sketch.</desc>
                            <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="Footer" transform="translate(-451.000000, -429.000000)" fill="#FFFFFF">
                                    <g id="Group-8" transform="translate(0.000000, -0.000000)">
                                        <g id="Group-2" transform="translate(451.000000, 427.000000)">
                                            <g id="Group-3">
                                                <g id="icon/copyright" transform="translate(0.000000, 2.000000)">
                                                    <g id="iconfinder_BT_copyright_905542">
                                                        <path d="M9,0 C4.0418325,0 0,3.81728668 0,8.5 C0,13.1827138 4.0418325,17 9,17 C13.9581675,17 18,13.1827138 18,8.5 C18,3.81728668 13.9581675,0 9,0 Z M9.22571007,2.125 C13.0905148,2.125 16.2,5.06307774 16.2,8.71317062 C16.2,12.3632639 13.0905148,15.3 9.22571007,15.3 C5.36090584,15.3 2.25,12.3632639 2.25,8.71317062 C2.25,5.06307774 5.36090584,2.125 9.22571007,2.125 Z M9.17045904,4.2513922 C7.41959744,4.21793682 5.65749708,5.30680876 5.2135839,6.90824029 C4.75633088,8.30136415 4.88312806,9.90356911 5.67918087,11.1664585 C6.36979277,12.1741278 7.64828435,12.7589246 8.92717414,12.7444888 C9.80611607,12.7745866 10.7242713,12.6870683 11.5222131,12.3412288 C11.8887794,12.0189054 11.6253878,11.5084371 11.7277469,11.1107023 C11.7606229,10.8511649 11.4938525,10.5592953 11.2020278,10.6841025 C10.2019861,10.923522 9.06119134,11.1692871 8.098048,10.7139256 C7.25555563,10.2521443 7.03442028,9.25871907 7.06478626,8.41495453 C7.06981303,7.59351364 7.38022085,6.66710087 8.21549589,6.26509893 C9.08808758,5.85394944 10.1242267,6.06289279 10.974123,6.41421437 C11.3719442,6.46237652 11.6644655,6.11963073 11.7319415,5.79311615 C11.8714959,5.51457537 12.0256918,5.24179961 12.15,4.95677305 C11.2577214,4.46214921 10.2099225,4.2296644 9.17045904,4.2513922 Z" id="text2985" fill-rule="nonzero"></path>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                        Copyright 2007 - <script>document.write( new Date().getFullYear() );</script> RouteNote Ltd. Kernow House, Gas Hill, Truro, TR1 2XP
                    </span>

                    <div class="rnb_social_list">
                        <span class="rnb_social rnb_social_youtube">
                            <a href="https://www.youtube.com/user/RouteNote" target="_blank" class="rnb_a">
                                <svg width="30px" height="30px" viewBox="0 0 30 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                                    <title>youtube/white</title>
                                    <desc>Created with Sketch.</desc>
                                    <defs>
                                        <polygon id="path-1" points="0.00993617388 0.534759358 29.1461101 0.534759358 29.1461101 20.5347594 0.00993617388 20.5347594"></polygon>
                                    </defs>
                                    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="icon/social/youtube/white" transform="translate(-9.000000, -14.000000)">
                                            <g id="youtube/white" transform="translate(9.000000, 14.000000)">
                                                <g id="yt_icon_mono_dark" transform="translate(0.000000, -0.645161)">
                                                    <g id="Clip-2"></g>
                                                    <path d="M11.5922029,15.2462032 L11.5922029,6.57887873 L19.2099362,10.9127066 L11.5922029,15.2462032 Z M28.5370226,3.85173021 C28.2018423,2.58950492 27.2141866,1.59555632 25.9602415,1.25822322 C23.6873417,0.64516129 14.573055,0.64516129 14.573055,0.64516129 C14.573055,0.64516129 5.45876833,0.64516129 3.18586855,1.25822322 C1.93192341,1.59555632 0.944267725,2.58950492 0.609087459,3.85173021 C8.27438476e-13,6.13936864 8.27438476e-13,10.912541 8.27438476e-13,10.912541 C8.27438476e-13,10.912541 8.27438476e-13,15.6855477 0.609087459,17.9733517 C0.944267725,19.235577 1.93192341,20.2295256 3.18586855,20.5670243 C5.45876833,21.1799206 14.573055,21.1799206 14.573055,21.1799206 C14.573055,21.1799206 23.6873417,21.1799206 25.9602415,20.5670243 C27.2141866,20.2295256 28.2018423,19.235577 28.5370226,17.9733517 C29.1461101,15.6855477 29.1461101,10.912541 29.1461101,10.912541 C29.1461101,10.912541 29.1461101,6.13936864 28.5370226,3.85173021 L28.5370226,3.85173021 Z" id="Fill-1" fill="#FFFFFE" mask="url(#mask-2)"></path>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </a>
                        </span>

                        <span class="rnb_social rnb_social_twitter">
                            <a href="https://twitter.com/RouteNote" target="_blank" class="rnb_a">
                                <svg width="26px" height="26px" viewBox="0 0 26 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                                    <title>Path</title>
                                    <desc>Created with Sketch.</desc>
                                    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="icon/social/twitter/white" transform="translate(-11.000000, -13.000000)" fill="#FFFFFF" fill-rule="nonzero">
                                            <path d="M19.5151509,34.627499 C29.1435424,34.627499 34.4121002,26.6429792 34.4121002,19.7305497 C34.4121002,19.5059212 34.4121002,19.2812928 34.4018899,19.0566644 C35.4229282,18.3215168 36.3112315,17.3923719 37.015748,16.3407024 C36.0763927,16.7593281 35.0655648,17.0350085 34.0036849,17.1677434 C35.0859855,16.5244893 35.9130266,15.4932406 36.3112315,14.2679946 C35.3004036,14.8704072 34.1772614,15.2992433 32.9826466,15.5340821 C32.0228705,14.5130438 30.6648896,13.88 29.1639632,13.88 C26.2744247,13.88 23.9260365,16.2283882 23.9260365,19.1179267 C23.9260365,19.526342 23.9770885,19.9245469 24.0587715,20.3125415 C19.7091482,20.0981235 15.8496233,18.0049949 13.2663963,14.839776 C12.8171395,15.6157652 12.5618799,16.5142789 12.5618799,17.4740549 C12.5618799,19.2915032 13.4910248,20.8945334 14.8898473,21.8338886 C14.0321751,21.8032575 13.2255548,21.5684187 12.5210383,21.1804241 C12.5210383,21.2008449 12.5210383,21.2212656 12.5210383,21.2518968 C12.5210383,23.7840719 14.3282762,25.9078316 16.7175059,26.3877196 C16.2784594,26.5102442 15.8189922,26.5715065 15.3391041,26.5715065 C15.0021615,26.5715065 14.6754292,26.5408754 14.3589073,26.4796131 C15.0225823,28.5625313 16.9625551,30.073668 19.249681,30.1145095 C17.4526535,31.5235424 15.1961588,32.3607939 12.7456668,32.3607939 C12.3270411,32.3607939 11.9084153,32.3403731 11.5,32.2893212 C13.8075466,33.7596164 16.5643501,34.627499 19.5151509,34.627499" id="Path"></path>
                                        </g>
                                    </g>
                                </svg>
                            </a>
                        </span>

                        <span class="rnb_social rnb_social_facebook">
                            <a href="https://www.facebook.com/RouteNote" target="_blank" class="rnb_a">
                                <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                                    <title>Fill 1</title>
                                    <desc>Created with Sketch.</desc>
                                    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="icon/social/facebook/white" transform="translate(-12.000000, -12.000000)" fill="#FFFFFE">
                                            <path d="M36,24.0733361 C36,17.4054118 30.6274219,12 24,12 C17.3725781,12 12,17.4054118 12,24.0733361 C12,30.0994871 16.3882266,35.094264 22.125,36 L22.125,27.5632848 L19.078125,27.5632848 L19.078125,24.0733361 L22.125,24.0733361 L22.125,21.4134292 C22.125,18.3875494 23.9165156,16.7161469 26.6575781,16.7161469 C27.9704766,16.7161469 29.34375,16.9519543 29.34375,16.9519543 L29.34375,19.9231268 L27.8305781,19.9231268 C26.3398828,19.9231268 25.875,20.8537877 25.875,21.8085716 L25.875,24.0733361 L29.203125,24.0733361 L28.6710938,27.5632848 L25.875,27.5632848 L25.875,36 C31.6117734,35.094264 36,30.0994871 36,24.0733361" id="Fill-1"></path>
                                        </g>
                                    </g>
                                </svg>
                            </a>
                        </span>

                        <span class="rnb_social rnb_social_instagram">
                            <a href="https://www.instagram.com/RouteNote/" target="_blank" class="rnb_a">
                                <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                                    <title>icon/instagram/white</title>
                                    <desc>Created with Sketch.</desc>
                                    <defs>
                                        <polygon id="path-1" points="0 0.00757142857 23.9924286 0.00757142857 23.9924286 23.9971429 0 23.9971429"></polygon>
                                    </defs>
                                    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="icon/social/instagram/white" transform="translate(-12.000000, -12.000000)">
                                            <g id="icon/instagram/white" transform="translate(12.000000, 12.000000)">
                                                <g id="glyph-logo_May2016">
                                                    <g id="Group-3">
                                                        <g id="Clip-2"></g>
                                                        <path d="M11.9962381,0.00757142857 C8.7382381,0.00757142857 8.32971429,0.0213809524 7.05019048,0.0797619048 C5.77333333,0.138 4.90128571,0.340809524 4.1382381,0.637380952 C3.34938095,0.943904762 2.68038095,1.35409524 2.01342857,2.021 C1.34652381,2.68795238 0.936333333,3.35695238 0.629809524,4.14580952 C0.333238095,4.90885714 0.130428571,5.78090476 0.0721904762,7.0577619 C0.0138095238,8.33728571 0,8.74580952 0,12.0038095 C0,15.2617619 0.0138095238,15.6702857 0.0721904762,16.9498095 C0.130428571,18.2266667 0.333238095,19.0987143 0.629809524,19.8617619 C0.936333333,20.650619 1.34652381,21.319619 2.01342857,21.9865714 C2.68038095,22.6534762 3.34938095,23.0636667 4.1382381,23.3702381 C4.90128571,23.6667619 5.77333333,23.8695714 7.05019048,23.9278095 C8.32971429,23.9861905 8.7382381,24 11.9962381,24 C15.2541905,24 15.6627143,23.9861905 16.9422381,23.9278095 C18.2190952,23.8695714 19.0911429,23.6667619 19.8541905,23.3702381 C20.6430476,23.0636667 21.3120476,22.6534762 21.979,21.9865714 C22.6459048,21.319619 23.0560952,20.650619 23.3626667,19.8617619 C23.6591905,19.0987143 23.862,18.2266667 23.9202381,16.9498095 C23.978619,15.6702857 23.9924286,15.2617619 23.9924286,12.0038095 C23.9924286,8.74580952 23.978619,8.33728571 23.9202381,7.0577619 C23.862,5.78090476 23.6591905,4.90885714 23.3626667,4.14580952 C23.0560952,3.35695238 22.6459048,2.68795238 21.979,2.021 C21.3120476,1.35409524 20.6430476,0.943904762 19.8541905,0.637380952 C19.0911429,0.340809524 18.2190952,0.138 16.9422381,0.0797619048 C15.6627143,0.0213809524 15.2541905,0.00757142857 11.9962381,0.00757142857 Z M11.9962381,2.16904762 C15.1993333,2.16904762 15.5787619,2.18128571 16.8437143,2.239 C18.0133333,2.29233333 18.6485238,2.4877619 19.0712381,2.65204762 C19.6311905,2.86966667 20.0308095,3.12961905 20.4505714,3.54942857 C20.870381,3.96919048 21.1303333,4.36880952 21.3479524,4.9287619 C21.5122381,5.35147619 21.7076667,5.98666667 21.761,7.15628571 C21.8187143,8.4212381 21.8309524,8.80066667 21.8309524,12.0038095 C21.8309524,15.2069048 21.8187143,15.5863333 21.761,16.8512857 C21.7076667,18.0209048 21.5122381,18.6560952 21.3479524,19.0788095 C21.1303333,19.6387619 20.870381,20.038381 20.4505714,20.4581429 C20.0308095,20.8779524 19.6311905,21.1379048 19.0712381,21.3555238 C18.6485238,21.5198095 18.0133333,21.7152381 16.8437143,21.7685714 C15.5789524,21.8262857 15.1995714,21.8385238 11.9962381,21.8385238 C8.79285714,21.8385238 8.41352381,21.8262857 7.14871429,21.7685714 C5.97909524,21.7152381 5.34390476,21.5198095 4.92119048,21.3555238 C4.3612381,21.1379048 3.96161905,20.8779524 3.54185714,20.4581429 C3.12209524,20.038381 2.86209524,19.6387619 2.64447619,19.0788095 C2.48019048,18.6560952 2.2847619,18.0209048 2.23142857,16.8512857 C2.17371429,15.5863333 2.16147619,15.2069048 2.16147619,12.0038095 C2.16147619,8.80066667 2.17371429,8.4212381 2.23142857,7.15628571 C2.2847619,5.98666667 2.48019048,5.35147619 2.64447619,4.9287619 C2.86209524,4.36880952 3.12204762,3.96919048 3.54185714,3.54942857 C3.96161905,3.12961905 4.3612381,2.86966667 4.92119048,2.65204762 C5.34390476,2.4877619 5.97909524,2.29233333 7.14871429,2.239 C8.41366667,2.18128571 8.79309524,2.16904762 11.9962381,2.16904762 L11.9962381,2.16904762 Z" id="Fill-1" fill="#FFFFFF" mask="url(#mask-2)"></path>
                                                    </g>
                                                    <path d="M11.6571667,16.3488747 C9.44467013,16.3488747 7.65112531,14.5553299 7.65112531,12.342881 C7.65112531,10.1303844 9.44467013,8.33683959 11.6571667,8.33683959 C13.8696156,8.33683959 15.6631604,10.1303844 15.6631604,12.342881 C15.6631604,14.5553299 13.8696156,16.3488747 11.6571667,16.3488747 Z M11.6571667,6.17142857 C8.24873505,6.17142857 5.48571429,8.93444934 5.48571429,12.342881 C5.48571429,15.7512649 8.24873505,18.5142857 11.6571667,18.5142857 C15.0655507,18.5142857 17.8285714,15.7512649 17.8285714,12.342881 C17.8285714,8.93444934 15.0655507,6.17142857 11.6571667,6.17142857 L11.6571667,6.17142857 Z" id="Fill-4" fill="#FFFFFF"></path>
                                                    <path d="M19.8857143,5.48573697 C19.8857143,6.24316313 19.2716892,6.85714286 18.514263,6.85714286 C17.7568822,6.85714286 17.1428571,6.24316313 17.1428571,5.48573697 C17.1428571,4.72831081 17.7568822,4.11428571 18.514263,4.11428571 C19.2716892,4.11428571 19.8857143,4.72831081 19.8857143,5.48573697" id="Fill-5" fill="#FFFFFF"></path>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </a>
                        </span>

                        <span class="rnb_social rnb_social_tiktok">
                            <a href="https://www.tiktok.com/@routenote" target="_blank" class="rnb_a">
                                <svg id="Layer_1" width="26" height="26" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.93 554.93">
                                    <defs>
                                        <style>.cls-1{fill:#fff;}</style>
                                    </defs>
                                    <path class="cls-1" d="M74.98,523.1c28.52,20.02,63.22,31.83,100.63,31.83,96.82,0,175.6-78.77,175.6-175.6V185.45c37.41,26.86,83.26,42.69,132.73,42.69v-95.41c-26.65,0-51.47-7.92-72.28-21.5-29.89-19.49-51.47-50.67-58.2-87.02-1.45-7.86-2.25-15.94-2.25-24.21h-95.41l-.16,382.35c-1.6,42.82-36.84,77.18-80.04,77.18-13.43,0-26.07-3.35-37.2-9.22-25.53-13.43-42.99-40.19-42.99-70.98,0-44.22,35.98-80.2,80.19-80.2,8.26,0,16.17,1.36,23.66,3.71v-97.4c-7.76-1.06-15.63-1.71-23.66-1.71C78.77,203.72,0,282.49,0,379.32c0,59.41,29.69,111.98,74.97,143.77h0Z"/>
                                </svg>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </footer>
	
        </div></div>
        </body>
        </html>