{% extends 'base.html' %}
{% block content %}
<div class="h-full flex flex-col" x-data="columnConfig()">
  <h1 class="text-xl font-semibold mb-4">Projects for {{ case_email }}</h1>

  <!-- Configure Visible Columns Link -->
  <div class="mb-4">
    <button @click="showColumnModal = true"
            class="text-blue-600 hover:text-blue-800 text-sm font-medium underline">
      Configure Visible Columns...
    </button>
  </div>

  <!-- Column Configuration Modal -->
  <div x-show="showColumnModal"
       x-cloak
       x-transition
       class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
       @click.self="showColumnModal = false">
    <div class="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold">Configure Visible Columns</h3>
        <button @click="showColumnModal = 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>
      
      <div class="mb-4">
        <label class="flex items-center">
          <input type="checkbox"
                 x-model="selectAll"
                 @change="toggleAllColumns()"
                 class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
          <span class="text-sm font-medium">Select All / Deselect All</span>
        </label>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-96 overflow-y-auto">
        <template x-for="(column, index) in columns" :key="index">
          <label class="flex items-center p-2 hover:bg-slate-50 rounded cursor-pointer">
            <input type="checkbox"
                   :value="index"
                   x-model="visibleColumns"
                   :changed="saveColumnSettings()"
                   :checked="visibleColumns.includes(index)"
                   class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
            <span class="text-sm" x-text="column"></span>
          </label>
        </template>
      </div>
      
      <div class="flex justify-end space-x-3 mt-6">
        <button @click="resetToDefault()"
                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
          Reset to Default
        </button>
        <button @click="showColumnModal = false;"
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
          Apply Changes
        </button>
      </div>
    </div>
  </div>

  <div class="overflow-scroll">
  <table class="w-full whitespace-nowrap  shadow-md border border-slate-200">
    <thead class=" text-left text-sm sticky top-0 z-10 border-b border-blue-800 text-white font-medium"
    style="background-color: rgb(89, 121, 142);">
      <tr>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(0)}">Matter Num</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(1)}">Client / Property</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(2)}">Matter Description</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(3)}">Defendant 1</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(4)}">Matter Open</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(5)}">Practice Area</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(6)}">Notice Type</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(7)}">Case Number</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(8)}">Premises Address</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(9)}">Premises City</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(10)}">Assigned Attorney</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(11)}">Primary Contact</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(12)}">Secondary Paralegal</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(13)}">Documents</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(14)}">Matter Stage</th>
        <th class="px-4 py-3 w-[400px]" :class="{'hidden': !visibleColumns.includes(15)}">Completed Tasks</th>
        <th class="px-4 py-3 w-[400px]" :class="{'hidden': !visibleColumns.includes(16)}">Pending Tasks</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(17)}">Notice Service Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(18)}">Notice Expir. Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(19)}">Date Case Filed</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(20)}">Daily Rent Damages</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(21)}">Default Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(22)}">Default Entered On</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(23)}">Motions:</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(24)}">Demurrer Hearing Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(25)}">Motion To Strike Hearing Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(26)}">Motion to Quash Hearing Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(27)}">Other Motion Hearing Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(28)}">MSC Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(29)}">MSC Time</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(30)}">MSC Address</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(31)}">MSC Div/ Dept/ Room</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(32)}">Trial Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(33)}">Trial Time</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(34)}">Trial Address</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(35)}">Trial Div/ Dept/ Room</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(36)}">Final Result of Trial/ MSC</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(37)}">Date of Settlement</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(38)}">Final Obligation Under the Stip</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(39)}">Def's Comply with the Stip?</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(40)}">Judgment Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(41)}">Writ Issued Date</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(42)}">Scheduled Lockout</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(43)}">Oppose Stays?</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(44)}">Premises Safety or Access Issues</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(45)}">Matter Gate or Entry Code</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(46)}">Date Possession Recovered</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(47)}">Attorney's Fees</th>
        <th class="px-4 py-3" :class="{'hidden': !visibleColumns.includes(48)}">Costs</th>
      </tr>
    </thead>
    <tbody class="bg-slate-100 divide-y divide-slate-300">
      {% for r in rows %}
      <tr class="hover:bg-slate-200 transition-colors duration-150 ease-in-out">
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(0)}"></td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(1)}">{{ r.client }}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(2)}">{{ r.matter_description }}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(3)}">{{ r.defendant_1 }}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(4)}">{{ r.matter_open }}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(5)}"></td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(6)}">{{ r.notice_type }}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(7)}">{{ r.case_number }}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(8)}">{{ r.premises_address }}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(9)}">{{ r.premises_city }}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(10)}">
            {{ r.responsible_attorney }}
        </td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(11)}">
            {{ r.staff_person }}
        </td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(12)}">
            {{ r.staff_person_2 }}
        </td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(13)}">
          {% if r.documents_url %}
          <a href="{{ r.documents_url }}">Documents</a>
        {% endif %}</td>
        <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !visibleColumns.includes(14)}"> {{ r.phase_name }}</td>
        <td class="px-4 py-3 text-sm align-top whitespace-normal w-[400px]" :class="{'hidden': !visibleColumns.includes(15)}" x-data="{ showCompletedModal: false}">
          {% if r.completed_tasks %}
          <div>
            <table class="w-full text-xs">
              <thead>
                <tr>
                  <th class="text-left pb-1">Task</th>
                  <th class="text-right pb-1">Completed</th>
                </tr>
              </thead>
              <tbody>
                {% for x in r.completed_tasks[:2] %}
                <tr>
                  <td class="py-1 pr-2 break-words">{{ x.description }}</td>
                  <td class="py-1 text-right whitespace-nowrap">{{ x.completed }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            {% 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-cloak
               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>
              <table class="w-full">
                <thead>
                  <tr class="border-b">
                    <th class="text-left pb-2">Task Description</th>
                    <th class="text-right pb-2">Completed Date</th>
                  </tr>
                </thead>
                <tbody>
                  {% for x in r.completed_tasks %}
                  <tr class="border-b border-slate-200">
                    <td class="py-2 break-words">{{ x.description }}</td>
                    <td class="py-2 text-right whitespace-nowrap">{{ x.completed }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm align-top whitespace-normal w-[400px] min-w-[400px]" :class="{'hidden': !visibleColumns.includes(16)}" x-data="{ showPendingModal: false }">
          {% if r.pending_tasks %}
          <div>
            <table class="w-full text-xs">
              <thead>
                <tr>
                  <th class="text-left pb-1">Task</th>
                </tr>
              </thead>
              <tbody>
                {% for x in r.pending_tasks[:2] %}
                <tr>
                  <td class="py-1 break-words">{{ x.description }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            {% 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-cloak
               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>
              <table class="w-full">
                <thead>
                  <tr class="border-b">
                    <th class="text-left pb-2">Task Description</th>
                  </tr>
                </thead>
                <tbody>
                  {% for x in r.pending_tasks %}
                  <tr class="border-b border-slate-200">
                    <td class="py-2 break-words">{{ x.description }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(17)}">{{ r.notice_service_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(18)}">{{ r.notice_expiration_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(19)}">{{ r.case_field_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(20)}">{% if r.daily_rent_damages %}${{ "{:,.2f}".format(r.daily_rent_damages) }}{% endif %}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(21)}">{{ r.default_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(22)}">{{ r.default_entered_on_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(23)}"></td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(24)}">{{ r.demurrer_hearing_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(25)}">{{ r.motion_to_strike_hearing_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(26)}">{{ r.motion_to_quash_hearing_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(27)}">{{ r.other_motion_hearing_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(28)}">{{ r.msc_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(29)}">{{ r.msc_time }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(30)}">{{ r.msc_address }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(31)}">{{ r.msc_div_dept_room }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(32)}">{{ r.trial_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(33)}">{{ r.trial_time }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(34)}">{{ r.trial_address }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(35)}">{{ r.trial_div_dept_room }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(36)}">{{ r.final_result }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(37)}">{{ r.date_of_settlement }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(38)}">{{ r.final_obligation }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(39)}">{{ r.def_comply_stip }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(40)}">{{ r.judgment_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(41)}">{{ r.writ_issued_date }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(42)}">{{ r.scheduled_lockout }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(43)}">{{ r.oppose_stays }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(44)}">{{ r.premises_safety }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(45)}">{{ r.matter_gate_code }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(46)}">{{ r.date_possession_recovered }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(47)}">{{ r.attorney_fees }}</td>
        <td class="px-4 py-3 text-sm" :class="{'hidden': !visibleColumns.includes(48)}">{{ 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>
<script>
function columnConfig() {
  return {
    showColumnModal: false,
    columns: [
      'Matter Num',
      'Client / Property',
      'Matter Description',
      'Defendant 1',
      'Matter Open',
      'Practice Area',
      'Notice Type',
      'Case Number',
      'Premises Address',
      'Premises City',
      'Assigned Attorney',
      'Primary Contact',
      'Secondary Paralegal',
      'Documents',
      'Matter Stage',
      'Completed Tasks',
      'Pending Tasks',
      'Notice Service Date',
      'Notice Expir. Date',
      'Date Case Filed',
      'Daily Rent Damages',
      'Default Date',
      'Default Entered On',
      'Motions:',
      'Demurrer Hearing Date',
      'Motion To Strike Hearing Date',
      'Motion to Quash Hearing Date',
      'Other Motion Hearing Date',
      'MSC Date',
      'MSC Time',
      'MSC Address',
      'MSC Div/ Dept/ Room',
      'Trial Date',
      'Trial Time',
      'Trial Address',
      'Trial Div/ Dept/ Room',
      'Final Result of Trial/ MSC',
      'Date of Settlement',
      'Final Obligation Under the Stip',
      'Def\'s Comply with the Stip?',
      'Judgment Date',
      'Writ Issued Date',
      'Scheduled Lockout',
      'Oppose Stays?',
      'Premises Safety or Access Issues',
      'Matter Gate or Entry Code',
      'Date Possession Recovered',
      'Attorney\'s Fees',
      'Costs'
    ],
    selectAll: true,
    visibleColumns: [],
    
    init() {
      this.loadColumnSettings();
    },
    
    loadColumnSettings() {
      const stored = localStorage.getItem('dashboardColumnVisibility');
      console.log("STORED", stored)
      if (stored) {
        this.visibleColumns = JSON.parse(stored);
        this.selectAll = this.visibleColumns.length === this.columns.length;
      } else {
        // Default to showing all columns
        this.visibleColumns = this.columns.map((_, index) => index);
        this.selectAll = true;
      }
    },
    
    saveColumnSettings() {
      console.log(JSON.stringify(this.visibleColumns))
      localStorage.setItem('dashboardColumnVisibility', JSON.stringify(this.visibleColumns));
    },
    
    toggleAllColumns() {
      if (this.selectAll) {
        this.visibleColumns = this.columns.map((_, index) => index);
      } else {
        this.visibleColumns = [];
      }
      this.saveColumnSettings();
    },
    
    resetToDefault() {
      this.visibleColumns = this.columns.map((_, index) => index);
      this.selectAll = true;
      this.saveColumnSettings();
    }
  }
}
</script>
</div>

<!--
<div class="flex flex-col m-4">
<div class=" w-full flex-grow overflow-scroll rounded-2xl overflow-hidden">
</div>
-->
{% endblock %}