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

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

    <script>
        $(document).ready(function() {
            $("input[name=first_in]").focusout(function() {
                var inval = $("input[name=first_in]").val();
                if (inval == '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=first_div]').css("border", "2px solid red");
                    $('#in_message').css({
                        'opacity': '1'
                    });
                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=first_div]').css("border", "none");
                    $('#in_message').css({
                        'opacity': '0'
                    });
                }
            });
            $("input[name=second_in]").focusout(function() {
                var inval1 = $("input[name=second_in]").val();
                if (inval1 == '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=second_div]').css("border", "2px solid red");
                    $('#in_message_second').css({
                        'opacity': '1'
                    });
                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=second_div]').css("border", "none");
                    $('#in_message_second').css({
                        'opacity': '0'
                    });
                }
            });
            $("input[name=thrid_in]").focusout(function() {
                var inval3 = $("input[name=thrid_in]").val();
                if (inval3 == '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=thrid_div]').css("border", "2px solid red");
                    $('#in_message_thrid').css({
                        'opacity': '1'
                    });
                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=thrid_div]').css("border", "none");
                    $('#in_message_thrid').css({
                        'opacity': '0'
                    });
                }
            });
            // $("input[name=four_in]").focusout(function() {
            //     var inval4 = $("input[name=four_in]").val();
            //     if (inval4 == '') {
            //         $(this).css("border-bottom", "2px solid red");
            //         $('div[name=four_div]').css("border", "2px solid red");
            //         $('#in_message_four').css({
            //             'opacity': '1'
            //         });
            //     } else {
            //         $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
            //         $('div[name=four_div]').css("border", "none");
            //         $('#in_message_four').css({
            //             'opacity': '0'
            //         });
            //     }
            // });
            // $("input[name=five_in]").focusout(function() {
            //     var inval5 = $("input[name=five_in]").val();
            //     if (inval5 == '') {
            //         $(this).css("border-bottom", "2px solid red");
            //         $('div[name=five_div]').css("border", "2px solid red");
            //         $('#in_message_five').css({
            //             'opacity': '1'
            //         });
            //     } else {
            //         $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
            //         $('div[name=five_div]').css("border", "none");
            //         $('#in_message_five').css({
            //             'opacity': '0'
            //         });
            //     }
            // });
            $("input[name=five_in]").focusout(function () {
                var inval5 = $(this).val().trim();
                // var isValidYoutubeURL = /^(https?:\/\/)?(www\.)?(youtube\.com\/(channel\/|user\/|c\/|@)[\w\-]+|youtube\.com\/watch\?v=[\w\-]+|youtu\.be\/[\w\-]+)(\?.*)?$/i.test(inval5);
               // var isValidYoutubeURL = /^(https?:\/\/)?(www\.)?(youtube\.com\/(channel\/|user\/|c\/|@)[\w\-]+|youtube\.com\/watch\?v=[\w\-]{11}|youtu\.be\/[\w\-]{11})$/i.test(inval5);

                if (inval5 === '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=five_div]').css("border", "2px solid red");
                    $('#in_message_five').css({ 'opacity': '1' });

                   
                        $('#in_message_five span').text('This is a required question');
                    
                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=five_div]').css("border", "none");
                    $('#in_message_five').css({ 'opacity': '0' });
                }
            });

            $("input[name=six_in]").focusout(function() {
                var inval6 = $("input[name=six_in]").val();
                
                if (inval6 == '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=six_div]').css("border", "2px solid red");
                    $('#in_message_six').css({
                        'opacity': '1'
                    });
                    $('#sixinnnn').text("This is a required question");


                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=six_div]').css("border", "none");
                    $('#in_message_six').css({
                        'opacity': '0'
                    });
                    $('#sixinnnn').text("This is a required question");
                

const regex = /^UC[a-zA-Z0-9_-]{22}$/;

if (!regex.test(inval6)) {
    $('div[name=six_div]').css("border", "2px solid red");
           
                $(this).css("border-bottom", "2px solid red");
        $('div[name=six_div]').css("border", "2px solid red");
        $('#in_message_six').css('opacity', '1');
        $('#sixinnnn').html(
            `Invalid Channel ID. Please refer to <a href="https://support.google.com/youtube/answer/3250431?hl=en-GB" class="text-blue-500 underline" target="_blank">YouTube’s guide</a> on locating your channel ID.`
        );


}

                }
                
     
                
                
                
                checkForDuplicateURLs();
            });
            // $("input[name=seven_in]").focusout(function() {
            //     var inval7 = $("input[name=seven_in]").val();
            //     alert(inval7)
            //     if (inval7 == '') {
            //         $(this).css("border-bottom", "2px solid red");
            //         $('div[name=seven_div]').css("border", "2px solid red");
            //         $('#in_message_seven').css({
            //             'opacity': '1'
            //         });
            //     } else {
            //         $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
            //         $('div[name=seven_div]').css("border", "none");
            //         $('#in_message_seven').css({
            //             'opacity': '0'
            //         });
            //     } checkForDuplicateURLs();
            // });
            $("input[name=seven_in]").focusout(function () {
                var inval7 = $("input[name=seven_in]").val().trim();

                // ✅ YouTube video URL pattern (with optional query params)
               // var isValidYoutubeVideoURL = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=[\w\-]+|youtu\.be\/[\w\-]+)(\?.*)?$/i.test(inval7);

                if (inval7 === '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=seven_div]').css("border", "2px solid red");
                    $('#in_message_seven').css({ 'opacity': '1' });

                  
                        $('#in_message_seven span').text('This is a required question');
                    
                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=seven_div]').css("border", "none");
                    $('#in_message_seven').css({ 'opacity': '0' });
                }

                // Always run duplicate check
                checkForDuplicateURLs();
            });

            // $("input[name=eitie_in]").focusout(function() {
            //     var inval8 = $("input[name=eitie_in]").val();
            //     if (inval8 == '') {
            //         $(this).css("border-bottom", "2px solid red");
            //         $('div[name=eitie_div]').css("border", "2px solid red");
            //         $('#in_message_eitie').css({
            //             'opacity': '1'
            //         });
            //     } else {
            //         $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
            //         $('div[name=eitie_div]').css("border", "none");
            //         $('#in_message_eitie').css({
            //             'opacity': '0'
            //         });
            //     }
            //     checkForDuplicateURLs();

            // });
            $("input[name=eitie_in]").focusout(function () {
                var inval8 = $("input[name=eitie_in]").val().trim();

                // ✅ Allow only YouTube channel URLs (supports channel/user/c/@ paths with optional query)
               // var isValidYoutubeChannelURL = /^(https?:\/\/)?(www\.)?youtube\.com\/(channel\/|user\/|c\/|@)[\w\-]+(\?.*)?$/i.test(inval8);

                if (inval8 === '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=eitie_div]').css("border", "2px solid red");
                    $('#in_message_eitie').css({ 'opacity': '1' });

              
                        $('#in_message_eitie span').text('This is a required question');
                    
                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=eitie_div]').css("border", "none");
                    $('#in_message_eitie').css({ 'opacity': '0' });
                }

                checkForDuplicateURLs();
            });

            $("input[name=ninen_in]").focusout(function() {
                var inval9 = $("input[name=ninen_in]").val();
                if (inval9 == '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=ninen_div]').css("border", "2px solid red");
                    $('#in_message_ninen').css({
                        'opacity': '1'
                    });
                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=ninen_div]').css("border", "none");
                    $('#in_message_ninen').css({
                        'opacity': '0'
                    });
                }
                checkForDuplicateURLs();
            });
            $("select[name=ten_in]").focusout(function() {
                var inval10 = $("select[name=ten_in]").val();

                if (inval10 == '') {
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=ten_div]').css("border", "2px solid red");
                    $('#in_message_ten').css({
                        'opacity': '1'
                    });
                } else {
                    $(this).css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=ten_div]').css("border", "none");
                    $('#in_message_ten').css({
                        'opacity': '0'
                    });
                }
            });
        });

        function resetForm() {
            document.getElementById("myForm").reset();
        }

 
        /* function checkForDuplicateURLs() {
            var topicChannelURL = $("input[name=eitie_in]").val();
            var topicVideoURL = $("input[name=ninen_in]").val();

            if (topicChannelURL && topicVideoURL && topicChannelURL === topicVideoURL) {
                $("input[name=eitie_in], input[name=ninen_in]").css("border-bottom", "2px solid red");
                $('div[name=eitie_div], div[name=ninen_div]').css("border", "2px solid red");
                $('#in_message_eitie, #in_message_ninen').css({
                    'opacity': '1'
                });
                $('#in_message_eitie span, #in_message_ninen span').text('Duplicate URLs are not allowed');
            } else {
                $("input[name=eitie_in], input[name=ninen_in]").css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                $('div[name=eitie_div], div[name=ninen_div]').css("border", "none");
                $('#in_message_eitie, #in_message_ninen').css({
                    'opacity': '0'
                });
                $('#in_message_eitie span, #in_message_ninen span').text('This is a required question');
            }
        } */
		
		function checkForDuplicateURLs() {
    var topicChannelURL = $("input[name=eitie_in]").val();
    var topicVideoURL = $("input[name=ninen_in]").val();
    var musicVideoURL = $("input[name=seven_in]").val();
    var artistURL = $("input[name=five_in]").val();

    // Reset styles first
    $("input[name=eitie_in], input[name=ninen_in], input[name=seven_in], input[name=five_in]").css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
    $('div[name=eitie_div], div[name=ninen_div], div[name=seven_div], div[name=five_div]').css("border", "none");
    $('#in_message_eitie, #in_message_ninen, #in_message_seven, #in_message_five').css({'opacity': '0'});
    $('#in_message_eitie span, #in_message_ninen span, #in_message_seven span, #in_message_five span').text('This is a required question');

    // Check for duplicates for each specific URL (separate checks for each URL)
    
    // For Music Video URL (Check if it is duplicated)
    if (musicVideoURL && (musicVideoURL === topicChannelURL || musicVideoURL === topicVideoURL || musicVideoURL === artistURL)) {
        $("input[name=seven_in]").css("border-bottom", "2px solid red");
        $('div[name=seven_div]').css("border", "2px solid red");
        $('#in_message_seven').css({'opacity': '1'});
        $('#in_message_seven span').html('Duplicate URLs are not allowed.Please refer this URL <a href="" target="_blank" class="click-here-link"> (Click here)</a>');
    }

    // For Artist URL (Check if it is duplicated)
    if (artistURL && (artistURL === topicChannelURL || artistURL === topicVideoURL || artistURL === musicVideoURL)) {
        $("input[name=five_in]").css("border-bottom", "2px solid red");
        $('div[name=five_div]').css("border", "2px solid red");
        $('#in_message_five').css({'opacity': '1'});
        $('#in_message_five span').html('Duplicate URLs are not allowed.Please refer this URL <a href="https://support.routenote.com/kb-article/what-is-a-youtube-official-artist-channel-oac/" target="_blank" class="click-here-link">(Click here)</a>');
    }

    // For Topic Channel URL (Check if it is duplicated)
    if (topicChannelURL && (topicChannelURL === topicVideoURL || topicChannelURL === musicVideoURL || topicChannelURL === artistURL)) {
        $("input[name=eitie_in]").css("border-bottom", "2px solid red");
        $('div[name=eitie_div]').css("border", "2px solid red");
        $('#in_message_eitie').css({'opacity': '1'});
        $('#in_message_eitie span').html('Duplicate URLs are not allowed.Please refer this URL<a href="https://support.routenote.com/kb-article/what-is-a-topic-channel/" target="_blank" class="click-here-link">(Click here)</a>');
    }

    // For Topic Video URL (Check if it is duplicated)
    if (topicVideoURL && (topicVideoURL === topicChannelURL || topicVideoURL === musicVideoURL || topicVideoURL === artistURL)) {
        $("input[name=ninen_in]").css("border-bottom", "2px solid red");
        $('div[name=ninen_div]').css("border", "2px solid red");
        $('#in_message_ninen').css({'opacity': '1'});
        $('#in_message_ninen span').html('Duplicate URLs are not allowed.Please refer this URL<a href="" target="_blank"></a>');
    }




    var isValidYoutubeURL = /^(https?:\/\/)?(www\.)?(youtube\.com\/(channel\/|user\/|c\/|@)[\w\-]+|youtube\.com\/watch\?v=[\w\-]{11}|youtu\.be\/[\w\-]{11})$/i.test(artistURL);

if (artistURL === '' || (!(isValidYoutubeURL))) {
    $(this).css("border-bottom", "2px solid red");
    $('div[name=five_div]').css("border", "2px solid red");
    $('#in_message_five').css({ 'opacity': '1' });

    if (artistURL !== '' && !(isValidYoutubeURL)) {
        // $('#in_message_five span').html('Only valid YouTube URLs are allowed. Please refer this <a href="https://support.routenote.com/kb-article/what-is-a-youtube-official-artist-channel-oac/" target="_blank" class="click-here-link">(Click here)</a>');
        $('#in_message_five span').html('Only valid YouTube URLs are allowed.');
    } else {
        $('#in_message_five span').text('This is a required question');
    }
} 

var isValidYoutubeVideoURL = /^(https?:\/\/)?(www\.)?(youtube\.com\/(channel\/|user\/|c\/|@)[\w\-]+|youtube\.com\/watch\?v=[\w\-]{11}|youtu\.be\/[\w\-]{11})$/i.test(musicVideoURL);


                if (musicVideoURL == '' || (!(isValidYoutubeVideoURL))){
                    $(this).css("border-bottom", "2px solid red");
                    $('div[name=seven_div]').css("border", "2px solid red");
                    $('#in_message_seven').css('opacity', '1' );
                    $('#in_message_seven span').html('Only valid YouTube URLs are allowed.');
                    if (musicVideoURL !== '' &&  !(isValidYoutubeChannelURL)) {
                        $('#in_message_seven span').html('Only valid YouTube URLs are allowed.');
    } else {
        $('#in_message_seven span').html('This is a required question');
    }
                    
                } 

 var isValidYoutubeChannelURL = /^(https?:\/\/)?(www\.)?(youtube\.com\/(channel\/|user\/|c\/|@)[\w\-]+|youtube\.com\/watch\?v=[\w\-]{11}|youtu\.be\/[\w\-]{11})$/i.test(topicChannelURL);


if (topicChannelURL === '' || (!(isValidYoutubeChannelURL))) {
    $(this).css("border-bottom", "2px solid red");
    $('div[name=eitie_div]').css("border", "2px solid red");
    $('#in_message_eitie').css({ 'opacity': '1' });

    if (topicChannelURL !== '' &&  !(isValidYoutubeChannelURL)) {
        $('#in_message_eitie span').html('Only valid YouTube URLs are allowed.');
    } else {
        $('#in_message_eitie span').text('This is a required question');
    }
}

}

    </script>
    <style>
        .top_bg {
            background-image: url('https://magiclink.rn-test.com/images/formimg.png');            
            background-size: cover;
            max-height: 23vw;
            max-width: 90vw;
            height: 160px;
            width: 640px;
            border-radius: 8px;
        }
    </style>
	<style>
		.click-here-link {
    color: #3353ff;
    text-decoration: none; 
}

