@extends('layouts.app', ['header' => true, 'header_image' => false])
@section('content')
    <main>
        <script src="{{ asset('custom-js/manage-btn.js') }}"></script>



        <section class="main-sec-become-hosted">
            <div id='finalFormData'>
                <div class="container">
                    {{-- header event steps start --}}
                    <ul class="nav nav-tabs process-model more-icon-process  " role="tablist">
                        <li class="active show-tab" id='step1' >
                            <a href="#event" aria-controls="event" class='manage-tabs show-form' role="tab" data-toggle="tab">
                                <div class="unactive-tab active-tab ">
                                    <h3>1</h3>
                                    <span class="tick-icon">
                                        <svg width="15" height="10" viewBox="0 0 15 11" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27917 8.26016L2.3875 5.51307C2.0625 5.20432 1.5375 5.20432 1.2125 5.51307C0.8875 5.82182 0.8875 6.32057 1.2125 6.62932L4.69583 9.93849C5.02083 10.2472 5.54583 10.2472 5.87083 9.93849L14.6875 1.56266C15.0125 1.25391 15.0125 0.755156 14.6875 0.446406C14.3625 0.137656 13.8375 0.137656 13.5125 0.446406L5.27917 8.26016Z"
                                                fill="url(#paint0_linear_1_4077)" />
                                            <defs>
                                                <linearGradient id="paint0_linear_1_4077" x1="7.95" y1="0.214844"
                                                    x2="7.95" y2="10.1701" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#F18D59" />
                                                    <stop offset="0.285" stop-color="#AE673B" />
                                                    <stop offset="0.59" stop-color="#FCC896" />
                                                    <stop offset="0.835" stop-color="#B3683E" />
                                                    <stop offset="1" stop-color="#B1663C" />
                                                </linearGradient>
                                            </defs>
                                        </svg>
                                    </span>
                                </div>
                                <p>Create Event </p>
                            </a>
                        </li>
                        <li class='show-tab' id='step2'>
                            <a href="#division" aria-controls="division" role="tab" class='manage-tabs show-form' data-toggle="tab">
                                <div class="unactive-tab active-tab ">
                                    <h3>2</h3>
                                    <span class="tick-icon">
                                        <svg width="15" height="10" viewBox="0 0 15 11" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27917 8.26016L2.3875 5.51307C2.0625 5.20432 1.5375 5.20432 1.2125 5.51307C0.8875 5.82182 0.8875 6.32057 1.2125 6.62932L4.69583 9.93849C5.02083 10.2472 5.54583 10.2472 5.87083 9.93849L14.6875 1.56266C15.0125 1.25391 15.0125 0.755156 14.6875 0.446406C14.3625 0.137656 13.8375 0.137656 13.5125 0.446406L5.27917 8.26016Z"
                                                fill="url(#paint0_linear_1_4077)" />
                                            <defs>
                                                <linearGradient id="paint0_linear_1_4077" x1="7.95" y1="0.214844"
                                                    x2="7.95" y2="10.1701" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#F18D59" />
                                                    <stop offset="0.285" stop-color="#AE673B" />
                                                    <stop offset="0.59" stop-color="#FCC896" />
                                                    <stop offset="0.835" stop-color="#B3683E" />
                                                    <stop offset="1" stop-color="#B1663C" />
                                                </linearGradient>
                                            </defs>
                                        </svg>
                                    </span>
                                </div>
                                <p>Create Division</p>
                            </a>
                        </li>
                        <li class='show-tab' id='step3'>
                            <a href="#rules" aria-controls="rules" role="tab" class='manage-tabs show-form' data-toggle="tab">
                                <div class="unactive-tab active-tab ">
                                    <h3>3</h3>
                                    <span class="tick-icon">
                                        <svg width="15" height="10" viewBox="0 0 15 11" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27917 8.26016L2.3875 5.51307C2.0625 5.20432 1.5375 5.20432 1.2125 5.51307C0.8875 5.82182 0.8875 6.32057 1.2125 6.62932L4.69583 9.93849C5.02083 10.2472 5.54583 10.2472 5.87083 9.93849L14.6875 1.56266C15.0125 1.25391 15.0125 0.755156 14.6875 0.446406C14.3625 0.137656 13.8375 0.137656 13.5125 0.446406L5.27917 8.26016Z"
                                                fill="url(#paint0_linear_1_4077)" />
                                            <defs>
                                                <linearGradient id="paint0_linear_1_4077" x1="7.95" y1="0.214844"
                                                    x2="7.95" y2="10.1701" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#F18D59" />
                                                    <stop offset="0.285" stop-color="#AE673B" />
                                                    <stop offset="0.59" stop-color="#FCC896" />
                                                    <stop offset="0.835" stop-color="#B3683E" />
                                                    <stop offset="1" stop-color="#B1663C" />
                                                </linearGradient>
                                            </defs>
                                        </svg>
                                    </span>
                                </div>
                                <p>Create Rd. Rules</p>
                            </a>
                        </li>
                        <li class='show-tab' id='step4'>
                            <a href="#eventrule" aria-controls="eventrule" role="tab" data-toggle="tab" class='manage-tabs show-form'>
                                <div class="unactive-tab active-tab ">
                                    <h3>4</h3>
                                    <span class="tick-icon">
                                        <svg width="15" height="10" viewBox="0 0 15 11" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27917 8.26016L2.3875 5.51307C2.0625 5.20432 1.5375 5.20432 1.2125 5.51307C0.8875 5.82182 0.8875 6.32057 1.2125 6.62932L4.69583 9.93849C5.02083 10.2472 5.54583 10.2472 5.87083 9.93849L14.6875 1.56266C15.0125 1.25391 15.0125 0.755156 14.6875 0.446406C14.3625 0.137656 13.8375 0.137656 13.5125 0.446406L5.27917 8.26016Z"
                                                fill="url(#paint0_linear_1_4077)" />
                                            <defs>
                                                <linearGradient id="paint0_linear_1_4077" x1="7.95" y1="0.214844"
                                                    x2="7.95" y2="10.1701" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#F18D59" />
                                                    <stop offset="0.285" stop-color="#AE673B" />
                                                    <stop offset="0.59" stop-color="#FCC896" />
                                                    <stop offset="0.835" stop-color="#B3683E" />
                                                    <stop offset="1" stop-color="#B1663C" />
                                                </linearGradient>
                                            </defs>
                                        </svg>
                                    </span>
                                </div>
                                <p>Create event rules</p>
                            </a>
                        </li>
                        <li class='show-tab' id='step5'>
                            <a href="#divisionvideo" aria-controls="divisionvideo" role="tab" data-toggle="tab" class='manage-tabs show-form'>
                                <div class=" unactive-tab active-tab ">
                                    <h3>5</h3>
                                    <span class="tick-icon">
                                        <svg width="15" height="10" viewBox="0 0 15 11" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27917 8.26016L2.3875 5.51307C2.0625 5.20432 1.5375 5.20432 1.2125 5.51307C0.8875 5.82182 0.8875 6.32057 1.2125 6.62932L4.69583 9.93849C5.02083 10.2472 5.54583 10.2472 5.87083 9.93849L14.6875 1.56266C15.0125 1.25391 15.0125 0.755156 14.6875 0.446406C14.3625 0.137656 13.8375 0.137656 13.5125 0.446406L5.27917 8.26016Z"
                                                fill="url(#paint0_linear_1_4077)" />
                                            <defs>
                                                <linearGradient id="paint0_linear_1_4077" x1="7.95" y1="0.214844"
                                                    x2="7.95" y2="10.1701" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#F18D59" />
                                                    <stop offset="0.285" stop-color="#AE673B" />
                                                    <stop offset="0.59" stop-color="#FCC896" />
                                                    <stop offset="0.835" stop-color="#B3683E" />
                                                    <stop offset="1" stop-color="#B1663C" />
                                                </linearGradient>
                                            </defs>
                                        </svg>
                                    </span>
                                </div>
                                <p>division
                                    video</p>
                            </a>
                        </li>
                        <li class='show-tab' id='step6'>
                            <a href="#purchasecode" aria-controls="purchasecode" role="tab" data-toggle="tab" class='manage-tabs show-form'>
                                <div class="unactive-tab active-tab ">
                                    <h3>6</h3>
                                    <span class="tick-icon">
                                        <svg width="15" height="10" viewBox="0 0 15 11" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27917 8.26016L2.3875 5.51307C2.0625 5.20432 1.5375 5.20432 1.2125 5.51307C0.8875 5.82182 0.8875 6.32057 1.2125 6.62932L4.69583 9.93849C5.02083 10.2472 5.54583 10.2472 5.87083 9.93849L14.6875 1.56266C15.0125 1.25391 15.0125 0.755156 14.6875 0.446406C14.3625 0.137656 13.8375 0.137656 13.5125 0.446406L5.27917 8.26016Z"
                                                fill="url(#paint0_linear_1_4077)" />
                                            <defs>
                                                <linearGradient id="paint0_linear_1_4077" x1="7.95" y1="0.214844"
                                                    x2="7.95" y2="10.1701" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#F18D59" />
                                                    <stop offset="0.285" stop-color="#AE673B" />
                                                    <stop offset="0.59" stop-color="#FCC896" />
                                                    <stop offset="0.835" stop-color="#B3683E" />
                                                    <stop offset="1" stop-color="#B1663C" />
                                                </linearGradient>
                                            </defs>
                                        </svg>
                                    </span>
                                </div>
                                <p>Purchase Code</p>
                            </a>
                        </li>
                    </ul>
                    {{-- header event steps ends --}}
                    <!-- end design process steps-->
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <!---event tab start here---------->
                        <div role="tabpanel" class="tab-pane active" id="event">
                            <form id="step1Data">
                                <div class="create-profile-dp-box">
                                    <div class="create-profile-dp-box-main">
                                        <div class="profile-dp-box">
                                            <div class="profile-dp-box-inner">
                                                <img src="{{ asset('images/profile-upload.png') }}" alt=""
                                                    id="logo-dp-preview">
                                            </div>
                                        </div>
                                        <label for="upload-dp" class="profile-upload-box">
                                            <img src="{{ asset('images/add-photo-img.svg') }}" alt="">
                                            <input style="display: none;" type="file" name="host_logo" accept="image/png, image/gif, image/jpeg"
                                                id="upload-dp">
                                        </label>
                                    </div>
                                    <h6>
                                        Upload host logo
                                    </h6>
                                </div>
                                <div class="create-profile-form-box credit-subscription ">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="">Hosted by Name</label>
                                                <div class="formfield">
                                                    <input type="text" name="host_by_name"
                                                        placeholder="Enter Hosted by Name here "
                                                        class="form-control @error('host_by_name') is-invalid @enderror">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="">Event Name</label>
                                                <div class="formfield">
                                                    <input type="text" name="event_name"
                                                        placeholder="Enter a name for event"
                                                        class="form-control @error('event_name') is-invalid @enderror">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label for="">Event start date</label>
                                                <div class="formfield">
                                                    <input type="date" name="start_date" placeholder="Select date "
                                                        class="form-control  @error('start_date') is-invalid @enderror">
                                                    <img class="calender-new-icon"
                                                        src="{{ asset('images/calender-new.png') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label for="">Event end date</label>
                                                <div class="formfield">
                                                    <input type="date" name="end_date" placeholder="Select date"
                                                        class="form-control  @error('end_date') is-invalid @enderror">
                                                    <img class="calender-new-icon"
                                                        src="{{ asset('images/calender-new.png') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="">Event fee
                                                    <p>Enter amount to be paid by each
                                                        <br> participant to join event
                                                    </p>
                                                </label>
                                                {{-- <div class="formfield">
                                                    <div class="memeber-price-box">
                                                        <label for="memeber-price-card" class="mb-0">
                                                            <div class="memeber-price-details-outer becomehost-div">
                                                                <h4> <input type="number" name='event_fee' > </h4>
                                                            </div>
                                                        </label>
                                                    </div>
                                                </div> --}}
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <div class="formfield">
                                                            <input type="number" name="event_fee" placeholder="Event fee"
                                                                class="form-control  @error('event_fee') is-invalid @enderror">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- <label class="justify-content-center mb-2 f-14" for="">Reimbursement
                                            method -
                                            Direct Deposit Only</label>
                                        <div class="col-4">
                                            <div class="form-group">
                                                <div class="formfield">
                                                    <input type="text" name="first_name" placeholder="First name"
                                                        class="form-control  @error('first_name') is-invalid @enderror">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group">
                                                <div class="formfield">
                                                    <input type="text" name="last_name" placeholder="Last name"
                                                        class="form-control  @error('last_name') is-invalid @enderror">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group">
                                                <div class="formfield">
                                                    <input type="date" name="dob" placeholder="Date of Birth"
                                                        class="form-control  @error('dob') is-invalid @enderror">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <div class="formfield">
                                                    <input type="number" name="account_no"
                                                        placeholder="Enter Bank Account Number"
                                                        class="form-control  @error('account_no') is-invalid @enderror">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <div class="formfield">
                                                    <input type="text" name="routing_number"
                                                        placeholder="Enter Bank Routing "
                                                        class="form-control  @error('routing_number') is-invalid @enderror">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <h6 class="info-enter-text">*This information can be entered at a later time
                                            </h6>
                                        </div> --}}
                                    </div>
                                </div>
                                <button id="btnevent" type='button' name="btnevent"
                                    class="button primary-btn full-btn show_btn_loader">
                                    SAVE AND NEXT
                                    <div class="spinner-border d-none" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </button>
                            </form>
                        </div>
                        <!---event tab end here---------->

                        <!---division tab start here---------->
                        <div role="tabpanel" class="tab-pane" id="division">
                            <form id='step2Data'>
                                <div class="memeber-price-box">
                                    <label for="memeber-price-card" class="mb-0">
                                        <div class="memeber-price-details-outer becomehost-div">
                                            <div class="division-select-gender">
                                                <h5>Open to: </h5>
                                                <div class="division-selected-gender">
                                                    <div class="checkbox-wrapper-6">
                                                        <h6>Male</h6>
                                                        <input class="tgl tgl-light" id="cb1-6" type="checkbox"
                                                            name='male' />
                                                        <label class="tgl-btn" for="cb1-6"></label>
                                                    </div>
                                                    <div class="checkbox-wrapper-6">
                                                        <h6>Female</h6>
                                                        <input class="tgl tgl-light" id="cb1-7" type="checkbox"
                                                            name='female' />
                                                        <label class="tgl-btn" for="cb1-7"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="create-divsion-text">
                                    <h3>Divisions:</h3>
                                    <p>Add your divisions - each will have a separate leaderboard (maximum of 10)</p>
                                </div>

                                <div class="added-division-row">
                                    <!--run it same as code pls dont remove it-->
                                    <div class="division-group-code">
                                        <div class="form-group-number">
                                        </div>
                                        <div class="form-group-cps">
                                            <label>Code</label>
                                        </div>
                                        <div class="form-group">
                                            <label>Name of Division</label>
                                        </div>
                                        <div class="form-group-cps">
                                        </div>
                                    </div>
                                    @foreach ($divisions as $key => $division)
                                        <div class="division-group-code">
                                            <div class="form-group-number">
                                                <h5 class="">{{ ++$key }}</h5>
                                            </div>
                                            <div class="form-group-cps">
                                                <h3 class="">{{ $division->code }}</h3>
                                            </div>
                                            <div class="form-group">
                                                <h6 class="">{{ $division->name }}</h6>
                                            </div>
                                            <div class="form-group-cps">
                                                <input type="checkbox" name='divisions'
                                                    value="{{ jsencode_userdata($division->id) }}">
                                            </div>
                                        </div>
                                    @endforeach
                                    <!--run it same as code pls dont remove it-->
                                </div>
                                <button id="btndivision" type='button' name="btndivision"
                                    class="button primary-btn full-btn" type="button">NEXT</button>
                            </form>
                        </div>
                        <!---division tab end here---------->
                        <!---rules tab start here---------->
                        <div role="tabpanel" class="tab-pane" id="rules">
                            <form id="step3Form" class="checklist-bx">
                                @for ($i = 0; $i < 5;)
                                    <div class="lb-round-list-main">
                                        <div class="lb-round-list-box">
                                            <div class="lb-round-list-inner">
                                                <div class="lb-round-list-rank">
                                                    <div class="row g-3">

                                                        <div class="col-4">
                                                            <div class="round-list-rank-box">
                                                                <p>Yards</p>
                                                                <input type='number'
                                                                    class="list-rank-data e-required @error('yards[{{ $i }}]') is-invalid @enderror"
                                                                    name="yards[{{ $i }}]" />
                                                            </div>
                                                        </div>
                                                        <div class="col-8">
                                                            <div class="round-list-rank-box justify-content-end">
                                                                <p>Re-load Required (y/n)</p>
                                                                <select
                                                                    class="list-rank-data e-required @error('reload[{{ $i }}]') is-invalid @enderror"
                                                                    name="reload[{{ $i }}]">
                                                                    {{-- <option value="">select any</option> --}}
                                                                    <option value="1">Y</option>
                                                                    <option value="0">N</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="checkbox-list-bx">
                                                            <div class="round-list-rank-box">
                                                                <p>Shots</p>
                                                                <input type='number'
                                                                    class="list-rank-data e-required @error('shots[{{ $i }}]') is-invalid @enderror"
                                                                    name="shots[{{ $i }}]" />
                                                            </div>
                                                            <div class="round-list-rank-box round-second">
                                                                <p>Target zone</p>
                                                                <select
                                                                    class="list-rank-data e-required @error('target_zone[{{ $i }}]') is-invalid @enderror"
                                                                    name="target_zone[{{ $i }}]">
                                                                    {{-- <option value="">Select any</option> --}}
                                                                    <option value="1">1</option>
                                                                    <option value="2">2</option>
                                                                    <option value="3">3</option>
                                                                    <option value="4">4</option>
                                                                    <option value="5">5</option>
                                                                    <option value="6">6</option>
                                                                    <option value="7">7</option>
                                                                    <option value="8">8</option>
                                                                    <option value="n/a">N/A</option>
                                                                </select>
                                                            </div>
                                                            <div class="round-list-rank-box">
                                                                <p>Hand (s/w)</p>
                                                                <select
                                                                    class="list-rank-data e-required @error('hands[{{ $i }}]') is-invalid @enderror"
                                                                    name="hands[{{ $i }}]">
                                                                    {{-- <option value="">select any</option> --}}
                                                                    <option value="S">S</option>
                                                                    <option value="W">W</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="checkbox-list-bx">
                                                            <div class="round-list-rank-box">
                                                                <p>Shots</p>
                                                                <input type='number'
                                                                    class="list-rank-data e-required @error('shots2[{{ $i }}]') is-invalid @enderror"
                                                                    name="shots2[{{ $i }}]" />
                                                            </div>
                                                            <div class="round-list-rank-box round-second">
                                                                <p>Target zone</p>
                                                                <select
                                                                    class="list-rank-data e-required @error('target_zone2[{{ $i }}]') is-invalid @enderror"
                                                                    name="target_zone2[{{ $i }}]">
                                                                    {{-- <option value="">Select any</option> --}}
                                                                    <option value="1">1</option>
                                                                    <option value="2">2</option>
                                                                    <option value="3">3</option>
                                                                    <option value="4">4</option>
                                                                    <option value="5">5</option>
                                                                    <option value="6">6</option>
                                                                    <option value="7">7</option>
                                                                    <option value="8">8</option>
                                                                    <option value="n/a">N/A</option>
                                                                </select>


                                                            </div>
                                                            <div class="round-list-rank-box">
                                                                <p>Hand (s/w)</p>
                                                                <select
                                                                    class="list-rank-data e-required @error('hands2[{{ $i }}]') is-invalid @enderror"
                                                                    name="hands2[{{ $i }}]">
                                                                    {{-- <option value="">select any</option> --}}
                                                                    <option value="S">S</option>
                                                                    <option value="W">W</option>
                                                                </select>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <img src="{{ asset('images/round' . ++$i . '-badge.svg') }}" alt=""
                                            class="leaderboard-round-list-badge">
                                    </div>
                                @endfor
                                <div class="checklist-btn-bx">
                                    <button id="clearContent" type='button' name="clearContent"
                                        class="button btn-outline full-btn" type="button">
                                        CLEAR CONTENTS
                                        <div class="spinner-border d-none" role="status">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </button>
                                    <button id="btnrules" type='button' name="btnrules"
                                        class="button primary-btn full-btn" type="button">
                                        SAVE AND NEXT
                                        <div class="spinner-border d-none" role="status">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <!---rules tab end here---------->

                        <!---event rules tab start here---------->
                        <div role="tabpanel" class="tab-pane" id="eventrule">
                            <div class="create-event-rules-row">
                                <div class="create-event-rules-column">
                                    <div class="form-group">
                                        <label>Event Description</label>
                                        <div class="formfield">
                                            <img src="{{ asset('images/upload-file-rule.png') }}">
                                        </div>
                                    </div>

                                    <div class="upload-from-file-btn">
                                        <input type="file" id="event_description" name="event_description"
                                            class="form-control" accept="application/pdf" data-url="{{route('host.event.pdf-upload-for-parse')}}">
                                        <input type="hidden" name="event_description_text" id="event_description_text" >
                                        <h4 id='title-desc'>Upload from File</h4>
                                        <button id='view-desc' class="event-view-btn d-none">View</button>
                                        <button id='reset-desc' class="event-reset-btn d-none"
                                            onclick="resetButton(this)">Reset</button>
                                        <button id='save-desc' class="event-save-btn event-doc d-none" saved='0'>Save</button>
                                    </div>
                                </div>
                                <div class="create-event-rules-column">
                                    <div class="form-group">
                                        <label>Event Rules</label>
                                        <div class="formfield">
                                            <img src="{{ asset('images/upload-file-rule.png') }}">
                                        </div>
                                    </div>

                                    <div class="upload-from-file-btn">
                                        <input type="file" id="event_rules" name="event_rules" class="form-control"
                                            accept="application/pdf"  data-url="{{route('host.event.pdf-upload-for-parse')}}">
                                        <input type="hidden" name="event_rules_text" id="event_rules_text" >
                                        <h4 id='title-rules'>Upload from File</h4>
                                        <button id='view-rules' class="event-view-btn d-none">View</button>
                                        <button id='reset-rules' class="event-reset-btn d-none"
                                            onclick="resetButton(this)">Reset</button>
                                        <button id='save-rules' class="event-save-btn event-doc d-none" saved='0'>Save</button>
                                    </div>
                                </div>
                                <div class="create-event-rules-column">
                                    <div class="form-group">
                                        <label>Event Prizes</label>
                                        <div class="formfield">
                                            <img src="{{ asset('images/upload-file-rule.png') }}">
                                        </div>
                                    </div>

                                    <div class="upload-from-file-btn">
                                        <input type="file" id="event_prize" name="event_prize" class="form-control"
                                            accept="application/pdf"  data-url="{{route('host.event.pdf-upload-for-parse')}}">
                                        <input type="hidden" name="event_prize_text" id="event_prize_text" >
                                        <h4 id='title-prize'>Upload from File</h4>
                                        <button id='view-prize' class="event-view-btn d-none">View</button>
                                        <button id='reset-prize' class="event-reset-btn d-none"
                                            onclick="resetButton(this)">Reset</button>
                                        <button id='save-prize' class="event-save-btn event-doc d-none" saved='0'>Save</button>
                                    </div>
                                </div>

                                <div class="host-event-required-row">
                                    <div class="memeber-price-box">
                                        <label for="memeber-price-card " class="mb-0 cursor-none-set">
                                            <div class="memeber-price-details-outer becomehost-div">
                                                <div class="host-event-required-column">
                                                    <h5> Promote Event on RAF Web/app</h5>
                                                    <div class="toggle-inner">
                                                        <span class="text-toggle">No</span>
                                                        <div class="toggle-wrapper">
                                                            <input type="radio" class='toggle-checkbox' id="no-1" name="toggle-1">
                                                            <label for="no-1" class="toggle-label no-toggle">No</label>
                                                            <div class="toggle-button">
                                                                <span class="slider"></span>
                                                            </div>
                                                            <input type="radio" class='toggle-checkbox' id="yes-1" name="toggle-1">
                                                            <label for="yes-1" class="toggle-label yes-toggle">Yes</label>
                                                        </div>
                                                        <span class="text-toggle">Yes</span>
                                                    </div>
                                                </div>
                                                <div class="host-event-required-column">
                                                    <h5> Target photo required</h5>
                                                    <div class="toggle-inner">
                                                        <span class="text-toggle">No</span>
                                                        <div class="toggle-wrapper">
                                                            <input type="radio" class='toggle-checkbox' id="no-2" name="toggle-2">
                                                            <label for="no-2" class="toggle-label no-toggle">No</label>
                                                            <div class="toggle-button">
                                                                <span class="slider"></span>
                                                            </div>
                                                            <input type="radio" class='toggle-checkbox' id="yes-2" name="toggle-2">
                                                            <label for="yes-2" class="toggle-label yes-toggle">Yes</label>
                                                        </div>
                                                        <span class="text-toggle">Yes</span>
                                                    </div>
                                                </div>
                                                <div class="host-event-required-column">
                                                    <h5> Video required </h5>
                                                    <div class="toggle-inner">
                                                        <span class="text-toggle">No</span>
                                                        <div class="toggle-wrapper">
                                                            <input type="radio" class='toggle-checkbox'  id="no-3" name="toggle-3">
                                                            <label for="no-3" class="toggle-label no-toggle">No</label>

                                                            <div class="toggle-button">
                                                                <span class="slider"></span>
                                                            </div>

                                                            <input type="radio" class='toggle-checkbox' id="yes-3" name="toggle-3">
                                                            <label for="yes-3" class="toggle-label yes-toggle">Yes</label>
                                                        </div>
                                                        <span class="text-toggle">Yes</span>
                                                    </div>
                                                </div>
                                            </div>

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


                            <!-----event file upload successfully row end here --->
                            <button id="btneventrule" type='button' name="btneventrule"
                                class="button primary-btn full-btn" type="button">NEXT
                                <div class="spinner-border d-none" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </button>
                        </div>
                        <!---event rules tab end here---------->

                        <!---vision video tab start here---------->
                        <div role="tabpanel" class="tab-pane" id="divisionvideo">
                            <div class="create-event-rules-row">
                                <div class="create-event-rules-column">
                                    <div class="form-group">
                                        <div class="formfield">
                                            <img id='video-upload'
                                                src="{{ asset('images/upload-permotion-video.png') }}">
                                            <video id='show-video-preview' src="" class='d-none object-contain'
                                                controls></video>
                                        </div>
                                    </div>

                                    <div class="upload-from-file-btn">
                                        <input type="file" id="upload-video-file" name="upload_video"
                                            class="form-control" accept="video/*">
                                        <h4 id='title-video'>Upload from File</h4>
                                        <button id='reset-video-btn' class="event-reset-btn d-none"
                                            onclick="resetVideo(this)">Reset</button>
                                        <button id='video-save-btn' class="event-save-btn event-media d-none" saved='0'>Save</button>
                                    </div>
                                </div>
                                <div class="create-event-rules-column">
                                    <div class="form-group">
                                        <div class="formfield">
                                            <img id='show-target-preview' src="{{ asset('images/official-target-img.png') }}">
                                            
                                        </div>
                                    </div>

                                    <div class="upload-from-file-btn">
                                        <input type="file" id="upload-target-file" name="upload_target"
                                            accept=" image/png, image/gif, image/jpeg" class="form-control">
                                        <h4 id='title-target'>Upload from File</h4>
                                        <button id='reset-target-btn' type='button' class="event-reset-btn d-none"
                                            onclick="resetTarget(this)">Reset</button>
                                        <button id='save-target-btn' class="event-save-btn event-media d-none" saved='0'>Save</button>
                                    </div>
                                </div>
                            </div>


                            <!----event uploded video tab end here---->
                            <button id="btndivisionvideo" type='button' name="btndivisionvideo"
                                class="button primary-btn full-btn" type="button">NEXT
                                <div class="spinner-border d-none" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </button>
                        </div>
                        <!---vision video tab end here---------->
                        <!---purchase code  tab start here---------->
                        <div role="tabpanel" class="tab-pane" id="purchasecode">
                            <section class="banner-section">
                                <!-- <img src="images/RAF-icon.png" alt="RAF-icon"> -->
                            </section>
                            <div class="join-private-event">
                                <h3>Become a HOST</h3>

                                <div class="memeber-benifit-box mb-3 mt-3">
                                    <h3 class="text-center mb-0">Additional Hosting Admin Features</h3>

                                    <ul class="memeber-benifit-list">
                                        <li>A Hosting Admin Dashboard </li>
                                        <ul class="hosting-admin-features-list">
                                            <li>Quickly see your Live event sign-ups and revenue</li>
                                            <li>Check all prior events and event history totals</li>
                                            <li>Watch your RAF Rev-share program revenue payouts by month with payment
                                                verification</li>
                                        </ul>
                                        <li>A Hosting Library</li>
                                        <ul class="hosting-admin-features-list">
                                            <li>Review any past or current event </li>
                                            <li>Edit any upcoming or live event </li>
                                            <li>Copy any completed events to purchase a new event greatly reducing the time
                                                to
                                                create an event</li>
                                        </ul>
                                        <li>A separate Host’s event leaderboard by division</li>
                                    </ul>
                                </div>
                                <div class="memeber-price-box">
                                    <label for="memeber-price-card">
                                        <div class="memeber-price-details-outer">
                                            <div class="memeber-price-details">
                                                <p>ONE TIME</p>
                                                <h3>${{ $plan->price }} <span> / event</span></h3>

                                            </div>
                                            <input type="checkbox" name="" id="memeber-price-card" checked>
                                        </div>

                                    </label>
                                </div>

                                <input type="hidden" name='token_key' value="{{ str()->random(16) }}">
                                <input type="hidden" name='token_id' value="{{ str()->random(8) }}">

                                <a href="{{ route('user.signup') }}" id='event-final-submit'
                                    class="button primary-btn full-btn show_btn_loader">CONTINUE
                                    <div class="spinner-border d-none" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <!---purchase code  tab end here---------->
                    </div>
                </div>
            </div>
        </section>

    </main>

    {{-- side bar --}}
    @include('layouts.sidebar.user')

    {{-- modal event prize --}}
    @include('host.event-new-flow.modal.event-prize')

    {{-- common modal for event description and event rules  --}}
    </div>
    @include('host.event-new-flow.modal.comon-modal')



    @push('scripts')
        <!--JS-->
        {{-- <script src="js/custom-video.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/script.js"></script> --}}

        <script>
            // script for tab steps
            $('a[data-toggle="tab"]').on("shown.bs.tab", function(e) {
                var href = $(e.target).attr("href");
                var $curr = $(".process-model  a[href='" + href + "']").parent();

                $(".process-model li").removeClass('active');

                $curr.addClass("active");
                $curr.prevAll().addClass("visited");
            });

            // Disable all tabs initially
            $(".nav-tabs a[href='#event']").prop("disabled", true);
            $(".nav-tabs a[href='#division']").prop("disabled", true);
            $(".nav-tabs a[href='#rules']").prop("disabled", true);
            $(".nav-tabs a[href='#eventrule']").prop("disabled", true);
            $(".nav-tabs a[href='#divisionvideo']").prop("disabled", true);
            $(".nav-tabs a[href='#purchasecode']").prop("disabled", true);



            /****** host-event-required-row script ********/
            const columns = document.querySelectorAll('.host-event-required-column');

            columns.forEach((column, index) => {
                const radios = column.querySelectorAll('input[type="radio"]');
                const slider = column.querySelector('.slider');

                radios.forEach(radio => {
                    radio.addEventListener('change', function() {
                        if (column.querySelector(`#yes-${index + 1}`).checked) {
                            slider.style.left = 'calc(100% - 20px)';
                        } else {
                            slider.style.left = '0';
                        }
                    });
                });
            });

            /****** host-event-required-row script ********/
        </script>



        {{-- creating event js  --}}
        <script src="{{ asset('custom-js/host-create-event.js') }}"></script>
    @endpush
@endsection