@extends('layouts.auth')
@section('content')
@section('bodyClass', 'mobile_banner')
<style>
.select2-results__message {
            display: none;
        }
</style>
<a href="{{ route('logout') }}" class="backto-login">
    <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M11.3334 4.83329H3.22008L6.94675 1.10663L6.00008 0.166626L0.666748 5.49996L6.00008 10.8333L6.94008 9.89329L3.22008 6.16663H11.3334V4.83329Z"
            fill="white" />
    </svg>
    Back to Login
</a>
<div class="row align-items-center banner_layout login-form-align-center">
    <div class="col-md-7">
        <div class="contents">
            <p>Focus on what's most important in your gym, in your business, and in your life.</p>
        </div>
    </div>
    <div class="col-md-5 carousel-contents">
        <div id="demo" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
            <!-- The slideshow/carousel -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="card_layout">
                        <div class="card_body">
                            <span class="link-details">
                                <h3 class="card_title">Form Notifications </h3>
                                <div class="alert mt-2" style="display: none;"><span></span></div>
                                <form method="post" class="" action="{{ route('studio.update_form_notification') }}">
                                    @csrf
                                    <h6>Would you like to receive email notifications when a member submits a form? </h6>
                                    @if ($errors->any())
                                        <div class="error">
                                            @foreach ($errors->all() as $error)
                                                {{ $error }}
                                            @endforeach
                                            
                                        </div>
                                    @endif
                                    <div class="error"></div>
                                    <div class="radio-toolbar">
                                        <input type="radio" id="notification_on" name="email_notification" value="1" @if(count($getStudioNotificationDetails)>0)  checked  @endif>
                                        <label for="notification_on">Yes</label>
                                        <input type="radio" id="notification_off" name="email_notification" value="0" @if(count($getStudioNotificationDetails)== 0)  checked  @endif>
                                        <label for="notification_off" class="notification_off_cls cust_inactive_state">No</label>
                                    </div>

                                    <!--<div class="form-floating form-group email_recipient">
                                        <input type="text" name="recipient_email" class="form-control form-flating-input"
                                            id="recipient_email" placeholder="Email" value="">
                                        <label for="" class="floating-text">Recipient Email Address</label>
                                    </div>-->
                                    
                                    <div class="form-floating form-group email_recipient email_recipient_placeholder">
                                        <select class="multiselect"  multiple="multiple" id="recipient_email" name="recipient_email[]">
                                            @if(count($getStudioNotificationDetails) > 0)
                                                @foreach($getStudioNotificationDetails as $details)
                                                    <option value="{{ $details->recipient_email}}" selected>{{ $details->recipient_email }}</value>
                                                @endforeach
                                            @endif
                                        </select>
                                        <label for="recipient_email" class="floating-text">Recipient Email Address</label>
                                    </div>
                                    
                                  
                                    
                                    <button type="submit" id="notification_submit" class="profile-btn fw-700"><span class="font-lato">Next Step</span>
                                        <img src="{{ asset('images/arrow_white.svg') }}" alt="Move Forword" />
                                    </button>
                                    <a href="{{ route('studio.profile') }}">
                                        <button type="button" class="btn-theme light w-100 mt-3 fw-700">
                                            <img src="{{ asset('images/arrow_back_black.svg') }}" alt="">
                                            <span class="font-lato">Previous Step</span>
                                        </button>
                                    </a>
                                </form>
                               
                               
                                <div class="form-group text-center">
                                    <div class="spinner-border  d-none" style="width: 1rem; height: 1rem;"
                                        role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="alert alert-success sm-custom-alert business-success-msg d-none"
                                        role="alert">
                                        Platform Link Saved successfully.
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                </div>
                <div class="carousel-item">
                </div>
                <div class="carousel-item ">
                    <div class="card_layout">
                    </div>
                </div>
            </div>
           
        </div>
    </div>
    
    @endsection

    @push('scripts')
    <script type="text/javascript">
         
        $("#recipient_email").select2({
            placeholder: "Recipient Email Address",
           // minimumResultsForSearch: Infinity,
            language: {
                noResults: function() {
                    return null;
                }
            },
            tags: true,
			dropdownParent: $('.email_recipient_placeholder')
        });            
        $(document).ready(function() {
            $('.notification_off_cls').addClass('inactive_state');
            // Check the initial value of the radio button
            var isNotificationOn = $('input[name="email_notification"]:checked').val() == 1;
            if (isNotificationOn) {
                $('.email_recipient').show();
                $('.notification_off_cls').removeClass('inactive_state');
            } else {
                $('.email_recipient').hide();
                $('.notification_off_cls').addClass('inactive_state');
            }

        });
        $(document).on('click','#notification_on',function(e){
            $('.email_recipient').show();
            $('.notification_off_cls').removeClass('inactive_state');
        })
        $(document).on('click','#notification_off',function(e){
            $('.email_recipient').hide();
            $('.notification_off_cls').addClass('inactive_state');
        })

            // Show alert if email is not valid
        $('#notification_submit').on('click', function () {
            var isYesSelected = $('#notification_on').is(':checked');
            if (isYesSelected) {
                var emailInput = $.trim( $('#recipient_email').val());
                var emailArray = emailInput.split(',');
                
                for (var i = 0; i < emailArray.length; i++) {
                    var email = emailArray[i].trim();
                    if (!isValidEmail(email)) {
                        $('.error').html('Please enter valid Email address.');
                        return false;
                    }
                }
                
            }
            $('.error').html('');
            return true;
           
                
        });  
               
        function isValidEmail(email) {
            // Regular expression for a simple email validation
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }
    
    </script>
    @endpush('scripts')