@extends('layouts.app')

@section('content')
<div class="row">
  <div class="col-md-8">
    <h4>Attendance — {{ $worker->name }}</h4>

    @if($attendance && $attendance->check_in_at)
      <p><strong>Last check-in:</strong> {{ $attendance->check_in_at->format('Y-m-d H:i') }}</p>
    @endif

    <div class="card mb-3">
      <div class="card-body">
        <h5>Check In</h5>
        <form id="checkin-form" action="{{ route('attendance.worker.checkin', $worker) }}" method="post">
          @csrf
          <div class="mb-2">
            <label>Notes</label>
            <input name="notes" class="form-control" />
          </div>

          <div class="mb-2">
            <label>Signature</label>
            <canvas id="sig-canvas" width="720" height="200" style="border:1px solid #ccc;border-radius:6px;"></canvas>
            <div class="mt-2">
              <button type="button" id="clear-sign" class="btn btn-sm btn-secondary">Clear</button>
            </div>
          </div>

          <input type="hidden" name="signature" id="signature-input">
          <input type="hidden" name="lat" id="lat-input">
          <input type="hidden" name="lng" id="lng-input">

          <button class="btn btn-primary">Check In</button>
        </form>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <h5>Check Out</h5>
        <form id="checkout-form" action="{{ route('attendance.worker.checkout', $worker) }}" method="post">
          @csrf

          <div class="mb-2">
            <label>Signature</label>
            <canvas id="sig-canvas-2" width="720" height="200" style="border:1px solid #ccc;border-radius:6px;"></canvas>
            <div class="mt-2">
              <button type="button" id="clear-sign-2" class="btn btn-sm btn-secondary">Clear</button>
            </div>
          </div>

          <input type="hidden" name="signature" id="signature-input-2">
          <input type="hidden" name="lat" id="lat-input-2">
          <input type="hidden" name="lng" id="lng-input-2">

          <button class="btn btn-danger">Check Out</button>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script src="{{ asset('js/signature.js') }}"></script>

<script>
  // capture geolocation (best-effort)
  function setGeo(latId, lngId){
    if (!navigator.geolocation) return;
    navigator.geolocation.getCurrentPosition(function(pos){
      document.getElementById(latId).value = pos.coords.latitude;
      document.getElementById(lngId).value = pos.coords.longitude;
    }, function(){}, { enableHighAccuracy: true, timeout: 5000 });
  }

  document.getElementById('checkin-form')?.addEventListener('submit', function(){
    setGeo('lat-input','lng-input');
  });
  document.getElementById('checkout-form')?.addEventListener('submit', function(){
    setGeo('lat-input-2','lng-input-2');
  });
</script>
@endpush