@extends('layouts.app')

@section('content')
       <main class="artist-main">
        @include('frontend/artistSummarHeader')

        

        <!-- artist-details-section-start -->
        <section class="artist-details">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-5 p-0 ">
                        <div class="artist-sidebar sidebar-check ">
                            <ul class="list-unstyled">
                                <li type="button" data-toggle="collapse"
                                        data-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">Artist Details <span><i class="fa fa-check @if(!empty($artistArt)) data-complete @endif" id="art-detail-icon"  ></i></span>
                                </li>

                                <li type="button" data-toggle="collapse"
                                        data-target="#Biography" aria-expanded="false" aria-controls="collapseTwo2">Biography <span><i class="fa fa-check @if(!empty($artistArt->biography)) data-complete @endif" id="art-bio-icon" ></i></span>
                                </li>
                                <li type="button" data-toggle="collapse"
                                        data-target="#AreasPricing" aria-expanded="false"
                                        aria-controls="collapseThree2">Area and Pricing <span><i class="fa fa-check @if(isset($prices) && $prices->count() > 0) data-complete @endif" id="art-pricing-icon" ></i></span>
                                </li>
                                <li type="button" data-toggle="collapse"
                                        data-target="#VATRegistration" aria-expanded="false"
                                        aria-controls="collapseThree2">VAT Registration <span><i class="fa fa-check @if(!empty($artistArt->vat_registration)) data-complete @endif" id="art-vat-icon"></i></span>
                                </li>
                                <li type="button" data-toggle="collapse"
                                        data-target="#Discounts" aria-expanded="false" aria-controls="collapseThree2">Discounts <span><i class="fa fa-check @if(isset($discounts) && $discounts->count() > 0) data-complete @endif" id="art-discount-icon"></i></span>
                                </li>
                                <li type="button" data-toggle="collapse" data-target="#Rider" aria-expanded="false" aria-controls="collapseThree2">Rider and Requirements <span><i class="fa fa-check @if(!empty($artistArt->rider_requirenment)) data-complete @endif" id="art-rider-icon"></i></span>
                                </li>

                                <li type="button" data-toggle="collapse" data-target="#BookingExtras" aria-expanded="false"
                                        aria-controls="collapseThree2">Booking Extras <span><i class="fa fa-check @if(isset($bookings) && $bookings->count() > 0) data-complete @endif" id="art-booking-icon"></i></span>     
                                </li>

                                <li type="button" data-toggle="collapse"
                                        data-target="#Repertoire" aria-expanded="false" aria-controls="collapseThree2">Repertoire <span><i class="fa fa-check @if(!empty($repertories)) data-complete @endif" id="art-repertoire-icon"></i></span>
                                </li>
                                <li type="button" data-toggle="collapse"
                                        data-target="#Testimonials" aria-expanded="false"
                                        aria-controls="collapseThree2">Testimonials <span><i class="fa fa-check @if(isset($testimonials) && $testimonials->count() > 0) data-complete @endif" id="art-testimonial-icon"></i></span>
                                </li>

                                <li type="button" data-toggle="collapse"
                                        data-target="#Images" aria-expanded="false" aria-controls="collapseThree2">Images <span><i class="fa fa-check @if(isset($images) && $images->count() > 0) data-complete @endif" id="art-image-icon"></i></span>
                                </li>

                                <li type="button" data-toggle="collapse"
                                        data-target="#Audio" aria-expanded="false" aria-controls="collapseThree2">Audio <span><i class="fa fa-check @if(isset($audios) && $audios->count() > 0) data-complete @endif" id="art-audio-icon"></i></span>
                                </li>
                                <li type="button" data-toggle="collapse"
                                        data-target="#Videos" aria-expanded="false" aria-controls="collapseThree2">YouTube Videos <span><i class="fa fa-check @if(isset($videos) && $videos->count() > 0 ) data-complete @endif" id="art-video-icon"></i></span>
                                </li>

                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-9 col-md-7">
                        <!-- artist-details-section-start -->
                        <div class="accordion" id="accordionExample275">
                <form  novalidate method="post" id ="add-new-act" action="javascript:void(0)" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" id="user_id" name="user_id" value="{{Auth::user()->id}}">
                                @if(!empty($artistArt))
                                    <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                @endif
                                
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingOne2">
                                    <button class="btn btn-link" type="button" data-toggle="collapse"
                                        data-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon1.png')}}" alt="icon"></span>Artist Details</h2>
                                    </button>
                                </div>
                                <div id="collapseOne2" class="collapse show" aria-labelledby="headingOne2"
                                    data-parent="#accordionExample275">
                                    <div class="card-body">
                                        <div class="row artistField">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="act_name">Artist/Act Name</label>
                                                    <input type="text" class="form-control @error('act_name') is-invalid @enderror" id="act_name" name="act_name" value="@if(!empty($artistArt->act_name)) {{$artistArt->act_name}} @endif"
                                                        placeholder="Artist/Act Name" required>
                                                </div>

                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="website">Website</label>
                                                    <input type="url" class="form-control @error('website') is-invalid @enderror" id="website" name="website" value="@if(!empty($artistArt->website)) {{$artistArt->website}} @endif"
                                                        placeholder="Website url" required>
                                                </div>

                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="genre_id">Genre</label>
                                                    <select class="form-control @error('genre_id') is-invalid @enderror" id="genre_id" name="genre_id" required>
                                                        <option value="">Please Select</option>
                                                        @if(!empty($categories))
                                                            @foreach($categories as $category)
                                                                <option value="{{$category->id}}" @if(!empty($artistArt->genre_id)) {{($artistArt->genre_id == $category->id) ? 'selected' :''}} @endif>{{$category->name}}</option>
                                                            @endforeach
                                                        @endif  
                                                    </select>
                                                </div>

                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="no_of_members">No. of Members</label>
                                                    <select class="form-control @error('no_of_members') is-invalid @enderror" id="no_of_members" name="no_of_members" required>
                                                        <option value="">Please Select</option>
                                                            @for($member=1 ; $member<=19 ; $member++ )
                                                                <option value="{{$member}}" @if(!empty($artistArt->no_of_members)) {{($artistArt->no_of_members == $member) ? 'selected' :''}} @endif>{{$member}}</option>
                                                            @endfor
                                                        <option value="20+">20+</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="lead_vocal">Lead Vocals</label>
                                                    <select class="form-control" id="lead_vocal" name="lead_vocal" required>
                                                        <option value="">Please Select</option>
                                                        @if(!empty($vocals))
                                                            @foreach($vocals as $key=>$vocal)
                                                                <option value="{{$key}}" @if(!empty($artistArt->lead_vocal)) {{($artistArt->lead_vocal == $key) ? 'selected' :''}} @endif>{{$vocal}}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>

                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="BasedIn">Based In</label>
                                                    <select class="form-control" id="city_id" name="city_id" required>
                                                       <option value="">Please Select</option>
                                                       
                                                        @if(!empty($states))
                                                            @foreach($states as $state)
                                                                <optgroup label="{{$state->name}}">
                                                                
                                                                @foreach($state->city->where('state_id', $state->id) as $city)

                                                                    <option value="{{$city->id}}" @if(!empty($artistArt->city_id))  {{($artistArt->city_id == $city->id) ? 'selected' :''}} @endif>{{$city->name}}</option>
                                                                    @endforeach
                                                                </optgroup>
                                                                   
                                                            @endforeach
                                                        @endif
                                                        
                                                    </select>
                                                </div>
                                            </div>

                                        <!-- Start Banner Image Code goes Here -->
                                            <div class="col-lg-4">
                                            <div class="browseBtn-area">
                                            <div class="form-group inputDnD">
                                            <label class="sr-only" for="inputFile">Banner Upload</label>
                                            <input type="file" class="form-control-file text-primary font-weight-bold image-form"
                                            name="banner_image" accept="image/*" onchange="readUrl(this)" data-title="Drag here or browse file"
                                                                required data-msg-accept="Please select jpg,jpeg and png image" >
                                                    </div>
                                                </div>
                                            </div> 
                                          <div class="col-lg-4">
                                                @if(!empty($artistArt->banner_image))
                                                <div>
                                                  <img src="{{ asset('uploads/'.$artistArt->banner_image)}}" width="100%" />
                                                </div>
                                            @endif   
                                        </div>
                                         <!-- End Banner Image Section -->

                                            <div class="row">
                                                <div class="col-md-12">
                                                   <div class="alert alert-success d-none" id="msg_div">
                                                           <span id="res_message"></span>
                                                      </div>
                                                </div>
                                            </div>
                                            <div class="col-12 artist-btn">
                                            <button class="btn next-btn" id="new-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                            <!-- biography-part-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingTwo2">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#Biography" aria-expanded="false" aria-controls="collapseTwo2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon2.png')}}" alt="icon"></span>Biography</h2>
                                    </button>
                                </div>
                                <div id="Biography" class="collapse" aria-labelledby="headingTwo2"
                                    data-parent="#accordionExample275">
                                    <form  novalidate method="post" id ="add-act-bio" action="javascript:void(0)">
                                        @csrf
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif
                                    <div class="card-body">
                                        <div class="row artistField">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="biography">Biography</label>
                                                    <textarea class="form-control"  name="biography"
                                                        rows="3" placeholder="Biography"required>@if(!empty($artistArt->biography)) {{$artistArt->biography}} @endif</textarea >
                                                </div>

                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                   <div class="alert d-none" id="msg_div1">
                                                           <span id="res_message1"></span>
                                                      </div>
                                                </div>
                                            </div>
                                            <div class="col-12 artist-btn">
                                                <button class="btn next-btn" id="bio-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                </div>
                            </div>
                            <!-- biography-part-end -->

                            <!-- Areas and Pricing-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingPrice">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#AreasPricing" aria-expanded="false"
                                        aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon3.png')}}" alt="icon"></span>Areas and Pricing
                                        </h2>
                                    </button>
                                </div>
                                <div id="AreasPricing" class="collapse" aria-labelledby="headingPrice"
                                    data-parent="#accordionExample275">
                                    <form  novalidate method="post" id="add-act-pricing" action="javascript:void(0)">
                                        @csrf 
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">

                                        @endif
                                    <div class="card-body">
                                       @if(!empty($states))
                                            @foreach($states as $state) 
                                                <div class="row artistField">
                                                    <div class="col-12">
                                                        <a href="#" class="btn Ainfo-btn"> {{$state->name}}</a>
                                                    </div>
                                                     @foreach($state->city->where('state_id', $state->id) as $key => $city)
                                                     <input type="hidden" id="city_id" name="city_id[]" value="{{$city->id}}">
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label for="{{$city->name}}">{{$city->name}}</label>
                                                            <input type="number" class="form-control price-group" id="price" name="price[]" placeholder="Price" value="@if(!empty($artistArt)){{$state->getCityPrice($artistArt->id , $city->id)}}@endif">
                                                        </div>

                                                    </div>
                                                    @endforeach
                                                </div>
                                                @endforeach
                                            @endif

                                            <div class="col-12 artist-btn">
                                                <button class="btn next-btn" id="pricing-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </form>
                                    </div>
                                </div>
                           
                            <!-- Areas and Pricing-end -->

                            <!-- VAT-Registration-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingVat">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#VATRegistration" aria-expanded="false"
                                        aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon4.png')}}" alt="icon"></span>VAT Registration
                                        </h2>
                                    </button>
                                </div>
                                <div id="VATRegistration" class="collapse" aria-labelledby="headingVat"
                                    data-parent="#accordionExample275">
                                    <form  novalidate method="post" id ="add-act-vat" action="javascript:void(0)">
                                        @csrf
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif
                                    <div class="card-body">
                                        <div class="row artistField">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="ArtistName">VAT Number</label>
                                                    <input type="text" class="form-control" id="vat_registration" name="vat_registration"
                                                        placeholder="Vat Number" value="@if(!empty($artistArt->vat_registration)) {{$artistArt->vat_registration}} @endif" required>
                                                </div>

                                            </div>
                                            <div class="col-12 artist-btn">
                                                <button class="btn next-btn" id="vat-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                </div>
                            </div>
                            <!-- VAT-Registration-end -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingDiscount">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#Discounts" aria-expanded="false" aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon5.png')}}" alt="icon"></span>Discounts</h2>
                                    </button>
                                </div>
                                <div id="Discounts" class="collapse" aria-labelledby="headingDiscount"
                                    data-parent="#accordionExample275">
                                    <form  novalidate method="post" id ="add-act-discount" action="javascript:void(0)">
                                        @csrf
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif
                                    <div class="card-body">
                                        <div class="row artistField">
                                            <div class="col-lg-4  discount">


                                                <label for="West Yorkshire">Select Month Discount </label>
                                                <a id="selectedDBXP" aria-expanded="true"
                                                    aria-labelledby="lblDBXP DBXPList" onclick="return DBXPclick();">
                                                    <span id="DBXPList"></span>
                                                    <!-- <i class="fa fa-chevron-down" aria-hidden="true"></i> -->
                                                </a>
                                                <fieldset aria-labelledby="lblDBXP">
                                                    <div id="choicelist" style="display:block">
                                                    @if(!empty($months))
                                                        @foreach($months as $month)
                                                        <div>
                                                            <input  type="checkbox" id="month_id[]" name="month_id[]" value="{{$month->id}}">
                                                            <label for="month_id[]" aria-label="my SQL">{{$month->name}}</label>
                                                        </div>
                                                        @endforeach
                                                    @endif
                                                        
                                                        
                                                        
                                                    </div>
                                                </fieldset>


                                            </div>
                                            <div class="col-lg-8">
                                                <div class="row">

                                                 @if(!empty($days))
                                                        @foreach($days as $day)  
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label for="exampleFormControlSelect1">{{$day->name}}</label>
                                                            <select class="form-control week-group" id="week_day_id[{{$day->id}}]" name="week_day_id[{{$day->id}}]" >
                                                                <option value="">Please Select</option>
                                                                    @for($per=1 ; $per<=20 ; $per++ )
                                                                        <option value="{{$per}}">{{$per}}%</option>
                                                                    @endfor
                                                            </select>
                                                       </div>
                                                    </div>
                                                    @endforeach
                                                @endif
                                                    
                                                   
                                                </div>
                                            </div>


                                            <div class="col-12 artist-btn">
                                                <button class="btn next-btn" id="discount-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                </div>
                            </div>
                            <!-- Discount-end -->

                            <!-- Rider-and-Requirements-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingaRider">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Rider" aria-expanded="false" aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon6.png')}}" alt="icon"></span>Rider /
                                            Requirements</h2>
                                    </button>
                                </div>
                                <div id="Rider" class="collapse" aria-labelledby="headingaRider"
                                    data-parent="#accordionExample275">
                                    <form  novalidate method="post" id ="add-act-requirenment" action="javascript:void(0)">

                                        @csrf

                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif

                                    <div class="card-body">
                                        <div class="row artistField">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="rider_requirenment">Requirements</label>
                                                    <textarea class="form-control" id="rider_requirenment" name="rider_requirenment" rows="3" placeholder="Requirements" required>@if(!empty($artistArt->rider_requirenment)) {{$artistArt->rider_requirenment}} @endif</textarea>
                                                </div>

                                            </div>
                                            <div class="col-12 artist-btn">
                                                 <button class="btn next-btn" id="requirenment-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                </div>
                            </div>
                            <!-- Rider-and-Requirements-end -->

                            <!-- BookinExtra-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingBooking">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#BookingExtras" aria-expanded="false"
                                        aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon7.png')}}" alt="icon"></span>Booking Extras</h2>
                                    </button>
                             </div>

                            <div id="BookingExtras" class="collapse" aria-labelledby="headingBooking"
                                            data-parent="#accordionExample275">
                                <div class="card-body">
                                
                                @if(!empty($bookings))
                                @if(!$bookings->isEmpty())
                                                @foreach($bookings as $booking)
                                                <div class="row artistField">
                                             
                                             <div class="col-lg-4">
                                                   <div class="form-group">
                                                       <label for="Name">Name</label>
                                                       <input type="text" class="form-control title" name="title[]" id="title" value="@if(!empty($booking->title)){{$booking->title}}@endif" placeholder="Name">
                                                   </div>

                                               </div>
                                               <div class="col-lg-4">
                                                   <div class="form-group">
                                                       <label for="Price">Price</label>
                                                       <input type="number" class="form-control price" name= "price[]" id="price" value="@if(!empty($booking->price)){{$booking->price}}@endif" placeholder="Price">
                                                   </div>

                                               </div>

                                               <div class="col-lg-4">
                                                   <label for="Feedback" class="w-100">&nbsp;</label>
                                                   <a href="#!" class="btn new-btn" onClick="deleteActExtra({{$booking->id}}); removeFields(this);"><i class="fa fa-plus" aria-hidden="true" ></i> Add New Extra</a>
                                               </div>
                                   
                                           </div>

                                                @endforeach
                                            @endif
                                            @endif
                                    <form  novalidate method="post" id="add-act-booking" action="javascript:void(0)">
                                          @csrf
                                                @if(!empty($artistArt))
                                                    <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                                @endif
                                                
                                           
                                           <div class="row artistField">
                                             
                                                  <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label for="Name">Name</label>
                                                            <input type="text" class="form-control title" name="title[]" id="title" value="" placeholder="Name">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label for="Price">Price</label>
                                                            <input type="number" class="form-control price" name= "price[]" id="price" value="" placeholder="Price">
                                                        </div>

                                                    </div>

                                                    <div class="col-lg-4">
                                                        <label for="Feedback" class="w-100">&nbsp;</label>
                                                        <a href="#!" class="btn new-btn" onClick="addBookingFields()"><i class="fa fa-plus" aria-hidden="true" ></i> Add New Extra</a>
                                                    </div>
                                                    
                                                    <div id="booking_render_html"></div>
                                                    <div class="col-12 artist-btn">
                                                    <button class="btn next-btn" id="booking-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                                    </div>
                                        
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                            </div>
                            <!-- BookingExtra-end -->

                            <!-- Repertoire-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingRepertoire">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#Repertoire" aria-expanded="false" aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon8.png')}}" alt="icon"></span>Repertoire</h2>
                                    </button>
                                </div>
                                <div id="Repertoire" class="collapse" aria-labelledby="headingRepertoire"
                                    data-parent="#accordionExample275">
                                    <form  novalidate method="post" id="add-act-repertoire" action="javascript:void(0)">
                                        @csrf
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif
                                    <div class="card-body">
                                        <div class="row artistField">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="repertorie">Track Name <small>(Enter new tracks into the
                                                            field below, seperate
                                                            each track with a comma(,)) </small></label>
                                                    <textarea class="form-control" id="repertorie" name="repertorie" rows="3" 
                                                        placeholder="Enter new tracks"
                                                        required>@if(!empty($repertories)) {{$repertories}} @endif</textarea>
                                                </div>

                                            </div>
                                            <div class="col-12 artist-btn">
                                                <button class="btn next-btn" id="repertoire-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                </div>
                            </div>
                            <!-- Repertoire-end -->
                            <!-- Testimonials-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingTestimonial">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#Testimonials" aria-expanded="false"
                                        aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon9.png')}}" alt="icon"></span>Testimonials</h2>
                                    </button>
                                </div>
                                <div id="Testimonials" class="collapse" aria-labelledby="headingTestimonial"
                                    data-parent="#accordionExample275">
                                    <form  novalidate method="post" id ="add-act-testimonial" action="javascript:void(0)">
                                        @csrf
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif
                                    <div class="card-body">
                                         @if(!empty($testimonials))
                                            @if(!$testimonials->isEmpty())
                                                @foreach($testimonials as $testimonial)
                                                <div class="row artistField">
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label for="Author">Author</label>
                                                            <input type="text" class="form-control author-form" id="name[]" name="name[]"
                                                                placeholder="Author Name" value="{{$testimonial->name}}">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label for="testimonial">Text</label>
                                                            <textarea class="form-control testimonial-form" id="testimonial[]" name="testimonial[]" rows="3"
                                                                placeholder="Feedback">{{$testimonial->testimonial}}</textarea>
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-4">
                                                        <label for="Feedback" class="w-100">&nbsp;</label>
                                                        <a href="#!" data-id="" class="btn new-btn" onClick="deleteTestimonial({{$testimonial->id}}); removeFields(this); "><i class="fa fa-close" aria-hidden="true" ></i> Remove Testimonial</a>

                                                    </div>
                                                   
                                                </div>

                                                @endforeach
                                            @endif
                                        @endif

                                        <div class="row artistField">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="Author">Author</label>
                                                    <input type="text" class="form-control author-form" id="name[]" name="name[]"
                                                        placeholder="Author Name">
                                                </div>

                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="testimonial">Text</label>
                                                    <textarea class="form-control testimonial-form" id="testimonial[]" name="testimonial[]" rows="3"
                                                        placeholder="Feedback"></textarea>
                                                </div>

                                            </div>
                                            <div class="col-lg-4">
                                                <label for="Feedback" class="w-100">&nbsp;</label>
                                                <a href="#!" class="btn new-btn" onClick="addFields()"><i class="fa fa-plus" aria-hidden="true" ></i> Add New Testimonial</a>

                                            </div>
                                           
                                        </div>
                                        <div id="render-html"></div>

                                         <div class="col-12 artist-btn">
                                                 <button class="btn next-btn" id="testimonial-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                    </div>
                                </form>

                                </div>
                            </div>
                            <!-- Testimonials-end -->
                            <!-- images-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingThree2">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#Images" aria-expanded="false" aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon10.png')}}" alt="icon"></span>Images</h2>
                                    </button>
                                </div>
                                <div id="Images" class="collapse" aria-labelledby="headingThree2"
                                    data-parent="#accordionExample275">


                                        @if(!empty($images))
                                            @if(!$images->isEmpty())
                                                @foreach($images as $image)
                                                <div class="row artistField">
                                                
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <img src="{{ url('uploads/act_'.$image->artist_act_id.'/images/'.$image->image)}}" alt="{{$image->title}}">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-4">
                                                        <label for="Feedback" class="w-100">&nbsp;</label>
                                                        <a href="#!" data-id="" class="btn new-btn" onClick="deleteActImage({{$image->id}}); removeFields(this); "><i class="fa fa-close" aria-hidden="true" ></i> Remove Image</a>

                                                    </div>
                                                   
                                                </div>

                                                @endforeach
                                            @endif
                                        @endif



                                     <form  novalidate method="post" id ="add-act-image" action="javascript:void(0)"  enctype="multipart/form-data">
                                        @csrf
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif
                                    <div class="card-body">
                                       
                                        <div class="row artistField">
                                            
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="Title">Title</label>
                                                    <input type="text" class="form-control image-title-form" id="Title" name="title[]"
                                                        placeholder="Title" required >
                                                    
                                            </div>


                                            </div>
                                            <div class="col-lg-4">
                                                <div class="browseBtn-area">
                                                    <div class="form-group inputDnD">
                                                        <label class="sr-only" for="inputFile">File Upload</label>
                                                        <input type="file"
                                                            class="form-control-file text-primary font-weight-bold image-form"
                                                            id="inputFile" name="image[]" accept="image/*" onchange="readUrl(this)"
                                                            data-title="Drag here or browse file"
                                                            required data-msg-accept="Please select jpg,jpeg and png image" >
                                                            <input type="hidden" name="images[]" class="imagesInput">
                                                            <input type="hidden" name="image_size[]" class="imagessize">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                 <div class="Img-box d-lg-flex d-block">
                                                    <img id="renderImage" src="" class="img-fluid" alt="image">
                                                </div>
                                            </div>
                                           
                                        </div>
                                        <div id="render-image-html"></div>
                                            <div class="col-12 artist-btn">
                                                <a href="#!" class="btn next-btn" onClick="addImageFields()" >Add More <i class="fa fa-plus" aria-hidden="true"></i></a>
                                               <button class="btn next-btn" id="image-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                           
                            <!-- Images-end -->

                             <!-- Audio-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingAudio">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#Audio" aria-expanded="false" aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon10.png')}}" alt="icon"></span>Audios</h2>
                                    </button>
                                </div>
                                <div id="Audio" class="collapse" aria-labelledby="headingAudio"
                                    data-parent="#accordionExample275">
                                        @if(!empty($audios))
                                            @if(!$audios->isEmpty())
                                                @foreach($audios as $audio)
                                                <div class="row artistField">
                                                    <div class="col-lg-2">
                                                         <span>{{$audio->title}}</span>
                                                            
                                                    </div>
                                                
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <audio controls>
                                                              <source src="{{ url('uploads/act_'.$audio->artist_act_id.'/audios/'.$audio->audio)}}" type="audio/mp3">
                                                             
                                                            </audio>
                                                            
                                                        </div>

                                                    </div>

                                                    <div class="col-lg-4">
                                                        <label for="Feedback" class="w-100">&nbsp;</label>
                                                        <a href="#!" data-id="" class="btn new-btn" onClick="deleteActAudio({{$audio->id}}); removeFields(this); "><i class="fa fa-close" aria-hidden="true" ></i> Remove Audio</a>

                                                    </div>
                                                   
                                                </div>

                                                @endforeach
                                            @endif
                                        @endif




                                     <form  novalidate method="post" id ="add-act-audio" action="javascript:void(0)"  enctype="multipart/form-data">
                                        @csrf
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif
                                    <div class="card-body">
                                       
                                        <div class="row artistField">
                                            
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="Title">Title</label>
                                                    <input type="text" class="form-control image-title-form" id="Title" name="title[]"
                                                        placeholder="Title" required >
                                                    
                                                </div>


                                            </div>
                                            <div class="col-lg-4">
                                                <div class="browseBtn-area">
                                                        <!-- <button type="button" class="btn btn-primary btn-block">Add Image</button> -->
                                                    <div class="form-group inputDnD">
                                                        <label class="sr-only" for="inputFile">File Upload</label>
                                                        <input type="file"
                                                            class="form-control-file text-primary font-weight-bold audio-form"
                                                            id="inputFile" name="audio[]" accept="audio/*" onchange="readAudioUrl(this)"
                                                            data-title="Drag here or browse file"
                                                            required data-msg-accept="Please select valid audio file" >
                                                            <input type="hidden" name="audios[]" class="audioInput">
                                                            <input type="hidden" name="audio_size[]" class="audiosize">
                                                    </div>


                                                </div>
                                            </div>
                                           <!--  <div class="col-lg-4">
                                                 <div class="Img-box d-lg-flex d-block">
                                           
                                                    <audio controls>
                                                      <source src="" id="renderAudio" src="" class="audio-fluid" type="">
                                                    </audio>

                                                </div>
                                            </div> -->
                                           
                                        </div>
                                        <div id="render-audio-html"></div>
                                        


                                            <div class="col-12 artist-btn">
                                                <a href="#!" class="btn next-btn" onClick="addAudioFields()" >Add More <i class="fa fa-plus" aria-hidden="true"></i></a>
                                               <button class="btn next-btn" id="audio-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                </form>
                                </div>
                            </div>
                           
                            <!-- Audio-end -->

                            <!-- YoutubeVideo-start -->
                            <div class="card z-depth-0 bordered">
                                <div class="card-header" id="headingVideo">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#Videos" aria-expanded="false" aria-controls="collapseThree2">
                                        <h2><span><img src="{{asset('frontend/assets/img/icon11.png')}}" alt="icon"></span>YouTube Videos
                                        </h2>
                                    </button>

                                </div>
                                <div id="Videos" class="collapse" aria-labelledby="headingVideo"
                                    data-parent="#accordionExample275">

                                    @if(!empty($videos))
                                            @if(!$videos->isEmpty())
                                                @foreach($videos as $video)
                                                <div class="row artistField">
                                                    <div class="col-lg-2">
                                                         <span>{{$video->title}}</span>
                                                            
                                                    </div>
                                                
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <iframe width="200" height="200" src="{{$video->video}}">
                                                            </iframe>   
                                                        </div>

                                                    </div>

                                                    <div class="col-lg-4">
                                                        <label for="Feedback" class="w-100">&nbsp;</label>
                                                        <a href="#!" data-id="" class="btn new-btn" onClick="deleteActVideo({{$video->id}}); removeFields(this); "><i class="fa fa-close" aria-hidden="true" ></i> Remove Video</a>

                                                    </div>
                                                   
                                                </div>

                                                @endforeach
                                            @endif
                                        @endif


                                   <form  novalidate method="post" id ="add-act-video" action="javascript:void(0)">
                                        @csrf
                                        @if(!empty($artistArt))
                                            <input type="hidden" id="act_id" name="act_id" value="@if(!empty($artistArt->id)) {{$artistArt->id}} @endif">
                                        @endif
                                    <div class="card-body">
                                        <div class="row artistField">
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    <label for="rider_requirenment">Title</label>
                                                    <input type ="text" class="form-control title-form" id="title[]" name="title[]"
                                                         placeholder="Title">
                                                </div>

                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="rider_requirenment">Youtube Link</label>
                                                    <input type ="text" class="form-control video-form" id="video[]" name="video[]"
                                                         placeholder="Video Link" >
                                                </div>

                                            </div>

                                            <div class="col-lg-3">
                                                <label for="Feedback" class="w-100">&nbsp;</label>
                                                <a href="#!" class="btn new-btn" onClick="addVideoFields()"><i class="fa fa-plus" aria-hidden="true" ></i> Add more</a>

                                            </div>
                                        </div>
                                        <div id="render-video-html"></div>
                                        <div class="col-12 artist-btn">
                                             <button class="btn next-btn" id="video-act-form-btn" type="submit">NEXT <i class="fa fa-angle-right" aria-hidden="true"></i></button>
                                        </div>
                                        
                                    </div>
                                </form>
                                </div>
                            </div>
                            <!-- YoutubeVideo-end -->


                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!-- artist-details-section-end -->
    </main>
