{% extends 'base.html' %}
{% block content %}
<h1 class="text-xl font-semibold mb-4">Projects for {{ case_email }}</h1>
<div class="bg-white shadow rounded-2xl overflow-auto" style="height: calc(100vh - 200px);">
  <table class="w-full">
    <thead class="bg-slate-100 text-left text-sm">
      <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">Client Email (Primary)</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 Hona Portal</th>
        <th class="px-4 py-3">Matter Stage</th>
        <th class="px-4 py-3 w-[500px]">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>
        <th class="px-4 py-3">Service Attempt Date 1</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">

          <div class="flex"></div>
          <div class="rounded-2xl bg-red-50 text-red-900 p-2 text-xs">???</div>
          </div>
        </td>
        <td class="px-4 py-3 text-sm">
          {% if r.responsible_attorney %}
          <div class="flex gap-4">
            <div
              class="relative rounded-full bg-green-100 w-12 h-12 inline-flex items-center justify-center text-strong-600 font-semibold text-sm border border-green-200 shadow-sm">
              <span>{{- r.responsible_attorney.initials}}</span>
            </div>
        
            <div>{{ r.responsible_attorney.fullname }}</div>
          </div>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm">
          <div class="flex gap-4">

          {% if r.staff_person %}
          <div class="flex gap-4">
            <div
              class="relative rounded-full bg-green-100 w-12 h-12 inline-flex items-center justify-center text-strong-600 font-semibold text-sm border border-green-200 shadow-sm">
              <span>{{- r.staff_person.initials}}</span>
            </div>
        
            <div>{{ r.staff_person.fullname }}</div>
          </div>
          {% endif %}
          <div class="rounded-2xl bg-red-50 text-red-900 p-2 text-xs">???</div>
          </div>
        </td>
        <td class="px-4 py-3 text-sm">
          <div class="flex">
          <div class="rounded-2xl bg-red-50 text-red-900 p-2 text-xs">???</div>
            
          </div>
        </td>
        <td class="px-4 py-3 text-sm">
          <div class="flex"></div>
          <div class="rounded-2xl bg-red-50 text-red-900 p-2 text-xs">???</div>
            
          </div>
          
        </td>
        <td class="px-4 py-3 text-sm"> {{ r.phase_name }}</td>
        <td class="px-4 py-3 text-sm min-w-[500px] 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 }}</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>
          
          <!-- Modal for completed tasks -->
          <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 }}</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 }}</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>
          
          <!-- Modal for pending tasks -->
          <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 }}</li>
                {% endfor %}
              </ul>
            </div>
          </div>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm"></td>
        <td class="px-4 py-3 text-sm">{{ r.service_attempt_date_1}}</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>
{% endblock %}