@extends('layouts.auth')
@section('content')
@section('bodyClass', 'mobile_banner')
<div class="">
    <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">
        <div class="col-md-7 contents">
           
        </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">
                            <div class="card_content">
                                @if (count($mbStudios) > 1)
                                    <div class="card_inner_item business-list-item">
                                        <div class="business-profile-image">
                                            <img class="business-logo" src="{{Helper::getStudioLogo($studio->logo)}}" alt="logo" width="50">
                                        </div>
                                        <div class="businesss-name-address">
                                            <h5>{{ $studio->name }}</h5>
                                            <p>{{ $studio->address }}</p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                                <form method="post" class="process-form" action="{{ route('studio.mindbody_store') }}">
                                    @csrf
                                    <input type="hidden" value="single" name="details">
                                    <h3 class="card_title">Do you have a Mindbody account
                                        {{ count($mbStudios) > 1 ? 'for '.$studio->name : '' }}
                                        ?</h3>
                                    <div class="form-group form_checkbox_layout">
                                        <div class="form_checkbox_label">
                                            <p>Yes, I have a Mindbody account</p>
                                        </div>
                                        <div class="form_checkbox">
                                            <div class="round">
                                                <input type="radio" class="choose_plan" name="mindbody_account" value="1" id="mindbody_account" {{ ( $studio->has_mb_account|| (!empty($studio->mindbody->site_id)) ) ? 'checked' : '' }}/>
                                                <label for="mindbody_account"></label>
                                            </div>
                                        </div>
                                       
                                    </div>
                                    <div class="form-group mb_site_id  {{ $studio->mindbody->site_id ?? 'd-none' }}">
                                        <input type="text" autocomplete="off" class="form-control form-flating-input" placeholder="Enter Mindbody Site ID" name="mindbody_site_id" id="mindbody_site_id" value="{{ $studio->mindbody->site_id ?? '' }}">
                                    </div>
                                    <div class="form-group form_checkbox_layout">
                                        <div class="form_checkbox_label">
                                            <p>No, I don't have a Mindbody account</p>
                                        </div>
                                        <div class="form_checkbox">
                                            <div class="round">
                                                <input type="radio" class="choose_plan" name="mindbody_account" value="0" id="no_mindbody_account" {{ ($studio->has_mb_account == 0 &&  $studio->has_mb_account !=null) ? 'checked' : '' }} />
                                                <label for="no_mindbody_account"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="custom-error_mindbody_account"></div>
                                    @include('includes.loader')
                                    <button type="submit" class="profile-btn fw-700"><span class="font-lato">Next</span>
                                        <img src="{{ asset('images/arrow_white.svg') }}" alt="Move Forword" />
                                    </button>
                                    <input type="hidden" name="studio_id" value="{{ $studio->id }}">
                                </form>           
                                <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="plus">
                                    <span class="font-lato">Previous Step</span>
                                </button>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item ">
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    @push('scripts')
    <script type="text/javascript">
    $(document).ready(function() {
        $(document).on('change', '[name="mindbody_account"]', function() {
            var checkbox = $(this); 
            value = checkbox.val(); 
            if (checkbox.is(':checked') && value == 1) {
               $('.mb_site_id').removeClass('d-none');
            } else {
               $('.mb_site_id').addClass('d-none');
            }
        });
    });
    </script>
    @endpush('scripts')