{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div>
    <h1 class="text-2xl font-semibold">Create Branch</h1>
    <p class="mt-1 text-sm text-slate-500">
      System Admin can create branches for any audit firm. Firm Admin can create branches only for their own audit firm.
    </p>
  </div>

  {% if flash %}
  <div class="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
    {{ flash }}
  </div>
  {% endif %}

  <form class="rounded-2xl border bg-white p-5 shadow-soft max-w-5xl" method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />

    <div class="grid gap-5">
      <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Firm</span>

          {% if can_change_tenant %}
            <select class="border rounded-xl px-3 py-2" name="tenant_id" required>
              <option value="">Select Firm</option>
              {% for t in tenants %}
                <option value="{{ t.id }}" {% if selected_tenant_id == t.id %}selected{% endif %}>
                  {{ t.name }} ({{ t.code }})
                </option>
              {% endfor %}
            </select>
          {% else %}
            <input type="hidden" name="tenant_id" value="{{ selected_tenant_id }}" />
            <div class="rounded-xl border bg-slate-50 px-3 py-2 text-sm text-slate-700">
              {% for t in tenants %}
                {% if t.id == selected_tenant_id %}
                  {{ t.name }} ({{ t.code }})
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
        </label>

        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Branch Code</span>
          <input class="border rounded-xl px-3 py-2" name="code" required />
        </label>
      </div>

      <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Branch Name</span>
          <input class="border rounded-xl px-3 py-2" name="name" required />
        </label>

        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Timezone</span>
          <input class="border rounded-xl px-3 py-2" name="timezone" value="Asia/Kolkata" required />
        </label>
      </div>

      <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Office Start Time (HH:MM)</span>
          <input class="border rounded-xl px-3 py-2" name="office_start_time" placeholder="09:30" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Office End Time (HH:MM)</span>
          <input class="border rounded-xl px-3 py-2" name="office_end_time" placeholder="18:30" />
        </label>
      </div>

      <div class="border-t pt-4">
        <div class="font-semibold">SMTP Credentials</div>
        <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">SMTP Host</span>
            <input class="border rounded-xl px-3 py-2" name="smtp_host" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">SMTP Port</span>
            <input class="border rounded-xl px-3 py-2" name="smtp_port" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">SMTP Username</span>
            <input class="border rounded-xl px-3 py-2" name="smtp_username" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">SMTP Password</span>
            <input class="border rounded-xl px-3 py-2" name="smtp_password" />
          </label>
          <label class="mt-2 flex items-center gap-2">
            <input type="checkbox" name="smtp_use_tls" checked />
            <span class="text-sm text-slate-700">Use TLS</span>
          </label>
        </div>
      </div>

      <div class="border-t pt-4">
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Local Storage Path</span>
          <input class="border rounded-xl px-3 py-2" name="local_storage_path" placeholder="D:\AuditFirm\Firm\Branch" />
        </label>
      </div>

      <div class="border-t pt-4">
        <div class="font-semibold">Branch Identity (Compliance)</div>
        <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">GSTIN</span>
            <input class="border rounded-xl px-3 py-2" name="gstin" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">PAN</span>
            <input class="border rounded-xl px-3 py-2" name="pan" />
          </label>

          <label class="grid gap-1 md:col-span-2">
            <span class="text-sm text-slate-600">Address Line 1</span>
            <input class="border rounded-xl px-3 py-2" name="address_line1" />
          </label>

          <label class="grid gap-1 md:col-span-2">
            <span class="text-sm text-slate-600">Address Line 2</span>
            <input class="border rounded-xl px-3 py-2" name="address_line2" />
          </label>

          <label class="grid gap-1">
            <span class="text-sm text-slate-600">City</span>
            <input class="border rounded-xl px-3 py-2" name="city" />
          </label>

          <label class="grid gap-1">
            <span class="text-sm text-slate-600">State</span>
            <input class="border rounded-xl px-3 py-2" name="state" />
          </label>

          <label class="grid gap-1">
            <span class="text-sm text-slate-600">PIN Code</span>
            <input class="border rounded-xl px-3 py-2" name="pin_code" />
          </label>
        </div>
      </div>

      <div class="border-t pt-4">
        <div class="font-semibold">Attendance Geo/IP Controls</div>
        <p class="mt-1 text-xs text-slate-500">Enable geo-fenced attendance for this branch. Default radius is 100 meters. IP validation is optional and useful only for office LAN/static public IP.</p>
        <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
          <label class="grid gap-1 md:col-span-2">
            <span class="text-sm text-slate-600">Geo Address / Landmark</span>
            <input class="border rounded-xl px-3 py-2" name="geo_address" placeholder="Office location / landmark" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">Latitude</span>
            <input class="border rounded-xl px-3 py-2" name="latitude" placeholder="13.082680" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">Longitude</span>
            <input class="border rounded-xl px-3 py-2" name="longitude" placeholder="80.270718" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">Allowed Radius (meters)</span>
            <input class="border rounded-xl px-3 py-2" name="attendance_geo_radius_meters" value="100" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">Grace Minutes</span>
            <input class="border rounded-xl px-3 py-2" name="attendance_grace_minutes" value="10" />
          </label>
          <label class="grid gap-1">
            <span class="text-sm text-slate-600">Half Day After (HH:MM)</span>
            <input class="border rounded-xl px-3 py-2" name="attendance_half_day_after_time" placeholder="13:00" />
          </label>
          <label class="mt-6 flex items-center gap-2">
            <input type="checkbox" name="attendance_rule_enabled" checked />
            <span class="text-sm text-slate-700">Enable timezone/late/half-day rules</span>
          </label>
          <label class="mt-6 flex items-center gap-2">
            <input type="checkbox" name="attendance_geo_enabled" />
            <span class="text-sm text-slate-700">Enable geo-fenced attendance</span>
          </label>
          <label class="grid gap-1 md:col-span-2">
            <span class="text-sm text-slate-600">Allowed Office IP / CIDR List</span>
            <textarea class="border rounded-xl px-3 py-2" name="attendance_allowed_ip_csv" rows="2" placeholder="Example: 103.x.x.x, 192.168.1.0/24"></textarea>
          </label>
          <label class="flex items-center gap-2">
            <input type="checkbox" name="attendance_ip_enabled" />
            <span class="text-sm text-slate-700">Enable optional IP/LAN validation</span>
          </label>
        </div>
      </div>

      <div class="flex gap-3">
        <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm text-white" type="submit">Create Branch</button>
        <a class="rounded-xl border px-4 py-2 text-sm" href="/system-settings/branches">Cancel</a>
      </div>
    </div>
  </form>
</div>
{% endblock %}