.click-here-link:hover {
    color: #0056b3; 
    text-decoration: underline; 
}
		</style>
</head>

<body style="background-color: rgb(238, 234, 251);">
    <div>

        <!-- <div class="fixed z-10 w-full h-28 bg-black flex items-center justify-between">
            {{-- <div class="p-4"><img src="http://127.0.0.1:8000/images/home_logo.svg" Onclick="window.onbeforeunload = null;window.location.href = 'http://127.0.0.1:8000/supporthub/dashboard'" alt="routenote-logo" style="height: 85px;width: 215px;"></div> --}}
            <div class="select-none p-4">
                <a href="/dashboard" id="max-logo" class="flex items-center gap-2">
                    <img src="https://magiclink.rn-test.com/images/rn-logo-white.svg" alt="routenote-logo">
                    <div class="w-full flex flex-col items-end">
                        <h3 class="font-medium text-xl font-sans !text-white">Smart Hub</h3>
                        <span class="font-sans text-[9px] font-medium text-red-500">Powered by AI</span>
                    </div>
                </a>
                <div class="headflex hidden" id="min-logo">
                    <a href="/dashboard">
                        <img src="https://magiclink.rn-test.com/images/rn-logo-white.svg" alt="routenote-logo"
                            style="height: 52px;">
                    </a>
                </div>
            </div>
            <div class="pr-6 flex items-center text-white gap-2">
                <span>{{ $users->name }}</span>
                <a href="{{ route('formlogout', ['key' => $key, 'name' => 'youtubeoac']) }}"> <svg
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        class="cursor-pointer"
                        style="fill: rgba(255, 255, 255, 1);transform: rotate(180deg);msFilter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);">
                        <path d="M16 13v-2H7V8l-5 4 5 4v-3z"></path>
                        <path
                            d="M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z">
                        </path>
                    </svg> </a>
            </div>
        </div>

 -->


        <div class="fixed z-10 w-full h-28 bg-black flex items-center justify-between" style="
    /* padding: 0 2rem; */
    background: #111827;
