@extends('layout.index')
@section('title','Attendance Details')

<!-- Dashboard Ecommerce start -->
@section('content')
<section>
      <div class="content-body">
         <!-- Bordered table start -->
         <div class="row" id="table-bordered">
            <div class="col-12">
               <div class="card mb-1">
                  <div class="card-header w-100" >
                     <div class="content-header-left">
                        <div class="row breadcrumbs-top">
                           <div class="col-sm-12">
                              <h2 class="content-header-title float-left mb-0">View Attendance Details</h2>
                           </div>
                        </div>
                     </div>
                     <div class="d-flex justify-content-end breadcrumb-wrapper" style="padding-left: 25%;">
                        <nav aria-label="breadcrumb">
                           <ol class="breadcrumb mr-1">
                              <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                              <li class="breadcrumb-item">Employee</li>
                              <li class="breadcrumb-item">Attendance</li>
                              <li class="breadcrumb-item active" aria-current="page">View Attendance Details</li>
                              <li class="breadcrumb-item"></li>

                           </ol>
                        </nav>
                     </div>
                     <a href="{{ route('employee.attendance', $Emp_Details->id) }}"
                        class="btn btn-outline-primary float-right"><span>Back</span></a>
                  </div>
               </div>
            </div>
         </div>
         <!-- Bordered table end -->
      </div>
      <div class="content-body">
         <!-- Basic multiple Column Form section start -->
         <section id="multiple-column-form">
            <div class="row justify-content-center">
               <div class="col-sm-7">
                  <div class="card">
                     <div class="card-body">
                        <form class="form">
                           <div class="row">
                              <div class="col-sm-12 text-center">
                                 <h2>@if(isset($Emp_Details)){{ strtoupper($Emp_Details->firstname) }}&nbsp;{{ strtoupper($Emp_Details->middlename)}}&nbsp;{{ strtoupper($Emp_Details->lastname) }}@else{{ '-' }}@endif</h2>
                                 <span class="badge badge-pill badge-light-success">@if(isset($aLogIn->success) && $aLogIn->success == 1) {{ 'Present' }} @else {{ 'Absent' }}@endif</span>
                                 <!-- <span class="badge badge-pill badge-light-danger">Absent</span> -->
                                 <small><b>@if(isset($aDate)){{ date('d/m/Y', $aDate) }}@else{{ '-' }}@endif</b></small>
                              </div>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row " id="table-bordered">
               <div class="col-lg-6 col-md-6 col-12">
                  <div class="card card-profile">
                     <div class="card-body">
                        <div class="profile-image-wrapper">
                           <div class="profile-image">
                              <div class="avatar">
                                 @if(isset($aLogIn->image_url))
                                 <a target="_blank" href="{{ asset('attendance/'.date('Ymd',$aDate).'/'.$aLogIn->image_url) }}"><img src="{{ asset('attendance/'.date('Ymd',$aDate).'/'.$aLogIn->image_url) }}" alt="Profile Picture" /></a>
                                 @else
                                 <a target="_blank" href="{{ asset('app-assets/images/portrait/small/proflie-default.png') }}"><img src="{{ asset('app-assets/images/portrait/small/proflie-default.png') }}" alt="Profile Picture" /></a>
                                 @endif
                              </div>
                           </div>
                        </div>
                        <h3>Login Details </h3>
                        <span class="badge badge-pill badge-light-success">@if(isset($aLogIn->success)&& $aLogIn->success == 1 ) {{ 'Present' }} @else {{ 'Absent' }} @endif</span>
                        <hr class="mb-2" />
                        <div class="d-flex justify-content-between align-items-center">
                           <div>
                              <h6 class="text-muted font-weight-bolder">IN Time</h6>
                              <h3 class="mb-0">@if(isset($aLogIn->inward_datetime)){{ date('h:i A', $aLogIn->inward_datetime) }}@else{{ '-' }}@endif</h3>
                           </div>
                           <div>
                              <h6 class="text-muted font-weight-bolder">Latitude</h6>
                              <h3 class="mb-0">@if(isset($aLogIn->latitude)){{ $aLogIn->latitude }}@else{{ '-' }}@endif</h3>
                           </div>
                           <div>
                              <h6 class="text-muted font-weight-bolder">Longitude</h6>
                              <h3 class="mb-0">@if(isset($aLogIn->longitude)){{ $aLogIn->longitude }}@else{{ '-' }}@endif</h3>
                           </div>
                        </div>
                        <hr class="mb-2" />
                        <div class="d-flex justify-content-center align-items-center">
                           <div>
                              <h6 class="text-muted font-weight-bolder">Location</h6>
                              <h3 class="mb-0">@if(isset($aLogIn->location)){{ $aLogIn->location }}@else{{ '-' }}@endif</h3>
                           </div>
                        </div>
                        <hr class="mb-2" />
                        <div class="d-flex justify-content-between align-items-center">
                        </div>
                        <div style="height:25vh;" id="imap">
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-6 col-md-6 col-12">
                  <div class="card card-profile">
                     <div class="card-body">
                        <div class="profile-image-wrapper">
                           <div class="profile-image">
                              <div class="avatar">
                                 @if(isset($aLogOut->image_url))
                                 <a target="_blank" href="{{ asset('attendance/'.date('Ymd',$aDate).'/'.$aLogOut->image_url) }}"><img src="{{ asset('attendance/'.date('Ymd',$aDate).'/'.$aLogOut->image_url) }}" alt="Profile Picture" /></a>
                                 @else
                                 <a target="_blank" href="{{ asset('app-assets/images/portrait/small/proflie-default.png') }}"><img src="{{ asset('app-assets/images/portrait/small/proflie-default.png') }}" alt="Profile Picture" /></a>
                                 @endif
                              </div>
                           </div>
                        </div>
                        <h3>Logout Details </h3>
                        <span class="badge badge-pill badge-light-success">@if(isset($aLogOut->success) && $aLogOut->success == 1 ) {{ 'Present' }} @else {{ 'Absent' }} @endif</span>
                        <hr class="mb-2" />
                        <div class="d-flex justify-content-between align-items-center">
                           <div>
                              <h6 class="text-muted font-weight-bolder">OUT Time</h6>
                              <h3 class="mb-0">@if(isset($aLogOut->outword_datetime)){{ date('h:i A', $aLogOut->outword_datetime) }}@else{{ '-' }}@endif</h3>
                           </div>
                           <div>
                              <h6 class="text-muted font-weight-bolder">Latitude</h6>
                              <h3 class="mb-0">@if(isset($aLogOut->latitude)){{ $aLogOut->latitude }}@else{{ '-' }}@endif</h3>
                           </div>
                           <div>
                              <h6 class="text-muted font-weight-bolder">Longitude</h6>
                              <h3 class="mb-0">@if(isset($aLogOut->longitude)){{ $aLogOut->longitude }}@else{{ '-' }}@endif</h3>
                           </div>
                        </div>
                        <hr class="mb-2" />
                        <div class="d-flex justify-content-center align-items-center">
                           <div>
                              <h6 class="text-muted font-weight-bolder">Location</h6>
                              <h3 class="mb-0">@if(isset($aLogOut->location)){{ $aLogOut->location }}@else{{ '-' }}@endif</h3>
                           </div>
                        </div>
                        <hr class="mb-2" />
                        <div class="d-flex justify-content-between align-items-center">
                        </div>
                        <div style="height:25vh;" id="omap">
                        </div>                     
                     </div>
                  </div>
               </div>
            </div>

            <div class="row" id="table-bordered">
               <div class="col-12">
                  <div class="card">
                     <div class="table-responsive p-1">
                        <table class="table table-striped table-bordered">
                           <thead>
                              <tr class="text-center">
                                 <th>Sr.No</th>
                                 <th>Time</th>
                                 <th>Employee Image</th>    
                                 <th>Map</th>
                              </tr>
                           </thead>
                           <tbody class="text-center">
                              @if(sizeof($aAttendanceLog))
                                @php $i=0; @endphp
                                  @foreach($aAttendanceLog as $val)
                                    @php $i++; @endphp 
                                          <tr>
                                             <td>{{ $i }}</td>
                                             <td>{{ date('h:i A', $val->created) }}</td>
                                             <td>
                                                <div class="avatar avatar-lg">

                                                @if(isset($val->image_url))
                                                <a target="_blank" href="{{ asset('attendance/'.date('Ymd',$aDate).'/'.$val->image_url) }}"><img src="{{ asset('attendance/'.date('Ymd',$aDate).'/'.$val->image_url) }}" alt="avatar" />
                                                @else
                                                   <img src="#" alt="Profile Picture" />
                                                @endif
                                                </div>
                                             </td>
                                             <td class="t-center">
                                                <div class="btn-group" role="group" aria-label="Basic example">
                                                    @if($val->latitude && $val->longitude)
                                                    <button onclick="showRoute({{ $val->latitude }},{{ $val->longitude }});" class="btn btn-outline-info waves-effect" >View on Map</button>
                                                    @endif
                                                </div>
                                                <div style="float:right">
                                                      <form method="post">
                                                            @csrf
                                                         <input type="hidden" name="att_id" value="{{ $val->id }}">
                                                         <input type="hidden" name="date" value="{{ $attendance_date }}">
                                                         <input type="submit" class="btn btn-primary" name="in_entry" value="Mark as IN">
                                                         <input type="submit" class="btn btn-primary" name="out_entry" value="Mark as OUT">
                                                      </form>
                                                   </div>  
                                            </td>
                                          </tr>
                                 @endforeach
                              @else
                                 <tr>
                                     <td colspan="4" style="text-align: center; color:red;">No Record Found.</td>
                                 </tr>
                              @endif   
                           </tbody>
                        </table>
              
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!-- Basic Floating Label Form section end -->

         <div class="modal fade text-left" id="large" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
                       
         </div>

                                            
      </div>