<!-- YoutubeVideo-end -->

@endsection

<script
   src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
   <script id="renderHtmlImageFields" type="text/x-handlebars-template">
    <div class="row artistField">
                                            
        <div class="col-lg-4">
            <div class="form-group">
                <label for="Title">Title</label>
                <input type="text" class="form-control image-title-form" id="Title" name="title[]"
                    placeholder="Title" required>
            </div>


        </div>
        <div class="col-lg-4">
            <div class="browseBtn-area">
                    
                <div class="form-group inputDnD">
                    <label class="sr-only" for="inputFile">File Upload</label>
                    <input type="file" name="image[]"
                            class="form-control-file text-primary font-weight-bold image-form"
                            id="inputFile" accept="image/*" onchange="readUrl(this)"
                            data-title="Drag here or browse file" required data-msg-accept="Please select jpg,jpeg and png image">
                    <input type="hidden" name="images[]" class="imagesInput">
                    <input type="hidden" name="image_size[]" class="imagessize">
                </div>


            </div>
        </div>
        <div class="col-lg-4">
            <div class="Img-box d-lg-flex d-block">
                <img id="renderImage" src="" class="img-fluid" alt="image">
            </div>
        </div>

        <div class="col-lg-12 text-right" >
            <a href="#!" class="btn next-btn removeBtn" onClick="removeVideoFields(this)">Remove</a>
        </div>
           
       
    </div>

  
