{% extends "base.html" %}
{% load static %}

{% block title %}{% if object %}Edit{% else %}Add{% endif %} Insurance - Patients{% endblock %}

{% block css %}
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
  <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
  <li class="breadcrumb-item"><a href="{% url 'patients:patient_list' %}">Patients</a></li>

  {% if object %}
    <li class="breadcrumb-item">
      <a href="{% url 'patients:patient_detail' object.patient.pk %}">{{ object.patient.get_full_name }}</a>
    </li>
    <li class="breadcrumb-item active">Edit Insurance</li>
  {% else %}
    {% if patient %}
      <li class="breadcrumb-item">
        <a href="{% url 'patients:patient_detail' patient.pk %}">{{ patient.get_full_name }}</a>
      </li>
    {% endif %}
    <li class="breadcrumb-item active">Add Insurance</li>
  {% endif %}
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
  {% if object %}Edit Insurance{% else %}Add Insurance{% endif %}
  <small>
    {% if object %}{{ object.insurance_company }}{% elif patient %}for {{ patient.get_full_name }}{% else %}New Insurance Policy{% endif %}
  </small>
</h1>
<!-- END page-header -->

<div class="row">
  <div class="col-xl-8">
    <!-- BEGIN panel -->
    <div class="panel panel-inverse">
      <div class="panel-heading">
        <h4 class="panel-title">Insurance Information</h4>
        <div class="panel-heading-btn">
          <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
          <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
          <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
        </div>
      </div>

      <div class="panel-body">
        {% if messages %}
          {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
              {{ message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
          {% endfor %}
        {% endif %}

        {% if form.non_field_errors %}
          <div class="alert alert-danger">
            {{ form.non_field_errors }}
          </div>
        {% endif %}

        <form method="post" id="insurance-form" novalidate>
          {% csrf_token %}

          <!-- POLICY BASICS -->
          <div class="row mb-3">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.insurance_type.id_for_label }}" class="form-label">Insurance Type <span class="text-danger">*</span></label>
                {{ form.insurance_type }}
                {% if form.insurance_type.errors %}<div class="invalid-feedback d-block">{{ form.insurance_type.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.insurance_company.id_for_label }}" class="form-label">Insurance Company <span class="text-danger">*</span></label>
                {{ form.insurance_company }}
                {% if form.insurance_company.errors %}<div class="invalid-feedback d-block">{{ form.insurance_company.errors.0 }}</div>{% endif %}
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.plan_name.id_for_label }}" class="form-label">Plan Name</label>
                {{ form.plan_name }}
                {% if form.plan_name.errors %}<div class="invalid-feedback d-block">{{ form.plan_name.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.plan_type.id_for_label }}" class="form-label">Plan Type</label>
                {{ form.plan_type }}
                {% if form.plan_type.errors %}<div class="invalid-feedback d-block">{{ form.plan_type.errors.0 }}</div>{% endif %}
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.policy_number.id_for_label }}" class="form-label">Policy Number <span class="text-danger">*</span></label>
                {{ form.policy_number }}
                {% if form.policy_number.errors %}<div class="invalid-feedback d-block">{{ form.policy_number.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.group_number.id_for_label }}" class="form-label">Group Number</label>
                {{ form.group_number }}
                {% if form.group_number.errors %}<div class="invalid-feedback d-block">{{ form.group_number.errors.0 }}</div>{% endif %}
              </div>
            </div>
          </div>

          <!-- SUBSCRIBER -->
          <div class="row mb-3">
            <div class="col-12">
              <h6 class="border-bottom pb-2">Subscriber</h6>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.subscriber_name.id_for_label }}" class="form-label">Subscriber Name</label>
                {{ form.subscriber_name }}
                {% if form.subscriber_name.errors %}<div class="invalid-feedback d-block">{{ form.subscriber_name.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.subscriber_relationship.id_for_label }}" class="form-label">Relationship</label>
                {{ form.subscriber_relationship }}
                {% if form.subscriber_relationship.errors %}<div class="invalid-feedback d-block">{{ form.subscriber_relationship.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.subscriber_dob.id_for_label }}" class="form-label">Subscriber DOB</label>
                {{ form.subscriber_dob }}
                {% if form.subscriber_dob.errors %}<div class="invalid-feedback d-block">{{ form.subscriber_dob.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.subscriber_id_number.id_for_label }}" class="form-label">Subscriber ID Number</label>
                {{ form.subscriber_id_number }}
                {% if form.subscriber_id_number.errors %}<div class="invalid-feedback d-block">{{ form.subscriber_id_number.errors.0 }}</div>{% endif %}
              </div>
            </div>
          </div>

          <!-- DATES -->
          <div class="row mb-3">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.effective_date.id_for_label }}" class="form-label">Effective Date</label>
                {{ form.effective_date }}
                {% if form.effective_date.errors %}<div class="invalid-feedback d-block">{{ form.effective_date.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-6">
              <div class="mb-3">
                <label for="{{ form.termination_date.id_for_label }}" class="form-label">Termination Date</label>
                {{ form.termination_date }}
                {% if form.termination_date.errors %}<div class="invalid-feedback d-block">{{ form.termination_date.errors.0 }}</div>{% endif %}
              </div>
            </div>
          </div>

          <!-- FINANCIALS -->
          <div class="row mb-3">
            <div class="col-md-4">
              <div class="mb-3">
                <label for="{{ form.copay_amount.id_for_label }}" class="form-label">Copay Amount ($)</label>
                {{ form.copay_amount }}
                {% if form.copay_amount.errors %}<div class="invalid-feedback d-block">{{ form.copay_amount.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-4">
              <div class="mb-3">
                <label for="{{ form.deductible_amount.id_for_label }}" class="form-label">Deductible ($)</label>
                {{ form.deductible_amount }}
                {% if form.deductible_amount.errors %}<div class="invalid-feedback d-block">{{ form.deductible_amount.errors.0 }}</div>{% endif %}
              </div>
            </div>

            <div class="col-md-4">
              <div class="mb-3">
                <label for="{{ form.out_of_pocket_max.id_for_label }}" class="form-label">Out-of-Pocket Max ($)</label>
                {{ form.out_of_pocket_max }}
                {% if form.out_of_pocket_max.errors %}<div class="invalid-feedback d-block">{{ form.out_of_pocket_max.errors.0 }}</div>{% endif %}
              </div>
            </div>
          </div>

          <!-- FLAGS -->
          <div class="row mb-4">
            <div class="col-md-6">
              <div class="form-check">
                {{ form.is_verified }}
                <label class="form-check-label ms-1" for="{{ form.is_verified.id_for_label }}">Verified</label>
                {% if form.is_verified.errors %}<div class="invalid-feedback d-block">{{ form.is_verified.errors.0 }}</div>{% endif %}
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-check">
                {{ form.requires_authorization }}
                <label class="form-check-label ms-1" for="{{ form.requires_authorization.id_for_label }}">Requires Authorization</label>
                {% if form.requires_authorization.errors %}<div class="invalid-feedback d-block">{{ form.requires_authorization.errors.0 }}</div>{% endif %}
              </div>
            </div>
          </div>

          <!-- ACTIONS -->
          <div class="d-flex justify-content-between">
            <div>
              <a href="{% url 'patients:insurance_info_list' patient.pk %}" class="btn btn-secondary">
                <i class="fa fa-arrow-left me-2"></i>Cancel
              </a>
            </div>
            <div>
              <button type="submit" class="btn btn-primary">
                <i class="fa fa-check me-2"></i>{% if object %}Update{% else %}Create{% endif %} Insurance
              </button>
            </div>
          </div>

        </form>
      </div>
    </div>
    <!-- END panel -->
  </div>

  <div class="col-xl-4">
    <!-- PATIENT CARD -->
    <div class="panel panel-inverse">
      <div class="panel-heading">
        <h4 class="panel-title">Patient</h4>
      </div>
      <div class="panel-body">
        {% with p=object.patient|default:patient %}
          {% if p %}
            <div class="text-center mb-3">
              <div class="w-60px h-60px bg-primary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2">
                <i class="fa fa-user text-white"></i>
              </div>
              <h6 class="mb-1">{{ p.get_full_name }}</h6>
              <small class="text-muted">{{ p.patient_id }}</small>
            </div>

            <table class="table table-borderless table-sm">
              <tr><td class="fw-bold" width="60">DOB:</td><td>{{ p.date_of_birth|date:"M d, Y" }}</td></tr>
              <tr><td class="fw-bold">Age:</td><td>{{ p.age }} years</td></tr>
              <tr><td class="fw-bold">Gender:</td><td>{{ p.get_gender_display }}</td></tr>
            </table>

            <div class="d-grid">
              <a href="{% url 'patients:patient_detail' p.pk %}" class="btn btn-outline-primary btn-sm">
                <i class="fa fa-user me-2"></i>View Patient
              </a>
            </div>
          {% else %}
            <div class="alert alert-warning mb-0">No patient context found.</div>
          {% endif %}
        {% endwith %}
      </div>
    </div>

    <!-- HELP -->
    <div class="panel panel-inverse">
      <div class="panel-heading">
        <h4 class="panel-title">Help & Guidelines</h4>
      </div>
      <div class="panel-body">
        <div class="alert alert-info">
          <h6 class="alert-heading">Tips</h6>
          <ul class="mb-0 small">
            <li>Verify against the insurance card.</li>
            <li>Check effective and termination dates.</li>
            <li>Record subscriber info if different from patient.</li>
            <li>Mark “Requires Authorization” when pre-auth is needed.</li>
          </ul>
        </div>

        <div class="card border-primary mb-3">
          <div class="card-header bg-primary text-white">
            <h6 class="card-title mb-0">Frequently Required</h6>
          </div>
          <div class="card-body small">
            <ul class="list-unstyled mb-0">
              <li><i class="fa fa-check text-success me-2"></i>Insurance Type</li>
              <li><i class="fa fa-check text-success me-2"></i>Insurance Company</li>
              <li><i class="fa fa-check text-success me-2"></i>Policy Number</li>
            </ul>
          </div>
        </div>

        <div class="card border-warning">
          <div class="card-header bg-warning text-dark">
            <h6 class="card-title mb-0">Validation Rules</h6>
          </div>
          <div class="card-body small">
            <ul class="list-unstyled mb-0">
              <li><i class="fa fa-exclamation-triangle text-warning me-2"></i>Termination date must be after effective date.</li>
              <li><i class="fa fa-exclamation-triangle text-warning me-2"></i>Policy number often must be unique by company.</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Verification Modal (hooks kept for later integrations) -->
<div class="modal fade" id="verificationModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Verify Insurance</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="verification-results"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
<script>
$(function () {
  // Datepickers (optional; widgets already type="date")
  $('#{{ form.effective_date.id_for_label }}, #{{ form.termination_date.id_for_label }}').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
    todayHighlight: true
  });

  // Client-side sanity check for dates
  function validateDates() {
    const eff = $('#{{ form.effective_date.id_for_label }}').val();
    const term = $('#{{ form.termination_date.id_for_label }}').val();
    if (eff && term) {
      const e = new Date(eff);
      const t = new Date(term);
      if (t <= e) {
        $('#{{ form.termination_date.id_for_label }}').addClass('is-invalid');
        return false;
      } else {
        $('#{{ form.termination_date.id_for_label }}').removeClass('is-invalid');
      }
    }
    return true;
  }

  $('#{{ form.effective_date.id_for_label }}, #{{ form.termination_date.id_for_label }}').on('change', validateDates);

  // Minimal required validation on submit (server remains source of truth)
  $('#insurance-form').on('submit', function (e) {
    let ok = true;
    const requiredIds = [
      '{{ form.insurance_type.id_for_label }}',
      '{{ form.insurance_company.id_for_label }}',
      '{{ form.policy_number.id_for_label }}'
    ];
    requiredIds.forEach(function(id){
      const $f = $('#'+id);
      if(!$f.val()){
        $f.addClass('is-invalid');
        ok = false;
      } else {
        $f.removeClass('is-invalid');
      }
    });
    if (!validateDates()) ok = false;
    if (!ok) {
      e.preventDefault();
      alert('Please fill required fields and fix highlighted errors.');
    }
  });

  // Optional: simple uniqueness hint (adjust endpoint if you add it)
  $('#{{ form.policy_number.id_for_label }}, #{{ form.insurance_company.id_for_label }}').on('blur', function(){
    // Placeholder for future AJAX uniqueness check
  });
});
</script>
{% endblock %}