@extends('layouts.app')

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

    @if($attendance && $attendance->check_in_at)
      <div class="mb-3">
        <strong>Last check-in:</strong> {{ $attendance->check_in_at->format('Y-m-d H:i') }}
        @if($attendance->check_in_signature)
          <div class="mt-2"><img src="{{ asset($attendance->check_in_signature) }}" style="max-width:200px;border:1px solid #ddd;padding:4px"></div>
        @endif
      </div>
    @endif

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

          <div class="mb-2">
            <label>Signature</label>
            <div><canvas id="sig-canvas" class="signature-pad" width="600" height="200" style="border:1px solid #ccc;border-radius:4px"></canvas></div>
            <button type="button" id="clear-sign" class="btn btn-sm btn-secondary mt-2">Clear</button>
          </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 type="submit" class="btn btn-primary">Check In</button>
          <a href="{{ route('workers.index') }}" class="btn btn-secondary">Back</a>
        </form>
      </div>
    </div>

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

          <div class="mb-2">
            <label>Signature</label>
            <div><canvas id="sig-canvas-2" class="signature-pad" width="600" height="200" style="border:1px solid #ccc;border-radius:4px"></canvas></div>
            <button type="button" id="clear-sign-2" class="btn btn-sm btn-secondary mt-2">Clear</button>
          </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 type="submit" 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>
  // Optional: capture browser geolocation and place into hidden inputs
  function tryGeolocation(targetLatId, targetLngId){
    if (!navigator.geolocation) return;
    navigator.geolocation.getCurrentPosition(function(pos){
      document.getElementById(targetLatId).value = pos.coords.latitude;
      document.getElementById(targetLngId).value = pos.coords.longitude;
    }, function(err){
      // silently ignore or you can show a message
      console.warn('Geolocation denied or not available', err);
    }, { enableHighAccuracy: true, timeout: 5000 });
  }

  // when forms are submitted, try to update lat/lng before signature takes place
  document.getElementById('checkin-form')?.addEventListener('submit', function(e){
    tryGeolocation('lat-input', 'lng-input');
  });
  document.getElementById('checkout-form')?.addEventListener('submit', function(e){
    tryGeolocation('lat-input-2', 'lng-input-2');
  });
</script>
@endpush