@extends('layouts.admin')
@section('content')
    <div class="host-section">
        <div class="row">
            <div class="col-12">
                <div class="card challenge-library-card">
                    <div class="card-header">

                        {{-- old flow --}}
                        {{-- <button type="button" class="btn btn-primary create-event-if reset-form" data-toggle="modal" fetch-codes="{{ route('host.event.event-codes') }}"
                            data-target="@if (auth()->user()->user_code) #createEventModal  @else #eventPayment @endif">Create
                            Event</button> --}}

                            {{-- new flow --}}
                        <button type="button" class="btn btn-primary reset-form" data-toggle="modal" fetch-codes="{{ route('host.event.event-codes') }}"
                            data-target="#createEventModal">Create
                            Event</button>

                    </div>
                    <div class="callenge-library-preview">
                        <div class="row">
                            @forelse($events as $event)
                                <div class="col-lg-6 col-md-6 col-sm-12 challenge-card">
                                    <div class="challenge-details">
                                        <div class="challenge-details-inner">
                                            <h2>Details ({{ $event->event_code }})</h2>
                                            <div class="challenge-date-box">
                                                <div class="challenge-personal-details">
                                                    <div class="round-details-parent">
                                                        <div class="challenge-round-details">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data ">
                                                                        <h4>Started Date </h4>
                                                                        <span>{{ \Carbon\Carbon::parse($event->start_date)->format('d/m/y') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>End Date </h4>
                                                                        <span>{{ \Carbon\Carbon::parse($event->end_date)->format('d/m/y') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>Event Code </h4>
                                                                        <span>{{ $event->event_code ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>Event Fee </h4>
                                                                        <span>{{ $event->event_fee ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>Total Registered Users: </h4>
                                                                        <span>{{ 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>Total Revenue: </h4>
                                                                        <span>{{ 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

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

                                        <div class="challenge-details-inner">
                                            <h2>Host Details</h2>
                                            <div class="challenge-date-box">
                                                <div class="challenge-personal-details">
                                                    <div class="round-details-parent">
                                                        <div class="challenge-round-details">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data ">
                                                                        <h4>Host Name </h4>
                                                                        {{ getEventHostDetails($event, 'first_name') . ' ' . getEventHostDetails($event, 'last_name') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>Email: </h4>
                                                                        <span>{{ getEventHostDetails($event, 'email') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>Phone Number </h4>
                                                                        <span>{{ getEventHostDetails($event, 'phone_number') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>Address </h4>
                                                                        <span>{{ getEventHostDetails($event, 'address') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>City </h4>
                                                                        <span>{{ getEventHostDetails($event, 'city') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>State </h4>
                                                                        <span>{{ getEventHostDetails($event, 'state') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="challenge-round-data">
                                                                        <h4>Country </h4>
                                                                        <span>{{ getEventHostDetails($event, 'country') ?? 'NA' }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

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

                                        <div class="challenge-details-inner">
                                            <h2>Round Details</h2>
                                            <div class="challenge-personal-details event-round-outer">
                                                {{-- <h3>Round Details</h3> --}}


                                                {{-- <div class="chalenge-del-btn-box">
                                                <a type="button"
                                                    href="{{ route('admin.challenge.fetchData', ['id' => jsencode_userdata($challenge->id)]) }}"
                                                    data-url="{{ route('admin.challenge.update', ['id' => jsencode_userdata($challenge->id)]) }}"
                                                    class="btn btn-primary challenge-modal" data-toggle="modal"
                                                    data-id="{{ jsencode_userdata($challenge->id) }}"
                                                    data-target="#createChallengeModal"
                                                    data-selected="{{ route('admin.challenge.getRules', ['id' => $challenge->id]) }}"
                                                    data-target-url="{{ route('admin.target.fetchTargets', ['id' => $challenge->id]) }}"
                                                    data-division-url="{{ route('admin.division.fetchAllDivision', ['id' => $challenge->id]) }}">Edit</a>
                                                <a type="button"
                                                    href="{{ route('admin.challenge.delete', ['id' => jsencode_userdata($challenge->id)]) }}"
                                                    class="btn btn-danger confirm-delete" data-toggle="modal"
                                                    data-id="{{ jsencode_userdata($challenge->id) }}">Delete</a>
                                            </div> --}}
                                            </div>

                                            {{-- <div class="challenge-number-data">
                                            <h4>Challenge Rules for Challenge No.</h4>
                                            <span>45</span>
                                        </div> --}}

                                            @foreach ($event->event_rounds as $key => $round)
                                                <div class="challenge-number-data-inner">
                                                    <div class="round-text-left">
                                                        <h4 class="challenge-round-number ">Round {{ $key + 1 }}</h4>
                                                    </div>
                                                    <div class="round-textright">
                                                        <div class="round-textright-inner">
                                                            <div class="challenge-number-data">
                                                                <h4>Yards</h4>
                                                                <span>{{ $round->yards ?? 'N/A' }}</span>
                                                            </div>
                                                            <div class="challenge-number-data">
                                                                <h4>Re-load Required (y/n)</h4>
                                                                <span>{{ $round->reload_required == 1 ? 'Y' : 'N' }}</span>
                                                            </div>
                                                        </div>
                                                        <div class="round-textright-inner">
                                                            <div class="challenge-number-data">
                                                                <h4>Shots </h4>
                                                                <span>{{ $round->shots }}</span>
                                                            </div>
                                                            <div class="challenge-number-data">
                                                                <h4>Target Zone</h4>
                                                                <span>{{ $round->target_zone }}</span>
                                                            </div>
                                                            <div class="challenge-number-data">
                                                                <h4>Hand (s/w)</h4>
                                                                <span>{{ $round->hand }}</span>
                                                            </div>
                                                        </div>
                                                        <div class="round-textright-inner">
                                                            <div class="challenge-number-data">
                                                                <h4>Shots</h4>
                                                                <span>{{ $round->shots2 }}</span>
                                                            </div>
                                                            <div class="challenge-number-data">
                                                                <h4>Target Zone</h4>
                                                                <span>{{ $round->target_zone2 }}</span>
                                                            </div>
                                                            <div class="challenge-number-data">
                                                                <h4>Hand (s/w)</h4>
                                                                <span>{{ $round->hand2 }}</span>
                                                            </div>
                                                        </div>
                                                        <!-- <div class="round-textright-inner">
                                                                                                    <div class="challenge-number-data">
                                                                                                        <h4>Shots </h4>
                                                                                                        <span>45</span>
                                                                                                    </div>
                                                                                                    <div class="challenge-number-data">
                                                                                                        <h4>Target Zone</h4>
                                                                                                        <span>45</span>
                                                                                                    </div>
                                                                                                    <div class="challenge-number-data">
                                                                                                        <h4>Hand (s/w)</h4>
                                                                                                        <span>45</span>
                                                                                                    </div>
                                                                                                </div> -->
                                                    </div>
                                                </div>
                                            @endforeach

                                        </div>

                                        <div class="challenge-details-inner">
                                            <h2>Event Media</h2>
                                            <div class="challenge-personal-details event-media-videos">
                                                <div class="round-details-parent  round-logoimages">
                                                    <h3>Event Logo</h3>
                                                    <div class="challenge-round-details">
                                                        <div class="row">
                                                            @foreach ($event->eventLogo as $key => $logo)
                                                                <div class="col-lg-12">
                                                                    <div class="round-logoimages-inner">
                                                                        <img src="{{ env('APP_URL') . '/storage/' . $logo->path }}"
                                                                            alt="">
                                                                     
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="round-details-parent  round-logoimages">
                                                    <h3>Event Promotional Videos</h3>
                                                    <div class="challenge-round-details">
                                                        <div class="row">
                                                            @foreach ($event->eventVideo as $key => $video)
                                                            
                                                            {{-- @dd(Storage::mimeType($video->name)) --}}
                                                                <div class="col-lg-12">
                                                         
                                                                    <video controls>
                                                                        <source
                                                                            src="{{ env('APP_URL') . '/storage/' . $video->path }}">
                                                                    </video>
                                                                
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="round-details-parent  round-logoimages">
                                                    <h3>Event Targets</h3>
                                                    <div class="challenge-round-details">
                                                        <div class="row">
                                                            @foreach ($event->eventTarget as $key => $target)
                                                                <div class="col-lg-12">
                                                                    <div class="challenge-round-pdf">
                                                                       
                                                                        <embed
                                                                            src="{{ env('APP_URL') . '/storage/' . $target->path }}"
                                                                            alt="">
                                                                        
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>


                                            </div>
                                        </div>

                                        <div class="challenge-details-inner">
                                            <h2>Event Rules</h2>
                                            <div class="challenge-personal-details">
                                                <div class='row'>
                                                    <div class="col-md-6">
                                                        <div class="round-logoimages">
                                                            <h3>Event Divisions</h3>
                                                            <div class="round-details-parent">
                                                                @foreach ($event->challenge_compatibles as $key => $compatibles)
                                                                    <div class="challenge-round-details">
                                                                        <div class="row">
                                                                            <div class="col-md-6">
                                                                                <div class="challenge-round-data-column">
                                                                                    <ul>
                                                                                        <li>{{ $compatibles->divisions->name }}
                                                                                        </li>
                                                                                    </ul>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="round-logoimages">
                                                            <h3>Event Rules</h3>
                                                            <span>{{ $event->rules }}</span>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="chalenge-del-btn-box">
                                            <a type="button"
                                                href="{{ route('host.event.fetchData', ['id' => jsencode_userdata($event->id)]) }}"
                                                data-url="{{ route('host.event.create', ['id' => jsencode_userdata($event->id)]) }}"
                                                class="btn btn-primary update-event" data-toggle="modal"
                                                data-id="{{ jsencode_userdata($event->id) }}"
                                                data-target="#createEventModal">Edit</a>
                                            <a type="button"
                                                href="{{ route('host.event.delete', ['id' => jsencode_userdata($event->id)]) }}"
                                                class="btn btn-danger confirm-delete" data-toggle="modal"
                                                data-id="{{ jsencode_userdata($event->id) }}">Delete</a>
                                        </div>
                                    </div>

                                    {{-- <div class="chalenge-del-btn-box">
                                    <a type="button"
                                        href="{{ route('admin.challenge.fetchData', ['id' => jsencode_userdata($challenge->id)]) }}"
                                        data-url="{{ route('admin.challenge.update', ['id' => jsencode_userdata($challenge->id)]) }}"
                                        class="btn btn-primary challenge-modal" data-toggle="modal"
                                        data-id="{{ jsencode_userdata($challenge->id) }}"
                                        data-target="#createChallengeModal"
                                        data-selected="{{ route('admin.challenge.getRules', ['id' => $challenge->id]) }}"
                                        data-target-url="{{ route('admin.target.fetchTargets', ['id' => $challenge->id]) }}"
                                        data-division-url="{{ route('admin.division.fetchAllDivision', ['id' => $challenge->id]) }}">Edit</a>
                                    <a type="button"
                                        href="{{ route('admin.challenge.delete', ['id' => jsencode_userdata($challenge->id)]) }}"
                                        class="btn btn-danger confirm-delete" data-toggle="modal"
                                        data-id="{{ jsencode_userdata($challenge->id) }}">Delete</a>
                                </div> --}}

                                </div>
                            @empty
                                <p class="no-challange"> No events available</p>
                            @endforelse
                        </div>
                    </div>
                    {{-- @foreach ($events as $event)
                    @dd($event , $event->media , $event->eventLogo , $event->eventVideo , $event->eventPdf , $event->host_details)
                @endforeach --}}
                </div>
            </div>
        </div>
    </div>
@endsection
@section('editcontent')
    @include('host.event.add-event')
    {{-- @include('host.event.show-event-media') --}}
    @include('host.event.payment')
@endsection
{{-- @section('pagespecificscripts') --}}

@push('pagespecificscripts')
    <script>
        jQuery(document).ready(function() {
            let initialFormHtml = jQuery('#eventForm').html();

            //checking event code is valid or not 
            
           

            // create event
            jQuery('.reset-form').click(function() {
                jQuery('#eventForm').html(initialFormHtml)
                jQuery('#host_divisions').select2({
                    placeholder: 'select divisions'
                });
                
                clearRoundInputs();
                //remove ajax error messages 
                jQuery('.ajax-response').html(' ')

                
                setDivisionOptions();

                // hide event media on create event form
                // jQuery('.latest-event-logo').parent().addClass('d-none');
                // jQuery('.latest-event-video').parent().addClass('d-none');
                // jQuery('.latest-event-target').parent().addClass('d-none');


                // changing text 
                jQuery('#formModal').text('Create Event');
                jQuery('#eventForm').find('button').text('Create');

                //for validation of uploaded files
                jQuery('input[name="event_id"]').attr('disabled',true);
                jQuery('input[name="event_id"]').val(' ');

                // on create event show default images 
                jQuery('#upload-event-video').html(`<img src="{{asset('images/upload-video.png')}}" alt="">`);
                jQuery('#upload-event-target').html(`<img src="{{asset('images/shooting-board.png')}}" alt="">`);

                //get event codes of auth user 
                getEventCodes();
                
                // set data on event code drop down changes 
                jQuery('#event_code').on('change',function(){
                    let code = jQuery(this).val();

                    //checking event code is valid or not 
                    isEventCodeValid(code);
                });

                // show round fields empty while creating event 
                jQuery('.round-detail-each').find('input').val(' ');
                jQuery('.round-detail-each').find('select').prop("selectedIndex", 0)
            })

            jQuery('#host_divisions').select2({
                placeholder: 'select divisions'
            });
            setDivisionOptions();

            //remove media
            jQuery(document).on('click', '.remove-media', function(e) {
                e.preventDefault();
                let element = jQuery(this);
                let url = element.attr('href');
                let response = ajaxCall(url, 'get')
                response.then(function(response) {
                    if (response.status) {
                        element.parent().remove();
                    }
                })
            })

            //show divisions
            function setDivisionOptions(url = null) {
                if (url) {
                    let selectedDivisionsUrl = url;
                    let id = "{{ authId() }}";
                    let data = {
                        'id': id,
                    }
                    let selectedDivisions = ajaxCall(selectedDivisionsUrl, 'get', data);

                    selectedDivisions.then(function(response) {
                        let allDivisions = response.all;
                        return;
                        let selectedDivisions = response.selected;
                        let targetOptions = jQuery(response.all).map(function(index, value) {
                            return `<option data-value='${value.id}' value='${value.id}' >${value.name}</option>`;
                        });
                        var html = '';
                        jQuery.each(targetOptions, function(index, value) {
                            html += value;
                        })
                        let selectedIds = selectedDivisions.map(function(division) {
                            return division.id;
                        });

                        jQuery('#select_division').html(html);
                        $('#select_division').val(selectedIds).trigger('change');

                    })
                } else {
                    let selectedDivisionsUrl = "{{ route('host.divisions') }}";
                    let id = "{{ authId() }}";
                    let data = {
                        'id': id,
                    }
                    let allDivisions = ajaxCall(selectedDivisionsUrl, 'get', data);
                    allDivisions.then(function(response) {
                        let allDivisions = response.data;

                        let divisionOptions = jQuery(allDivisions).map(function(index, value) {
                            return `<option data-value='${value.name}' value='${value.id}' >${value.name}</option>`;
                        });
                        var html = '';
                        jQuery.each(divisionOptions, function(index, value) {
                            html += value;
                        })
                        jQuery('#host_divisions').html(html);
                    })
                }
            }



            // jQuery('.create-event-if').attr('data-target', ' ');

            //show create event modal when payment is done otherwise payment modal is shown
            // jQuery('.create-event-if').click(function(e) {
            //     e.stopPropagation();
            //     let buttonElement = jQuery(this);
            //     let url = "{{ route('host.eventCode') }}";
            //     let id = "{{ auth()->id() }}";
            //     let data = {
            //         'id': id,
            //     }

              


            //     let response = ajaxCall(url, 'get', data)
            //     response.then((response) => {
            //         if (response.data.user_code) {
            //             //update input fields of form 
            //             updateFormInputs(response);
                        
            //             buttonElement.attr('data-target', '#createEventModal');
            //             jQuery('#eventPayment').modal('hide')

            //             // reset round fields data 
            //             let roundElem = jQuery('.round-detail-each');
            //             roundElem.find('input').val(' ');
            //             roundElem.find('select').prop('selectedIndex', 0);
                        
            //             //get event code of auth user
            //             getEventCodes();

            //             // show event form
            //             jQuery('#createEventModal').modal('show')

            //             // clearing round input when clear button is clicked when event is created
            //             jQuery('.clear_this_round').click(function() {
            //                 let clearButton = jQuery(this).closest('.round-detail-each');
            //                 clearButton.find('input').val('');
            //                 clearButton.find('select').prop('selectedIndex', 0);
            //             })
                            
            //         } else {
            //             jQuery('.stripe-error-messages').text(' ');
            //             buttonElement.attr('data-target', '#eventPayment')
            //             jQuery('#createEventModal').modal('hide')

            //             //hide server errors 
            //             jQuery('.ajax-response').html(' ');
            //             jQuery('#eventPayment').modal('show')
            //         }
            //     })
            // })
        });

        function updateFormInputs(response) {
            jQuery('input[name="event_code"]').val(response.data.user_code);
            jQuery('input[name="first_name"]').val(response.data.first_name);
            jQuery('input[name="last_name"]').val(response.data.last_name);
            jQuery('input[name="city"]').val(response.data.city);
            jQuery('input[name="address"]').val(response.data.address);
            jQuery('input[name="state"]').val(response.data.state);
            jQuery('input[name="country"]').val(response.data.country);
            jQuery('input[name="phone_number"]').val(response.data.phone_number);
            jQuery('input[name="host_by_name"]').val(response.data.host_by_name);
            jQuery('input[name="email"]').val(response.data.email);
        }

        //remove rounds when remove_round button is clicked
        jQuery(document).on("click", '.remove_this_round', function() {
            var removelength = $('.remove_this_round_parent').length
            // $(this).closest('.single-round-detail-container').remove();
            $(this).parent().prev().remove();
            $(this).parent().remove();
            if (removelength <= 3) {
                $(document).find('.add-round').removeClass('d-none');
            }
        });

        //update event data when edit button is clicked
        jQuery('.update-event').click(function(e) {
            //remove validation errors from form 
            jQuery('.is-invalid').remove();
            jQuery('input,select').removeClass('error-message');

            let currentElement = jQuery(this);
            let url = currentElement.attr('href');
            let id = currentElement.data('id');
            let formUrl = currentElement.data('url');
            let data = {
                'id': id,
            }
            let response = ajaxCall(url, 'get', data);
            response.then((response) => {
                if (response.status == true) {
                    jQuery('#eventForm').attr('action', formUrl);
                    jQuery('input[name="host_by_name"]').val(response.data.host_details.host_name);

                    jQuery('input[name="start_date"]').val(response.data.event.start_date);
                    jQuery('input[name="end_date"]').val(response.data.event.end_date);
                    jQuery('textarea[name="rules"]').val(response.data.event.rules);


                    // for event form validation
                    jQuery('input[name="event_id"]').attr('disabled',false);
                    jQuery('input[name="event_id"]').val(response.data.event.id);

                    //event code drop down list
                    jQuery('#event_code').html(`<option value="${response.data.event.event_code}">${response.data.event.event_code}</option>`)

                    //show toggles selected
                    jQuery('input[name="image_required"]').prop('checked',response.data.event.image_required == 1 ? true : false);
                    jQuery('input[name="video_required"]').prop('checked',response.data.event.video_required == 1 ? true : false);
                    jQuery('input[name="promote_event"]').prop('checked',response.data.event.promote_event == 1 ? true : false);



                    let divisionsId = [];
                    jQuery.each(response.data.divisions, function(index, value) {
                        divisionsId.push(value.id);
                    })

                    var html = '';
                    jQuery.each(response.data.allDivisions, function(index, value) {
                        let option =
                            `<option data-value='${value.id}' value='${value.id}' >${value.name}</option>`;
                        html += option;
                    })



                    jQuery('#host_divisions').html(html);
                    jQuery('#host_divisions').val(divisionsId).trigger('change');

                    updateInput(response.data.event);
                    updateInput(response.data.host_details);

                    // updateEventRounds(response.data.event_rounds)
                    //update rounds details with inputs 
                    jQuery('.event-round-parent').html(response.html);


                    // clearing round input when clear button is clicked when event is updated
                    clearRoundInputs()
                  

                    // jQuery('.latest-event-logo').parent().removeClass('d-none');
                    // jQuery('.latest-event-video').parent().removeClass('d-none');
                    // jQuery('.latest-event-target').parent().removeClass('d-none');

                    showLatestMedia(response.data.latest_media);

                    jQuery('.eventMedia').attr('data-media', currentElement.data('id'));

                    //updating text 
                    jQuery('#formModal').text('Update Event');
                    jQuery('#eventForm').find('button').text('Update');

                    // updating date input fields
                    jQuery('input[name="start_date"]').val(timeStampToDateFormat(response.data.event
                        .start_date));
                    jQuery('input[name="end_date"]').val(timeStampToDateFormat(response.data.event
                        .end_date));

           
                    
                    //changing form submit button disabled to enabled on update
                    jQuery('#eventForm').find('button').attr('disabled', false);

                } else {
                    console.log(response)
                }
            })

        })

        //update inputs by name
        function updateInput(data) {
            jQuery.each(data, function(index, value) {
                jQuery('input[name="' + index + '"]').val(value);
            })
        }

        // update event rounds
        function updateEventRounds(rounds) {
            // let roundElement = jQuery('#eventForm').find('.single-round-detail-container');
            let removeButton =
                `<p class="remove_this_round_parent"><span class="remove_this_round">- Remove</span></p>`;
            jQuery('#eventForm').find('.single-round-detail-container').remove();

            jQuery.each(rounds, function(index, round) {
                let roundLength = $('.single-round-detail-container').length;
                let roundElement = ` 
                    <h6>${roundLength + 1}</h6>
                    <div class="dark-input-box single-round-detail-container">
                              <div class='row'>
                                <div class='col-md-6'>
                                      <div class="form-group">
                                            <label for="yards_${index}">Yards</label>
                                            <div class="formfield">
                                                <input type='hidden' name='id[]' value='${round.id}'>
                                                <input type="number" class="form-control @error('yards[${index}]') is-invalid @enderror" id="yards_${index}" name="yards[${index}]" placeholder="Yards"  value=${round.yards}>
                                            </div>
                                        </div>
                                </div>
                                <div class='col-md-6'>
                                    <div class="form-group">
                                        <label for="reload_${index}">Reload Required</label>
                                        <div class="formfield">
                                            <select class="form-control @error('reload[${index}]') is-invalid @enderror" id="reload_${index}" name="reload[${index}]" required>
                                                <option value="">Select any</option>
                                                <option value="0" ${!round.reload_required ? 'selected' : ''}>No</option>
                                                <option value="1" ${round.reload_required ? 'selected' : ''}>Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                              </div>
                              <div class='row'>
                                 <div class='col-md-4'>
                                    <div class="form-group">
                                        <label for="shots_${index}">Shots</label>
                                        <div class="formfield">
                                            <input type="number" class="form-control @error('shots[${index}]') is-invalid @enderror" id="shots_${index}" name="shots[${index}] required" placeholder="Shots" required value="${round.shots}">
                                        </div>
                                    </div>
                                 </div>  
                                 <div class='col-md-4'>
                                    <div class="form-group">
                                        <label for="target_zone_${index}">Target Zone</label>
                                        <div class="formfield">
                                               <select class="form-control @error('target_zone[${index}]') is-invalid @enderror" id="target_zone_${index}" name="target_zone[${index}]" required>
                                                <option value="">Select any</option>
                                                <option value="1" ${round.target_zone == '1' ? 'selected' : ''}>1</option>
                                                <option value="2" ${round.target_zone == '2' ? 'selected' : ''}>2</option>
                                                <option value="3" ${round.target_zone == '3' ? 'selected' : ''}>3</option>
                                                <option value="4" ${round.target_zone == '4' ? 'selected' : ''}>4</option>
                                                <option value="5" ${round.target_zone == '5' ? 'selected' : ''}>5</option>
                                                <option value="6" ${round.target_zone == '6' ? 'selected' : ''}>6</option>
                                                <option value="7" ${round.target_zone == '7' ? 'selected' : ''}>7</option>
                                                <option value="8" ${round.target_zone == '8' ? 'selected' : ''}>8</option>
                                                <option value="n/a" ${round.target_zone == 'n/a' ? 'selected' : ''}>N/A</option>
                                            </select>
                                        </div>
                                    </div>
                                 </div>  
                                 <div class='col-md-4'>
                                    <div class="form-group">
                                        <label for="hands_${index}">Hand (s/w)</label>
                                        <div class="formfield">
                                            <select class="form-control @error('hands[${index}]') is-invalid @enderror" id="hands_${index}" name="hands[${index}]" required>
                                                <option value="">Select any</option>
                                                <option value="S" ${round.hand == 'S' ? 'selected' : ''}>S</option>
                                                <option value="W" ${round.hand == 'W' ? 'selected' : ''}>W</option>
                                            </select>
                                        </div>
                                    </div>
                                 </div>  
                              </div>
                              <div class='row'>
                                 <div class='col-md-4'>
                                      <div class="form-group">
                                        <label for="shots2_${index}">Shots2</label>
                                        <div class="formfield">
                                            <input type="number" class="form-control @error('shots2[${index}]') is-invalid @enderror" id="shots2_${index}" name="shots2[${index}] required" placeholder="Shots2" required value="${round.shots2}">
                                        </div>
                                    </div>
                                 </div>  
                                <div class='col-md-4'>
                                      <div class="form-group">
                                        <label for="target_zone2_${index}">Target Zone2</label>
                                        <div class="formfield">
                                               <select class="form-control @error('target_zone2[${index}]') is-invalid @enderror" id="target_zone2_${index}" name="target_zone2[${index}]" required>
                                                <option value="">Select any</option>
                                                <option value="1" ${round.target_zone2 == '1' ? 'selected' : ''}>1</option>
                                                <option value="2" ${round.target_zone2 == '2' ? 'selected' : ''}>2</option>
                                                <option value="3" ${round.target_zone2 == '3' ? 'selected' : ''}>3</option>
                                                <option value="4" ${round.target_zone2 == '4' ? 'selected' : ''}>4</option>
                                                <option value="5" ${round.target_zone2 == '5' ? 'selected' : ''}>5</option>
                                                <option value="6" ${round.target_zone2 == '6' ? 'selected' : ''}>6</option>
                                                <option value="7" ${round.target_zone2 == '7' ? 'selected' : ''}>7</option>
                                                <option value="8" ${round.target_zone2 == '8' ? 'selected' : ''}>8</option>
                                                <option value="n/a" ${round.target_zone2 == 'n/a' ? 'selected' : ''}>N/A</option>
                                            </select>
                                        </div>
                                    </div>
                                 </div>  
                                <div class='col-md-4'>
                                    
                                     <div class="form-group">
                                        <label for="hands2_${index}">Hand (s/w)2</label>
                                        <div class="formfield">
                                            <select class="form-control @error('hands2[${index}]') is-invalid @enderror" id="hands2_${index}" name="hands2[${index}]" required>
                                                <option value="">Select any</option>
                                                <option value="S" ${round.hand2 == 'S' ? 'selected' : ''}>S</option>
                                                <option value="W" ${round.hand2 == 'W' ? 'selected' : ''}>W</option>
                                            </select>
                                        </div>
                                    </div>
                                 </div>  
                              </div>
                               
                                ${removeButton}
                            </div>
               `;
                if (jQuery('.single-round-detail-container').length <= 4) {
                    jQuery('.rounds-parent').append(roundElement)
                }
            })
        }



        //show latest event media
        function showLatestMedia(data) {
            if (data.video) {
                // jQuery('#latest-event-image').attr('src', APP_URL + '/storage/' + data.logo.path);
                //update video 
                jQuery('#upload-event-video').html(`<video id='hhhhh' controls width='200px' height="200px" src='${APP_URL + '/storage/' + data.video.path}'>
                                                    <source  >
                                                  </video>`) ;
            }
            if (data.target) {
                // jQuery('.latest-event-target').attr('data', APP_URL + '/storage/' + data.target.path);
                // show target 
                // jQuery('#upload-event-target').html(`<object class="latest-event-target"  type="application/pdf" width="200px" height="200px" data="${APP_URL + '/storage/' + data.    target.path}"><p>PDF cannot be displayed. <a href="">Download PDF</a> instead.</p>
                //                                     </object>`);

                //show logo instead of target 
                jQuery('#upload-event-target').html(`<img src="${APP_URL + '/storage/' + data.target.path}" alt='no logo'>`);
            }
            // if (data.logo) {
            //     console.log('here3')
            //     jQuery('.latest-event-video').parent().attr('src', APP_URL + '/storage/' + data.logo.path)
            // }
        }

        function timeStampToDateFormat(value) {
            return moment(value, "YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD");
        }


        // clearing rounds inputs
        function clearRoundInputs(){
            jQuery('.clear_this_round').click(function() {
                let clearButton = jQuery(this).closest('.round-detail-each');
                clearButton.find('input').val('');
                clearButton.find('select').prop('selectedIndex', 0);
            })
        }

        // fetch event all event codes of user 
        const getEventCodes = () => {
            let url = "{{ route('host.event.event-codes') }}";
            let response = ajaxCall(url , 'post');
            response.then((response)=>{
                // var activeCode = `<option value='${response.data.active}'>${response.data.other}</option>`;
                
                var usedCodes = `<option value=' '>Select any</option>`;
                jQuery.each(response.data.others , function(index , value){
                        usedCodes += `<option value='${value}'>${value}</option>`;
                })
          
                //set data to eventcode dropdown
                if(response.data.others){
                    //if user has code to create event
                    jQuery('#event_code').html( usedCodes);
                } else{
                    //if user has doesnot have code to create event
                    jQuery('#event_code').html(usedCodes);
                }
            })
        }


        // checking an event code is valid or not 
        function isEventCodeValid(code){
            let url = "{{ route('host.event.event-details',['code'=>'dcode']) }}".replace('dcode',code);
            let response = ajaxCall(url , 'post');
            response.then((response)=>{
                let formButton = jQuery('.create-event');
                let hostNameInput = jQuery('input[name="host_by_name"]');

                //manage form inputs
                if(!response.status){
                    hostNameInput.val(response.data.details ? response.data.details.hosted_by : null);
                }else{
                    hostNameInput.val(' ');
                }

                //manage form submits button
                if(response.data.code_status){
                    formButton.attr('disabled',false);
                    iziToast.show({
                        title: 'Success',
                        message: response.message,
                        position: 'topRight',
                        color: 'green',
                        icon: 'check',
                        timeout: 5000,
                        progressBar: true
                    });
                }else{
                    formButton.attr('disabled',true);
                    iziToast.show({
                        title: 'Error',
                        message: response.message,
                        position: 'topRight',
                        color: 'red',
                        icon: 'check',
                        timeout: 5000,
                        progressBar: true
                    });
                }
            })
        }
       
    </script>
    <script src="{{ asset('custom-js/date.js') }}"></script>
@endpush