</script>

<script id="renderHtmlAudioFields" type="text/x-handlebars-template">
    <div class="row artistField">
                                            
        <div class="col-lg-4">
            <div class="form-group">
                <label for="Title">Title</label>
                <input type="text" class="form-control audio-title-form" id="Title" name="title[]"
                    placeholder="Title" required>
            </div>


        </div>
        <div class="col-lg-4">
            <div class="browseBtn-area">
                    
                <div class="form-group inputDnD">
                    <label class="sr-only" for="inputFile">File Upload</label>
                    <input type="file" name="audio[]"
                            class="form-control-file text-primary font-weight-bold audio-form"
                            id="inputFile" accept="audio/*" onchange="readAudioUrl(this)"
                            data-title="Drag here or browse file" required data-msg-accept="Please select valid audio" required>
                    <input type="hidden" name="audios[]" class="audioInput">
                    <input type="hidden" name="audio_size[]" class="audiosize">
                </div>


            </div>
        </div>
        
        

        <div class="col-lg-12 text-right">
            <a href="#!" class="btn next-btn" onClick="removeVideoFields(this)">Remove</a>
        </div>
           
       
    </div>

  
</script>
   <script id="renderHtmlVideoFields" type="text/x-handlebars-template">
     <div class="row artistField videoHtml_">
        <div class="col-lg-3">
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" class="form-control title-form"
                    placeholder="Title" id="title[]" name="title[]">
            </div>

        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label for="video">Video Link</label>
                <input type="text" class="form-control video-form"
                    placeholder="Video Link" id="video[]" name="video[]">
            </div>

        </div>
        <div class="col-lg-3">
            <label for="Feedback" class="w-100">&nbsp;</label>
            <a href="#!" data-id="" class="btn new-btn" onClick="removeVideoFields(this)"><i class="fa fa-close" aria-hidden="true" ></i> Remove Link</a>

        </div>

        
    </div>

  
