@extends('kiosk.kiosk_template')
@section('content')
<section class="bg-medium-color">
	<div class="container">
	  <div class="row justify-content-center text-center">
		<div class="col-md-8 col-12 header-count">	  
      <h4 class="mt-1">{{$booth_details['checkpoint_name']}}</h4>
			<h5 class="mt-4 mb-4">Search by name or email  <span class="btn-primary p-2 counter">Count : <span class="badge bg-white color-extra-dark " id="insidecount">{{isset($inside_cnt) ? $inside_cnt :0}}</span></span> </h5>
			<p class="text-center"> {{status_error()}}</p>
			<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 buttonproceed" 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" style="float: right;" aria-label="Close"></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> -->
              <form class="form" action="{{ url('kiosk-booth-visit') }}" method="GET" id="bootvisited_form">
                <input type="hidden" name="event_id" value="">
                <input type="hidden" name="event_key" value="">
                <input type="hidden" name="booth_id" value="">
                <input type="hidden" name="attendee_id" id="attendee_id" value="">
                <input type="hidden" name="audience_id" value="" id="audience_id" class="form-control"/>
				  
                <select name="lead_status" id="lead_status" class="form-select form-control mb-3 mt-3">
                  <option value="">Select Status</option>
                  <option value="Hot Lead">Hot Lead</option>
                  <option value="Warm Lead">Warm Lead</option>
                  <option value="Booth Visitor">Booth Visitor</option>
                </select>
                <textarea name="lead_comment" value="" id="lead_comment" class="form-control mb-3" placeholder="Leave a comment here"/></textarea>
                <input type="submit" value="Visited" class="my-btn-org">
              </form>
              
              <div id="print_button_div">
                <!-- <a href="#" class="btn btn-success" id="booth_button">Visited</a> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal pt-4 pb-4 resultaftermodal" 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 resultaftermsg"></h5>
                <strong>
                    <h4 class="modal-title text-center resultaftername">
                    <h4>
                </strong>
            </div>
            <div class="text-center mb-2 mt-2 row justify-content-center">
               <!--                  <a href="{{ url('kiosk_booth_search?event_id='.$_GET['event_id'].'&event_key='.$_GET['event_key'].'&booth_id='.$_GET['booth_id']) }}" 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>

<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>

<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" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script type="text/javascript">

  function attendeemodalcontent(attendee_id)
  {
    $('#bootvisited_form').trigger("reset");
    $.ajax({
      url:"{{url('get_attendee_details_forcheckin')}}",
      type:'POST',
      data:{"_token": "{{ csrf_token() }}", attendee_id:attendee_id, event_id:'', event_key:'', booth_id:''},
      error:err=>{
        console.log(err);
        window.reload();
      },
      success:function(resp){
        var resp = JSON.parse(resp);
        console.log(resp);
        if(resp.success == 0)
        {
            $('#attendeemodal').modal('hide');
            $('.erroraftermsg').text(resp.err_msg);
            $('.erroraftermodal').modal('show');
        }
        else
        {
            $('#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);
            $('#audience_id').val(resp.attendee.id);
            $('#lead_status').find('option:selected').removeAttr('selected');
            if(resp.boothsearch.lead_status !== "")
            {
              $('#lead_status option:contains("'+resp.boothsearch.lead_status+'")').attr('selected', 'selected');
            }
            $('#lead_comment').val(resp.boothsearch.lead_comment);
            $('#attendee_id').val(resp.attendee.id);
            $('.erroraftermodal').modal('hide');
            $('#attendeemodal').modal('show');
        }
      }
    });
  }

   // Prachee - 03-11-2023 - to prevent enter 
   const form = document.getElementById('searchform');
  form.addEventListener('keypress', function(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
    }
  });
  // == End
  $(document).ready(function(){
    $('#searchbutton').click(function(){
      event.preventDefault();
      var q = $('#searchfield').val();
      // alert(q);
      if(q === '' || q === undefined || q === null)
      {
        alert('No Search value given');
      }
      else{
        $.ajax({
          url:"{{url('kiosk-checkin-search-submit')}}",
          type:'POST',
          data:$('.searchform').serialize(),
          error:err=>{
            console.log(err);
            window.reload();
          },
          success:function(resp){
            var resp = JSON.parse(resp);
            console.log(resp);
            var append = name = '';
            $('.searchresult-wrapper').empty();
            if(resp.search.length > 0)
            {
              for(var i = 0; i<resp.search.length; i++)
              {
                  name=resp.search[i]['name'] ? resp.search[i]['name'] :'';
                  attendee_id=resp.search[i]['id'] ? resp.search[i]['id'] :'';
                  append += '<div class="p-3 mb-2 searchresult"><h4 class="mb-3">'+name+'</h4><button class="btn btn-bordered" data-bs-toggle="modal" data-bs-target="#attendeemodal" onclick="attendeemodalcontent('+attendee_id+')">Proceed</button></div>';
              }
              $('.searchresult-wrapper').append(append);
            }
            else
            {
              $('.searchresult-wrapper').append('<h4>No Record Found</h4>');
            }
            
          }
        })
      }
    });


    $("#bootvisited_form").validate({
        rules:
        {
            
        },
        messages: {
                
        },    
        errorElement: 'p',
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        },
        submitHandler: function (form) {
            $.ajax({
                type: "GET",
                url: "{{ url('kiosk-booth-visit') }}",
                data: $(form).serialize(),
                success: function (data) {
                    var resp = JSON.parse(data);
                    console.log(resp);     
                    $('#bootvisited_form').trigger("reset");
                    $('#attendeemodal').modal('hide');
                    $('#lead_comment').val('');
                    $('#attendee_id').val('');
                    $('#audience_id').val('');
                    if(resp.success === 0)
                    {
                        $('.resultaftermodal').modal('hide');
                        $('.erroraftermsg').text(resp.err_msg);
                        $('.erroraftermodal').modal('show');
                    }
                    else
                    {
                        $('.erroraftermodal').modal('hide');
                        $('.resultaftermsg').text(resp.checkinmsg);
                        $('.resultaftername').text(resp.attendee.name);
                        $('#insidecount').text(resp.inside_cnt);
                        $('.resultaftermodal').modal('show');
                    }
                },
                error: function (data) {
                    alert("Some Error Occurred Please reload Page.");  
                }
            });
            return false;
        }
    });

  });
</script>


@endsection