@extends('layouts.admin')
@section('content')
    <section class="dashboard-sec">
        <div class="dashboard-wrapper">
            <div class="dashboard-content-wrapper p-5">
                <section class="section">
                    <div class="section-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-12">
                                <div class="card">
                                    <div class='ajax-response'></div>
                                    {{-- <x-alert /> --}}
                                    <div class="card-header">
                                        <h4>Update Event</h4>
                                        <div class="card-header-form">
                                            <a class="btn btn-primary btn-lg float-end"
                                                href="{{ url()->previous() }}">Back</a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form
                                            action="{{ route('admin.member.eventStore', ['eventId' => $event ? jsencode_userdata($event->id) : null]) }}"
                                            id="eventForm" method='POST' enctype="multipart/form-data"
                                            data-event="{{ $event ? true : false }}">
                                            @csrf
                                            <div class="form-row form-cstm">
                                                @php
                                                    $bothRole = $event->user->hasRole(['Member', 'Host'])
                                                        ? true
                                                        : false;
                                                    $profile = $bothRole
                                                        ? $event->user->hostProfile->profile_pic_path
                                                        : $event->user->user_details->profile_pic_path;
                                                @endphp
                                                <div class="form-group col-md-12">
                                                    <label>Host Logo<span class="required-field">*</span></label>
                                                    <div class="formfield kuch-bhi">
                                                        <img src="{{ $event->eventLogo && $event->eventLogo->first() ? Storage::url($event->eventLogo->first()->path) : asset('images/profile-upload1.png') }}"
                                                            class="target-img-uploaded" id="preview-logo" width="258px"
                                                            height="245px">
                                                        <input type="file" name="upload_logo"
                                                            accept="image/png, image/gif, image/jpeg" id="upload-logo"
                                                            class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Event Code <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text"
                                                            class="form-control @error('event_code') is-invalid @enderror"
                                                            placeholder="Event Code" name="event_code" id="event_code"
                                                            value="{{ $event ? $event->event_code : old('event_code') }}"
                                                            readonly />
                                                        @error('event_code')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Event Name <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text"
                                                            class="form-control @error('event_name') is-invalid @enderror"
                                                            placeholder="Event Name" name="event_name" id="event_name"
                                                            value="{{ $event ? $event->event_name : old('event_name') }}" />
                                                        @error('event_name')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Hosted By <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text"
                                                            class="form-control @error('host_by_name') is-invalid @enderror"
                                                            placeholder="Hosted By" name="host_by_name" id="host_by_name"
                                                            value="{{ $event ? $event->hosted_by : old('host_by_name') }}" />
                                                        @error('host_by_name')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Event Fee <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="number" step='any'
                                                            class="form-control @error('event_fee') is-invalid @enderror"
                                                            placeholder="Event Fee" name="event_fee" id="event_fee"
                                                            value="{{ $event ? $event->event_fee : old('event_fee') }}" />
                                                        @error('event_fee')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Start Date <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text" name="start_date" id="start-date"
                                                            placeholder="Select start date"
                                                            class="form-control date-picker @error('start_date') is-invalid @enderror"
                                                            readonly
                                                            value="{{ old('start_date', $event && $event->start_date ? $event->start_date->format('m/d/Y') : '') }}">
                                                        @error('start_date')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>End Date <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text" name="end_date" id="end-date"
                                                            placeholder="Select end date"
                                                            class="form-control date-picker @error('end_date') is-invalid @enderror"
                                                            readonly
                                                            value="{{ old('end_date', $event && $event->end_date ? $event->end_date->format('m/d/Y') : '') }}">
                                                        @error('end_date')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                @php
                                                    $rounds = $event->event_rounds;
                                                    $noOfRounds = $rounds->count();
                                                @endphp
                                                <div class="form-group col-md-12">
                                                    @include('include.rounds', [
                                                        'create' => false,
                                                        'roundDetailsShown' => true,
                                                    ])
                                                    @for ($key = 0; $key < config('validation.max-round-for-host') - $noOfRounds; $key++)
                                                        <div class='parent-round-challenge-box'>
                                                            @include('include.add-default-round', [
                                                                'round_no' => $noOfRounds + $key + 1,
                                                                'newKey' => $noOfRounds + $key,
                                                            ])
                                                        </div>
                                                    @endfor
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <h5>Divisions</h5>
                                                </div>
                                                {{-- @php
                                                    $challengeCompatibles = $event
                                                        ? $event->challenge_compatibles
                                                        : null;
                                                @endphp
                                                @if (!$challengeCompatibles)
                                                    <div class="form-group col-md-12">
                                                        <div class="formfield">
                                                            <p>No divisions found.</p>
                                                        </div>
                                                    </div>
                                                @else
                                                    @foreach ($challengeCompatibles as $challengeCompatible)
                                                        <div class="form-group col-md-4">
                                                            <label>Division Code <span
                                                                    class="required-field">*</span></label>
                                                            <div class="formfield">
                                                                <input type="text"
                                                                    class="form-control @error('division_code') is-invalid @enderror"
                                                                    placeholder="Event Fee" name="division_code"
                                                                    id="division_code"
                                                                    value="{{ $event ? optional($challengeCompatible->divisions)->code : old('division_code') }}" />
                                                                @error('division_code')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-md-8">
                                                            <label>Division Name <span
                                                                    class="required-field">*</span></label>
                                                            <div class="formfield">
                                                                <input type="text"
                                                                    class="form-control @error('division_name') is-invalid @enderror"
                                                                    placeholder="Event Fee" name="division_name"
                                                                    id="division_name"
                                                                    value="{{ $event ? optional($challengeCompatible->divisions)->name : old('division_name') }}" />
                                                                @error('division_name')
                                                                    <span class="invalid-feedback" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endif --}}

                                                <div class="form-group col-md-4">
                                                    <label>Division Code <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text" class="form-control" name="division_code"
                                                            id="division-code">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-5">
                                                    <label>Division Name <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <input type="text" class="form-control" name="division_name"
                                                            id="division-name">
                                                        <input type="hidden" name="division_token_id"
                                                            id="division_token_id" value="{{ str()->random(8) }}">
                                                        <input type="hidden" name="user_id" id="user_id"
                                                            value="{{ $event ? jsencode_userdata($event->user->id) : null }}">
                                                    </div>
                                                </div>

                                                
                                                
                                                @php
                                                    $eventDivisionType = @$event->challenge_compatibles->first()->division_type;
                                                @endphp
                                                <div class="form-group col-md-1">
                                                    <label>Male</label>
                                                    <div class="formfield">
                                                        <label class='check-img'>
                                                            <input type="checkbox" class="custom-switch-input"
                                                                name="male" id="male" @if(in_array($eventDivisionType, ['male' , 'both'])) checked @endif>
                                                            <span class="custom-switch-indicator"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-1">
                                                    <label>Female</label>
                                                    <div class="formfield">
                                                        <label class='check-img'>
                                                            <input type="checkbox" class="custom-switch-input"
                                                                name="female" id="female" @if(in_array($eventDivisionType, ['female' , 'both'])) checked @endif>
                                                            <span class="custom-switch-indicator"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-1">
                                                    <div class="formfield">
                                                        <button class="btn btn-primary form-control"
                                                            id="add-division-btn">
                                                            <i class="fa-solid fa-plus"></i>
                                                            <div class="spinner-border d-none" role="status">
                                                                <span class="sr-only">Loading...</span>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>

                                                <ul id="eventList" class="list-unstyled">
                                                    @php
                                                        $divisions = $event ? $event->user->directDivisions : null;
                                                    @endphp
                                                    @if ($divisions->count() > 0)
                                                        @foreach ($divisions as $index => $division)
                                                            @php
                                                                $eventDivisionIds = $event
                                                                    ? $event
                                                                        ->challenge_compatibles()
                                                                        ->pluck('division_id')
                                                                        ->unique()
                                                                        ->toArray()
                                                                    : null;
                                                            @endphp
                                                            <li class="row mb-3">
                                                                <div class="form-group col-md-4">
                                                                    <div class="formfield">
                                                                        <input type="text" class="form-control"
                                                                            value="{{ ++$index }}" readonly>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group col-md-3">
                                                                    <div class="formfield">
                                                                        <input type="text"
                                                                            class="form-control divison-data"
                                                                            data-division-id="{{ $division->id }}"
                                                                            value="{{ $division->code ?? '' }}">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group col-md-4">
                                                                    <div class="formfield">
                                                                        <input type="text"
                                                                            class="form-control divison-data"
                                                                            data-division-id="{{ $division->id }}"
                                                                            value="{{ $division->name ?? '' }}">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group col-md-1"
                                                                    style="margin-top: 10px;display: flex; justify-content: center; gap: 20px;">
                                                                    <div class="formfield">
                                                                        <a href="#"
                                                                            class="division-group-btn del-division-btn"
                                                                            data-division-id="{{ $division->id }}">
                                                                            <div class="spinner-border d-none"
                                                                                role="status">
                                                                                <span class="sr-only">Loading...</span>
                                                                            </div>
                                                                            <i class="fa-solid fa-trash-can"></i>
                                                                        </a>
                                                                    </div>
                                                                    <div class="formfield">
                                                                        <input type="checkbox" name='divisions[]'
                                                                            class="form-control"
                                                                            value="{{ jsencode_userdata($division->id) }}"
                                                                            {{ $event ? (in_array($division->id, $eventDivisionIds) ? 'checked' : '') : '' }}>
                                                                    </div>
                                                                </div>
                                                                <!-- <div class="form-group col-md-1" style="margin-top: 10px;">
                                                                                                
                                                                                            </div> -->
                                                            </li>
                                                        @endforeach
                                                    @else
                                                        <li>
                                                            <div class="division-group-code">
                                                                <div class="no-divisions-txt">
                                                                    <h4>No divisions found.</h4>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endif
                                                </ul>



                                                <div class="form-group col-md-12">
                                                    <h5>Event Documents</h5>
                                                </div>
                                                <div class="form-group col-md-6 col-lg-9">
                                                    <label>Event Description <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <label for="event_description" class='form-control'>{{ $event?->pdfFile('event_description')?->name ?? 'No file chosen' }}</label>
                                                        <input type="file" name="event_description"
                                                            class="form-control d-none" id="event_description"
                                                            accept="application/pdf">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6 col-lg-3">
                                                    <div class="formfield">
                                                        <button
                                                            class="form-control btn btn-secondary show-event-description"
                                                            id="desc-btn" type='button' style="margin-top: 28px;">Click
                                                            To
                                                            View</button>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6 col-lg-9">
                                                    <label>Event Rules <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <label for="event_rules" class='form-control'>{{ $event?->pdfFile('event_rules')?->name ?? 'No file chosen' }}</label>
                                                        <input type="file" name="event_rules" class="form-control d-none"
                                                            id="event_rules" accept="application/pdf">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6 col-lg-3">
                                                    <div class="formfield">
                                                        <button class="form-control btn btn-secondary show-event-rules"
                                                            type='button' style="margin-top: 28px;">Click To
                                                            View</button>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6 col-lg-9">
                                                    <label>Event Prize <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <label for="event_prize" class='form-control'>{{ $event?->pdfFile('event_prize')?->name ?? 'No file chosen' }}</label>
                                                        <input type="file" name="event_prize" class="form-control d-none"
                                                            id="event_prize" accept="application/pdf">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6 col-lg-3">
                                                    <div class="formfield">
                                                        <button class="form-control btn btn-secondary show-event-prize"
                                                            type='button' style="margin-top: 28px;">Click To
                                                            View</button>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-3">
                                                    <label>Promote Event on RAF Web/app<span
                                                            class="required-field">*</span></label>
                                                    <input type="hidden" name="promote_event" value="0">
                                                    <label class='check-img'>
                                                        <input type="checkbox" class="custom-switch-input"
                                                            name="promote_event" id="promote_event" value="1"
                                                            {{ $event && $event->promote_event ? 'checked' : '' }}>
                                                        <span class="custom-switch-indicator"></span>
                                                    </label>
                                                </div>
                                                <div class="form-group col-md-3">
                                                    <label for="video_required">Video Required<span
                                                            class="required-field">*</span></label>
                                                    {{-- <label class='check-img'>
                                                        <input type="checkbox" class="custom-switch-input"
                                                            name="video_required" id="video_required" value="1"
                                                            {{ $event && $event->video_required ? 'checked' : '' }}>
                                                        <span class="custom-switch-indicator"></span>
                                                    </label> --}}
                                                    <input type="hidden" name="video_required" value="0">
                                                    <label class='check-img'>
                                                        <input type="checkbox" class="custom-switch-input"
                                                            name="video_required" id="video_required" value="1"
                                                            {{ isset($event) && $event->video_required ? 'checked' : '' }}>
                                                        <span class="custom-switch-indicator"></span>
                                                    </label>
                                                </div>
                                                <div class="form-group col-md-3">
                                                    <label>Target Photo Required<span
                                                            class="required-field">*</span></label>
                                                    <input type="hidden" name="image_required" value="0">
                                                    <label class='check-img'>
                                                        <input type="checkbox" class="custom-switch-input"
                                                            name="image_required" id="image_required" value="1"
                                                            {{ $event && $event->image_required ? 'checked' : '' }}>
                                                        <span class="custom-switch-indicator"></span>
                                                    </label>
                                                </div>
                                                <div class="form-group col-md-3">
                                                    <label for="multiple_attempts">Multiple Attempts<span
                                                            class="required-field">*</span></label>
                                                    <input type="hidden" name="multiple_attempts" value="0">
                                                    <label class='check-img'>
                                                        <input type="checkbox" class="custom-switch-input"
                                                            name="multiple_attempts" id="multiple_attempts"
                                                            value="1"
                                                            {{ isset($event) && $event->multiple_attempts ? 'checked' : '' }}>
                                                        <span class="custom-switch-indicator"></span>
                                                    </label>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <div class="formfield event-detail-video">
                                                        <video id='show-video-preview' class='object-contain'
                                                            src="{{ $event ? '/storage/' . optional($event->eventVideo()->first())->path : '' }}"
                                                            controls></video>
                                                        <label for="upload-video-file" class="form-control">{{ $event?->eventVideo()?->first()?->name ?? 'No file chosen' }}</label>
                                                        <input type="file" id="upload-video-file" name="upload_video"
                                                            class="form-control d-none" accept="video/*">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <div class="formfield event-detail-photo">
                                                        <img src="{{ '/storage/' . optional($event->eventTarget()->first())->path }}"
                                                            class="target-img-uploaded" id="target-img-preview"
                                                            width="200" height="300">
                                                        <label for="upload-target-file" class='form-control'>{{ $event?->eventTarget()?->first()?->name ?? 'No file choses' }}</label>
                                                        <input type="file" id="upload-target-file"
                                                            name="upload_target"
                                                            accept=" image/png, image/gif, image/jpeg"
                                                            class="form-control d-none">
                                                        <input type="hidden" name='target_basefile'
                                                            id='target_basefile'>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="btn-box-end">
                                                <button class="btn btn-primary mr-1" type="submit"
                                                    id="submit">{{ $event ? 'Update' : 'Submit' }}
                                                    <div class="spinner-border d-none" role="status">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
    </section>
    </div>
    </section>
