{% extends 'base/index.html' %}
{% load static %}

{% block title %}Digital Signature Certificates | Radiant Infotech Nepal{% endblock %}
{% block description %}Radiant Infotech Nepal is a licensed certifying authority issuing Class 1, Class 2, and Class 3 digital signature certificates with PKI-enabled infrastructure.{% endblock %}
{% block body_class %}service-details-page{% endblock %}
{% block content %}

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
  .section-card { transition: box-shadow 0.2s ease; }
  .section-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.05); }
  .photo-upload-box { transition: background 0.2s, border-color 0.2s; }
  .photo-upload-box:hover { background: #f8fafc; border-color: #3b82f6; }
  input, select { background-color: #fff; }
  input:focus, select:focus { outline: 2px solid #93c5fd; outline-offset: 1px; }
</style>

<div class="bg-slate-50 font-sans text-[14px] antialiased">
<div class="max-w-6xl mx-auto py-8 px-4 sm:px-6">

  <form id="mainForm" class="space-y-10" enctype="multipart/form-data">
    {% csrf_token %}

    <!-- ============================================================ -->
    <!-- PART 1 — SCHEDULE 5                                          -->
    <!-- ============================================================ -->
    <section class="section-card bg-white border border-gray-200/80 rounded-2xl p-6 md:p-8 shadow-sm">
      <div class="text-center border-b border-gray-100 pb-4 mb-6">
        <h2 class="font-bold text-xl tracking-tight">Schedule – 5</h2>
        <p class="text-[13px] text-gray-600">(Relating to Sub-rule (1) of Rule 31)</p>
        <div class="mt-2">
          <p class="font-bold text-xl text-gray-800">The Radiant InfoTech Nepal Private Limited</p>
          <p class="text-[15px] font-semibold text-indigo-700">(Issuing Certifying Authority)</p>
        </div>
        <p class="font-semibold mt-3 text-[15px] text-gray-700">Subject: Request for Issuance of the Digital Signature Certificate</p>
      </div>

      <p class="text-[15px] text-green-600 mb-6 bg-slate-50 p-3 rounded-lg border border-gray-100">
        <i class="fas fa-info-circle text-blue-500 mr-2"></i>
        As the certified Digital signature is required to be obtained, I have filed this application attaching the following documents and details.
      </p>

      <div class="space-y-6">

        <!-- Full Name -->
        <div>
          <label class="font-semibold text-gray-800 block mb-1 flex items-center gap-2">
            <span class="bg-blue-100 text-blue-700 w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">1</span>
            Full Name and address of the subscriber
          </label>
          <input name="full_name" placeholder="Full name"
                 class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
        </div>

        <!-- Legal Status -->
        <div>
          <label class="font-semibold text-gray-800 block mb-1 flex items-center gap-2">
            <span class="bg-blue-100 text-blue-700 w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">2</span>
            Legal status of subscriber
          </label>
          <input name="legal_status" placeholder="e.g. Nepalese citizen, Company, etc."
                 class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
        </div>

        <!-- 3.1 Natural Person -->
        <div>
          <p class="font-semibold text-gray-800 flex items-center gap-2 mb-2">
            <span class="bg-blue-100 text-blue-700 w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">3</span>
            Certificate to identify the subscriber
          </p>
          <div class="ml-2 pl-2 border-l-2 border-blue-200">
            <p class="font-medium text-gray-700 mb-2 text-[14px]">3.1 In case of natural person:</p>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label class="text-gray-700 block mb-1 text-[13px] font-medium">a) Citizenship/Passport No.</label>
                <input name="citizenship_no" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
              </div>
              <div>
                <label class="text-gray-700 block mb-1 text-[13px] font-medium">b) Issuing office</label>
                <input name="issuing_office" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
              </div>
              <div>
                <label class="text-gray-700 block mb-1 text-[13px] font-medium">c) Date of issue</label>
                <input type="date" name="issue_date" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
              </div>
              <div>
                <label class="text-gray-700 block mb-1 text-[13px] font-medium">d) Duration of validity</label>
                <input name="duration_validity" placeholder="e.g. 5 years"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
              </div>
            </div>
          </div>
        </div>

        <!-- 3.2 Company -->
        <div>
          <div class="ml-2 pl-2 border-l-2 border-blue-200">
            <p class="font-medium text-gray-700 mb-2 text-[14px]">3.2 In case of a firm, Company, Corporate body or Agency</p>
            <div class="space-y-4">
              <div>
                <label class="text-gray-700 block mb-1 text-[13px] font-medium">a) Registration Certificate</label>
                <input name="registration_certificate" placeholder="Registration number / details"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">b) Date of Issue</label>
                  <input type="date" name="company_issue_date"
                         class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                </div>
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">c) Issuing office</label>
                  <input name="company_issuing_office"
                         class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                </div>
              </div>
              <div>
                <label class="text-gray-700 block mb-1 text-[13px] font-medium">d) Objectives</label>
                <input name="objectives" placeholder="Main objectives of the organization"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
              </div>
            </div>
          </div>
        </div>

        <!-- Purpose -->
        <div>
          <p class="font-semibold text-gray-800 flex items-center gap-2 mb-2">
            <span class="bg-blue-100 text-blue-700 w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">4</span>
            For what purpose the digital signature is intended to obtain:
          </p>
          <div class="ml-2 pl-2 border-l-2 border-blue-200 flex flex-col gap-2 pt-1">
            <label class="inline-flex items-center gap-2 cursor-pointer text-[14px]">
              <input type="checkbox" name="puropse_all" class="w-4 h-4 text-blue-600" />
              For all types of possible transaction
            </label>
            <label class="inline-flex items-center gap-2 cursor-pointer text-[14px]">
              <input type="checkbox" name="purpose_banking" class="w-4 h-4 text-blue-600" />
              For Banking Purposes
            </label>
            <label class="inline-flex items-center gap-2 cursor-pointer text-[14px]">
              <input type="checkbox" name="purpose_purchase" class="w-4 h-4 text-blue-600" />
              For other transactions relating to purchase and sale
            </label>
            <label class="inline-flex items-center gap-2 cursor-pointer text-[14px]">
              <input type="checkbox" name="purpose_certification" class="w-4 h-4 text-blue-600" />
              For the certification that any correspondence is issued by oneself
            </label>
          </div>
        </div>

        <!-- Threshold -->
        <div>
          <label class="font-semibold text-gray-800 flex items-center gap-2 mb-1">
            <span class="bg-blue-100 text-blue-700 w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">5</span>
            Maximum threshold of each transaction:
          </label>
          <input name="transaction_threshold" placeholder="e.g. NPR 500,000"
                 class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full sm:w-80 text-[14px]" />
        </div>

        <!-- Declaration -->
        <label class="flex items-start gap-2 cursor-pointer">
          <input type="checkbox" name="declaration" class="accent-green-600 mt-1">
          <span>Details stated above are true and correct. I shall submit other details and proofs, as required by the Authority, at a time when so asked and I shall, upon the issuance of license, pay the fee therefor.</span>
        </label>

        <!-- Signature row -->
        <div class="flex flex-wrap justify-end gap-4 pt-2 border-t border-gray-200">
          <div class="flex items-center gap-2">
            <span class="text-[13px] text-gray-600 font-medium">Applicant's:</span>
            <input name="applicant_name" placeholder="Name"
                   class="border border-gray-300 p-2 outline-none focus:border-blue-400 rounded-lg w-40 text-[14px]" />
          </div>
          <div class="flex items-center gap-2">
            <span class="text-[13px] text-gray-600 font-medium">Name:</span>
            <input name="final_name" placeholder="Full name"
                   class="border border-gray-300 p-2 outline-none focus:border-blue-400 rounded-lg w-40 text-[14px]" />
          </div>
          <div class="flex items-center gap-2">
            <span class="text-[13px] text-gray-600 font-medium">Signature:</span>
            <input name="signature" placeholder="Signature"
                   class="border border-gray-300 p-2 outline-none focus:border-blue-400 rounded-lg w-40 text-[14px]" />
          </div>
        </div>
        <p class="text-[12px] text-gray-500 italic">In the case of a corporate body, the seal of the office, signature, name, and designation of the person making the application on behalf of the body.</p>
      </div>
    </section>

    <!-- ============================================================ -->
    <!-- PART 2 — ADDITIONAL INFORMATION                               -->
    <!-- ============================================================ -->
    <section class="section-card bg-white border border-gray-200/80 rounded-2xl p-6 md:p-8 shadow-sm relative">

      <div class="relative mb-8">
        <div class="text-center border-b border-gray-100 pb-4">
          <h2 class="text-2xl font-bold text-gray-800">Additional Information</h2>
          <p class="text-[13px] text-gray-600">As mentioned Electronic Transactions Rules 2064 "Chapter -5" (3)</p>
          <div class="mt-2">
            <p class="font-bold text-xl text-gray-800">The Radiant InfoTech Nepal Private Limited</p>
            <p class="text-[15px] font-semibold text-indigo-700">(Issuing Certifying Authority)</p>
          </div>
        </div>

        <!-- Photo upload -->
        <div class="absolute top-0 right-0 w-32 h-36 border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center overflow-hidden bg-gray-50 photo-upload-box cursor-pointer">
          <div id="photoPreviewContainer" class="text-center px-1">
            <i class="fas fa-camera text-gray-400 text-2xl mb-1"></i>
            <p class="text-[10px] text-gray-400 leading-tight">Click to upload photo</p>
          </div>
          <img id="photoPreviewImg" class="hidden w-full h-full object-cover" alt="Preview" />
          <input type="file" id="photoInput" name="image" accept="image/*"
                 class="absolute inset-0 opacity-0 cursor-pointer" />
        </div>
      </div>

      <div class="space-y-8">

        <!-- Address -->
        <div>
          <p class="font-bold text-gray-800 text-lg flex items-center gap-2 mb-3">
            <span class="bg-indigo-100 text-indigo-700 w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold">1</span>
            Name, surname and address of the subscriber
          </p>
          <div class="ml-2 pl-2 border-l-2 border-indigo-200 space-y-4">
            <p class="font-medium text-gray-700 text-[14px]">1.1 In case of natural person</p>
            <div>
              <label class="text-gray-700 block mb-1 text-[13px] font-medium">a) Address</label>
              <input name="address" placeholder="Current address"
                     class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
            </div>
            <div>
              <p class="text-gray-700 font-medium mb-1 text-[13px]">b) Permanent Address (Mailing)</p>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <input name="organization_province" placeholder="Province"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
                <input name="district" placeholder="District"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
                <input name="municipality" placeholder="Municipality"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
              </div>
              <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-3">
                <input name="city" placeholder="City"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
                <input name="ward" placeholder="Ward No"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
                <input name="post_box" placeholder="Post Box No"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
                <input name="contact_number" placeholder="Contact Number"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
              </div>
            </div>
          </div>
        </div>

        <!-- Contact -->
        <div>
          <p class="font-bold text-gray-800 text-lg flex items-center gap-2 mb-3">
            <span class="bg-indigo-100 text-indigo-700 w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold">2</span>
            Contact details of the subscriber
          </p>
          <div class="ml-2 pl-2 border-l-2 border-indigo-200 space-y-4">
            <p class="font-medium text-gray-700 text-[14px]">2.1 In case of natural person</p>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <input name="email" placeholder="Primary Email"
                     class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
              <input name="alternate_email" placeholder="Alternate Email"
                     class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
              <input name="cell_number" placeholder="Cell Number"
                     class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
              <input name="telephon_no" placeholder="Telephone No"
                     class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg text-[14px]" />
            </div>
          </div>
        </div>

        <!-- Organization -->
        <div>
          <div class="ml-2 pl-2 border-l-2 border-indigo-200 space-y-4">
            <p class="font-bold text-gray-800 text-[15px]">2.2 In case of Firm, Company, Corporate body or Agency</p>
            <div class="grid grid-cols-1 gap-4">
              <div class="flex flex-wrap items-center gap-2">
                <span class="text-[13px] font-medium w-40">a) Organization Name:</span>
                <input name="organization_name" placeholder="Organization name"
                       class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg flex-1 min-w-[200px] text-[14px]" />
              </div>

              <div>
                <p class="text-[13px] font-medium mb-2">Type of Organization:</p>
                <div class="flex flex-wrap gap-4">
                  <label class="inline-flex items-center gap-1.5 cursor-pointer text-[13px]">
                    <input type="radio" name="organization_type" value="Proprietorship" class="w-4 h-4" /> Proprietorship
                  </label>
                  <label class="inline-flex items-center gap-1.5 cursor-pointer text-[13px]">
                    <input type="radio" name="organization_type" value="Partnership" class="w-4 h-4" /> Partnership
                  </label>
                  <label class="inline-flex items-center gap-1.5 cursor-pointer text-[13px]">
                    <input type="radio" name="organization_type" value="Public" class="w-4 h-4" /> Public
                  </label>
                  <label class="inline-flex items-center gap-1.5 cursor-pointer text-[13px]">
                    <input type="radio" name="organization_type" value="NGO/INGO" class="w-4 h-4" /> NGO/INGO
                  </label>
                  <label class="inline-flex items-center gap-1.5 cursor-pointer text-[13px]">
                    <input type="radio" name="organization_type" value="Government" class="w-4 h-4" /> Government
                  </label>
                  <label class="inline-flex items-center gap-1.5 cursor-pointer text-[13px]">
                    <input type="radio" name="organization_type" value="Others" class="w-4 h-4" /> Others
                  </label>
                </div>
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">b) Address</label>
                  <input name="organization_address" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                </div>
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">City</label>
                  <input name="organization_city" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                </div>
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">Province</label>
                  <input name="organization_province" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                </div>
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">District</label>
                  <input name="organization_district" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                </div>
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">VDC/Municipality</label>
                  <input name="organization_municipality" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                </div>
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">Ward No</label>
                  <input name="organization_ward" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                </div>
              </div>

              <div>
                <p class="font-semibold text-gray-800 mt-2">Registration Certificate</p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-2">
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">a) PAN/VAT No</label>
                    <input name="pan_vat" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                  </div>
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">Tax Clearance Up to</label>
                    <input name="tax_clearance" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                  </div>
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">b) E-mail</label>
                    <input name="organization_email" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                  </div>
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">Alternative E-mail</label>
                    <input name="organization_alternate_email" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                  </div>
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">c) Telephone/Fax</label>
                    <input name="fax" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                  </div>
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">Website (URL)</label>
                    <input name="website" class="border border-gray-300 p-2.5 outline-none focus:border-blue-400 rounded-lg w-full text-[14px]" />
                  </div>
                </div>
              </div>
              <div>
                <p class="font-semibold text-gray-800 mt-2">Required document</p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-2">
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">a) PAN / VAT Certificate Copy</label>
                    <input
            type="file"
            id="panVatDocument"
            name="pan_vat_document"
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
            class="block w-full text-xs text-gray-700 border border-gray-300 rounded-md cursor-pointer
                   file:mr-3 file:py-1.5 file:px-3
                   file:rounded-l-md file:border-0
                   file:bg-blue-600 file:text-white
                   hover:file:bg-blue-700
                   h-10"
        >
                  </div>
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">b)Company Registration Copy</label>
                    <input
            type="file"
            id="panVatDocument"
            name="pan_vat_document"
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
            class="block w-full text-xs text-gray-700 border border-gray-300 rounded-md cursor-pointer
                   file:mr-3 file:py-1.5 file:px-3
                   file:rounded-l-md file:border-0
                   file:bg-blue-600 file:text-white
                   hover:file:bg-blue-700
                   h-10"
        >
                  </div>
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">c) Engineering Council Certificate copy[ If Applicable]</label>
                    <input
            type="file"
            id="panVatDocument"
            name="pan_vat_document"
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
            class="block w-full text-xs text-gray-700 border border-gray-300 rounded-md cursor-pointer
                   file:mr-3 file:py-1.5 file:px-3
                   file:rounded-l-md file:border-0
                   file:bg-blue-600 file:text-white
                   hover:file:bg-blue-700
                   h-10"
        >
                  </div>
                  <div>
                    <label class="text-gray-700 block mb-1 text-[13px] font-medium">d) Citizenship copy</label>
                    <input
            type="file"
            id="panVatDocument"
            name="pan_vat_document"
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
            class="block w-full text-xs text-gray-700 border border-gray-300 rounded-md cursor-pointer
                   file:mr-3 file:py-1.5 file:px-3
                   file:rounded-l-md file:border-0
                   file:bg-blue-600 file:text-white
                   hover:file:bg-blue-700
                   h-10"
        >
                  </div>
                
                <div>
                  <label class="text-gray-700 block mb-1 text-[13px] font-medium">e) Tax Clearance Copy (Latest)</label>
                  <input
          type="file"
          id="panVatDocument"
          name="pan_vat_document"
          accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
          class="block w-full text-xs text-gray-700 border border-gray-300 rounded-md cursor-pointer
                 file:mr-3 file:py-1.5 file:px-3
                 file:rounded-l-md file:border-0
                 file:bg-blue-600 file:text-white
                 hover:file:bg-blue-700
                 h-10"
      >
                </div>
                
              </div>
            </div>
          </div>
        </div>

        <!-- Certificate Class -->
        <div>
          <p class="font-bold text-gray-800 text-lg flex items-center gap-2 mb-3">
            <span class="bg-indigo-100 text-indigo-700 w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold">3</span>
            Certificate class and purpose
          </p>
          <div class="ml-2 pl-2 border-l-2 border-indigo-200 space-y-4">
            <div class="flex flex-wrap gap-5">
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="radio" name="certificate_class" value="1" class="w-4 h-4" /> Class 1
              </label>
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="radio" name="certificate_class" value="2" class="w-4 h-4" /> Class 2
              </label>
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="radio" name="certificate_class" value="3" class="w-4 h-4" /> Class 3
              </label>
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="radio" name="certificate_class" value="GIOMS" class="w-4 h-4" /> Class (GIOMS)
              </label>
            </div>
            <div class="flex flex-wrap gap-5">
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="checkbox" name="use_signature" class="w-4 h-4" /> Signature
              </label>
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="checkbox" name="use_encryption" class="w-4 h-4" /> Encryption
              </label>
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="checkbox" name="use_both" class="w-4 h-4" /> Both (Signature and Encryption)
              </label>
            </div>
            <div class="flex flex-wrap gap-5">
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="radio" name="validity_year" value="1" class="w-4 h-4" /> 1 Year
              </label>
              <label class="inline-flex items-center gap-1.5 cursor-pointer text-[14px]">
                <input type="radio" name="validity_year" value="2" class="w-4 h-4" /> 2 Years
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div class="mt-10 border-t border-gray-200 pt-6 flex flex-wrap justify-between items-end gap-6">
        <div class="text-[13px] text-gray-600 leading-relaxed">
          <p><i class="fas fa-map-marker-alt text-blue-500 w-4"></i> Radiant Building, Naxal, Bhattbhateni, Kathmandu, Nepal</p>
          <p><i class="fas fa-phone text-blue-500 w-4"></i> Tel.: +977-01-4545765, 4524311</p>
          <p><i class="fas fa-envelope text-blue-500 w-4"></i> Email:
            <a href="mailto:dsc@radiantnepal.info" class="text-blue-600 hover:underline">dsc@radiantnepal.info</a>,
            <a href="mailto:admin@radiantnepal.com" class="text-blue-600 hover:underline">admin@radiantnepal.com</a>
          </p>
          <p><i class="fas fa-globe text-blue-500 w-4"></i> Website:
            <a href="https://www.radiantca.com.np" target="_blank" class="text-blue-600 hover:underline">www.radiantca.com.np</a>
          </p>
        </div>
        <div class="text-center">
          <div class="border-t border-gray-300 w-64 mx-auto mb-2"></div>
          <p class="font-semibold text-[13px] text-gray-700">Official Seal & Stamp (If Any) / Signature</p>
          <div class="mt-3 flex flex-col items-center">
            <img src="{% static 'img/radiant_logo.png' %}" alt="Radiant Infotech Nepal" style="width:120px;height:auto;">
            <a href="https://www.radiantca.com.np" target="_blank" class="text-xs mt-1 text-blue-600 hover:underline">www.radiantca.com.np</a>
            <p class="text-xs text-gray-700">(Issuing Certifying Authority)</p>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================================================ -->
    <!-- SUBMIT                                                        -->
    <!-- ============================================================ -->
    <div class="text-center pb-6">
      <div id="statusMsg" class="mb-4 font-semibold text-lg"></div>
      <div id="errorBox" class="hidden mb-4 bg-red-50 border border-red-200 rounded-xl p-4 text-left max-w-2xl mx-auto">
        <p class="font-semibold text-red-700 mb-2"><i class="fas fa-exclamation-circle mr-1"></i> Please fix the following errors:</p>
        <ul id="errorList" class="list-disc list-inside text-red-600 text-[13px] space-y-1"></ul>
      </div>
      <button type="button" id="submitBtn" onclick="handleSubmit()"
              class="bg-green-600 hover:bg-green-800 text-white px-12 py-3.5 rounded-xl font-semibold text-[16px] disabled:opacity-60 transition-all shadow-md hover:shadow-lg inline-flex items-center gap-2">
        <i class="fas fa-paper-plane"></i> Submit Complete Application
      </button>
    </div>

  </form>
