{% extends 'base.html' %}
{% block content %}
<div class="h-[90vh] flex flex-col">
<h1 class="text-xl font-semibold mb-4">Projects for {{ case_email }}</h1>
<div class="m-4  w-full flex-grow overflow-scroll">
  <table class="w-full whitespace-nowrap">
    <thead class="bg-slate-100 text-left text-sm sticky top-0 z-10">
      <tr>
        <th class="px-4 py-3">Matter Num</th>
        <th class="px-4 py-3">Client / Property</th>
        <th class="px-4 py-3">Matter Description</th>
        <th class="px-4 py-3">Defendant 1</th>
        <th class="px-4 py-3">Matter Open</th>
        <th class="px-4 py-3">Practice Area</th>
        <th class="px-4 py-3">Notice Type</th>
        <th class="px-4 py-3">Case Number</th>
        <th class="px-4 py-3">Premises Address</th>
        <th class="px-4 py-3">Premises City</th>
        <th class="px-4 py-3">Responsible Attorney and best contact</th>
        <th class="px-4 py-3">Staff person currently in charge of your case, with contact info</th>
        <th class="px-4 py-3">2nd Staff person currently in charge of your case, with contact info</th>
        <th class="px-4 py-3">Link to Documents</th>
        <th class="px-4 py-3">Matter Stage</th>
        <th class="px-4 py-3">Completed Tasks</th>
        <th class="px-4 py-3">Pending Tasks</th>
        <th class="px-4 py-3">Notice Service Date</th>
        <th class="px-4 py-3">Notice Expir. Date</th>
        <th class="px-4 py-3">Date Case Filed</th>
        <th class="px-4 py-3">Daily Rent Damages</th>
        <th class="px-4 py-3">Default Date</th>
        <th class="px-4 py-3">Default Entered On</th>
        <th class="px-4 py-3">Motions:</th>
        <th class="px-4 py-3">Demurrer Hearing Date</th>
        <th class="px-4 py-3">Motion To Strike Hearing Date</th>
        <th class="px-4 py-3">Motion to Quash Hearing Date</th>
        <th class="px-4 py-3">Other Motion Hearing Date</th>
        <th class="px-4 py-3">MSC Date</th>
        <th class="px-4 py-3">MSC Time</th>
        <th class="px-4 py-3">MSC Address</th>
        <th class="px-4 py-3">MSC Div/ Dept/ Room</th>
        <th class="px-4 py-3">Trial Date</th>
        <th class="px-4 py-3">Trial Time</th>
        <th class="px-4 py-3">Trial Address</th>
        <th class="px-4 py-3">Trial Div/ Dept/ Room</th>
        <th class="px-4 py-3">Final Result of Trial/ MSC</th>
        <th class="px-4 py-3">Date of Settlement</th>
        <th class="px-4 py-3">Final Obligation Under the Stip</th>
        <th class="px-4 py-3">Def's Comply with the Stip?</th>
        <th class="px-4 py-3">Judgment Date</th>
        <th class="px-4 py-3">Writ Issued Date</th>
        <th class="px-4 py-3">Scheduled Lockout</th>
        <th class="px-4 py-3">Oppose Stays?</th>
        <th class="px-4 py-3">Premises Safety or Access Issues</th>
        <th class="px-4 py-3">Matter Gate or Entry Code</th>
        <th class="px-4 py-3">Date Possession Recovered</th>
        <th class="px-4 py-3">Attorney's Fees</th>
        <th class="px-4 py-3">Costs</th>
      </tr>
    </thead>
    <tbody class="divide-y">
      {% for r in rows %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm">{{ r.client }}</td>
        <td class="px-4 py-3 text-sm">{{ r.matter_description }}</td>
        <td class="px-4 py-3 text-sm">{{ r.defendant_1 }}</td>
        <td class="px-4 py-3 text-sm">{{ r.matter_open }}</td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm">{{ r.notice_type }}</td>
        <td class="px-4 py-3 text-sm">{{ r.case_number }}</td>
        <td class="px-4 py-3 text-sm">{{ r.premises_address }}</td>
        <td class="px-4 py-3 text-sm">{{ r.premises_city }}</td>
        <td class="px-4 py-3 text-sm">
            {{ r.responsible_attorney }}
        </td>
        <td class="px-4 py-3 text-sm">
            {{ r.staff_person }}
        </td>
        <td class="px-4 py-3 text-sm">
            {{ r.staff_person_2 }}
        </td>
        <td class="px-4 py-3 text-sm">
          {% if r.documents_url %} 
          <a href="{{ r.documents_url }}">Documents</a>
        {% endif %}</td>
        <td class="px-4 py-3 text-sm"> {{ r.phase_name }}</td>
        <td class="px-4 py-3 text-sm align-top" x-data="{ showCompletedModal: false}">
          {% if r.completed_tasks %}
          <div>
            <ul class="list-disc list-inside align-top">
              {% for x in r.completed_tasks[:2] %}
              <li>{{ x.description }} - {{ x.completed }}</li>
              {% endfor %}
            </ul>
            {% if r.completed_tasks|length > 2 %}
            <button @click="showCompletedModal = true" class="text-blue-500 hover:text-blue-700 text-sm mt-1">Show more...</button>
            {% endif %}
          </div>
          
          <div x-show="showCompletedModal"
               x-transition
               class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
               @click.self="showCompletedModal = false">
            <div class="bg-white rounded-lg p-6 max-w-lg w-full max-h-[80vh] overflow-y-auto">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">Completed Tasks</h3>
                <button @click="showCompletedModal = false" class="text-gray-500 hover:text-gray-700">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                  </svg>
                </button>
              </div>
              <ul class="list-disc list-inside">
                {% for x in r.completed_tasks %}
                <li>{{ x.description }} - {{ x.completed }}</li>
                {% endfor %}
              </ul>
            </div>
          </div>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm min-w-[500px] align-top" x-data="{ showPendingModal: false }">
          {% if r.pending_tasks %}
          <div>
            <ul class="list-disc list-inside align-top">
              {% for x in r.pending_tasks[:2] %}
              <li>{{ x.description }}</li>
              {% endfor %}
            </ul>
            {% if r.pending_tasks|length > 2 %}
            <button @click="showPendingModal = true" class="text-blue-500 hover:text-blue-700 text-sm mt-1">Show more...</button>
            {% endif %}
          </div>
          
          <div x-show="showPendingModal"
               x-transition
               class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
               @click.self="showPendingModal = false">
            <div class="bg-white rounded-lg p-6 max-w-lg w-full max-h-[80vh] overflow-y-auto">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">Pending Tasks</h3>
                <button @click="showPendingModal = false" class="text-gray-500 hover:text-gray-700">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                  </svg>
                </button>
              </div>
              <ul class="list-disc list-inside">
                {% for x in r.pending_tasks %}
                <li>{{ x.description }}</li>
                {% endfor %}
              </ul>
            </div>
          </div>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm">{{ r.notice_service_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.notice_expiration_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.case_field_date }}</td>
        <td class="px-4 py-3 text-sm">{% if r.daily_rent_damages %}${{ "{:,.2f}".format(r.daily_rent_damages) }}{% endif %}</td>
        <td class="px-4 py-3 text-sm">{{ r.default_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.default_entered_on_date }}</td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm">{{ r.demurrer_hearing_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.motion_to_strike_hearing_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.motion_to_quash_hearing_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.other_motion_hearing_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.msc_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.msc_time }}</td>
        <td class="px-4 py-3 text-sm">{{ r.msc_address }}</td>
        <td class="px-4 py-3 text-sm">{{ r.msc_div_dept_room }}</td>
        <td class="px-4 py-3 text-sm">{{ r.trial_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.trial_time }}</td>
        <td class="px-4 py-3 text-sm">{{ r.trial_address }}</td>
        <td class="px-4 py-3 text-sm">{{ r.trial_div_dept_room }}</td>
        <td class="px-4 py-3 text-sm">{{ r.final_result }}</td>
        <td class="px-4 py-3 text-sm">{{ r.date_of_settlement }}</td>
        <td class="px-4 py-3 text-sm">{{ r.final_obligation }}</td>
        <td class="px-4 py-3 text-sm">{{ r.def_comply_stip }}</td>
        <td class="px-4 py-3 text-sm">{{ r.judgment_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.writ_issued_date }}</td>
        <td class="px-4 py-3 text-sm">{{ r.scheduled_lockout }}</td>
        <td class="px-4 py-3 text-sm">{{ r.oppose_stays }}</td>
        <td class="px-4 py-3 text-sm">{{ r.premises_safety }}</td>
        <td class="px-4 py-3 text-sm">{{ r.matter_gate_code }}</td>
        <td class="px-4 py-3 text-sm">{{ r.date_possession_recovered }}</td>
        <td class="px-4 py-3 text-sm">{{ r.attorney_fees }}</td>
        <td class="px-4 py-3 text-sm">{{ r.costs }}</td>
      </tr>
      {% else %}
      <tr>
        <td colspan="53" class="px-4 py-6 text-center text-slate-500">No matching projects found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<!--
<div class="bg-white shadow rounded-2xl overflow-scroll">
-->
{% endblock %}