">
            
            <div class="select-none p-4" style="
    padding: 3rem;
">
                <a href="" id="max-logo" class="flex items-center gap-2">
                    <img src="https://magiclink.rn-test.com/images/rn-logo-white.svg" alt="routenote-logo">
                    <div class="w-full flex flex-col items-end">
                        <h3 class="font-medium text-xl font-sans !text-white">Smart Hub</h3>
                        <span class="font-sans text-[9px] font-medium text-red-500">Powered by AI</span>
                    </div>
                </a>
                <div class="headflex hidden" id="min-logo">
                    <a href="">
                        <img src="https://magiclink.rn-test.com/images/rn-logo-white.svg" alt="routenote-logo" style="height: 52px;">
                    </a>
                </div>
            </div>
            <div class="pr-6 flex items-center text-white gap-2">
                <span>{{ $users->name }}</span>
                <a href="{{ route('formlogout', ['key' => $key, 'name' => 'youtubeoac','uid' =>  $users->uid]) }}"> <svg
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        class="cursor-pointer"
                        style="fill: rgba(255, 255, 255, 1);transform: rotate(180deg);msFilter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);">
                        <path d="M16 13v-2H7V8l-5 4 5 4v-3z"></path>
                        <path
                            d="M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z">
                        </path>
                    </svg> </a>
            </div>
        </div>



        <br>
        @if (session('success'))
            <div class="top_bg" style="
    left: 423px;
    position: absolute;
    top: 120px;
