@extends('layouts.modal')
@section('content')

    <div class="modal-header">
        <div class="row w-100 align-items-center">
            <div class="col-5 col-sm-5 admin_modal_header">
            <h1>@if(count($mediaMasters) > 0) Edit @else Add @endif social media links</h1>
            </div>

            <div class="col-7 col-sm-7">
                <div class="d-flex align-items-center float-end">
                    <div class="close" data-bs-dismiss="modal" aria-label="Close">
                        <img src="{{ asset('images/close_black.svg') }}" alt="close">
                        Close
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="modal-body edit-social-modal-body">
        <div class="error"></div>
        <form method="post" class="process-form" action="{{ route('studio.update_social_media_datas') }}">
            @csrf
            <div class="admin_title">
                <h5></h5>
            </div>
            <div class="create_modal">
                <div class="row profile-section">
                                         <input type="hidden" name="studio_id" class="studio_id" value={{ $studio->id }}>
                     <span class="mediaExist"></span>
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group">
                            <label for="floatingInputValue">Facebook URL</label>
                            <input type="text" name="facebook" class="form-control form-flating-input social_media" id="facebook"
                                value="{{ $facebook }}">
                                <span class="error-message" id="facebook-error"></span>
                        </div>    

                    </div>


                    <div class="col-md-12 col-sm-12">
                        <div class="form-group">
                            <label for="">Instagram URL</label>
                            <input type="text" name="instagram" class="form-control social_media" id="instagram"
                                value="{{ $instagram }}">
                                <span class="error-message" id="instagram-error"></span>
                          </div>  
                    </div>
                    


                    <div class="col-md-12 col-sm-12 admin_input">
                        <div class="form-group">
                            <label for="">Tiktok URL</label>
                            <input type="text" name="tiktok" class="form-control social_media" id="tiktok"
                                value="{{ $tiktok }}">
                                <span class="error-message" id="tiktok-error"></span>
                        </div>    
                    
                    </div>
                    <div class="col-md-12 col-sm-12 admin_input">
                        <div class="form-group">
                            <label for="floatingInputValue2">YouTube URL(If you don't have a YouTube channel the HQ link will be used)</label>
                            <input type="text" name="youtube" class="form-control social_media" id="youtube"
                                value="{{ $youtube }}">
                                <span class="error-message" id="youtube-error"></span>
                        </div>

                    </div>
                    <div class="text-primary-cont social-header">
                        Add additional Links below:
                    </div>
                   
                    @if ($socialMediaDetails)
                        @foreach ($socialMediaDetails as $key => $media)
                            @if ($media->media_master_id > 4 && !empty($media))
                                <input type="hidden" name="original_platform_id[]" class="form-control"
                                    id="platform_id[]" value="{{ $media->media_master_id }}">
                                   
                                <div class="multi-field-wrapper">
                                    <div class="multi-fields">
                                        <div class="multi-field dynamicField cust-social-media-link-add">

                                            <div class="form-group">
                                                <label for="">Platform</label>
                                                <input type="text" name="newplatform[]"
                                                    class="form-control newplatform-input social_media" id="newplatform"
                                                    placeholder="Platform" value="{{ $media->mediaMaster->media_name }}">
                                                <input type="hidden" name="platform_id[]"
                                                    class="form-control" id="platform_id[]"
                                                    value="{{ $media->media_master_id }}">
                                                    <span class="platformError"></span>
                                            </div>
                                            <div class="form-group">
                                                <label for="">URL</label>
                                                <input type="text" name="newlink[]"
                                                    class="form-control newlink-input social_media" id="newlink"
                                                    placeholder="Link" value="{{ $media->link }}">
                                                    <span class="error-message" id="newlink-error"></span>
                                            </div>
                                            <button type="button" class="remove-field btn-theme light mt-3">
                                                <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M1.5 12.25C1.5 13.075 2.175 13.75 3 13.75H9C9.825 13.75 10.5 13.075 10.5 12.25V3.25H1.5V12.25ZM11.25 1H8.625L7.875 0.25H4.125L3.375 1H0.75V2.5H11.25V1Z" fill="#000000"/>
                                                </svg>
                                              <strong>  Remove</strong></button>
                                        </div>
                                    </div>

                                </div>
                            @endif
                        
                        @endforeach
                    @endif

                    <div class="multi-field-wrapper-clone">
                        <div class="multi-fields-clone">
                          
                            <div class="multi-field dynamicField" style="display: none;">
                               
                                <div class="dynamicField-flex">
                                    <div class="form-group">
                                        <label for="">Platform</label>
                                        <input type="text" name="newplatform[]" class="form-control newplatform-input social_media"
                                            id="newplatform" placeholder="Platform" value="">

                                        <input type="hidden" name="platform_id[]" class="form-control"
                                            id="platform_id[]" value="">
                                          <span class="platformError"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="">URL</label>
                                        <input type="text" name="newlink[]" class="form-control newlink-input social_media"
                                            id="newlink" placeholder="Link" value="">
                                            <span class="error-message" id="newlink-error"></span>

                                    </div>
                                    <button type="button" class="remove-field btn-theme light btn-small">
                                        <svg width="12" height="14" viewBox="0 0 12 14" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M1.5 12.25C1.5 13.075 2.175 13.75 3 13.75H9C9.825 13.75 10.5 13.075 10.5 12.25V3.25H1.5V12.25ZM11.25 1H8.625L7.875 0.25H4.125L3.375 1H0.75V2.5H11.25V1Z"
                                                fill="#000000" />
                                        </svg>  <strong> Remove  </strong> 
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="appendRow"></div>
                        <div class="multi-field-wrapper">
                            <div class="multi-fields-append">

                            </div>
                        </div>

                    </div>
                   
                    <div class="col-12">
                        <button type="button" class="add-new-field btn-theme light mt-3 add_another_link">
                            <img src="{{ asset('images/plus_black.svg') }}" alt="plus">
                           <strong> Add Another Link </strong>
                        </button>
                    </div>

                </div>

            </div>
            <div class="modal-actions d-flex justify-content-between justify-content-md-end align-items-center">
                @include('includes.loader')
                {{-- <button type="button" class="btn-theme light btn-small close" data-bs-dismiss="modal" aria-label="Close">
                    <svg class="no-stroke" width="12" height="11" viewBox="0 0 12 11" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M11.3332 1.24128L10.2589 0.166992L5.99984 4.42604L1.74079 0.166992L0.666504 1.24128L4.92555 5.50033L0.666504 9.75937L1.74079 10.8337L5.99984 6.57461L10.2589 10.8337L11.3332 9.75937L7.07412 5.50033L11.3332 1.24128Z"
                            fill="#000000" />
                    </svg>
                    Cancel
                </button> --}}
                <button class="btn-theme dark btn-small btn-save-data" id="social_media_submit">
                    <svg width="14" height="11" viewBox="0 0 14 11" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M4.99993 7.94651L2.37671 5.32329L2.19994 5.14651L2.02316 5.32329L1.08982 6.25662L0.913048 6.4334L1.08982 6.61017L4.82316 10.3435L4.99993 10.5203L5.17671 10.3435L13.1767 2.34351L13.3535 2.16673L13.1767 1.98996L12.2434 1.05662L12.0666 0.879845L11.8898 1.05662L4.99993 7.94651Z"
                            fill="white" stroke="white" stroke-width="0.5" />
                    </svg>
                    Save
                </button>
            </div>
        </form>
        @include('includes.popup_message')
    </div>

@endsection
<script type="text/javascript">
    $(document).ready(function() {
        var clickCount = 0;
        $(".add-new-field").on("click", function() {
           // $('multi-field.dynamicField').first().css('display','block');
            var clonedContent = $(".multi-field.dynamicField").first().clone();
            clonedContent.css("display", "flex");
            clonedContent.find("input").val('');
            clonedContent.find('#newlink-error').text("");     
            clonedContent.find('.platFormError').text("");     
            $(".multi-field-wrapper  .multi-fields-append").append(clonedContent);
            if (clickCount < 1) {
                $('.social-header').show();
            } 
            clickCount++;
        });
        function removeRow() {
            if ($(".dynamicField").length > 1) {
                $(this).closest(".dynamicField").remove();
            }
        }
        $(document).on("click", ".remove-field", removeRow);
        $(document).on("change",'.newlink-input',triggerNewlink);
        $(document).on('click', '#social_media_submit', function(e) {
            var isValid = false;
            var socialMediaFields = $('.social_media');
            var values = [];
            socialMediaFields.each(function () {
                if($(this).val()!=''){
                values.push($(this).val());
                }
            });
           if (hasDuplicates(values)) {
                $('.mediaExist').html("<p style='color:red;'>Duplicate values found</p>");
                //$('.mediaExist').addClass('error');
                e.preventDefault();
            } else {
                $('.mediaExist').html("");
                //$('.mediaExist').removeClass('error');
            }
            function hasDuplicates(array) {
                 return new Set(array).size !== array.length;
           }
           
           
           
            if ($('.mediaExist').hasClass('error')) {
                console.log("3");
                e.preventDefault();    
            }
                    $('.dynamicField').each(function(index) {
                        var newplatValue = $(this).find('input[name="newplatform[]"]').val();
                        var newlinkValue = $(this).find('input[name="newlink[]"]').val();
                        if (newplatValue.trim() !== '' && newlinkValue.trim() !== '') {
                            isValid = true;
                        }
                        if($(this).css('display')=='flex'){
                        if(newplatValue === '') {
                            console.log("Platform is empty");
                            $(this).find('.platformError').html("<p style='color:red;'>Enter valid Platform</p>");
                        } else {
                            $(this).find('.platformError').html("");
                        }
                        if (newlinkValue === '') {
                            console.log("Link is empty");
                            $(this).find('.error-message').html("<p style='color:red;'>Enter valid URL</p>");
                        } else {
                            $(this).find('.error-message').html("");
                        }
                    }
                    });  

                    $('.platformError').each(function() {
                        if($(this).html()!=''){
                            e.preventDefault();  
                        }
                    });
                    $('.error-message').each(function() {
                        if($(this).html()!=''){
                            e.preventDefault();  
                        }
                    });
            var facebookValue = $('#facebook').val();
            var instagramValue = $('#instagram').val();
            var youtubeValue = $('#youtube').val();
            var tiktokValue = $('#tiktok').val();
            if (!isValid && facebookValue == "" && youtubeValue == '' && instagramValue == '' &&
                tiktokValue == '') {
               // $('.error').html('Please fill in at least one platform and its corresponding link.');
               // return false; // Prevent form submission
            } else {
               // $('.error').html('');
               // return true;
            }
        });
       
        // ----------------------------------------------------------------------------------------
     function checkMediaExists(link, platform, errorMessageId, event) {
         $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '{{ route("studio.check_media_exists") }}', // Replace with the actual URL to your server-side validation script
                    method: 'POST',
                    data: { platform: platform, link: link, studio_id: $('.studio_id').val() },
                    success: function (response) {
                         if (response.exists && response.exists.length > 0) {
                            console.log("url exists");
                            if(event!=''){
                               // $(event.target).closest('.multi-field').find('#newlink-error').html("<p style='color:red;'>URL already exists</p>");
                            } else {
                                $('#' + errorMessageId).html("<p style='color:red;'>" + platform + " url already exists</p>");
                            }  
                        } else {
                            console.log("empty" +errorMessageId);
                            $('#' + errorMessageId).text('');
                            $(event.target).closest('.multi-field').find('#newlink-error').text("");
                            
                        }
                    }
                });
    }
    function triggerNewlink(event) {
        const link = $(event.target).val();
        const platformValue = $(event.target).closest('.multi-field').find('input[name^="newplatform"]').val();
       // if(link!='' && platformValue!=''){
            //  checkMediaExists(link, platformValue, 'newlink-error', event);
       // }
    }

     $(document).on("change", '.newlink-input', triggerNewlink);
     $(document).on("change", '.newplatform-input', triggerNewlink); 
        $('.social_media').on('blur', function () {
                var link = $(this).val(); // value
                var platform = $(this).attr('id'); // fb,insta
                var errorMessageId = platform + '-error';
                if(platform!='newlink'){
                 checkMediaExists(link, platform, errorMessageId, '');
                } 
            });
    });
</script>
<script>
   
    </script>