<turbo-stream action="update" target="check_in_modal_frame"><template><div data-controller="modal" data-modal-open-value="true" id="check-in-modal">
  <dialog class="modal rounded-lg max-w-lg max-h-screen w-full bg-transparent backdrop:backdrop-blur-sm backdrop:bg-black/50" data-modal-target="dialog">
    <!-- Toast container for modal top layer -->
    <div id="modal-toasts" data-turbo-temporary>
    </div>
    
    <div class="absolute inset-0" data-action="click->modal#backdropClose"></div>
    <div class="relative p-6 bg-out-grey dark:bg-out-black dark:text-gray-200 text-left">
      <button type="button" data-action="modal#close:prevent" class="hover:cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
        <span class="sr-only">Close</span>
      </button>

      <h2 class="text-lg mb-2"></h2>
      <p class="text-sm mb-2"></p>
      <div class="modal-content">
        
    <div id="check-in-form-from-dropdown">
      

<!-- Event Header -->
<div class="mb-6 text-center">
  <h4>Weekly Co-Work</h4>
    <div class="flex items-center justify-center text-sm text-gray-600 dark:text-gray-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
      </svg>
      Pilot Project Brewing
    </div>
</div>

<form data-controller="check-in geolocation" data-check-in-target="form" data-geolocation-target="form" data-check-in-guests-value="[{&quot;id&quot;:99,&quot;name&quot;:&quot;Kenny&quot;,&quot;email&quot;:&quot;kenny@outvizor.com&quot;,&quot;scrubbed_email&quot;:&quot;k**ny@outvizor.com&quot;,&quot;avatar_html&quot;:&quot;\u003cspan class=\&quot;avatar dark:text-black dark:border-black dark:border w-12 h-12 rounded-full border border-gray-100 dark:border-gray-700\&quot;\u003e\u003cimg class=\&quot;w-12 h-12 rounded-full border border-gray-100 dark:border-gray-700\&quot; alt=\&quot;Kenny\&quot; src=\&quot;https://outvizor.com/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGk8SSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--a86e894433fc6a0249ba2626b6161ef9d2d13a21/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsHOgtmb3JtYXRJIglqcGVnBjsAVDoUcmVzaXplX3RvX2xpbWl0WwdpZWllSSIIcHVyBjsAVEkiDnZhcmlhdGlvbgY7AEY=--c8f36ebf89ef46b216fdc5fa92cf1d7a00a139cc/profile-avatar.jpeg\&quot; /\u003e\u003c/span\u003e\n\n\n\n\n\n\n\n&quot;},{&quot;id&quot;:100,&quot;name&quot;:&quot;Tarah Lim&quot;,&quot;email&quot;:&quot;tarahlim@gmail.com&quot;,&quot;scrubbed_email&quot;:&quot;t*****im@gmail.com&quot;,&quot;avatar_html&quot;:&quot;\u003cspan class=\&quot;avatar dark:text-black dark:border-black dark:border w-12 h-12 rounded-full border border-gray-100 dark:border-gray-700\&quot;\u003e\u003cimg class=\&quot;w-12 h-12 rounded-full border border-gray-100 dark:border-gray-700\&quot; alt=\&quot;Tarah Lim\&quot; src=\&quot;https://outvizor.com/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkQSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--f78a0b0f0f8f97aee15e36660989b79c91bd2577/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsHOgtmb3JtYXRJIghqcGcGOwBUOhRyZXNpemVfdG9fbGltaXRbB2llaWVJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--80da19fb34410a0f85e82e75a05ca5ee5e1170f8/tarah-profile.jpg\&quot; /\u003e\u003c/span\u003e\n\n\n\n\n\n\n\n&quot;}]" data-check-in-participants-value="[]" data-check-in-require-lookup-value="true" data-check-in-initial-field-value="name" data-check-in-email-required-value="false" data-geolocation-enabled-value="false" data-geolocation-event-lat-value="41.919956" data-geolocation-event-lng-value="-87.6928755" action="/events/78/live/check_in" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="0knvtJP9EANXf8nZTF0jTtgvYhOVuwh9wcvbcrxbgugzJT-RSN0yEbGgB6-dyhVn4NX48gpMufij9610wdxNrw" autocomplete="off" />
  
  <input type="hidden" name="guest_id" id="guest_id" data-check-in-target="id" autocomplete="off" />
  <input value="78" autocomplete="off" type="hidden" name="guest[event_id]" id="guest_event_id" />
  

    


    <!-- Geofence Loading/Permission Message -->
  
  <!-- Geofence Error Message (hidden by default) -->
  <div id="geofence-error" class="hidden mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
    <p class="text-sm text-red-800 dark:text-red-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      You're too far away from this event. Please move within 0.2 miles to check in.
    </p>
  </div>
  
  
  <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hidden" data-check-in-target="preview">
    <div class="flex items-center space-x-3">
      <div data-check-in-target="previewAvatar">
      </div>
      <div class="flex-1">
        <p class="text-sm font-semibold text-gray-900 dark:text-white" data-check-in-target="previewName"></p>
        <p class="text-xs text-gray-600 dark:text-gray-400" data-check-in-target="previewEmail"></p>
      </div>
    </div>
  </div>
  
    <div class="form-group" data-check-in-target="lookupStep">
      <label>Name</label>
      <input type="text"
             class="form-control h-12"
             placeholder="Enter your real name"
             autocomplete="name"
             data-check-in-target="lookupInput" />
    </div>
    <button type="button"
            class="btn btn-primary w-full mb-4"
            data-check-in-target="nextButton"
            data-action="click->check-in#handleNext">
      Next
    </button>
    <div class="hidden mb-4" data-check-in-target="suggestionsWrapper">
      <div class="space-y-2" data-check-in-target="suggestions"></div>
    </div>
  
  <div data-check-in-target="stepTwo" class="hidden">
    <div class="form-group hidden" data-check-in-target="nameFieldWrapper">
      <label>Name</label>
      <input class="form-control h-12" placeholder="Enter your real name" data-check-in-target="name" type="text" name="guest[name]" id="guest_name" />
    </div>
    
    <div class="form-group hidden" data-check-in-target="emailFieldWrapper">
      <label for="guest_email">
        Email <span class="text-gray-500 text-sm">(Optional)</span>