">
            </div>
 
            <div>
                <br>
                <div style="top: 278px;left: 700px;posi;position: absolute;">
                    <img src="{{ asset('images/tick.png') }}" style="width: 81px; height: 81px;">
                </div>
 
                <div style="
    text-align: center;
    padding: 22% 17%;
"><h2 style="font-weight: 600;/* top: 316px; *//* left: 393px; */position: relative;font-size: x-large;"><span>YouTube OAC form submitted successfully.</span><br>
                        <span>A member of the team will get back to you about your submission as soon as possible. <br>Please allow up to 5 working days for this to be completed.</span>
                        </h2></div>
 
<!--
                <h2 style="    font-weight: 600;top: 316px;left: 393px;position: relative;font-size: x-large;"><span>YouTube OAC form submitted successfully.</span><br>
                        <span>A member of the team will get back to you about your submission as soon as possible. <br>Please allow up to 5 working days for this to be completed.</span>
                        </h2>  -->
                                       <div>
                    <br>
                @elseif($data == '0')
                    <div class="top_bg" style="
    left: 423px;
    position: absolute;
    top: 120px;
">
                    </div>
 
                    <div>
                        <br>
                        <div style="top: 278px;left: 700px;posi;position: absolute;">
                            <img src="{{ asset('images/tick.png') }}" style="width: 81px; height: 81px;">
                        </div>
 
                        <!-- <h2 style="    font-weight: 600;top: 316px;left: 393px;position: relative;font-size: x-large;"><span>YouTube OAC form submitted successfully.</span><br>
                        <span>A member of the team will get back to you about your submission as soon as possible. <br>Please allow up to 5 working days for this to be completed.</span>
                        </h2>  -->
                        <div style="
    text-align: center;
    padding: 22% 17%;