@endsection
@section('editcontent')
    @include('admin.event.event-docs-popup')


    {{-- SHOW EVENT DOCUMENTS --}}
    @include('host.event-new-flow.modal.comon-modal')

    {{-- TARGET IMAGE CROPPER MODAL  --}}
    {{-- @include('host.event-new-flow.modal.image-cropper') --}}

    @include('host.event-new-flow.modal.image-cropper-target')
    
@endsection

@push('pagespecificscripts')
    @includeFirst(['validation'])
    @include('validations.js_event_new')
    <script>
        // errorShow Popup
        function errorShow(title, text, confirmButtonText) {
            Swal.fire({
                title: title,
                text: text,
                icon: 'error',
                confirmButtonColor: "#3085d6",
                confirmButtonText: confirmButtonText || "OK"
            });
        }
        //show btn loader
        function showBtnLoader(element) {
            jQuery(element).children('.spinner-border').removeClass('d-none')
            jQuery(element).attr('disabled', true)
        }

        //hide btn loader
        function hideBtnLoader(element) {
            jQuery(element).children('.spinner-border').addClass('d-none')
            jQuery(element).attr('disabled', false)
        }

        // show profile image preview

        // const existingPic =
        //     "{{ $event ? '/storage/' . optional($event->eventLogo()->first())->path : asset('images/profile-upload1.png') }}";
        // const input = document.getElementById('upload-logo');
        // const previewPhoto = () => {
        //     const file = input.files;
        //     if (file) {
        //         const fileReader = new FileReader();
        //         const preview = document.getElementById('preview-logo');
        //         const fileSize = file[0].size;
        //         const maxSize = 2 * 1024 * 1024;

        //         if (fileSize > maxSize) {
        //             errorShow('Error', 'File size exceeds the maximum limit of 2MB.', 'Try again');
        //             preview.setAttribute('src', existingPic);
        //             return;
        //         }
        //         // check format
        //         const allowedFormats = ['image/jpeg', 'image/png', 'image/jpg'];
        //         if (!allowedFormats.includes(file[0].type)) {
        //             errorShow('Error', 'Invalid file format. Please upload a JPEG, JPG or PNG image.', 'Try again');
        //             preview.setAttribute('src', existingPic);
        //             return;
        //         }
        //         fileReader.onload = function(event) {
        //             preview.setAttribute('src', event.target.result);
        //         }
        //         fileReader.readAsDataURL(file[0]);
        //     }
        // }
        // input.addEventListener("change", previewPhoto);


        function showUploadedImagePreview(input, existingPic, previewImgId) {
            const previewPhoto = () => {
                const file = input.files;
                if (file) {
                    const fileReader = new FileReader();
                    const preview = document.getElementById(previewImgId);
                    const fileSize = file[0].size;
                    const maxSize = target_file_size;

                    if (fileSize > maxSize) {
                        errorShow('Error', 'File size exceeds the maximum limit of 5MB.', 'Try again');
                        preview.setAttribute('src', existingPic);
                        return;
                    }
                    // check format
                    const allowedFormats = ['image/jpeg', 'image/png', 'image/jpg'];
                    if (!allowedFormats.includes(file[0].type)) {
                        errorShow('Error', 'Invalid file format. Please upload a JPEG, JPG or PNG image.', 'Try again');
                        preview.setAttribute('src', existingPic);
                        return;
                    }
                    fileReader.onload = function(event) {
                        preview.setAttribute('src', event.target.result);
                    }
                    fileReader.readAsDataURL(file[0]);
                }
            }
            input.addEventListener("change", previewPhoto);
        }

        let existingLogoPic =
            "{{ $event ? '/storage/' . optional($event->eventLogo()->first())->path : asset('images/profile-upload1.png') }}";
        let logoInput = document.getElementById('upload-logo');
        showUploadedImagePreview(logoInput, existingLogoPic, 'preview-logo');

        let existingTargetPic =
            "{{ '/storage/' . optional($event->eventTarget()->first())->path }}";
        let targetInput = document.getElementById('upload-target-file');
        // showUploadedImagePreview(targetInput, existingTargetPic, 'target-img-preview');


        // handling upload video fiel
        jQuery('#upload-video-file').change(function(e) {
            showBtnLoader(jQuery(this));

            const file = e.target.files[0];
            if (jQuery(this)[0].files.length > 0) {

                const fileSizeMB = file.size ;
                if (fileSizeMB > video_size) {
                    errorShow('Error', 'File size exceeds the limit of 75MB', 'Try again');
                    this.value = '';
                    hideBtnLoader(jQuery(this));
                    return;
                }
                //show image that image is successfully uploaded
                const videoURL = URL.createObjectURL(file);

                //show video
                jQuery('#video-upload').addClass('d-none');
                jQuery('#show-video-preview').removeClass('d-none');
                jQuery('#show-video-preview').attr('src', videoURL).show();

                //hide image  upload the video
                jQuery(this).addClass('d-none');
                jQuery('#title-video').addClass('d-none');

                //show reset button
                jQuery(this).parent().find('button').removeClass('d-none');
            }

            hideBtnLoader(jQuery(this));
        });
    </script>
    <script>
        jQuery(document).ready(function() {
            // $('#start-date').datepicker({
            //     format: 'mm/dd/yyyy',
            //     autoclose: true,
            //     todayHighlight: true,
            // });

            // $('#end-date').datepicker({
            //     format: 'mm/dd/yyyy',
            //     autoclose: true,
            //     todayHighlight: true,
            // });

            function showEventDocData(btnId, modalTitle, inputId) {
                $(btnId).click(function(e) {
                    e.preventDefault();
                    $('.modal-title').text(modalTitle);
                    $('#modal-content').html($(inputId).val());
                });
            }

            showEventDocData('#desc-btn', 'Event Description', '#event_description_doc');
            showEventDocData('#rules-btn', 'Event Rules', '#event_rules_doc');
            showEventDocData('#prize-btn', 'Event Prize', '#event_prize_doc');

        });
    </script>
    <script>
        $(document).ready(function() {
            jQuery('.clear_this_round').click(function() {
                let clearButton = jQuery(this).closest('.round-detail-each');
                clearButton.find('input').val('');
                clearButton.find('select').prop('selectedIndex', 0);
            });

            // Division add/edit/delete
            $('#division-code').on('input', function() {
                const capitalizedValue = $(this).val().toUpperCase();
                $(this).val(capitalizedValue);
            });
            $('#division-code').on('keypress', function(event) {
                const char = String.fromCharCode(event.which);
                if (!/[a-zA-Z]/.test(char)) {
                    event.preventDefault();
                }
            });

            $("#add-division-btn").on('click', function(e) {
                e.preventDefault();
                showBtnLoader(jQuery(this));
                let divisionCode = $("#division-code").val().trim();
                let divisionName = $("#division-name").val().trim();
                const thisBtn = $(this);

                let for_male = jQuery('input[name="male"]').is(':checked') ? 1 : 0;
                let for_female = jQuery('input[name="female"]').is(':checked') ? 1 : 0;

                if (!divisionCode || divisionCode.length < 2 || divisionCode.length > 4 || !/^[A-Z]+$/.test(
                        divisionCode)) {
                    // $(".error-div").html('<p>Division code must be exactly 4 uppercase alphabet characters.</p>');
                    errorShow('Invalid',
                        'Division code must be between 2 to 4 uppercase alphabet characters.',
                        'Try again');
                    hideBtnLoader(jQuery(this));
                    return;
                }

                if (!divisionName || divisionName.length < 10 || divisionName.length > 50) {
                    // $(".error-div").html('<p>Division name must be between 10 and 50 characters long.</p>')
                    errorShow('Invalid', 'Division name must be between 10 and 50 characters long.',
                        'Try again');
                    hideBtnLoader(jQuery(this));
                    return;
                }


                if (for_male == false && for_female == false) {
                    errorShow('Invalid', 'Please select male or female.', 'Try again');
                    hideBtnLoader(jQuery(this));
                    return;
                }

                let divisionId = thisBtn.data('division-id');
                let division_token_id = $("#division_token_id").val();
                let userId = $("#user_id").val();

                let url = "{{ route('admin.member.storeDivision') }}";

                let formData = {
                    division_code: divisionCode,
                    division_name: divisionName,
                    division_id: divisionId,
                    division_token_id: division_token_id,
                    male: for_male,
                    female: for_female,
                    userId: userId,
                };

                // $(".error-div").empty();

                let response = ajaxCall(url, 'post', formData, true, true);
                response.then((response) => {
                    if (response.status == true) {
                        $('#eventList').html(response.html);
                        $("#division-code").val('');
                        $("#division-name").val('');
                        $('#add-division-btn').html('<i class="fa-solid fa-plus"></i>');
                        thisBtn.data('division-id', '');
                    } else {
                        errorShow('Error', response.message, 'Try again');
                    }
                });
                hideBtnLoader(thisBtn);
            });

            // Deleting divisions
            $(document).on('click', '.del-division-btn', function(e) {
                e.preventDefault();
                showBtnLoader(jQuery(this));
                let divisionId = $(this).data('division-id');
                const url =
                    `{{ route('admin.member.deleteDivision', ['divisionId' => '__divisionId__']) }}`
                    .replace('__divisionId__', divisionId);
                const thisDivision = $(this);
                let response = ajaxCall(url, 'post', null, true, true);
                response.then((response) => {
                    if (response.status == true) {
                        thisDivision.closest('li').remove();
                    } else {
                        errorShow('Error', response.message, 'Try again');
                    }
                });
                hideBtnLoader(thisDivision);
            });

            // editing division
            $(document).on('click', '.divison-data', function(e) {
                e.preventDefault();
                $('input[name="male"').prop('checked', false);
                $('input[name="female"').prop('checked', false);
                let divisionId = $(this).data('division-id');
                const url =
                    `{{ route('admin.member.editDivision', ['divisionId' => '__divisionId__']) }}`
                    .replace('__divisionId__', divisionId);

                let response = ajaxCall(url, 'get', null, true, true);
                response.then((response) => {
                    if (response.status == true) {
                        $('#division-code').val(response.division.division_code);
                        $('#division-name').val(response.division.division_name);
                        $('#add-division-btn').data('division-id', divisionId);
                        $('#add-division-btn').html(
                            '<i class="fa-solid fa-pen-to-square"></i>');

                        let type = response.division.division_type;
                        if (type == 'male') {
                            $('input[name="male"').prop('checked', true);
                        } else if (type == 'female') {
                            $('input[name="female"').prop('checked', true);
                        } else if (type == 'both') {
                            $('input[name="male"').prop('checked', true);
                            $('input[name="female"').prop('checked', true);
                        } else {
                            $('input[name="male"').prop('checked', false);
                            $('input[name="female"').prop('checked', false);
                        }


                    } else {
                        errorShow('Error', response.message, 'Try again');
                    }
                });

            });

            //SHOWING PDF EVENT DESCRIPTION
            jQuery('.show-event-description').click(function() {
                let pdfUrl =
                    "{{ $event->pdfFile('event_description') ? asset('/storage/' . $event->pdfFile('event_description')->path) : '#' }}"

                jQuery('.btn-box-start').remove();
                jQuery('#title').text('Event Description')
                jQuery('#pdf-preview').attr('src', pdfUrl + '#toolbar=0&navpanes=0')
                jQuery('#pdf-preview-modal').modal('show');
            });

            //CLOSING PDF EVENT DESCRIPITION MODAL
            jQuery('.close-modal').click(function() {
                jQuery('#pdf-preview-modal').modal('hide');
            });

            //SHOWING EVENT PRIZE MODAL
            jQuery('.show-event-prize').click(function() {
                // let eventRuleText = "{!! getEventDocData(@$event->id, 'event_prize') !!}"
                let pdfUrl =
                    "{{ $event->pdfFile('event_prize') ? asset('storage/' . $event->pdfFile('event_prize')->path) : '#' }}";


                if (pdfUrl == '#') {
                    iziToast.error({
                        title: 'Error',
                        message: 'This is a participation event only - No prizes have been estabilished for this event.',
                        position: 'topRight'
                    });
                    return false;

                } else {
                    //FOR PREVIOUS EVENT PRIZE MODAL
                    // jQuery(".prize-rule-inner-heading h5").text('Prize Rules')
                    // jQuery('#event-prize-preview').attr('src', pdfUrl + '#toolbar=0&navpanes=0');
                    // jQuery('#preview-event-prize').modal('show');
                    jQuery('.btn-box-start').remove();
                    jQuery('#title').text('Event Prize')
                    jQuery('#pdf-preview').attr('src', pdfUrl + '#toolbar=0&navpanes=0')
                    jQuery('#pdf-preview-modal').modal('show');
                }
            });

            //SHOWING EVENT RULES 
            jQuery('.show-event-rules').click(function() {
                let pdfUrl =
                    "{{ $event->pdfFile('event_rules') ? asset('/storage/' . $event->pdfFile('event_rules')->path) : '#' }}"

                jQuery('.btn-box-start').remove();
                jQuery('#title').text('Event official rules')
                jQuery('#pdf-preview').attr('src', pdfUrl + '#toolbar=0&navpanes=0')
                jQuery('#pdf-preview-modal').modal('show');
            });

            //SELECTING START DATE AND ENDDATE
            $('#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);
                $('#end-date').datepicker('setDate', endDate);
            });

            $('#end-date').datepicker({
                format: 'mm/dd/yyyy',
                autoclose: true,
                todayHighlight: true,
            });

            function showDatePicker(input) {
                $(input).datepicker('show');
            }

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


            // IF SPECIFIC ROUND ROW DATA IS ENTERED OR SELECTED THEN THE WHOLE ROW IS REQUIRED
            function validateOtherRounds() {
                let result = {
                    isValid: true,
                    invalidIndex: -1
                };

                $('.parent-round-challenge-box').each(function(index) {
                    // if (index === 0) return;

                    let roundBox = $(this);
                    let yards = roundBox.find('input[name="yards[' + index + ']"]');
                    let reload = roundBox.find('select[name="reload[' + index + ']"]');
                    let shots = roundBox.find('select[name="shots[' + index + ']"]');
                    let targetZone = roundBox.find('select[name="target_zone[' + index + ']"]');
                    let hands = roundBox.find('select[name="hands[' + index + ']"]');

                    let shots2 = roundBox.find('select[name="shots2[' + index + ']"]');
                    let targetZone2 = roundBox.find('select[name="target_zone2[' + index + ']"]');
                    let hands2 = roundBox.find('select[name="hands2[' + index + ']"]');

                    // console.log('yards' , yards.val() , '*******************','reload' , reload.val() , '*******************','shots' , shots.val() , '*******************','targetZone' , targetZone.val() , '*******************','hands' , hands.val() , '*******************','shots2' , shots2.val() , '*******************','targetZone2' , targetZone2.val() , '*******************','hands2' , hands2.val() )


                    //CLASS "VIDEO-REQUIRED" STATES THAT FIELD IS REQUIRED ALWAYS
                    if (yards.hasClass('challenge-value-required') === false) {
                     
                        if (yards.val() !== '' || reload.val() !== '') {
                            yards.addClass('required');
                            reload.addClass('required');

                            // Ensure all previous yards fields are filled
                            for (let i = 0; i < index; i++) {
                                let prevYards = $('input[name="yards[' + i + ']"]');
                                if (prevYards.val() === '') {
                                    prevYards.addClass('e-required');
                                    result.isValid = false;
                                    result.invalidIndex = i + 1;
                                    return false; // stop iteration
                                }
                            }

                            if (index > 0) {
                                roundBox.prev().find('input[name="yards[' + (index - 1) + ']"]').addClass(
                                    'required');
                                roundBox.prev().find('input[name="reload[' + (index - 1) + ']"]').addClass(
                                    'required');
                            }
                            //RETURN THAT ROW IS REQUIRED AND ONE OF FIELD OF ROW IS EMPTY
                            if (!(yards.val() !== '' && reload.val() !== '')) {
                                result.isValid = false;
                                result.invalidIndex = index + 1;
                                return false;
                            }
                        } else {
                            //REMOVE REQUIRED VALIDATION IF BOTH YARDS AND RELOAD FIELD IS EMPTY
                            yards.removeClass('required');
                            reload.removeClass('required');
                        }
                    }


                    //CLASS "VIDEO-REQUIRED" STATES THAT FIELD IS REQUIRED ALWAYS
                    if (shots.hasClass('challenge-value-required') === false) {
                        //ADD REQUIRED VALIDATION IF ONE OF THE THREE FIELDS IS FIELD
                        if (shots.val() !== '' || targetZone.val() !== '' || hands.val() !== '') {
                            shots.addClass('required');
                            targetZone.addClass('required');
                            hands.addClass('required');

                            if (shots.val() !== '' && targetZone.val() !== '' && hands.val() !== '') {
                                //CHECKING PREVIOUS ROUND DATA FIELDS ARE FILLED OR NOT
                                if (checkRowData([yards, reload]) !== true) {
                                    //RETURN IF PREVIOUS ROUND DATA IS NOT FILLED
                                    yards.addClass('required');
                                    reload.addClass('required');
                                    result.isValid = false;
                                    result.invalidIndex = index + 1;
                                    return false;
                                } else {
                                    yards.removeClass('required');
                                    reload.removeClass('required');
                                }
                            } else {
                                //RETURN THAT ROW IS REQUIRED AND ONE OF FIELD OF ROW IS EMPTY
                                result.isValid = false;
                                result.invalidIndex = index + 1;
                                // console.log('shots *******************************************')
                                return false;
                            }

                        } else {
                            //REMOVE REQUIRED VALIDATION IF BOTH YARDS AND RELOAD FIELD IS EMPTY
                            shots.removeClass('required');
                            targetZone.removeClass('required');
                            hands.removeClass('required');
                        }
                    }

                    //CLASS "VIDEO-REQUIRED" STATES THAT FIELD IS REQUIRED ALWAYS
                    if (shots2.val() !== '' || targetZone2.val() !== '' || hands2.val() !== '') {
                        //ADD REQUIRED VALIDATION IF ONE OF THE THREE FIELDS IS FIELD
                        shots2.addClass('required');
                        targetZone2.addClass('required');
                        hands2.addClass('required');

                        // console.log('CHECKING FORWORDED OR NOT ***********************************');
                        if (shots2.val() !== '' && targetZone2.val() !== '' && hands2.val() !== '') {
                            // console.log(checkRowData([yards , reload]) !== true , checkRowData([shots , targetZone , hands]) !== true , 'safksd;lfjsdklfjsdakljfksdljs*J************')
                            //CHECKING PREVIOUS ROUND ROW ARE FILLED OR NOT
                            if (checkRowData([yards, reload]) !== true || checkRowData([shots, targetZone,
                                    hands
                                ]) !== true) {
                                yards.addClass('required');
                                reload.addClass('required');
                                shots.addClass('required');
                                targetZone.addClass('required');
                                hands.addClass('required');
                                //RETURN THAT ROW IS REQUIRED AND ONE OF FIELD OF ROW IS EMPTY
                                result.isValid = false;
                                result.invalidIndex = index + 1;

                                return false;
                            } else {
                                yards.removeClass('required');
                                reload.removeClass('required');
                                shots.removeClass('required');
                                targetZone.removeClass('required');
                                hands.removeClass('required');

                            }
                        } else {
                            //RETURN THAT ROW IS REQUIRED AND ONE OF FIELD OF ROW IS EMPTY
                            result.isValid = false;
                            result.invalidIndex = index + 1;

                            return false;
                        }
                    } else {
                        //REMOVE REQUIRED VALIDATION IF BOTH YARDS AND RELOAD FIELD IS EMPTY
                        shots2.removeClass('required');
                        targetZone2.removeClass('required');
                        hands2.removeClass('required');
                    }
                });
                // console.log(result , 'reseult**************************************')
                return result;
            }

            //CHECKING EACH ROW OF SINGLE ROUND
            function checkRowData(array) {
                let rowCompleted = true;
                jQuery(array).each(function(index, element) {
                    if (element.val() === '') {
                        rowCompleted = false;
                        return false;
                    }
                });
                return rowCompleted;
            }

            //VALIDATE ROUND FIELDS
            // IF SPECIFIC ROUND ROW DATA IS ENTERED OR SELECTED THEN THE WHOLE ROW IS REQUIRED
            jQuery(document).on('change', 'input.list-challenge-data , select.list-challenge-data', function(e) {
                e.preventDefault();
                validateOtherRounds();
            });

            // VALIDATE ROUND DETAILS
            validateOtherRounds();



            //DATE PICKER ENDS

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

            //DISABLE TARGET ZONES
            jQuery(document).on('change click', '.target-zone-disable-c', function(event) {
                let $this = jQuery(this);
                let allSelectedZones = getSelectedZones();

                // Update all dropdowns
                updatingDropdown('target-zone-disable-c' , 'custom-select-box-option' , allSelectedZones)
                // jQuery('.target-zone-disable-c').each(function(index, element) {
                //     let $currentDropdown = jQuery(element);
                //     let currentValue = $currentDropdown.val();

                //     $currentDropdown.find('option').each(function() {
                //         let optionValue = jQuery(this).val();
                //         if (optionValue !== '0') {
                //             let isSelected = jQuery.inArray(parseInt(
                //                     optionValue),
                //                 allSelectedZones) !== -1;
                //             // jQuery(this).prop('disabled', isSelected &&
                //             //     optionValue !==
                //             //     currentValue);
                //             if(isSelected && optionValue !== currentValue){
                //                 jQuery('option[value="' + optionValue + '"').addClass('custom-select-box-option')
                //             }else{
                //                 jQuery('option[value="' + optionValue + '"').removeClass('custom-select-box-option')
                //             }
                //         }
                //     });
                // });
            });

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

            //UPLOADING EVENT TARGET CROPPING
            jQuery(document).on('change', '#upload-target-file', function(e) {
                const file = event.target.files[0];

                // Validate if a file is selected and is an image
                // if (file) {
                    // CROPPING PROFILE IMAGE
                    handleImageCropping("upload-target-file", "target_basefile", "target-img-preview",
                        '/images/official-target-img.png', 'image-cropper-target-modal', 'crop-target',
                        'cropped-image-target',
                        'cropped-preview-target', 'target_image');
                // }
            });
        });
    </script>
    <script src="{{ asset('custom-js/date.js') }}"></script>
@endpush