@extends('admin.layout.app')

@section('more-head')
 <link rel="stylesheet" type="text/css" href="{{ asset('admin/bower_components/select2/dist/css/select2.min.css') }}">
 <link rel="stylesheet" href="{{ asset('admin/dist/css/AdminLTE.min.css') }}">
 <style>
  #digital-clock {
   background-color: #66ffff;
   /* width: 35%;
                                        margin: auto; */
   /* padding-top: 50px;
                                         padding-bottom: 50px; */
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 20px;
   text-align: center;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
 </style>
@endsection

@section('main-content')
 <section class="content-header">
  <h1>
   OPERATIONS MANAGEMENT SYSTEM

  </h1>

 </section>

 <section class="content">

  <!-- Default box -->
  <div class="box">
   <div class="box-header with-border">
    <h3 class="box-title">ATTENDANCE</h3>

    <div class="box-tools pull-right">
     <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
      <i class="fa fa-minus"></i></button>

    </div>
   </div>
   @include('includes.messages')
   <form role="form" method="post" action="{{ route('gang_members.store_admit', $gang_member) }}"
    enctype="multipart/form-data" id="myFormId">
    {{ csrf_field() }} @method('POST')
    <div class="box-body">
     <div class="col-md-4">
      @php
       use SimpleSoftwareIO\QrCode\Facades\QrCode;
      @endphp
      <div class="col-md-8">
       <div class="form-group">
        <div class="text-center">
         <p id="day"></p>
         <p id="digital-clock"></p>
        </div>

       </div>

       <div class="form-group">
        <label for="name"> Name</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="name" id="test"
         value="{{ strtoupper($gang_member->gang_member_name) }}" disabled>
       </div>

       <div class="form-group">
        <label for="gang_id"> Labour Supply Company</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="name" id="test"
         value="{{ App\Model\gang::find($gang_member->gang_id)->gang_name }}" disabled>
       </div>

       <div class="form-group">
        <label for="gang_id"> Ghana Card</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="name" id="test"
         value="{{ strtoupper($gang_member->ghana_card) }}" disabled>
       </div>

       <div class="form-group">
        <label for="cmc_id_card"> CMC ID Card</label>
        <input type="text" class="form-control" id="cmc_id_card" name="cmc_id_card" placeholder="cmc_id_card"
         id="test" value="{{ strtoupper($gang_member->gang_member_no) }}" disabled>
       </div>

      </div>

     </div>
     <div class="col-md-4">
      @if ($gang_member->picture_url != null)
       <div class="col-md-8">
        <img src="{{ Storage::url($gang_member->picture_url) }}" alt="" style="height: 180px; width: 210px;">

       </div>
      @endif
     </div>
     <div class="col-md-4">
      <hr>
      <div class="table-responsive">
       <table class="table-bordered table-striped table">
        <tr>
         <th>CHECK-IN TIME</th>
         <th>CHECK-OUT TIME</th>
         <th>DATE</th>
        </tr>
        {{-- @if (!empty($gang_attendance)) --}}
        @foreach ($gang_attendances as $gang_attendance)
         <tr>
          <td>
           {{ $gang_attendance->check_in ? Carbon\Carbon::parse($gang_attendance->check_in)->format('j M Y g:i a') : null }}
          </td>
          <td>
           {{ $gang_attendance->check_out ? Carbon\Carbon::parse($gang_attendance->check_out)->format('j M Y g:i a') : null }}
          </td>
          <td>
           {{ $gang_attendance->cur_date ? Carbon\Carbon::parse($gang_attendance->cur_date)->format('j M Y') : null }}
          </td>
         </tr>
         {{-- @endif --}}
        @endforeach
       </table>
      </div>
     </div>

    </div>

    <!-- /.box-body -->
    <div class="box-footer">
     @if ($gang_attendance?->check_in != null && $gang_attendance?->check_out != null)
      <button type="submit" id="submit_form" class="btn btn-success">Check-In</button>
     @elseif ($gang_attendance?->check_in != null && $gang_attendance?->check_out == null)
      <button type="submit" id="submit_form" class="btn btn-warning">Check-Out</button>
     @else
      <button type="submit" id="submit_form" class="btn btn-success">Check-In</button>
     @endif
    </div>
   </form>
   <!-- /.box-footer-->
  </div>
  <!-- /.box -->

 </section>
@endsection

@section('more-scripts')
 <script src="{{ asset('admin/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
 <script src="{{ asset('admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
 <script src="{{ asset('admin/bower_components/select2/dist/js/select2.full.min.js') }}"></script>
 <script>
  $(function() {

   $('.select2').select2();

   function Time() {
    // Creating object of the Date class
    var date = new Date();
    // Get current Date
    var day = date.toDateString();
    // Get current hour
    var hour = date.getHours();
    // Get current minute
    var minute = date.getMinutes();
    // Get current second
    var second = date.getSeconds();
    // Variable to store AM / PM
    var period = "";
    // Assigning AM / PM according to the current hour
    if (hour >= 12) {
     period = "PM";
    } else {
     period = "AM";
    }
    // Converting the hour in 12-hour format
    if (hour == 0) {
     hour = 12;
    } else {
     if (hour > 12) {
      hour = hour - 12;
     }
    }
    // Updating hour, minute, and second
    // if they are less than 10
    hour = update(hour);
    minute = update(minute);
    second = update(second);
    // Adding time elements to the div
    document.getElementById("day").innerText = day;
    document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " +
     period;
    // Set Timer to 1 sec (1000 ms)
    setTimeout(Time, 1000);
   }
   // Function to update time elements if they are less than 10
   // Append 0 before time elements if they are less than 10
   function update(t) {
    if (t < 10) {
     return "0" + t;
    } else {
     return t;
    }
   }
   Time();


   $('#myFormId').submit(function() {
    $("#submit_form", this)
     .html("Please Wait...")
     .attr('disabled', 'disabled');
    return true;
   });
  })
 </script>
@endsection