"><h2 style="font-weight: 600;/* top: 316px; *//* left: 393px; */position: relative;font-size: x-large;"><span>YouTube OAC form submitted successfully.</span><br>
                        <span>A member of the team will get back to you about your submission as soon as possible. <br>Please allow up to 5 working days for this to be completed.</span>
                        </h2></div>
                        
                        <div>
                            <br>
                        @else
                            <div class="absolute top-32 px-96 flex flex-col gap-3 overflow-y-auto mb-8">
                                <div class="w-full h-44 bg-cover rounded-lg"
                                    style="background-image: url(https://magiclink.rn-test.com/images/formimg.png);">
                                </div>
                                <div class="w-full h-92 bg-white rounded-lg">
                                    <div class="w-full h-2.5 rounded-t-lg" style="background-color: rgb(87, 42, 212);">
                                    </div>
                                    <div class="p-6">
                                        <h2 class="text-4xl -mt-2 mb-2">YouTube Official Artist Channel Request </h2>
                                        <p class=" font-base mb-4">Please complete the fields below so that we can
                                            request an OAC upgrade for you. </p>
                                        <p class=" font-base mb-4">We will submit eligible requests within 2 working
                                            days, but please note that the upgrade itself can take anywhere from 2 weeks
                                            to a few months. These times vary depending on demand.</p>
                                        <p class=" font-base mb-2">Feel free to contact <a
                                                href="mailto:support@routenote.com" class="text-blue-500"
                                                style="color:#15c;border-bottom: 2px solid #15c">support@routenote.com</a>
                                            with any questions or concerns.</p>

                                        <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
                                        <div class="-my-6 text-red-500 ">* Indicates required question</div><br>
                                    </div>
                                </div>

                                <form class="flex flex-col gap-3" id="myForm" method="POST"
                                    action="{{ route('oacformsubmit') }}"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div name="first_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">Email Address&nbsp;<span class="text-red-500">*</span></h2>
                                        <p class=" font-base mb-4">Please ensure that this is the email address
                                            associated with your RouteNote account. </p>
                                        <div class="relative h-11 w-1/2 max-w-[200px]">
                                            <input type="text" disabled class="" placeholder=" Your Answer"
                                                style="border: none; border-bottom: 1px solid #c7bebe;padding: 10px;"
                                                value="{{ $users->mail }}"> <label
                                                class="!border after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span class="text-red-500 font-medium">This is a required question</span>
                                        </div>
                                    </div>

                                    <div name="second_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">RouteNote username&nbsp;<span class="text-red-500">*</span>
                                        </h2>
                                        <div class="relative h-11 w-1/2 min-w-[200px]">
                                            <input type="hidden" name="username1" value="{{ $users->name }} ">
                                            <input type="hidden" name="userid" value="{{ $users->uid }}">
                                            <input type="hidden" name="email1" value="{{ $users->mail }} ">
                                            <input type="hidden" name="key" value="{{ $key }}">

                                            <input type="hidden" name="formid" value="No">

                                            <input type="text" disabled class="" placeholder=" Your Answer"
                                                style="border: none; border-bottom: 1px solid #c7bebe;padding: 10px;"
                                                value="{{ $users->name }}">
                                            <!-- ? <input name="second_in" placeholder="Your answer" required value="sellerrnn" disabled -->
                                            <!-- class="peer h-full w-full border-b border-blue-violet-600 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-violet-600 focus:border-violet-600 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50 " /> -->
                                            <label
                                                class="after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message_second" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span class="text-red-500 font-medium">This is a required question</span>
                                        </div>
                                    </div>

                                    

                                    <div name="four_div" class="w-full h-max bg-white rounded-lg p-6 hidden">
                                        <h2 class="">Country of residence&nbsp;<span
                                                class="text-red-500">*</span></h2>
                                        <p class=" font-base mb-4">This is required by YouTube if your content has
                                            landed on a Various Artists topic channel and you need your own unique topic
                                            channel. Please note that we can only resolve Various Artists topic channel
                                            issues manually after 30 days of the topic content being live.</p>
                                        <div class="relative h-11 w-1/2 min-w-[200px]">
                                            <div class="relative">
                                                <input name="four_in" id="four_in" placeholder="Your answer"
                                                    class="peer h-full w-full border-b border-blue-violet-600 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-violet-600 focus:border-violet-600 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50 " />
                                                <ul id="code-list"
                                                    class="hidden bg-white py-4 absolute z-[1] h-96 overflow-y-auto shadow-lg top-12">
                                                    <?php
                                                    $terCode = 'india';
                                                    ?>

                                                        <li onclick="selecthere('india - 91')"
                                                            class="cursor-pointer py-3 px-6 hover:bg-gray-700 hover:bg-opacity-10">
                                                            India - 91</li>
                                                </ul>
                                                <script>
                                                    $(function(e) {
                                                        $('#four_in').click(function() {
                                                            $('#code-list').show();
                                                        })
                                                        $('#four_in').on('input', function(e) {
                                                            var value = @json($terCode);
                                                            const items_ = value.filter(m => m.territoryname.toLowerCase().toString().includes(e.target
                                                                .value) || m.territoryid.toLowerCase().toString().includes(e.target.value));
                                                            $('#code-list').empty();
                                                            items_.forEach((item, index) => {
                                                                $('#code-list').append(
                                                                    `<li key="${index}" onclick="selecthere('${item.territoryname} - ${item.territoryid}')" class="cursor-pointer py-3 px-6 hover:bg-gray-700 hover:bg-opacity-10">${item.territoryname} - ${item.territoryid}</li>`
                                                                    )
                                                            });
                                                        })
                                                    });
                                                    document.addEventListener("click", function(event) {
                                                        const input = document.getElementById("four_in");
                                                        const dropdown = document.getElementById("code-list");
                                                        if (!input.contains(event.target) && !dropdown.contains(event.target)) {
                                                            $('#code-list').hide();
                                                        }
                                                    });

                                                    const selecthere = (code) => {
                                                        document.getElementById('four_in').value = code;
                                                        $('#four_in').attr('data-id', code);
                                                        $('#code-list').hide();
                                                    }
                                                </script>
                                            </div>
                                            <label
                                                class="after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message_four" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span class="text-red-500 font-medium">This is a required question</span>
                                        </div>
                                    </div>

                                    <div name="five_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">Artist channel URL&nbsp;<span class="text-red-500">*</span>
                                        </h2>
                                        <p class="font-base mb-4">This should be the URL of your self-created 'owned
                                            and operated' YouTube channel. This channel will need to contain at least
                                            one official music video and must only contain content from that artist -
                                            channels which curate other artist's music (i.e. remixes) or multi-artist
                                            channels are not eligible for an OAC upgrade.</p>
                                        <div class="relative h-11 w-1/2 min-w-[200px]">
                                            <input name="five_in" placeholder="Your answer" required
                                                style="width: 144%;"
                                                class="peer h-full w-full border-b border-blue-violet-600 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-violet-600 focus:border-violet-600 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50 " />
                                            <label
                                                class="after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message_five" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span class="text-red-500 font-medium">This is a required question</span>
                                        </div>
                                    </div>

                                    <div name="six_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">Artist Channel ID&nbsp;<span class="text-red-500">*</span>
                                        </h2>
                                        <p class=" font-base mb-4">This should be the channel ID related to the above
                                            channel URL. An example of a channel ID would be: UC_hdgMhSGrIIpiUk0wJixxQ
                                            Here's how to locate your own channel ID: <a class="text-blue-500"
                                                style="border-bottom: 2px solid rgb(59 130 246 / var(--tw-text-opacity))"
                                                href="https://support.google.com/youtube/answer/3250431?hl=en-GB">https://support.google.com/youtube/answer/3250431?hl=en-GB</a>
                                        </p>
                                        <div class="relative h-11 w-1/2 min-w-[200px]">
                                            <input id="channelIDInput" name="six_in" placeholder="Your answer" required oninput="validateChannelID()"
                                                class="peer h-full w-full border-b border-blue-violet-600 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-violet-600 focus:border-violet-600 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50 " />
                                            <label
                                                class="after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message_six" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span class="text-red-500 font-medium" id="sixinnnn" >This is a required question</span>
                                        </div>
                                    </div>

                                   



<script>
function validateChannelID() {
    const input = document.getElementById('channelIDInput');
    const message = document.getElementById('in_message_six');

    const regex = /^UC[a-zA-Z0-9_-]{22}$/;

    if (!regex.test(input.value)) {
        message.classList.remove('opacity-0');
        message.classList.add('opacity-100');
        $('#sixinnnn').html(
            `Invalid Channel ID. Please refer to <a href="https://support.google.com/youtube/answer/3250431?hl=en-GB" class="text-blue-500 underline" target="_blank">YouTube’s guide</a> on locating your channel ID.`
        );

    } else {
        message.classList.remove('opacity-100');
        message.classList.add('opacity-0');
        $('#sixinnnn').text("This is a required question");
    }
}


</script>
                                 

                                    <div name="eitie_div1" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">Add Channel Dashboard Screenshot (<span
                                                class="font-normal text-gray-700">only desktop screenshots are accepted
                                                and not mobile ones</span>)<span style="color: red">*</span></h2>
                                        <input name="file" type="file" id="fileInput1" class="mt-4" accept=".jpeg, .jpg, .png, .gif, .tiff, .tif" required>
                                        <!-- <p style="font-size: 0.875rem; color: #666;">JPEG, PNG, GIF, and TIFF formats are allowed.</p> -->
                                      <br>  <span style="display:none;color:red;" id="alert">Only JPEG, PNG, GIF, and TIFF formats are allowed.</span>
                                    </div>


                                    <script>
    document.getElementById('fileInput1').addEventListener('change', function () {
        const allowedExtensions = ['jpeg', 'jpg', 'png', 'gif', 'tiff', 'tif'];
        const fileInput = this;
        const filePath = fileInput.value;
        const alertSpan = document.getElementById('alert');

        // Extract file extension
        const fileExtension = filePath.split('.').pop().toLowerCase();

        if (!allowedExtensions.includes(fileExtension)) {
            alertSpan.style.display = 'inline';
            fileInput.value = ''; // Clear the input
        } else {
            alertSpan.style.display = 'none';
        }
    });
