{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% import "partials/scan_input.html" as scan %} {% import "partials/location_search.html" as location %} {% block title %}Brewlog · Check In{% endblock %}

{% block head %}
<script>
const filterList = (input, listId) => {
  const q = input.value.toLowerCase();
  const list = document.getElementById(listId);
  list.classList.toggle('hidden', !q);
  list.querySelectorAll('button').forEach((b) => {
    b.style.display = b.textContent.toLowerCase().includes(q) ? '' : 'none';
  });
};

{% call location::location_search_js() %}
</script>
{% endblock %}

{% block content %}
<section
  id="checkin-root"
  data-signals:_step="1"
  data-signals:_cafe-id="''"
  data-signals:_cafe-name="''"
  data-signals:_cafe-city="''"
  data-signals:_cafe-country="''"
  data-signals:_cafe-lat="0"
  data-signals:_cafe-lng="0"
  data-signals:_cafe-website="''"
  data-signals:_cafe-search="''"
  data-signals:_roast-id="''"
  data-signals:_roast-name="''"
  data-signals:_roaster-name="''"
  data-signals:_error="''"
  data-signals:_submitting="false"
  data-signals:_locating="false"
  data-signals:_location-found="false"
  data-signals:_user-lat="0"
  data-signals:_user-lng="0"
  data-signals:_city-name="''"
  data-signals:_reviewing-cafe="false"
  data-signals:_scan-waiting="false"
  data-signals:_scan-error="''"
  data-signals:_scan-success="''"
