@extends('layouts.admin')
{{-- @push('pagespecificcss')
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' />
@endpush --}}

@section('content')
    @php
        $sNo = request()->members_page ? request()->members_page * 10 - 10 : 0;
    @endphp
    <div class="row">
        <div class="col-12">
            <div class="card challenge-library-card custom-challenge-list">
                <div class="card-header">
                    <button type="button" class="btn btn-primary create-challenge">Create Challenge</button>
                    <form method="GET">
                        <div class="old-input-btns">
                            <input type="text" name="search" class="form-control" value="{{ request('search') }}"
                                placeholder="Search...">
                            <div class="new-btn-grp">
                                <button type="submit" class="btn btn-primary">Search</button>
                                <a href="{{ route('admin.challenge.library') }}" class="btn btn-secondary">Clear</a>
                            </div>
                        </div>
                    </form>
                    {{-- <button type="button" class="btn btn-primary edit-user" data-user-id="1">Dummy fetch data</button> --}}
                </div>
                <div class="callenge-library-preview">
                    <div class="row">
                        @forelse($challenges as $challenge)
                            <div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 challenge-card">
                                <div class="challenge-details">
                                    <div class="challenge-details-header challenge-details-header-new">
                                        <div class="challenge-details-top-data">

                                            <div class="challenge-details-bottom-data">
                                                <h2>Challenge ({{ $challenge->challenge_code }})</h2>
                                                <p>Photo required :<span>
                                                        {{ @$challenge->image_required == 1 ? 'Y' : 'N' }}</span> </p>
                                                <p>Video required :<span>{{ @$challenge->video_required == 1 ? 'Y' : 'N' }}
                                                    </span></p>

                                                <div class="challenge-date-box">
                                                    <p>Start date</p>
                                                    <span>{{ date('m/d/Y', strtotime($challenge->start_date)) }}</span>
                                                </div>
                                                <div class="challenge-date-box">
                                                    <p>End date </p>
                                                    <span>{{ date('m/d/Y', strtotime($challenge->end_date)) }}</span>
                                                </div>
                                            </div>
                                            @if ($challenge->challengeSponsorBy)
                                                <div class="cstm-sponsored-new">
                                                    <div class="sponsored-by-bx">
                                                        <label for="">Sponsored by:</label>
                                                        <input type="text"
                                                            value="{{ $challenge->challengeSponsorBy->sponsor_by }}"
                                                            readonly>
                                                    </div>
                                                    <img src="{{ Storage::url($challenge->challengeSponsorBy->banner_path) }}"
                                                        alt="">
                                                </div>
                                            @endif

                                        </div>
                                        <div class="challenge-details-img">
                                            @if ($challenge->selectedTarget)
                                                <img src="{{ Storage::url($challenge->selectedTarget->file_path) }}"
                                                    alt="img">
                                            @endif
                                            {{-- <img src="{{ asset('images/first-binner.png') }}"  alt=""> --}}
                                        </div>
                                    </div>

                                    {{-- <div class="challenge-date-box">
                                        <div class="challenge-personal-details">

                                            <div class="round-details-parent">
                                                @foreach ($challenge->challenge_round as $key => $round)
                                                    @if ($round->yards)
                                                        <div class="challenge-round-details">
                                                            <h4 class="challenge-round-number">Round {{ $key + 1 }}
                                                            </h4>

                                                            <div class="row">
                                                                @if ($round->yards)
                                                                    <div class="col-md-6">
                                                                        <div class="challenge-round-data full-width">
                                                                            <h4>Yards </h4>
                                                                            <span>{{ $round->yards ?? 'NA' }}</span>
                                                                        </div>
                                                                    </div>


                                                                    <div class="col-md-6">
                                                                        <div
                                                                            class="challenge-round-data justify-content-end">
                                                                            <h4>Re-load Required (y/n) </h4>
                                                                            <span>{{ $round->reload_required ? 'Yes' : 'No' }}</span>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                                @if ($round->shots)
                                                                    <div class="col-md-4">
                                                                        <div class="challenge-round-data">
                                                                            <h4>Shots</h4>
                                                                            <span>{{ $round->shots ?? 'NA' }}</span>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-4">
                                                                        <div
                                                                            class="challenge-round-data justify-content-end">
                                                                            <h4>Target Zone </h4>
                                                                            <span>{{ $round->target_zone ?? 'NA' }}</span>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-4">
                                                                        <div
                                                                            class="challenge-round-data justify-content-end">
                                                                            <h4>Hand (s/w) </h4>
                                                                            <span>{{ $round->hand ?? 'NA' }}</span>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                                @if ($round->shots2)
                                                                    <div class="col-md-4">
                                                                        <div class="challenge-round-data">
                                                                            <h4>Shots </h4>
                                                                            <span>{{ $round->shots2 ?? 'NA' }}</span>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-4">
                                                                        <div
                                                                            class="challenge-round-data justify-content-end">
                                                                            <h4>Target Zone </h4>
                                                                            <span>{{ $round->target_zone2 ?? 'NA' }}</span>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-4">
                                                                        <div
                                                                            class="challenge-round-data justify-content-end">
                                                                            <h4>Hand (s/w) </h4>
                                                                            <span>{{ $round->hand2 ?? 'NA' }}</span>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    </div> --}}

                                    <div class='challenge-list-box-distort-img'>
                                    <div class=" challenge-joined-parent">
                                        <p>Manage Leaderboard</p>
                                        <div class="challenge-joined-flex">
                                            <select name="division_pistol_gender" class="division_pistol_gender">
                                                <option value="">Select gender</option>
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                            </select>
                                            <select name="division_pistol_id" class="division_pistol_id">
                                                <option value="">Select pistol division</option>
                                                @inject('allDivisions', 'App\Models\Division')
                                                @foreach ($allDivisions->where('status', 1)->get() as $collection)
                                                    {{-- <option value="{{ $collection?->divisions?->id }}">{{ $collection?->divisions?->code }}</option> --}}
                                                    <option value="{{ $collection->id }}">{{ $collection->code }}</option>
                                                @endforeach
                                            </select>
                                            <a href="" data-challenge-id="{{ $challenge->id }}" type='button'
                                                class='division_joined_users_list'>View List</a>
                                        </div>
                                    </div>

                                    <div class="chalenge-del-btn-box">
                                        @if ($challenge->challengeSponsorBy)
                                            <a class="btn btn-primary confirm-delete" data-toggle="modal"
                                                href="{{ route('admin.challenge.sponsor.delete', ['challenge' => $challenge->id]) }}"
                                                type="button">Delete Sponsor</a>
                                        @endif
                                        <a type="button"
                                            href="{{ route('admin.challenge.view', ['challenge' => $challenge->id]) }}"
                                            class="btn btn-primary challenge-view">View</a>
                                        <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]) }}"
                                            delete-challenge-prize="{{ route('admin.challenge.prize.delete', ['challenge' => $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>
                            </div>
                        @empty
                            <p class="no-challange"> No challenges available</p>
                        @endforelse
                    </div>
                    {{ $challenges->appends(request()->input())->links() }}
                    {{-- <div class="row">
                        <div id='calendar'></div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
@endsection
@section('editcontent')
    @include('admin.challenge.add-challenge-popup')
    {{-- @include('admin.challenge.view-challenge-popup') --}}

    {{-- VIEW CHALLENGE DETAIL MODAL --}}
    <div class="modal  fade" id="viewChallengeModal" tabindex="-1" data-backdrop="static" role="dialog"
        aria-labelledby="formModal" aria-hidden="true">
        <div class="modal-dialog wide-modal" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="formModal">Challenge Detail</h5>
                    <button type="button" class="close popup-btn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body show-challenge-details">

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


    {{-- VIEW CHALLENGE JOINED USERS LISTING --}}
    <div class="modal  fade" id="challenge-joined-user-list" tabindex="-1" data-backdrop="static" role="dialog"
        aria-labelledby="formModal" aria-hidden="true">
        <div class="modal-dialog wide-modal" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="formModal">Users list</h5>
                    <button type="button" class="close popup-btn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body show-challenge-joined-users">

                </div>
            </div>
        </div>
    </div>
@endsection
{{-- @section('pagespecificscripts') --}}
@push('pagespecificscripts')
    {{-- <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
    <script>
        $(document).ready(function() {
            // Initialize FullCalendar
            $('#calendar').fullCalendar({
                // put your options and callbacks here
                displayEventTime: false,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                firstDay: 1,
                hiddenDays: [0],
                editable: true,
                events: [
                    @foreach ($challenges as $challenge)
                        {
                            title: 'Challenge Code: ({{ $challenge->challenge_code }})',
                            start: '{{ $challenge->start_date }}',
                            // end: '{{ $challenge->end_date }}',
                            description: `<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>`,
                            // color: '#6777ef',
                            // textColor: '#ffffff',
                            // deleteButton: `<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>`,

                        },
                    @endforeach
                ],
                eventRender: function(event, element) {
                    var titleElement = element.find('.fc-title');
                    var descriptionElement = $('<div>' + event.description + '</div>');
                    titleElement.after(descriptionElement);
                    // descriptionElement.after($('<div>' + event.deleteButton + '</div>'))
                },
                // eventClick: function(event, jsEvent, view) {
                //     alert('Event:' + event.title);
                // }
            });
        });
    </script> --}}

    <script>
        jQuery(document).ready(function() {
            //MODAL CSS 
            $('.modal-content').css({
                'max-height': '90vh',
                'overflow': 'auto'
            });

            function deleteChallengePrize(element){
                        //DELETING CHALLENGE PRIZE
                        jQuery(document).on('click', '#delete-challenge-prize',
                                    function(e) {
                                        e.preventDefault();
                                        console.log('kfalksdjfklsdj;')
                                        Swal.fire({
                                            title: "Are you sure?",
                                            text: "You won't be able to revert this!",
                                            icon: "warning",
                                            showCancelButton: true,
                                            confirmButtonColor: "#3085d6",
                                            cancelButtonColor: "#d33",
                                            confirmButtonText: "Yes, delete it!"
                                        }).then((result) => {
                                            if (result.isConfirmed) {

                                                jQuery('#delete-challenge-prize')
                                                    .addClass('d-none')
                                                jQuery('#show-challenge-prize-pdf')
                                                    .addClass('d-none')
                                      
                                                if (jQuery('#challenge_prize').get(0).files.length > 0) {
                                                    jQuery('#show-challenge-prize-pdf').addClass('d-none');
                                                    jQuery('#show_challenge_prize_name').text('Choose file');
                                                    return false;
                                                }
                                                
                                                jQuery('#challenge_prize').val('');

                                                let delete_prize_url = element.attr(
                                                    'delete-challenge-prize');
                                                let response = ajaxCall(
                                                    delete_prize_url, 'get');
                                                response.then((response) => {

                                                    if (response.status ==
                                                        true) {
                                                        jQuery(
                                                            '#show-challenge-prize-pdf'
                                                        ).addClass(
                                                            'd-none');
                                                        jQuery(
                                                                '#show_challenge_prize_name')
                                                            .text(
                                                                'Choose file'
                                                                );
                                                        Swal.fire({
                                                            title: "Deleted!",
                                                            text: response
                                                                .message,
                                                            icon: (response
                                                                .status ?
                                                                'success' :
                                                                'error'
                                                            )
                                                        });
                                                    } else {
                                                        Swal.fire({
                                                            title: "Error",
                                                            text: response
                                                                .message,
                                                            icon: (response
                                                                .status ?
                                                                'success' :
                                                                'error'
                                                            )
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                    })
            }

            // jQuery('#harvinder').html();
            // Store the initial form HTML to reset the form later
            let initialFormHtml = jQuery('#createChallengeForm').html();

            jQuery('.challenge-modal').click(function() {
                var element = jQuery(this);
                var insertHtml = initialFormHtml;
                var other = '';
                if ($(this).attr("href")) {
                    $.ajax({
                        type: 'post',
                        url: $(this).attr("href"),
                        success: function(result) {

                            deleteChallengePrize(element);

                            if (result.status) {
                                jQuery('#formModal').text('Update Challenge');
                                let updateUrl = element.data('url');
                                jQuery('#createChallengeForm').attr('action', updateUrl);

                                html = result.html;

                                //change submit button to update
                                jQuery('#createChallengeForm').find('button[type="submit"]')
                                    .text('Update');

                                //remove validation on edit
                                jQuery('.is-invalid').remove();
                                jQuery('input').removeClass('error-message');
                                jQuery('.invalid-feedback').remove();

                                //selected divisions dropdown starts
                                jQuery('#only-for-edit').attr('disabled', false);
                                jQuery('#only-for-edit').css('display', 'inline');


                                jQuery('#divisions_select').select2({
                                    placeholder: "Select Division",
                                })

                                //SHOWING CHALLENGE PRIZE
                                if (result.data.challenge_prize) {
                                    jQuery('#show-challenge-prize-pdf').removeClass('d-none');
                                    jQuery('#show_challenge_prize_name').text(result.data
                                        .challenge_prize.name);
                                    jQuery('#challenge_prize').text(result.data.challenge_prize
                                        .name);
                                    jQuery('#show-challenge-prize-pdf').find('.pdf-embed').attr(
                                        'src', APP_URL + '/storage/' + result.data
                                        .challenge_prize.path)
                                }


                                //for division gender 
                                // jQuery('#division_gender_select').select2({
                                //     placeholder: "Select Gender",
                                // })


                                // let selectedDivisionUrl = element.data('division-url');

                                // setDivisionOptions(selectedDivisionUrl)
                                //selected divisions dropdown ends


                                jQuery('#host_by_name').val(result.data.host_by_name);
                                other = result.data.other;

                                const startDate = result.data.start_date;
                                jQuery('#start_date').val(startDate);

                                const endDate = result.data.end_date;
                                jQuery('#end_date').val(endDate);

                                jQuery('#check_file_upload').prop('checked', result.data
                                    .file_status)

                                //show checked if image and video are required
                                jQuery('#check_image').prop('checked', result.data
                                    .image_required)
                                jQuery('#check_video').prop('checked', result.data
                                    .video_required)

                                jQuery('#divisions_select').select2({
                                    placeholder: "Select divisions",
                                });

                                let selectedUrlRules = element.data('selected');
                                let selectedUrlTarget = element.data('target-url');

                                // setRulesOptions(selectedUrlRules);
                                setTargetZoneOptions(selectedUrlTarget);

                                setRulesOptions(selectedUrlRules);

                                //SHOWING SPONSOR DATA 
                                if (result.data.sponsor_data) {
                                    jQuery('#sponsor_by').val(result.data.sponsor_data ? result
                                        .data
                                        .sponsor_data.sponsor_by : '');
                                    jQuery('#amount_paid').val(result.data.sponsor_data ?
                                        result.data.sponsor_data
                                        .amount_paid : '');
                                    jQuery('#show-sponsor-banner').removeClass('d-none');
                                    jQuery('#show-sponsor-banner').attr('src', result.data
                                        .sponsor_data ? (APP_URL +
                                            '/storage/' + result.data.sponsor_data
                                            .banner_path
                                        ) : '')

                                    jQuery('#show_sponsor_name').text(result.data.sponsor_data
                                        .banner_name)
                                }


                                //CHALLENGE RULES PREVIEW 
                                if (result.data.challenge_rules_url) {
                                    jQuery('#challenge-rules-preview').attr('src', result.data
                                        .challenge_rules_url);
                                    jQuery('#challenge-rules-preview').removeClass('d-none');
                                } else {
                                    jQuery('#challenge-rules-preview').addClass('d-none');
                                }

                                //CHALLENGE TARGET PREVIEW 
                                if (result.data.challenge_target_url) {
                                    jQuery('#target-preview').attr('src', result.data
                                        .challenge_target_url);
                                    jQuery('#target-preview').removeClass('d-none');;
                                } else {
                                    jQuery('#target-preview').addClass('d-none');
                                }

                                jQuery('.rounds-parent').html(html);

                                //updating background of selected options
                                let allSelectedZones = getSelectedZones();
                                updatingDropdown('target-zone-disable-c' , 'custom-select-box-option' , allSelectedZones)
                            } else {
                                iziToast.error({
                                    title: 'Error',
                                    message: response.message,
                                    position: 'topRight'
                                });
                            }
                        },
                        async: false
                    });
                    $("#createChallengeModal").modal("show");
                }

                //insert challenge round html
                // $(".rounds-parent").html(html);

                //clear input field of rounds on clear contents when event is updated
                jQuery('.clear_this_round').click(function() {
                    let clearButton = jQuery(this).closest('.round-detail-each');
                    clearButton.find('input').val(' ');
                    clearButton.find('select').prop('selectedIndex', 0);
                })

                //hide add more round buttons when four rounds are present
                if ($('.round-remove').length >= 4) {
                    $('.add-round').parent().addClass('d-none');
                }

            });

            //remove single round html
            jQuery(document).on("click", '.remove_this_round', function() {
                var removelength = $('.remove_this_round_parent').length
                if (removelength <= 3) {
                    $(document).find('.add-round').removeClass('d-none');
                }
                $(this).closest('.round-remove').remove();

                // hide remove round anchor when only when round is remaining
                if ($('.round-remove').length === 1) {
                    jQuery('.remove_this_round').addClass('d-none');
                }

                // show add more round anchor when 3 or less rounds are remaining
                if ($('.round-remove').length < 4) {
                    jQuery('.add-round').parent().removeClass('d-none');
                }

                // $(this).parent().parent().prev().remove();
                // // $(this).parent().remove();
            });

            //create challenge modal ( reset modal form field )
            jQuery('.create-challenge').click(function(e) {
                e.preventDefault();
                let createUrl = "{{ route('admin.challenge.add') }}"
                jQuery('#createChallengeForm').attr('action', createUrl);
                // Reset the form HTML to the initial state
                jQuery('#createChallengeForm').html(initialFormHtml);
                jQuery('#formModal').text('Create Challenge');
                jQuery('#host_by_name').val('');
                jQuery('#upload_target').val(null);
                jQuery('.parent-media').remove();
                // jQuery('#check_file_upload').prop('checked', false);
                jQuery('#check_image').prop('checked', false)
                jQuery('#check_video').prop('checked', false)

                // show only one round when create button is clicked
                jQuery('#divisions_select').select2({
                    placeholder: "Select divisions",
                });

                //for division gender 
                // jQuery('#division_gender_select').select2({
                //     placeholder: "Select Gender",
                // })

                // jQuery('#additional_rules_select').select2({
                //     placeholder: "Select additional rules",
                // });
                // jQuery('#select_targets').select2({
                //     placeholder: "Select target zone",
                // });
                setRulesOptions();
                // setDivisionOptions();

                setTargetZoneOptions()

                //ADD REQUIRED VALIDATION RULES
                jQuery('#upload_target').addClass('required');
                jQuery('#upload_rules').addClass('required');

                // reset round fields data
                let roundElem = jQuery('.round-detail-each');
                roundElem.find('input').val(' ');
                roundElem.find('select').prop('selectedIndex', 0);

                // 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);
                });

                //SHOW MODAL
                jQuery('#createChallengeModal').modal('show');
            });



            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.closest('.parent-media').prev().find('input').addClass('required');
                        element.parent().remove();
                    }
                })
            })

            function setRulesOptions(url = null) {
                if (url) {
                    let selectedRulesUrl = url;
                    let selectedRules = ajaxCall(selectedRulesUrl, 'get');
                    selectedRules.then(function(response) {
                        let allRules = response.all;
                        let selectedRules = response.selected;
                        let ruleOptions = jQuery(response.all).map(function(index, value) {
                            return `<option data-value='${value.id}' value='${value.id}' data-url="${value.file_path}">${value.name}</option>`;
                        });
                        var html = `<option data-value='' value=''>Select Challenge Rule</option>`;
                        jQuery.each(ruleOptions, function(index, value) {
                            html += value;
                        })
                        jQuery('#additional_rules_select').html(html);
                        $('#additional_rules_select').val(selectedRules);
                    })
                } else {
                    let rulesUrl = "{{ route('admin.challenge.getRules') }}";

                    let allRulesUrl = ajaxCall(rulesUrl, 'get');
                    allRulesUrl.then(function(response) {
                        let allRules = response.all;
                        let ruleOptions = jQuery(response.all).map(function(index, value) {
                            return `<option data-value='${value.id}' data-url="${value.file_path}" value='${value.id}' >${value.name}</option>`;
                        });
                        var html = `<option data-value='' value=''>Select Challenge Rule</option>`;
                        jQuery.each(ruleOptions, function(index, value) {
                            html += value;
                        })
                        jQuery('#additional_rules_select').html(html);
                    })
                }
            }

            function setTargetZoneOptions(url = null) {
                if (url) {
                    let selectedTargetsUrl = url;
                    let selectedTargets = ajaxCall(selectedTargetsUrl, 'get');
                    selectedTargets.then(function(response) {
                        let selectedTargets = response.selected;
                        let targetOptions = jQuery(response.all).map(function(index, value) {
                            return `<option data-value='${value.id}' data-url="${value.file_path}" value='${value.id}' >${value.name}</option>`;
                        });
                        var html = `<option data-value='' value=''>Select Target</option>`;
                        jQuery.each(targetOptions, function(index, value) {
                            html += value;
                        })
                        jQuery('#select_targets').html(html);
                        // jQuery('#select_targets').val(selectedTargets.id);

                        jQuery('#select_targets').find('option[value="' + selectedTargets.id + '"]').attr(
                            'selected', selectedTargets.id);

                        // $('#select_targets').val(selectedTargets).trigger('change');
                    })
                } else {
                    let targetsUrl = "{{ route('admin.target.fetchTargets') }}";

                    let allTargets = ajaxCall(targetsUrl, 'get');
                    allTargets.then(function(response) {
                        let allTargets = response.all;

                        let targetOptions = jQuery(response.all).map(function(index, value) {
                            return `<option data-value='${value.id}' value='${value.id}' data-url="${value.file_path}">${value.name}</option>`;
                        });
                        var html = `<option data-value='' value=''>Select Target</option>`;
                        jQuery.each(targetOptions, function(index, value) {
                            html += value;
                        })
                        jQuery('#select_targets').html(html);
                    })
                }
            }

            function setDivisionOptions(url = null) {
                if (url) {
                    let selectedDivisionsUrl = url;
                    let selectedDivisions = ajaxCall(selectedDivisionsUrl, 'get');

                    selectedDivisions.then(function(response) {
                        let allDivisions = response.all;
                        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('#divisions_select').html(html);
                        $('#divisions_select').val(selectedIds).trigger('change');


                        //for division gender 
                        let divisionHtml = `<option value=''>Select gender</option>
                                            <option value='male'>Male</option>
                                            <option value='female'>Female</option>`;

                        let selectedDivisionType = selectedDivisions.map(function(collection) {
                            return collection.division_type === 'both' ? ['male', 'female'] : [
                                collection.division_type
                            ];
                        }).flat(); // Flatten the array to avoid nested arrays


                        jQuery('#division_gender_select').html(divisionHtml);
                        $('#division_gender_select').val(selectedDivisionType).trigger('change');
                    })
                } else {
                    let targetsUrl = "{{ route('admin.division.fetchAllDivision') }}";
                    let allDivisions = ajaxCall(targetsUrl, 'get');
                    allDivisions.then(function(response) {
                        let allDivisions = response.all;
                        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;
                        })
                        jQuery('#divisions_select').html(html);

                        //for division gender 
                        let divisionHtml = `<option value=''>Select gender</option>
                                            <option value='male'>Male</option>
                                            <option value='female'>Female</option>`;
                        jQuery('#division_gender_select').html(divisionHtml)
                    })
                }
            }

            //CODE FOR SELECTING DATES WHEN MODAL OPEN
            $(document).on('shown.bs.modal', '#createChallengeModal', function() {
                function showDatePicker(input) {
                    $(input).datepicker('show');
                }
                $(document).find('input[id="start_date"]').datepicker({
                    format: 'mm/dd/yyyy',
                    autoclose: true,
                    todayHighlight: true,
                }).on('changeDate', function(e) {
                    var startDate = new Date(e.date);
                    var endDate = new Date(startDate);
                    endDate.setDate(startDate.getDate() + 6);
                    $(document).find('input[id="end_date"]').datepicker('setDate', endDate);
                });

                $(document).find('input[id="end_date"]').datepicker({
                    format: 'mm/dd/yyyy',
                    autoclose: true,
                    todayHighlight: true,
                });
                $(document).find('input[id="end_date"]').datepicker({
                    format: 'mm/dd/yyyy',
                    autoclose: true,
                    todayHighlight: true,
                });

                $(document).on('click', '.calender-new-icon', function() {
                    var inputField = $(this).siblings('input[type="text"]');
                    // var inputField = $(this).siblings('.date-picker');
                    showDatePicker(inputField);
                });
            });

            //FOR TARGET UPLOADING IMAGE
            $(document).on('click', '#sponsor_banner', function(event) {
                // const file = event.target.files[0];

                // // Validate if a file is selected and is an image
                // if (file) {
                //SHOWING SPONSOR BANNER 
                handleImageCropping("sponsor_banner", "sponsor_basefile", "show-sponsor-banner",
                    '/images/official-target-img.png', 'image-cropper-target-modal', 'crop-target',
                    'cropped-image-target', 'cropped-preview-target', 'sponsor_banner');

                jQuery('#show_sponsor_name').text(event.target.files[0]?.name)
                // }
                // else {
                //      $('#preview').attr('src', ''); // Clear the preview if no file is selected
                //  }
            });

            $(document).on('change', '#sponsor_banner', function(event) {
                jQuery('#show_sponsor_name').text(event.target.files[0]?.name)
            });

            //SHOWING PDF PREVIEW
            // $(document).on('change' ,'#upload_rules', function(event) {
            //     let inputElement = jQuery(this);
            //     var file = event.target.files[0]; // Get the selected file

            //     //PREVIEW ELEMENT
            //     let preveiwElement = $(document).find('.show-rules-pdf');
            //     if (file) {
            //         var fileReader = new FileReader();
            //         fileReader.onload = function(e) {
            //             var pdfDataUrl = e.target.result; // PDF file data URL

            //             preveiwElement.attr('src', pdfDataUrl); // Set the iframe src
            //             preveiwElement.removeClass('d-none');

            //             preveiwElement.next().removeClass('d-none');
            //             preveiwElement.show(); // Show the iframe

            //         };
            //         fileReader.readAsDataURL(file); // Read the file as a data URL
            //     } else {
            //         preveiwElement.addClass('d-none');
            //         preveiwElement.hide(); // Hide iframe if invalid file
            //         preveiwElement.next().addClass('d-none');
            //     }
            // });

            //VIEW CHALLENGE DATA
            jQuery('.challenge-view').click(function(e) {
                e.preventDefault();

                let url = jQuery(this).attr('href');
                let response = ajaxCall(url, 'get');
                response.then((result => {
                    if (result.status === true) {
                        jQuery('.show-challenge-details').html(result.html);
                    }
                    jQuery('#viewChallengeModal').modal('show');
                }));

            });

            //DELETE SCORE 
            jQuery(document).on('click', '.delete-score-challenge', function(e) {
                e.preventDefault();
                let anchorElement = jQuery(this);
                let ajaxUrl = jQuery(this).attr('href');
                // let response = ajaxCall(url , 'get');

                $.ajax({
                    url: ajaxUrl, // The URL to send the data to
                    type: 'get', // The HTTP method
                    success: function(response) {
                        if (response.status === true) {
                            if (jQuery(document).find('.challenge-user-row').length == 1) {
                                anchorElement.closest('.challenge-user-row').find('td')
                                    .remove();
                                jQuery(document).find('.challenge-user-row').html(
                                    '<td><center>No data found</center></td>')
                            } else {
                                anchorElement.closest('.challenge-user-row').remove();
                            }
                            iziToast.success({
                                title: 'Success',
                                message: response.message,
                                position: 'topRight'
                            });
                        } else {
                            iziToast.error({
                                title: 'Error',
                                message: response.message,
                                position: 'topRight'
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle any errors that occurred during the request
                        $('#response').html('Error: ' + error);
                    }
                });
            });


            //SHOWING CHALLENGE JOINED LIST 
            jQuery('.division_joined_users_list').click(function(e) {
                e.preventDefault();
                let currentViewElement = jQuery(this);
                let parentElement = currentViewElement.closest('.challenge-joined-parent');
                let division = parentElement.find('.division_pistol_id').val();
                let division_type = parentElement.find('.division_pistol_gender').val();
                if (division === '' || division_type === '') {
                    iziToast.error({
                        title: 'Error',
                        message: 'Please select division and gender',
                        position: 'topRight'
                    });
                }
                let challenge = currentViewElement.attr('data-challenge-id');
                let url = `${APP_URL}/admin/challenge/users/list/${challenge}/${division}/${division_type}`;

                let response = ajaxCall(url, 'get');
                response.then((response) => {
                    if (response.status === true) {
                        jQuery('.show-challenge-joined-users').html(response.html);
                        jQuery('#challenge-joined-user-list').modal('show');
                    } else {
                        iziToast.error({
                            title: 'Error',
                            message: response.message,
                            position: 'topRight'
                        });
                    }
                });
            });

            function getSelectedZones() {
                 return jQuery('.target-zone-disable-c')
                     .map(function() {
                         let value = jQuery(this).val();
                         return value && value !== '0' ? parseInt(value) : null;
                     })
                     .get()
                     .filter(Boolean);
             }

            //updating background of selected options
            let allSelectedZones = getSelectedZones();
            updatingDropdown('target-zone-disable-c' , 'custom-select-box-option' , allSelectedZones)

        });
    </script>
@endpush

{{-- @endsection --}}