</script>

                                    <div name="seven_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">Official music video URL&nbsp;<span
                                                class="text-red-500">*</span></h2>
                                        <p class=" font-base mb-4">This should be a link to an official music video
                                            uploaded to your artist channel. </p>
                                        <div class="relative h-11 w-1/2 min-w-[200px]">
                                            <input name="seven_in" placeholder="Your answer" required
                                                style="width: 144%;"
                                                class="peer h-full w-full border-b border-blue-violet-600 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-violet-600 focus:border-violet-600 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50 " />
                                            <label
                                                class="after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message_seven" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span class="text-red-500 font-medium">This is a required question</span>
                                        </div>
                                    </div>
                                    
                                <div name="eitie_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">Topic channel URL&nbsp;<span class="text-red-500">*</span>
                                        </h2>
                                        <p class=" font-base mb-4">This must be the URL of your artist's automatically
                                            generated topic channel. This needs to contain at least one release
                                            distributed via RouteNote. For information on how to get a topic channel,
                                            please contact <a href="mailto:support@routenote.com"
                                                class="text-blue-500"
                                                style="border-bottom: 2px solid rgb(59 130 246 / var(--tw-text-opacity))">support@routenote.com.</a>
                                        </p>
                                        <div class="relative h-11 w-1/2 min-w-[200px]">
                                            <input id="topicchannelurl" name="eitie_in" placeholder="Your answer"
                                                required style="width: 144%;"
                                                class="peer h-full w-full border-b border-blue-violet-600 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-violet-600 focus:border-violet-600 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50 " />
                                            <label
                                                class="after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message_eitie" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span id="errormsg" class="text-red-500 font-medium">This is a required
                                                question</span>
                                        </div>
                                    </div>

                                    <div name="ninen_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">Art Track URL&nbsp;<span class="text-red-500">*</span>
                                        </h2>
                                        <p class=" font-base mb-4">Please include a link to one of your topic video
                                            URLs. You'll need to ensure that this video has been distributed via
                                            RouteNote. We will not be able to request OAC upgrades if at least one topic
                                            video has not been distributed through RouteNote.</p>
                                        <div class="relative h-11 w-1/2 min-w-[200px]">
                                            <input name="ninen_in" placeholder="Your answer" id="topicvideourl"
                                                required style="width: 144%;"
                                                class="peer h-full w-full border-b border-blue-violet-600 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-violet-600 focus:border-violet-600 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50 " />
                                            <label
                                                class="after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message_ninen" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span id="errormsg1" class="text-red-500 font-medium">This is a required
                                                question</span>
                                        </div>
                                    </div>

                                    <div name="ten_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">ISRC of Art Track&nbsp;<span class="text-red-500">*</span></h2>
                                        <p class=" font-base mb-4">Please enter the ISRC of the track uploaded to your RouteNote account that corresponds to the art track video you linked in the previous field.

                                            You can find your ISRCs by clicking 'View Tracklist' on your release page. For more details, see this guide on our Support Hub:
                                           <a style="color:rgb(59 130 246 / var(--tw-text-opacity, 1))" href="https://support.routenote.com/kb-article/where-do-i-find-my-isrcs-in-my-routenote-account/">https://support.routenote.com/kb-article/where-do-i-find-my-isrcs-in-my-routenote-account/</a>
 </p>
                                        <div class="relative h-11 w-3/4 min-w-[200px]">
                                            <div class="w-full">
                                                <div class="dropdown w-full">
                                                <input type="text" id="upc" class="w-full border-b-2 !outline-none"
                                                placeholder="Type to search..." name="ten_in" autocomplete="off" required>
                                                    <div id="dropdownMenu" class="dropdown-menu w-full">
                                                        <!-- Options will be injected here -->
                                                    </div>
                                                </div>
                                                <p class="error-message" id="error-message"
                                                    style="position: absolute;width: 182%;display: none; margin-top:20px">Selected ISRC
                                                    is Not match. Please Choose another ISRC...</p>
                                            </div>

                                            <style>
                                                .error-message {
                                                    color: red;
                                                    display: none;
                                                }

                                                .dropdown {
                                                    position: relative;
                                                    display: inline-block;
                                                }

                                                #searchInput {
                                                    width: 200px;
                                                    padding: 8px;
                                                    box-sizing: border-box;
                                                }

                                                .dropdown-menu {
                                                    display: none;
                                                    position: absolute;
                                                    top: 100%;
                                                    left: 0;
                                                    border: 1px solid #ddd;
                                                    background-color: #fff;
                                                    width: 100%;
                                                    box-sizing: border-box;
                                                    max-height: 150px;
                                                    overflow-y: auto;
                                                }

                                                .dropdown-menu div {
                                                    padding: 8px;
                                                    cursor: pointer;
                                                }

                                                .dropdown-menu div:hover {
                                                    background-color: #f1f1f1;
                                                }
                                            </style>


<script>
//     let debounceTimer;

// document.getElementById('upc').addEventListener('input', function () {
//     const query = this.value.trim();

//     clearTimeout(debounceTimer);
//     debounceTimer = setTimeout(() => {
//         if (!query || !userId) return;



//     }, 300); // 300ms debounce delay
// });