>
  <header class="flex flex-col gap-2">
    <h1 class="text-3xl font-semibold">Check In</h1>
    <p class="max-w-2xl text-sm text-stone-600">
      Record a cup of coffee at a cafe.
    </p>
  </header>

  <!-- Step progress -->
  <div class="relative mx-auto mt-6" style="width: 80%">
    <!-- Background track (continuous line through dot centers) -->
    <div class="absolute bg-stone-300" style="height: 3px; top: 8px; left: 10px; right: 10px"></div>
    <!-- Accent overlay: first segment -->
    <div class="absolute bg-accent" style="height: 3px; top: 8px; left: 10px; right: 50%; display: none"
      data-show="$_step > 1"
    ></div>
    <!-- Accent overlay: second segment -->
    <div class="absolute bg-accent" style="height: 3px; top: 8px; left: 50%; right: 10px; display: none"
      data-show="$_step > 2"
    ></div>

    <div class="relative flex justify-between">
      <div class="flex flex-col items-center">
        <div class="h-5 w-5 rounded-full border-[3px] bg-page transition-all"
          data-class="{'border-accent': $_step >= 1, 'border-stone-300': $_step < 1}"
        ></div>
        <span class="mt-2 text-xs font-medium transition-colors"
          data-class="{'text-accent': $_step === 1, 'text-stone-800': $_step > 1}"
        >Cafe</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="h-5 w-5 rounded-full border-[3px] bg-page transition-all"
          data-class="{'border-accent': $_step >= 2, 'border-stone-300': $_step < 2}"
        ></div>
        <span class="mt-2 text-xs font-medium transition-colors"
          data-class="{'text-accent': $_step === 2, 'text-stone-800': $_step > 2, 'text-stone-400': $_step < 2}"
        >Coffee</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="h-5 w-5 rounded-full border-[3px] bg-page transition-all"
          data-class="{'border-accent': $_step >= 3, 'border-stone-300': $_step < 3}"
        ></div>
        <span class="mt-2 text-xs font-medium transition-colors"
          data-class="{'text-accent': $_step === 3, 'text-stone-400': $_step < 3}"
        >Submit</span>
      </div>
    </div>
  </div>

  <!-- Selected cafe summary (shown after selection) -->
  <div
    class="mt-4 rounded-lg border bg-surface px-4 py-3 flex items-center justify-between"
    data-show="$_step > 1 && $_cafeName && !$_reviewingCafe"
    style="display: none"
  >
    <div class="flex items-center gap-2">
      {% call icons::location("h-4 w-4 text-accent shrink-0") %}
      <span class="font-medium text-stone-800" data-text="$_cafeName"></span>
      <span class="text-xs text-stone-500" data-show="$_cafeCity" data-text="$_cafeCity" style="display: none"></span>
    </div>
    <button
      type="button"
      data-on:click="$_cafeId = ''; $_cafeName = ''; $_step = 1"
      class="text-xs text-stone-500 hover:text-stone-700"
    >Change</button>
  </div>

  <!-- Selected roast summary (shown after selection) -->
  <div
    class="mt-2 rounded-lg border bg-surface px-4 py-3 flex items-center justify-between"
    data-show="$_roastName && $_step > 2"
    style="display: none"
  >
    <div class="flex items-center gap-2">
      {% call icons::bag("h-4 w-4 text-accent shrink-0") %}
      <span class="font-medium text-stone-800" data-text="$_roastName"></span>
      <span class="text-xs text-stone-500" data-show="$_roasterName" data-text="$_roasterName" style="display: none"></span>
    </div>
    <button
      type="button"
      data-on:click="$_roastId = ''; $_roastName = ''; $_roasterName = ''; $_scanSuccess = ''; $_step = 2"
      class="text-xs text-stone-500 hover:text-stone-700"
    >Change</button>
  </div>

  <!-- Error display -->
  <p
    class="mt-3 text-sm text-red-600"
    data-show="$_error"
    style="display: none"
    data-text="$_error"
  ></p>

  <!-- Step 1: Cafe selection -->
  <div class="mt-4" data-show="$_step === 1" style="display: none">
    <div class="rounded-lg border bg-surface p-5">
      <div data-show="!$_reviewingCafe">
        {% call location::location_search("$_error") %}
      </div>

      <!-- Review form for new cafe from Foursquare -->
      <div
        data-show="$_reviewingCafe"
        style="display: none"
      >
        <h3 class="text-base font-semibold text-stone-800 mb-1">Confirm cafe details</h3>
        <p class="text-sm text-stone-600 mb-3">Review and edit the details before saving.</p>
        <div class="grid gap-4 sm:grid-cols-2">
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Name *</span>
            <input type="text" data-bind:_cafe-name required class="input-field" />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">City</span>
            <input type="text" data-bind:_cafe-city class="input-field" />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Country</span>
            <input type="text" data-bind:_cafe-country class="input-field" />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Website</span>
            <input type="url" data-bind:_cafe-website class="input-field" placeholder="https://&hellip;" />
          </label>
        </div>
        <div class="mt-4 flex items-center justify-end gap-2">
          <button
            type="button"
            class="rounded-md border px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-accent hover:text-stone-800"
            data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''"
          >
            Back
          </button>
          <button
            type="button"
            class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
            data-on:click="$_reviewingCafe = false; $_step = 2"
          >
            Next
          </button>
        </div>
      </div>

      <!-- Saved cafes -->
      {% if !cafe_options.is_empty() %}
      <div class="mt-3 border-t pt-3" data-show="!$_reviewingCafe">
        <p class="mb-2 text-xs text-stone-500">Or choose a saved cafe:</p>
        <input
          type="text"
          class="input-field w-full text-sm"
          placeholder="Type to search saved cafes&hellip;"
          oninput="filterList(this, 'cafe-options')"
        />
        <div id="cafe-options" class="hidden mt-2 max-h-48 overflow-y-auto rounded-lg border bg-surface">
          {% for cafe in cafe_options %}
          <button
            type="button"
            class="w-full px-3 py-2 text-left text-sm hover:bg-surface-alt transition"
            data-on:click="$_cafeId = '{{ cafe.id }}'; $_cafeName = el.dataset.name; $_cafeCity = el.dataset.city; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''; $_step = 2"
            data-name="{{ cafe.name }}"
            data-city="{{ cafe.city }}"
          >
            <span class="font-medium text-stone-800">{{ cafe.name }}</span>
            <span class="ml-2 text-xs text-stone-500">{{ cafe.city }}</span>
          </button>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Step 2: Roast identification -->
  <div class="mt-4" data-show="$_step === 2" style="display: none">
    <div class="rounded-lg border bg-surface p-5">
      <h3 class="text-base font-semibold text-stone-800 mb-3">What are you drinking?</h3>

      <div data-show="!$_scanSuccess" class="mb-4">
        <p class="text-sm text-stone-600 mb-3" data-show="!$_scanWaiting">Scan a bag to identify the coffee, or select from your existing roasts below.</p>

        <form id="checkin-scan-form"
          data-on:submit="$_scanWaiting = true; $_scanError = ''; @post('/api/v1/scan', {contentType: 'form'})"
          data-on:datastar-fetch="if (!$_scanWaiting) return; if (evt.detail.type === 'finished') { $_scanWaiting = false; $_roastName = $_scanSuccess; $_step = 3 } else if (evt.detail.type === 'error') { $_scanWaiting = false; $_scanError = 'Scan failed. Please try again.' }"
        >
          {% call scan::scan_input("checkin-scan-form", "checkin-image", "$_scanWaiting", "$_scanError", "Describe the coffee…", "Scanning…") %}
        </form>
      </div>

      <div
        class="mb-4 rounded-md bg-green-50 border border-green-200 px-3 py-2 text-sm text-green-800"
        data-show="$_scanSuccess"
        style="display: none"
      >
        Scanned: <span class="font-medium" data-text="$_scanSuccess"></span>
      </div>

      {% if !roast_options.is_empty() %}
      <div class="border-t pt-3">
        <p class="text-xs text-stone-500 mb-2">Or select an existing roast:</p>
        <input
          type="text"
          class="input-field w-full text-sm"
          placeholder="Type to search existing roasts&hellip;"
          oninput="filterList(this, 'roast-options')"
        />
        <div id="roast-options" class="hidden mt-2 max-h-48 overflow-y-auto rounded-lg border bg-surface">
          {% for roast in roast_options %}
          <button
            type="button"
            class="w-full px-3 py-2 text-left text-sm hover:bg-surface-alt transition"
            data-on:click="$_roastId = '{{ roast.id }}'; $_roastName = el.dataset.name; $_roasterName = el.dataset.roaster; $_step = 3"
            data-name="{{ roast.name }}"
            data-roaster="{{ roast.roaster_name }}"
          >
            <span class="font-medium text-stone-800">{{ roast.name }}</span>
            <span class="ml-2 text-xs text-stone-500">{{ roast.roaster_name }}</span>
          </button>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Step 3: Review + submit -->
  <div class="mt-4" data-show="$_step === 3" style="display: none">
    <div class="rounded-lg border bg-surface p-5">
      <h3 class="text-base font-semibold text-stone-800 mb-4">Review &amp; Submit</h3>
      <dl class="flex flex-col gap-3 text-sm mb-6">
        <div class="flex justify-between gap-2">
          <dt class="font-medium text-stone-500">Cafe</dt>
          <dd class="text-right text-stone-800" data-text="$_cafeCity ? $_cafeName + ', ' + $_cafeCity : $_cafeName"></dd>
        </div>
        <div class="flex justify-between gap-2">
          <dt class="font-medium text-stone-500">Coffee</dt>
          <dd class="text-right text-stone-800" data-text="$_roasterName ? $_roastName + ' (' + $_roasterName + ')' : $_roastName"></dd>
        </div>
      </dl>

      <form
        data-on:submit="$_submitting = true; $_error = ''; @post('/api/v1/check-in', {contentType: 'form'})"
        data-on:datastar-fetch="if (!$_submitting) return; if (evt.detail.type === 'finished') { window.location.href = '/' } else if (evt.detail.type === 'error') { $_submitting = false; $_error = 'Check-in failed. Please try again.' }"
      >
        <input type="hidden" name="cafe_id" data-attr:value="$_cafeId" />
        <input type="hidden" name="cafe_name" data-attr:value="$_cafeName" />
        <input type="hidden" name="cafe_city" data-attr:value="$_cafeCity" />
        <input type="hidden" name="cafe_country" data-attr:value="$_cafeCountry" />
        <input type="hidden" name="cafe_lat" data-attr:value="$_cafeLat" />
        <input type="hidden" name="cafe_lng" data-attr:value="$_cafeLng" />
        <input type="hidden" name="cafe_website" data-attr:value="$_cafeWebsite" />
        <input type="hidden" name="roast_id" data-attr:value="$_roastId" />
        <button
          type="submit"
          class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
          data-attr:disabled="$_submitting"
        >
          Check In
        </button>
      </form>
    </div>
  </div>
</section>
{% endblock %}