</script>
<script>
    var k = 100;
   var l = 200;
   var m = 100;
   var n = 100;
   function appendVideoHtml(i){
      var context = { 
         id : k,
      };
      
      var template = Handlebars.compile($('#renderHtmlVideoFields').html());
      $("#render-video-html").append(template(context));
   } 

   function appendImageHtml(m){
      var context = { 
         id : m,
      };
      
      var template = Handlebars.compile($('#renderHtmlImageFields').html());
      $("#render-image-html").append(template(context));
   } 

   function appendAudioHtml(m){
      var context = { 
         id : n,
      };
      
      var template = Handlebars.compile($('#renderHtmlAudioFields').html());
      $("#render-audio-html").append(template(context));
   } 

   function addVideoFields(){
       appendVideoHtml(k);
       k++;
   }
    function removeVideoFields(element){
        var id = $(element).attr('data-id');
        $(element).parent().parent().remove();
       
   }

   function addImageFields(){
        appendImageHtml(m);
   }

   function addAudioFields(){
        appendAudioHtml(n);
   }
</script>


<script id="renderHtmlFields" type="text/x-handlebars-template">
     <div class="row artistField testimonialHtml_">
        <div class="col-lg-4">
            <div class="form-group">
                <label for="Author">Author</label>
                <input type="text" class="form-control"
                    placeholder="Author Name" id="name[]" name="name[]">
            </div>

        </div>
        <div class="col-lg-4">
            <div class="form-group">
                <label for="testimonial">Text</label>
                <textarea class="form-control" id="testimonial[]" name="testimonial[]" rows="3"
                    placeholder="Feedback"></textarea>
            </div>

        </div>
        <div class="col-lg-4">
            <label for="Feedback" class="w-100">&nbsp;</label>
            <a href="#!" data-id="" class="btn new-btn" onClick="removeFields(this)"><i class="fa fa-close" aria-hidden="true" ></i> Remove Testimonial</a>

        </div>
    </div>
