{% extends "base.html" %}
{% load civic_tags %}
{% block content %}
{% include "partials/page_hero.html" with eyebrow="জনসেবা" title="অ্যাপয়েন্টমেন্ট বুক করুন" description=meta.description crumbs=meta.crumbs %}
<section class="container-x grid gap-10 py-14 lg:grid-cols-[1.25fr_1fr]">
  <form class="space-y-8" data-appointment-form data-api-form="/api/appointments/" data-success-target="appt-msg" novalidate>
    <fieldset class="space-y-3">
      <legend class="text-lg font-bold text-forest">১. সাক্ষাতের ধরন</legend>
      <div class="grid gap-3 sm:grid-cols-2">
        {% for t in types %}
        <label class="card-surface flex cursor-pointer gap-3 rounded-2xl p-4 has-[:checked]:border-forest has-[:checked]:ring-2 has-[:checked]:ring-forest/20">
          <input type="radio" name="type" value="{{ t.label }}" class="mt-1 accent-forest" required>
          <span><span class="block font-semibold text-forest">{{ t.label }}</span><span class="block text-xs text-muted">{{ t.desc }}</span></span>
        </label>
        {% endfor %}
      </div>
    </fieldset>

    <fieldset class="space-y-3">
      <legend class="text-lg font-bold text-forest">২. পদ্ধতি</legend>
      <div class="grid gap-3 sm:grid-cols-3">
        {% for m in modes %}
        <label class="card-surface flex cursor-pointer flex-col gap-1 rounded-2xl p-4 has-[:checked]:ring-2 has-[:checked]:ring-forest/20"><input type="radio" name="mode" value="{{ m.id }}" class="accent-forest" required {% if forloop.first %}checked{% endif %}><span class="font-semibold text-forest">{{ m.label }}</span><span class="text-xs text-muted">{{ m.desc }}</span></label>
        {% endfor %}
      </div>
    </fieldset>

    <fieldset class="space-y-3">
      <legend class="text-lg font-bold text-forest">৩. তারিখ ও সময়</legend>
      <label class="block max-w-xs"><span class="text-sm font-semibold text-forest">তারিখ *</span><input type="date" name="date" required class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-date-input></label>
      <p class="text-xs text-muted">শুক্রবার শুধু পূর্বনির্ধারিত সাক্ষাৎ। প্রতি সময়ে সর্বোচ্চ ৪ জন।</p>
      <div class="grid grid-cols-3 gap-2 sm:grid-cols-5" data-slot-grid>
        {% for s in slots %}
        <label class="rounded-xl border border-forest/15 bg-white px-3 py-2 text-center text-sm font-semibold text-forest has-[:checked]:border-forest has-[:checked]:bg-forest has-[:checked]:text-cream has-[:disabled]:opacity-40">
          <input type="radio" name="slot" value="{{ s }}" class="sr-only" required data-slot><span>{{ s|bn }}</span>
        </label>
        {% endfor %}
      </div>
    </fieldset>

    <fieldset class="grid gap-4 sm:grid-cols-2">
      <legend class="mb-3 text-lg font-bold text-forest">৪. আপনার তথ্য</legend>
      <label class="block"><span class="text-sm font-semibold text-forest">নাম *</span><input name="name" required minlength="3" maxlength="80" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></label>
      <label class="block"><span class="text-sm font-semibold text-forest">মোবাইল *</span><input name="phone" required inputmode="tel" placeholder="01711203997" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></label>
      <label class="block"><span class="text-sm font-semibold text-forest">ইমেইল</span><input name="email" type="email" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></label>
      <label class="block"><span class="text-sm font-semibold text-forest">ওয়ার্ড *</span><select name="ward" required class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field><option value="">বেছে নিন</option>{% for w in wards %}<option value="{{ w }}">{{ w }}</option>{% endfor %}</select></label>
      <label class="block sm:col-span-2"><span class="text-sm font-semibold text-forest">বিষয় *</span><input name="topic" required minlength="5" maxlength="160" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></label>
      <label class="block sm:col-span-2"><span class="text-sm font-semibold text-forest">অতিরিক্ত তথ্য</span><textarea name="notes" rows="3" maxlength="1200" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3"></textarea></label>
    </fieldset>

    <div class="flex flex-wrap items-center gap-4">
      <button type="submit" class="rounded-full bg-forest px-8 py-3.5 font-semibold text-cream">অ্যাপয়েন্টমেন্ট অনুরোধ করুন</button>
      <p id="appt-msg" class="text-sm" role="status" aria-live="polite"></p>
    </div>
  </form>

  <aside class="space-y-6">
    <div class="card-surface rounded-3xl p-6">
      <h2 class="font-bold text-forest">কার্যালয়</h2>
      <p class="mt-3 text-sm leading-relaxed text-muted">{{ site.office }}</p>
      <p class="mt-3 text-sm text-forest">{{ site.officeHours }}</p>
      <p class="mt-1 text-xs text-muted">{{ site.officeHoursNote }}</p>
    </div>
    <div class="rounded-3xl bg-forest p-6 text-cream">
      <p class="font-bold">আগে থেকে বুক করা আছে?</p>
      <p class="mt-2 text-sm text-cream/70">মোবাইল নম্বর দিয়ে আপনার রেফারেন্স ও স্ট্যাটাস দেখুন।</p>
      <a href="{% url 'core:appointment-status' %}" class="mt-4 inline-block rounded-full bg-gold px-5 py-2.5 text-sm font-bold text-night">স্ট্যাটাস দেখুন</a>
    </div>
  </aside>
</section>
{% endblock %}