{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 750px;">
  <h4 class="mb-3">
    <i class="bi bi-fingerprint me-2"></i>
    <!-- NEW: use selected_date; fallback to today if not passed -->
    Self Punch – {{ (selected_date or today).strftime('%d %b %Y') }}
  </h4>

  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <form method="POST" id="punchForm" enctype="multipart/form-data">
        {{ csrf_token() if csrf_token is defined }}
        <input type="hidden" name="lat" id="lat">
        <input type="hidden" name="lon" id="lon">
        <input type="hidden" name="location_note" id="location_note">

        <!-- NEW: Punch date selector (previous days allowed if salary not processed) -->
        <div class="mb-3">
          <label class="form-label">Punch Date</label>
          <input type="date"
                 class="form-control"
                 name="punch_date"
                 value="{{ (selected_date or today).strftime('%Y-%m-%d') }}"
                 max="{{ today.strftime('%Y-%m-%d') }}"
                 {% if min_date %}min="{{ min_date.strftime('%Y-%m-%d') }}"{% endif %}>
          <div class="form-text">
            You can mark previous days punch only if salary is not processed for that month.
          </div>
        </div>

        <p class="mb-2">
          Next punch will be treated as:
          <span class="badge bg-primary text-uppercase">{{ next_dir }}</span>
        </p>

        {% if day_summary.has_data %}
          <p class="small text-muted mb-2">
            <!-- NEW: reflect selected day instead of hard “Today” -->
            Day: IN
            {% if day_summary.check_in %} {{ day_summary.check_in.strftime('%H:%M') }}{% else %}-{% endif %}
            &nbsp; | OUT
            {% if day_summary.check_out %} {{ day_summary.check_out.strftime('%H:%M') }}{% else %}-{% endif %}
            &nbsp; | Hours:
            {% if day_summary.total_hours is not none %}
              {{ "%.2f"|format(day_summary.total_hours) }}
            {% else %}-{% endif %}
          </p>
        {% endif %}

        <div class="mb-3">
          <label class="form-label">Capture Photo</label>

          <!-- Live camera area -->
          <div class="border rounded p-2 mb-2">
            <div class="mb-2">
              <button type="button" class="btn btn-sm btn-outline-primary" id="openCameraBtn">
                <i class="bi bi-camera-video"></i> Open Camera
              </button>
              <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="captureBtn">
                <i class="bi bi-camera"></i> Capture
              </button>
              <button type="button" class="btn btn-sm btn-outline-danger d-none" id="closeCameraBtn">
                <i class="bi bi-x-circle"></i> Close
              </button>
            </div>

            <!-- Live preview -->
            <div class="mb-2 d-none" id="cameraContainer">
              <video id="cameraPreview" autoplay playsinline style="max-width: 100%; border-radius: 6px;"></video>
            </div>

            <!-- Captured image preview -->
            <div class="mb-2 d-none" id="capturedContainer">
              <small class="text-muted d-block mb-1">Captured image preview:</small>
              <img id="capturedPreview" src="" alt="Captured" class="img-thumbnail" style="max-height: 200px;">
            </div>

            <!-- Hidden canvas + hidden input to send image -->
            <canvas id="captureCanvas" class="d-none"></canvas>
            <input type="hidden" name="captured_image" id="capturedImage">
          </div>

          <!-- Fallback: normal file upload (for browsers that don't support camera) -->
          <div class="mb-2">
            <small class="text-muted d-block mb-1">
              Or upload an existing photo (EXIF will be checked for timestamp).
            </small>
            <input type="file"
                  id="photoInput"
                  name="photo"
                  accept="image/*"
                  capture="user"
                  class="form-control">
          </div>

          <div class="form-text">
            Please take a clear selfie. Punch will be counted only after manager approval.
          </div>
        </div>

        <button type="button" class="btn btn-success" id="punchBtn">
          <i class="bi bi-clock-history me-1"></i>
          Punch {{ next_dir|upper }}
        </button>
        <small class="text-muted ms-2" id="locStatus"></small>
      </form>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center">
      <!-- NEW: reflect selected day -->
      <strong>Punches – {{ (selected_date or today).strftime('%d %b %Y') }}</strong>
      <span class="small text-muted">Self punches need manager approval</span>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th style="width: 18%;">Time</th>
            <th style="width: 12%;">Direction</th>
            <th style="width: 25%;">Location</th>
            <th style="width: 20%;">Photo</th>
            <th style="width: 15%;">Status</th>
          </tr>
        </thead>
        <tbody>
        {% if todays_punches %}
          {% for p in todays_punches %}
            <tr>
              <td>{{ p.punch_time.strftime('%H:%M:%S') }}</td>
              <td>
                <span class="badge {{ 'bg-success' if p.direction=='in' else 'bg-danger' }}">
                  {{ p.direction|upper }}
                </span>
              </td>
              <td class="small">
                {% if p.latitude and p.longitude %}
                  <a href="https://maps.google.com/?q={{ p.latitude }},{{ p.longitude }}"
                     target="_blank" rel="noopener">
                    {{ p.location_note or ("%.5f"|format(p.latitude) ~ ", " ~ "%.5f"|format(p.longitude)) }}
                  </a>
                {% elif p.location_note %}
                  {{ p.location_note }}
                {% else %}
                  <span class="text-muted">Not captured</span>
                {% endif %}
              </td>
              <td>
                {% if p.photo_path %}
                  <a href="{{ url_for('uploaded_document', filename=p.photo_path) }}"
                     target="_blank" rel="noopener">
                    <img src="{{ url_for('uploaded_document', filename=p.photo_path) }}"
                         alt="Photo"
                         class="img-thumbnail"
                         style="max-height: 60px;">
                  </a>
                {% else %}
                  <span class="text-muted small">No photo</span>
                {% endif %}
              </td>
              <td>
                {% set is_self = (p.source_name == 'self') %}
                {% set status = p.approval_status or ('auto' if not is_self else 'pending') %}
                {% if is_self %}
                  {% if status == 'approved' %}
                    <span class="badge bg-success">Approved</span>
                  {% elif status == 'rejected' %}
                    <span class="badge bg-danger">Rejected</span>
                  {% else %}
                    <span class="badge bg-warning text-dark">Pending</span>
                  {% endif %}
                {% else %}
                  <span class="badge bg-secondary">Device</span>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="5" class="text-center text-muted py-3">
              No punches yet for this day.
            </td>
          </tr>
        {% endif %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="mt-3 d-flex justify-content-between">
    <small class="text-muted">
      Self punches will be considered in attendance only after manager approval.
    </small>
    <a href="{{ url_for('employee.self_punch_history') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-calendar3 me-1"></i> View monthly details
    </a>
  </div>
</div>

<script>
(function () {
  const punchBtn        = document.getElementById('punchBtn');
  const statusEl        = document.getElementById('locStatus');
  const form            = document.getElementById('punchForm');
  const photoInput      = document.getElementById('photoInput');
  const capturedImageEl = document.getElementById('capturedImage');

  // Camera elements
  const openCameraBtn   = document.getElementById('openCameraBtn');
  const captureBtn      = document.getElementById('captureBtn');
  const closeCameraBtn  = document.getElementById('closeCameraBtn');
  const cameraContainer = document.getElementById('cameraContainer');
  const cameraPreview   = document.getElementById('cameraPreview');
  const capturedContainer = document.getElementById('capturedContainer');
  const capturedPreview = document.getElementById('capturedPreview');
  const captureCanvas   = document.getElementById('captureCanvas');

  let stream = null;

  // ---------- CAMERA HELPERS ----------

  async function startCamera() {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      statusEl.textContent = 'Camera not supported in this browser. Use file upload.';
      return;
    }
    try {
      stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } });
      cameraPreview.srcObject = stream;
      cameraContainer.classList.remove('d-none');
      captureBtn.classList.remove('d-none');
      closeCameraBtn.classList.remove('d-none');
      statusEl.textContent = 'Camera ready. Click Capture to take selfie.';
    } catch (err) {
      console.error(err);
      statusEl.textContent = 'Could not access camera. You can upload a photo instead.';
    }
  }

  function stopCamera() {
    if (stream) {
      stream.getTracks().forEach(t => t.stop());
      stream = null;
    }
    cameraPreview.srcObject = null;
    cameraContainer.classList.add('d-none');
    captureBtn.classList.add('d-none');
    closeCameraBtn.classList.add('d-none');
  }

  function clearCaptured() {
    capturedImageEl.value = '';
    capturedPreview.src = '';
    capturedContainer.classList.add('d-none');
  }

  function captureFrame() {
    if (!stream) {
      statusEl.textContent = 'Camera not active.';
      return;
    }
    const video = cameraPreview;
    const canvas = captureCanvas;

    const w = video.videoWidth || 640;
    const h = video.videoHeight || 480;
    canvas.width = w;
    canvas.height = h;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, w, h);

    // to JPEG to keep size reasonable; this will NOT keep EXIF (by design)
    const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
    capturedImageEl.value = dataUrl;

    // show preview
    capturedPreview.src = dataUrl;
    capturedContainer.classList.remove('d-none');

    // if we used camera capture, clear any file selection
    if (photoInput) {
      photoInput.value = '';
    }

    statusEl.textContent = 'Photo captured. Now click Punch.';
  }

  // ---------- LOCATION + SUBMIT ----------

  function doSubmitWithLocation() {
    punchBtn.disabled = true;
    statusEl.textContent = 'Getting location…';

    if (!navigator.geolocation) {
      statusEl.textContent = 'Location not supported, saving punch without location.';
      form.submit();
      return;
    }

    navigator.geolocation.getCurrentPosition(function (pos) {
      document.getElementById('lat').value = pos.coords.latitude;
      document.getElementById('lon').value = pos.coords.longitude;
      statusEl.textContent = 'Location captured. Saving punch…';
      form.submit();
    }, function (err) {
      console.log(err);
      statusEl.textContent = 'Could not get location (' + err.message + '). Saving punch without location.';
      form.submit();
    }, { enableHighAccuracy: true, timeout: 10000 });
  }

  function hasPhoto() {
    // Either captured via camera OR chosen via file upload
    if (capturedImageEl && capturedImageEl.value) return true;
    if (photoInput && photoInput.files && photoInput.files.length) return true;
    return false;
  }

  // ---------- EVENT BINDINGS ----------

  if (openCameraBtn) {
    openCameraBtn.addEventListener('click', function () {
      clearCaptured();
      startCamera();
    });
  }

  if (captureBtn) {
    captureBtn.addEventListener('click', function () {
      captureFrame();
    });
  }

  if (closeCameraBtn) {
    closeCameraBtn.addEventListener('click', function () {
      stopCamera();
      statusEl.textContent = 'Camera closed. You can re-open or upload a file.';
    });
  }

  if (photoInput) {
    photoInput.addEventListener('change', function () {
      // If user picks a file manually, clear any previous captured image
      if (this.files && this.files.length) {
        clearCaptured();
        statusEl.textContent = 'Photo selected from gallery. You can now Punch.';
      } else {
        statusEl.textContent = 'Photo not selected.';
      }
    });
  }

  if (punchBtn) {
    punchBtn.addEventListener('click', function () {
      if (!hasPhoto()) {
        statusEl.textContent = 'Please capture a photo or upload one before punching.';
        // Optionally auto-open camera on mobile
        startCamera();
        return;
      }
      doSubmitWithLocation();
    });
  }

  // Clean up stream when page unloads
  window.addEventListener('beforeunload', stopCamera);
})();
</script>
{% endblock %}