</script>


<script id="renderHtmlbookingFields" type="text/x-handlebars-template">
     <div class="row artistField">
            <div class="col-lg-4">
                <div class="form-group">
                    <label for="Name">Name</label>
                        <input type="text" class="form-control" name="title[]" id="booking_title" placeholder="Name">
                </div>

                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label for="Price">Price</label>
                            <input type="number" class="form-control" name= "price[]" id="booking_price"
                                placeholder="Price">
                    </div>

                    </div>
         
                 <div class="col-lg-4">
                        <label for="Feedback" class="w-100">&nbsp;</label>
                        <a href="#!" data-id="" class="btn new-btn" onClick="removebookingFields(this)"><i class="fa fa-close" aria-hidden="true" ></i> Remove booking</a>

                    </div>
            </div>
</script>


<script>
   var i = 100;
   var j = 200;
   function readUrl(input) {
        if (input.files && input.files[0]) {
          let reader = new FileReader();
          reader.onload = (e) => {
            let imgData = e.target.result;
            let imgName = input.files[0].name;

                $(input).next(".imagesInput").val(e.target.result);
                $(input).next(".imagesize").val(input.files[0].size);
                $(input).parent().parent().parent().next('.col-lg-10').find('#renderImage').attr('src',e.target.result);
          }
            reader.readAsDataURL(input.files[0]);            
        }       
    }

     function readbannerUrl(input) {
        if (input.files && input.files[0]) {
          let reader = new FileReader();
          reader.onload = (e) => {
            let imgData = e.target.result;
            let imgName = input.files[0].name;

                $(input).next(".imagesbannerInput").val(e.target.result);
                $(input).next(".imagesize").val(input.files[0].size);
                $(input).parent().parent().parent().next('.col-lg-10').find('#renderImagebanner').attr('src',e.target.result);
          }
            reader.readAsDataURL(input.files[0]);            
        }       
    }


    function readAudioUrl(input) {
        if (input.files && input.files[0]) {
            
          let reader = new FileReader();
          reader.onload = (e) => {
            let imgData = e.target.result;
            let imgName = input.files[0].name;

                $(input).next(".audioInput").val(e.target.result);
                $(input).next(".audiosize").val(input.files[0].size);
                $(input).parent().parent().parent().next('.col-lg-4').find('#renderAudio').attr('src',e.target.result);
          }
            reader.readAsDataURL(input.files[0]);           
        }       
    }

   function appendHtml(i){
      var context = { 
         id : i,
      };
      
      var template = Handlebars.compile($('#renderHtmlFields').html());
      $("#render-html").append(template(context));
   }    

   function addFields(){
       appendHtml(i);
       i++;
   }

    function removeFields(element){
        var id = $(element).attr('data-id');
        $(element).parent().parent().remove();
       
   }

   function appendBookingHtml(i){
      var context = { 
         id : i,
      };
      
      var template = Handlebars.compile($('#renderHtmlbookingFields').html());
      $("#booking_render_html").append(template(context));
   } 

   function addBookingFields(){
       appendBookingHtml(i);
       i++;
   }


  function removebookingFields(element){
        var id = $(element).attr('data-id');
        $(element).parent().parent().remove();
       
   } 

 
</script>



    <script>
        // Material Select Initialization
    //     $(document).ready(function() {
    //         $('#example-multiple-selected').multiselect();
    // });



function DBXPclick() {
  var listbutton = $("#selectedDBXP");
  if ($(listbutton).attr("aria-expanded") == "true") {
    $(listbutton).attr("aria-expanded", "false");
    $("#choicelist").css("display", "none");
    $("#selectedDBXP .fa-chevron-down").removeClass("fa-chevron-down--open");
  } else {
    $(listbutton).attr("aria-expanded", "true");
    $("#choicelist").css("display", "block");
    $("#selectedDBXP .fa-chevron-down").addClass("fa-chevron-down--open");
  }
}

/*var subHeaderHeight = $('.top-check-class').offset().top
$(window).scroll(function() { 
    alert(subHeaderHeight);
    var scrollTop     = $('.sidebar-check').offset().top;
    if (scrollTop==subHeaderHeight) {
        alert('okk');
    }
    if (scrollTop>subHeaderHeight) {
       alert('greater');
    }
});*/
</script>
    
</body>

</html>