@extends('kiosk.kiosk_template')
@section('content')


<section class="bg-medium-color">
  <div class="container-fluid">
    <div class="row justify-content-between">
      <div class="col-lg-8 col-12 align-self-center"><h4 class="mb-0">{{$gethall['name']}} - {{$gethallsession['name']}}</h4></div>
      <div class="col-lg-4 col-12">
        <div class="row justify-content-end p-3 text-white">
          <div class="col-lg-auto col-4 btn-primary mt-2 mb-2 p-2 text-center">Capacity<br>
<span class="badge bg-white color-extra-dark">{{ $gethallsession['capacity'] }}</span></div>
          <div class="col-lg-auto col-4 bg-purple-color mt-2 mb-2 p-2 text-center">Entered<br>
<span class="badge bg-white color-extra-dark">{{ $gethallsession['entered'] }}</span></div>
          <div class="col-lg-auto col-4 bg-org-color mt-2 mb-2 p-2 text-center">Remaining<br>
<span class="badge bg-white color-extra-dark">{{ $gethallsession['capacity'] - $gethallsession['entered'] }}</span></div>
          </div>
      </div>
    </div>
  </div>  
</section>
<section class="">
<div class="container">
  <div class="row justify-content-center text-center">
    <div class="col-md-8 col-12 header-count">    
        <h4 class="mt-4 mb-4">Search By Name or Email</h4>
    <form class="form searchform" id="searchform" method="post">
        @csrf
        <input type="hidden" name="event_id" value="{{ @$_GET['event_id'] }}">
        <input type="hidden" name="event_key" value="{{ @$_GET['event_key'] }}">
        <div class="input-group mb-3">
          <input type="text" class="form-control form-control-lg" id="searchfield" placeholder="Search" name="q" value="{{@$search_variable}}" aria-label="Search">
      <span class="input-group-text cursor-pointer bg-green-color" id="searchbutton"><i class="bi bi-search"></i></span>
          <span class="input-group-text cursor-pointer bg-dark color-light" id="clearbutton" onClick="window.location.reload();"><i class="bi bi-x-circle"></i></span>
        </div>
      </form>
    </div>
  </div>
</div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-center">
    
    <div class="col-md-8 col-12 text-center">
      <div class="searchresult-wrapper">
        <div class="p-3 mb-2 searchresult" style="display:none;">
        <h4 class="mb-2"></h4>
        <button class="btn btn-bordered" data-bs-toggle="modal" data-bs-target="#attendeemodal"></button>
        </div>
      </div>
    </div>

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

<div class="modal fade" id="attendeemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="float:right"></button>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-8  pt-4 pb-4">
              <div id="attendee_name"></div>
              <!-- <div id="attendee_company"></div> -->
              <!-- <div id="attendee_category"></div> -->
              <div id="attendee_checkin" class="bg-light"></div>
              <input type="hidden" id="checkinurl" value="">
              <div class="mt-4 mb-4" id="print_button_div">
                  <a href="#" class="my-btn-org text-decoration-none" id="checkin_button">Check In</a>
                  <!-- <a href="#" class="my-btn-org-border text-decoration-none" id="checkout_button">Check Out</a> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal pt-4 pb-4 erroraftermodal" id="same" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h5 class="modal-title text-center text-danger erroraftermsg"></h5>
            </div>
            <div class="text-center mb-2 mt-2 row justify-content-center">
                <button type="button" class="btn btn-danger text-white btn-lg d-block col-6 btn-danger" onClick="window.location.reload();">Reload</button>
            </div>
        </div>
    </div>
</div>

<div class="modal pt-4 pb-4 resultaftermodal" id="same1" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h5 class="modal-title text-center" id="checkinmsg"></h5>
                <h4 class="modal-title text-center" id="checkinattendee"></h4>
            </div>
            <div class="text-center mb-2 mt-2 row justify-content-center">
              <!--                 <a href="{{ url('kiosk-checkin-search?event_id='.$_GET['event_id'].'&event_key='.$_GET['event_key']) }}" class="btn btn-secondary btn-lg d-block col-6">Close</a>
               -->
              <button type="button" class="btn btn-secondary btn-lg d-block col-6" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type="text/javascript">

  function attendeemodalcontent(attendee_id)
  {
    $.ajax({
      url:"{{url('get_attendee_details_forcheckin')}}",
      type:'POST',
      data:{"_token": "{{ csrf_token() }}", attendee_id:attendee_id, event_id:'', event_key:''},
      error:err=>{
        console.log(err);
        window.reload();
      },

      success:function(resp){
        var resp = JSON.parse(resp);
        console.log(resp);
        $('#attendee_name').text(resp.attendee.name);
        // $('#attendee_company').text(resp.attendee.company);
        // $('#attendee_category').text('Category: '+resp.audience_type[resp.attendee.usertype].name);
        // $('#attendee_category').css('background-color', resp.audience_type[resp.attendee.usertype].color);

        var checkinurl = '