{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "modules/consultants/templates/consultants/_consultant_tabs.html" %}
<div class="mx-auto max-w-4xl space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3"><div><h2 class="text-xl font-semibold text-slate-900">New Service Request</h2><p class="text-sm text-slate-500">Raise a request to the audit firm for review and acceptance.</p></div><a href="/consultant/service-requests" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back</a></div>
  {% if errors %}<div class="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">{% for error in errors %}<div>{{ error }}</div>{% endfor %}</div>{% endif %}
  <form method="post" class="rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="grid gap-5 md:grid-cols-2">
      <div><label class="mb-2 block text-sm font-medium text-slate-700">Managed Client</label><select name="managed_client_id" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"><option value="">-- Select managed client --</option>{% for client in managed_clients %}<option value="{{ client.id }}">{{ client.client_name }} ({{ client.client_code or 'Managed' }})</option>{% endfor %}</select><p class="mt-1 text-xs text-slate-500">Use this for clients maintained in your consultant portal.</p></div>
      <div><label class="mb-2 block text-sm font-medium text-slate-700">Linked Firm Client</label><select name="firm_client_id" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"><option value="">-- Select linked firm client --</option>{% for link in firm_links %}{% if link.client %}<option value="{{ link.client.id }}">{{ link.client.client_name }} ({{ link.client.client_code }})</option>{% endif %}{% endfor %}</select><p class="mt-1 text-xs text-slate-500">Select either managed client or linked firm client, not both.</p></div>
      <div><label class="mb-2 block text-sm font-medium text-slate-700">Service Catalogue</label><select name="service_catalogue_id" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"><option value="">-- Select service --</option>{% for service in services %}<option value="{{ service.id }}">{{ service.service_name }}</option>{% endfor %}</select></div>
      <div><label class="mb-2 block text-sm font-medium text-slate-700">Other / Custom Service Name</label><input name="requested_service_name" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Required only if service not selected"></div>
      <div><label class="mb-2 block text-sm font-medium text-slate-700">Priority</label><select name="priority" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">{% for code,label in service_request_priorities %}<option value="{{ code }}" {% if code == 'normal' %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></div>
      <div><label class="mb-2 block text-sm font-medium text-slate-700">Expected / Requested Date</label><input type="date" name="requested_due_date" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"></div>
      <div class="md:col-span-2"><label class="mb-2 block text-sm font-medium text-slate-700">Subject</label><input name="subject" required class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Example: Tax audit request for ABC Pvt Ltd"></div>
      <div class="md:col-span-2"><label class="mb-2 block text-sm font-medium text-slate-700">Description</label><textarea name="description" rows="4" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Describe scope, period, documents available, urgency, etc."></textarea></div>
      <div class="md:col-span-2"><label class="mb-2 block text-sm font-medium text-slate-700">Consultant Notes</label><textarea name="consultant_notes" rows="3" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Internal notes from your side for the firm."></textarea></div>
    </div>
    <div class="mt-6 flex justify-end"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Submit Request</button></div>
  </form>
</div>
{% endblock %}