</section>
@endsection
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg_t7KnP2386-JBmsYIxldEmqQWVe7QWk" async defer></script>
<script>

$( document ).ready(function() {
   setTimeout(function(){ attendanceInMap({{ $aLogIn->latitude}},{{$aLogIn->longitude }})}, 1000);

    @php 
      if(!empty($aLogOut->latitude) && !empty($aLogOut->longitude) ){
   @endphp
      setTimeout(function(){ attendanceOutMap({{ $aLogOut->latitude}},{{$aLogOut->longitude }})}, 1000);

   @php
      }
   @endphp

});          
  
function attendanceInMap(aLat,aLng){
   var center= {lat: aLat, lng: aLng };

   var gMapoptions = {
      zoom: 12,
      center:center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };	

   var map = new google.maps.Map(document.getElementById("imap"),gMapoptions);

   var marker = new google.maps.Marker({
    position: center,
    map:map,
   });

   }

function attendanceOutMap(aLat,aLng){
   var center= {lat: aLat, lng: aLng };

   var gMapoptions = {
      zoom: 12,
      center:center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };	

   var map = new google.maps.Map(document.getElementById("omap"),gMapoptions);

   var marker = new google.maps.Marker({
      position: center,
      map:map,
   });
}


function showRoute(latitude,longitude){
   $.ajax({
            
            url: "{{ url('/biometric_attendance/show_route') }}",
            type:'POST',
            data:{
            "_token": "{{ csrf_token() }}",
            "lat":latitude,
            "long":longitude,

         },
            success: function(response) {
               $('#large').html(response).modal("show");
            },
            error: function (data){
                  console.log(data);
            }
      });        
}  
</script>