</div>
</div>

<script>
  // Photo preview
  document.getElementById('photoInput').addEventListener('change', function(e) {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(ev) {
        const img = document.getElementById('photoPreviewImg');
        img.src = ev.target.result;
        img.classList.remove('hidden');
        document.getElementById('photoPreviewContainer').style.display = 'none';
      };
      reader.readAsDataURL(file);
    }
  });

  // Submit via AJAX
  async function handleSubmit() {
    const statusMsg = document.getElementById('statusMsg');
    const submitBtn = document.getElementById('submitBtn');
    const errorBox  = document.getElementById('errorBox');
    const errorList = document.getElementById('errorList');

    statusMsg.textContent = '';
    statusMsg.className = 'mb-4 font-semibold text-lg';
    errorBox.classList.add('hidden');
    errorList.innerHTML = '';
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting...';

    const formData = new FormData(document.getElementById('mainForm'));

    try {
      const response = await fetch("{% url 'digital_signature_apply' %}", {
        method: 'POST',
        headers: { 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value },
        body: formData,
      });

      const data = await response.json();

      if (response.ok && data.success) {
        statusMsg.textContent = '✅ Application submitted successfully! We will contact you shortly.';
        statusMsg.classList.add('text-green-600');
        document.getElementById('mainForm').reset();
        document.getElementById('photoPreviewImg').classList.add('hidden');
        document.getElementById('photoPreviewContainer').style.display = '';
      } else {
        statusMsg.textContent = '❌ Submission failed. Please check the errors below.';
        statusMsg.classList.add('text-red-600');
        if (data.errors) {
          errorBox.classList.remove('hidden');
          const errors = typeof data.errors === 'string'
            ? { error: [data.errors] }
            : data.errors;
          for (const [field, messages] of Object.entries(errors)) {
            messages.forEach(msg => {
              const li = document.createElement('li');
              li.textContent = `${field.replace(/_/g, ' ')}: ${msg}`;
              errorList.appendChild(li);
            });
          }
        }
      }
    } catch (err) {
      statusMsg.textContent = '❌ Network error. Please try again.';
      statusMsg.classList.add('text-red-600');
    } finally {
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Submit Complete Application';
    }
  }
</script>

{% endblock %}