document.addEventListener('DOMContentLoaded', function () {
    const userId = $('input[name="userid"]').val();

const searchInput = document.getElementById('upc');
const dropdownMenu = document.getElementById('dropdownMenu');
const errorMessage = document.getElementById('error-message');
let options = [];
searchInput.addEventListener('input', function () {
    errorMessage.style.display = 'none';
    const query = this.value.toLowerCase();
    dropdownMenu.innerHTML = '';

    if (!query) {
        dropdownMenu.style.display = 'none';
        return;
    }





 $.ajax({
  
  type: "post",
                 url: "{{ route('getupcDetails') }}",
                 headers: {
                     'X-CSRF-TOKEN': '{{ csrf_token() }}'
                 },
                 data: {
                     query: query,
                     user_id: userId
                 },
 
             success: function (response) {
                 console.log(response);
 
 
                 var upcs = response.upcs;
 if(upcs.length > 0){
     options = upcs.map((upc, index) => ({
     id: index + 1,
     value: upc.split(' ')[0], 
     text: upc
 }));
 
 
 }
              
            const filtered = options.filter(opt => opt.text.toLowerCase().includes(query));

            if (filtered.length > 0) {
                filtered.forEach(opt => {
                    const div = document.createElement('div');
                    div.textContent = opt.text;
                    div.addEventListener('click', () => {
                        searchInput.value = opt.text; 
                        dropdownMenu.style.display = 'none';
                        errorMessage.style.display = 'none';


                        const selectedUpc = opt.value;

                    

 $.ajax({
  
  type: "post",
                 url: "{{ route('getartistnames') }}",
                 headers: {
                     'X-CSRF-TOKEN': '{{ csrf_token() }}'
                 },
                 data: {
                    isrc: selectedUpc
                    
                 },
 
             success: function (data) {
console.log(data);
                var artistRoles = data.artists;
    const artistInput = document.getElementById('artistInput');
        const artistDropdown = document.getElementById('artistDropdown');

        artistDropdown.innerHTML = '';

        artistRoles.forEach(artist => {
            const option = document.createElement('div');
            option.textContent = artist;
            option.className = 'px-4 py-1 hover:bg-gray-100 cursor-pointer';
            option.addEventListener('click', () => {
                artistInput.value = artist;
                artistDropdown.classList.add('hidden');    
                $('div[name=thrid_div]').css("border-bottom", "2px solid rgba(159, 166, 178, 0.34)");
                    $('div[name=thrid_div]').css("border", "none");  
                $('#in_message_thrid').css({
                        'opacity': '0'
                    });
                
                    $('#artistInput').css({
                        'border-bottom': '2px solid rgba(159, 166, 178, 0.34)'
                    });
            });
            artistDropdown.appendChild(option);
        });
   

             }
            });
   


     });
                    dropdownMenu.appendChild(div);
                });
                dropdownMenu.style.display = 'block';
            } else {
                dropdownMenu.style.display = 'none';
            }
       



           



},
             error: function (xhr) {
                 alert('Error fetching UPCs');
                 console.log(xhr.responseText);
             }
         });

});
});

    document.addEventListener('click', function (e) {
        if (!e.target.closest('.dropdown')) {
            dropdownMenu.style.display = 'none';
        }
    });


    // function success() {
    //     const inputText = searchInput.value.trim();
    //     const inputUPC = inputText.split(' ')[0]; 

    //     const valid = options.some(opt => opt.value === inputUPC);

    //     if (!valid) {
    //         errorMessage.style.display = 'block'; 
    //         return false;
    //     } else {
    //         errorMessage.style.display = 'none'; 
    //         return true; 
    //     }
    // }

    async function success() {
        // Check for valid UPC from search input
        const searchInput = document.getElementById('upc');
            const inputText = searchInput.value.trim();
            const inputUPC = inputText.split(' ')[0];
          
const errorMessage = document.getElementById('error-message');
            $("input[name='formid']").val('No');
          ///  const validUPC = options.some(opt => opt.text === inputText);

         

// $('#dropdownMenu div').each(function () {
//     if ($(this).text().trim() === inputText.trim()) {
       
//         errorMessage.style.display = 'none';
       
//     }else{
//         errorMessage.style.display = 'block';
//         return false;
//     }
// });

let matchFound = false;

$('#dropdownMenu div').each(function () {
    if ($(this).text().trim() === inputText.trim()) {
        matchFound = true;
        return false; // stop the loop
    }
});

if (matchFound) {
    errorMessage.style.display = 'none';
} else {
    errorMessage.style.display = 'block';
    $('#error-message').text('Selected ISRC is Not match. Please Choose another ISRC...');
    return false; 
}



            // if (!validUPC) {
            //     errorMessage.style.display = 'block';
            //     return false;
            // } else {
            //     errorMessage.style.display = 'none';
            // }

            // --- YouTube URL Validation Part ---
            const artistURL = $("input[name=five_in]").val().trim();
            const musicVideoURL = $("input[name=seven_in]").val().trim();
            const topicURL = $("input[name=eitie_in]").val().trim();
           // const arttrackURL  = $("input[name=ninen_in]").val().trim();
            const UPCids  = $("input[name=ten_in]").val().trim();
            
            const artistname = $("input[name=thrid_in]").val().trim();
    const dropdownItems = Array.from(document.querySelectorAll('#artistDropdown div'))
        .map(div => div.textContent.trim());

    if (!dropdownItems.includes(artistname)) {
        alert("Please select a valid artist name from the dropdown.");
        return false;
    }


            // const ytChannelPattern = /^(https?:\/\/)?(www\.)?youtube\.com\/(channel\/|user\/|c\/|@)[\w\-]+(\?.*)?$/i;
            // const ytVideoPattern = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=[\w\-]+|youtu\.be\/[\w\-]+)(\?.*)?$/i;


            var isValidYoutubeChannelURL = /^(https?:\/\/)?(www\.)?(youtube\.com\/(channel\/|user\/|c\/|@)[\w\-]+|youtube\.com\/watch\?v=[\w\-]{11}|youtu\.be\/[\w\-]{11})$/i;


            // let errors = [];

            if (!artistURL || !isValidYoutubeChannelURL.test(artistURL)) {
                alert("Only valid YouTube URLs are allowed.");
                return false;
            }
            if (!musicVideoURL || !isValidYoutubeChannelURL.test(musicVideoURL)) {
                alert("Only valid YouTube URLs are allowed.");
                return false;           
             }
            if (!topicURL || !isValidYoutubeChannelURL.test(topicURL)) {
                alert("Only valid YouTube URLs are allowed.");
                return false;            
            }
           

            // if (errors.length > 0) {
            //   //  alert('hai');
            //     alert("Please fix the following errors:\n\n" + errors.join("\n"));
            //     return false;
            // }

           


            // --- Server-side duplicate check via AJAX ---
            try {
                const response = await fetch("{{ route('check.oac.duplicates') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        artist: artistURL,
                        topic: topicURL,
                        upc: UPCids
                    })
                });

                const result = await response.json();
                console.log(result);
               /// const duplicateFields = [];
 //return false;
                
 if (result.youtubeisrc && result.youtubeisrc.length > 0) {
            let cnt = result.youtubeisrc[0].cnt;
            console.log("YouTube ISRC count:", cnt);

            if (cnt > 0) {
                
                errorMessage.style.display = 'none';
            } else{
                $('#error-message').text('Selected ISRC does not have YouTube Music. Please choose a different ISRC.')

                errorMessage.style.display = 'block';
    return false; 
            }
        }   
        


            if(result.artist_channel_urldone == '1'){
                alert("This channel has already been submitted to YouTube.\nNo further submissions can be made for this channel.");

                   return false;
                }else if (result.artist_channel_url == true || result.topic_channel_url == true || result.upc == true) {
                  //  alert("A submission already exists for this channel.");
                // alert("A submission already exists for this channel.\n" + duplicateFields.join("\n"));


                const userChoice = confirm(
  "A submission already exists for this channel.\n\n" +
  "Would you like to update your existing request?\n" +
  "Click OK to update existing request or Cancel to abort."
);



if (userChoice) {
    
$("input[name='formid']").val('Yes');
return true;
} else {
    

    return false;
}

                    
                }

                // if(result.approved == [] && result.inReview == [] && result.denied == []){

                //     alert("Please choose another ISRC of Art Track");
                //     return false;
                // }
            

            } catch (error) {
                alert("Error checking duplicates. Please try again.");
                return false;
            }

            try {
                const getuserId = $("input[name='userid']").val();
                const response = await fetch("{{ route('checkbadflags') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        uid: getuserId,
                       
                    })
                });

                const result = await response.json();
                console.log(result);
                const duplicateFields = [];

                
                if(result.badflag == 'Yes'){
                    alert("We’re unable to accept further submissions from your account.\nSubmissions have been denied due to flagged issues associated with your account.");
                    return false;
                }
                

            } catch (error) {
                alert("Error checking duplicates. Please try again.");
                return false;
            }




            return true;
        }


    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById("myForm");

        form.addEventListener("submit", async function (e) {
            e.preventDefault();

            const isValid = await success(); // your validation
            if (isValid) {
                form.submit(); // manually submit only if valid
            }
        });


        const artistInput = document.getElementById('artistInput');
        const artistDropdown = document.getElementById('artistDropdown');
        artistInput.addEventListener('focus', () => {
            if (artistDropdown.innerHTML.trim() !== '') {
                artistDropdown.classList.remove('hidden');
            }
        });

        document.addEventListener('click', function (e) {
            if (!e.target.closest('#artistDropdown') && !e.target.closest('#artistInput')) {
                
                artistDropdown.classList.add('hidden');
            }
        });






    });

    </script>

                                        </div>
                                        <div id="in_message_ten" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span class="text-red-500 font-medium">This is a required question</span>
                                        </div>
                                    </div>


                                    <div name="thrid_div" class="w-full h-max bg-white rounded-lg p-6">
                                        <h2 class="">Artist name&nbsp;<span class="text-red-500">*</span></h2>
                                        <p class=" font-base mb-4">Please note that your artist name on the
                                            automatically generated topic channel and the owned and operated channel
                                            must be identical. If you need to change either your release metadata to
                                            adjust the topic channel name, or your YouTube channel name, please see
                                            these links: <br><a target="_blank"
                                                href="https://support.routenote.com/kb-article/how-do-i-update-my-release-on-stores/"
                                                class="text-blue-500 underline">How to Update RouteNote Release
                                                Metadata</a><br><a target="_blank"
                                                href="https://support.google.com/youtube/answer/2657964?hl=en-GB&co=GENIE.Platform%3DDesktop&oco=0#zippy=%2Cname"
                                                class="text-blue-500 underline">How to Update Your YouTube Channel
                                                Name</a></p>
                                        <div class="relative h-11 w-1/2 min-w-[200px]">
                                            <input id="artistInput" name="thrid_in" placeholder="Your answer" required
                                                class="peer h-full w-full border-b border-blue-violet-600 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-violet-600 focus:border-violet-600 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50 " />
                                                <div id="artistDropdown"
    class="absolute z-10 w-100 bg-white border border-gray-300  rounded shadow-lg hidden" style="
    max-height: 151px;
    overflow-y: auto;

