{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-5xl rounded-2xl bg-white p-6 shadow-soft">
  <h2 class="text-xl font-semibold text-slate-900">{% if mode == 'edit' %}Edit Service Catalogue{% else %}Create Service Catalogue{% endif %}</h2>
  <form method="post" class="mt-6 grid gap-5 md:grid-cols-2">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Service Code</label><input type="text" name="service_code" value="{{ catalogue.service_code if catalogue else '' }}" {% if mode == 'edit' %}readonly{% endif %} required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm {% if mode == 'edit' %}bg-slate-50{% endif %}"></div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Service Name</label><input type="text" name="service_name" value="{{ catalogue.service_name if catalogue else '' }}" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm"></div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Category</label><select name="category_id" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm"><option value="">Select category</option>{% for cat in categories %}<option value="{{ cat.id }}" {% if catalogue and catalogue.category_id == cat.id %}selected{% endif %}>{{ cat.name }}</option>{% endfor %}</select></div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Recurrence Type</label><select name="recurrence_type" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm"><option value="">Select recurrence</option>{% for value, label in recurrence_choices %}<option value="{{ value }}" {% if catalogue and catalogue.recurrence_type == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Engagement Type</label><select name="engagement_type" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">{% for value, label in engagement_type_choices %}<option value="{{ value }}" {% if catalogue and catalogue.engagement_type == value %}selected{% elif not catalogue and value == "non_assurance" %}selected{% endif %}>{{ label }}</option>{% endfor %}</select><p class="mt-1 text-xs text-slate-500">This value will be copied to client engagements when the service is assigned.</p></div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Service Scope</label>
      <select name="service_scope_type" id="service-scope-type" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        {% for value, label in [('client','Client / PAN level'),('business_unit','Business Unit level'),('client_branch','Client Branch level'),('registration','Registration level')] %}
        <option value="{{ value }}" {% if catalogue and catalogue.service_scope_type == value %}selected{% elif not catalogue and value == 'client' %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div id="registration-type-field"><label class="mb-2 block text-sm font-medium text-slate-700">Required Registration Type</label>
      <select name="required_registration_type" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        <option value="">Not applicable</option>
        {% set current_registration_type = catalogue.required_registration_type if catalogue and catalogue.required_registration_type else '' %}
        {% if current_registration_type and current_registration_type not in registration_type_codes %}
        <option value="{{ current_registration_type }}" selected>{{ current_registration_type }} — Existing legacy value</option>
        {% endif %}
        {% for registration_type in registration_types %}
        <option value="{{ registration_type.code }}" {% if current_registration_type == registration_type.code %}selected{% endif %}>{{ registration_type.code }} — {{ registration_type.name }}</option>
        {% endfor %}
      </select>
      <p class="mt-1 text-xs text-slate-500">Used only for Registration-level services. Values come from the active Registration Type Master.</p>
      {% if request.query_params.get('error') == 'registration_type' %}
      <p class="mt-1 text-xs font-medium text-red-600">Select an active Registration Type Master value.</p>
      {% endif %}
    </div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Sort Order</label><input type="number" name="sort_order" value="{{ catalogue.sort_order if catalogue else 100 }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm"></div>
    <div class="flex items-center gap-6 pt-7 text-sm text-slate-700"><label class="inline-flex items-center gap-2"><input type="checkbox" name="is_active" {% if not catalogue or catalogue.is_active %}checked{% endif %}> Active</label><label class="inline-flex items-center gap-2"><input type="checkbox" name="is_client_requestable" {% if catalogue and catalogue.is_client_requestable %}checked{% endif %}> Client Requestable</label><label class="inline-flex items-center gap-2"><input type="checkbox" name="is_consultant_requestable" {% if catalogue and catalogue.is_consultant_requestable %}checked{% endif %}> Consultant Requestable</label></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-4 py-2 text-sm">{{ catalogue.description if catalogue else '' }}</textarea></div>
    <div class="md:col-span-2">
      <h3 class="mb-3 text-sm font-semibold text-slate-900">Applicability</h3>
      <div class="grid gap-3 md:grid-cols-4 text-sm text-slate-700">
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_individual" {% if catalogue and catalogue.applicable_individual %}checked{% endif %}> Individual</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_proprietorship" {% if catalogue and catalogue.applicable_proprietorship %}checked{% endif %}> Proprietorship</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_partnership" {% if catalogue and catalogue.applicable_partnership %}checked{% endif %}> Partnership</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_llp" {% if catalogue and catalogue.applicable_llp %}checked{% endif %}> LLP</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_company" {% if catalogue and catalogue.applicable_company %}checked{% endif %}> Company</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_trust" {% if catalogue and catalogue.applicable_trust %}checked{% endif %}> Trust</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_society" {% if catalogue and catalogue.applicable_society %}checked{% endif %}> Society</label>
      </div>
    </div>
    <div class="md:col-span-2 flex items-center justify-end gap-3"><a href="/services/catalogue" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Save</button></div>
  </form>
</div>
<script>
(function(){
 const scope=document.getElementById('service-scope-type');
 const field=document.getElementById('registration-type-field');
 function refresh(){ field.classList.toggle('hidden', scope.value !== 'registration'); }
 scope.addEventListener('change', refresh); refresh();
})();
</script>
{% endblock %}