@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">Gift Scanning - {{$getgift['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">Total<br>
                        <span class="badge bg-white color-extra-dark">{{isset($getgift['total']) ? $getgift['total'] : 0}}</span>
                    </div>
                    <div class="col-lg-auto col-4 bg-purple-color mt-2 mb-2 p-2 text-center">Given<br>
                        <span class="badge bg-white color-extra-dark">{{isset($getgift['given']) ? $getgift['given'] : 0}}</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">{{$getgift['total'] - $getgift['given']}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h4>Search By name or email</h4>
                {{status_error()}}
                <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" 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-4 text-center">
                <div class="searchresult-wrapper">
                    <!-- <div class="bg-light m-auto mb-0 rounded-circle" style="width: 40px; height: 40px;background-color:#ddd!important; text-align: center; line-height: 40px;">
                        AB
                        </div> -->
                    <div class="p-3 mb-2 searchresult" style="display:none;">
                        <h4 class="mb-3"></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" 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" class="mb-4"></div>
                            <!-- <div id="attendee_category"></div> -->
                            <div id="attendee_checkin" class="bg-light text-danger"></div>
                            <div id="print_button_div" class="row">
                                <a href="#" class="my-btn-purple w-100 col-12 text-center" id="print_button">Give Gift</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="errorattendeemodal" 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">
                                <h5 class="modal-title text-center text-danger" id="err_title"></h5>
                            </div>
                        </div>
                    </div>
                </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:'', gift_id:''},
        error:err=>{
          console.log(err);
          window.reload();
        },
        success:function(resp){
          var resp = JSON.parse(resp);
          console.log(resp);
            if(resp.success===0)
            {
                $('#errorattendeemodal').show();
                $('#errorattendeemodal').modal('show');
                $('#attendeemodal').hide();
                $('#err_title').text(resp.err_msg);
            }
            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);
        
              if(resp.giftsearch != null && resp.giftsearch.length > 0)
              {
                $('#attendee_checkin').text('Gift Already Taken/Given').show();
                $('#print_button').hide();
              }
              else
              {
                $('#print_button').show();
                $('#attendee_checkin').empty().hide();
                var url = '