</label>      <input class="form-control" data-check-in-target="email" type="email" name="guest[email]" id="guest_email" />
    </div>
    
    <div data-check-in-target="registerFields" class="">
      <input type="hidden" name="guest[roles][]" id="guest_roles_" value="guest" autocomplete="off" />
      
          </div>
  </div>


  <div data-check-in-target="submitWrapper" class="hidden">
    <input type="submit" name="commit" value="Check In Now" class="btn btn-primary mt-4 w-full" disabled="disabled" id="check-in-submit" data-check-in-target="submit" data-disable-with="Check In Now" />
  </div>

</form>

<script>
    function addClass(e) {

        document.querySelectorAll('.btn-participant').forEach(function(label) {
            label.classList.remove('selected');
            label.style.backgroundColor = 'white'
            label.style.color = 'black'
        });

        e.parentElement.classList.add("selected")
        e.parentElement.style.backgroundColor = 'black'
        e.parentElement.style.color = 'white'

        document.getElementById("submit").disabled = false


    }
</script>

<style>
    .custom-radio-input {
        appearance: none;
        display: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 16px;
        height: 16px;
        border: 1px solid #333; /* Add your preferred border color */
        border-radius: 50%;
        outline: none;
        margin-right: 5px; /* Adjust as needed */
        vertical-align: middle;
    }

    .selected {
        background-color: black;
        color: white;
    }
</style>
    </div>

      </div>


      <div class="flex justify-end items-center flex-wrap gap-2 mt-4">
        <button class="btn btn-secondary" id='close-modal' data-action="click->modal#close:prevent">Cancel</button>
        <!-- button class="btn btn-primary" data-action="click->modal#close:prevent">Continue</button -->
      </div>

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

</template></turbo-stream>