">
</div>
                                                <label
                                                class="after:content[''] pointer-events-none absolute left-0  -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-gray-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:after:scale-x-100 peer-focus:after:border-2 peer-focus:after:border-violet-600 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
                                        </div>
                                        <div id="in_message_thrid" class="opacity-0 flex items-center gap-3 mt-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path
                                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                                            </svg>
                                            <span class="text-red-500 font-medium">This is a required question</span>
                                        </div>
                                    </div>


                                    <div class="w-full flex items-center justify-between py-6">
                                        <!--button
                        class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-violet-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
                        type="submit" style="cursor:pointer;">Submit
                    </button-->
                                        <button class="success" id="submit1"
                                            style="    background-color: #5a39b6;
    color: #fff;
    padding: 10px 25px;
    border-radius: 5px;
    border: none;
    filter: drop-shadow(0px 2px 2px black);
    left: 382px;
    position: absolute;
">Submit</button>
                                        <button
                                            class="align-middle select-none font-sans font-bold text-center  transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg hover:bg-violet-800 hover:text-white text-violet-800 shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
                                            type="button" onclick="resetForm()"
                                            style="    right: 390px;
    position: absolute;">Clear form
                                        </button>
                                    </div>

                                </form>
                                <br>
                                <br>
        @endif
    </div>
    </div>
</body>

</html>
