
<div class="w-full p-6 space-y-8 bg-gray-50 min-h-screen font-sans text-gray-800">

  <!-- 1. Header Section -->
  <div class="flex flex-col md:flex-row md:justify-between md:items-end gap-4 border-b border-gray-200 pb-4">
    <div>
      <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-3">
        <!-- <span class="bg-red-100 text-red-800 p-2 rounded-lg text-xl">💸</span> -->
        <span>จัดสรรงบประมาณ</span>
      </h2>
      <p class="text-gray-500 mt-1 ml-1 text-sm">โครงการ: <span class="font-medium text-red-900">{{projectTitle}}</span></p>
    </div>
    <div class="text-sm text-gray-500 bg-white px-4 py-2 rounded-full shadow-sm border border-gray-100">
      รายการทั้งหมด: <span class="font-bold text-red-800">{{ myTrnMst.length }}</span> รายการ
    </div>
  </div>

  <!-- 2. Add/Edit Budget Form (Collapsible) -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-300">
    <!-- Toggle Header -->
    <div
      class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer hover:bg-gray-100 transition select-none border-b border-gray-100"
      (click)="toggleFormCollapse()"
    >
      <div class="flex items-center gap-2 font-bold text-gray-700">
        <!-- <span class="bg-red-600 text-white w-6 h-6 flex items-center justify-center rounded-full text-xs shadow-sm">
          {{ isEditMode ? '✎' : '✚' }}
        </span> -->
        {{ isEditMode ? 'แก้ไขรายการ' : 'เพิ่มรายการงบประมาณ' }}
      </div>
      <button class="text-gray-400 transition-transform duration-300" [ngClass]="{'rotate-180': isFormExpanded}">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
    </div>

    <!-- Form Content -->
    @if(isFormExpanded){
      <div class="p-6 bg-white animate-fade-in-down">
        <form [formGroup]="budgetForm">
          <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">

            <!-- Dropdown หมวดงบ -->
            <div class="md:col-span-5 space-y-1">
              <label class="block text-xs font-bold text-gray-500 uppercase">
                หมวดงบประมาณ <span class="text-red-500">*</span>
              </label>
              <select formControlName="bdgcod"
                class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent bg-gray-50 transition cursor-pointer"
                [class.border-red-500]="budgetForm.get('bdgcod')?.invalid && budgetForm.get('bdgcod')?.touched">
                <option value="">-- กรุณาเลือก --</option>
                @for (item of myDropBdg; track item.bdgcod) {
                  <option [value]="item.bdgcod">{{ item.bdgnam }}</option>
                }
              </select>
              <!-- Error Message -->
              @if (budgetForm.get('bdgcod')?.invalid && budgetForm.get('bdgcod')?.touched) {
                <div class="text-red-500 text-xs flex items-center gap-1">
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                  กรุณาเลือกหมวดงบ
                </div>
              }
            </div>

            <!-- Input จำนวนเงิน -->
            <div class="md:col-span-5 space-y-1">
              <label class="block text-xs font-bold text-gray-500 uppercase">
                จำนวนเงิน <span class="text-red-500">*</span>
              </label>
              <div class="relative">
                <input type="number" formControlName="amount" placeholder="0.00"
                  class="w-full p-3 pr-12 border border-gray-200 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent bg-gray-50 text-right font-mono text-gray-800 transition"
                  [class.border-red-500]="budgetForm.get('amount')?.invalid && budgetForm.get('amount')?.touched">
                <span class="absolute right-4 top-3 text-gray-400 text-sm font-medium pointer-events-none">THB</span>
              </div>
              <!-- Error Message -->
              @if (budgetForm.get('amount')?.invalid && budgetForm.get('amount')?.touched) {
                <div class="text-red-500 text-xs flex items-center gap-1">
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                  ระบุจำนวนเงินที่ถูกต้อง
                </div>
              }
            </div>

            <!-- Action Buttons -->
            <div class="md:col-span-2 flex gap-2 pt-6">
              <button type="button" (click)="onSaveSubmit()"
                class="flex-1 bg-red-800 hover:bg-red-900 text-white font-bold py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition active:scale-95 flex justify-center items-center gap-2">
                <span>{{ isEditMode ? 'บันทึกแก้ไข' : 'เพิ่ม' }}</span>
              </button>

              @if(isEditMode) {
                <button type="button" (click)="cancelEdit()"
                  class="bg-gray-200 hover:bg-gray-300 text-gray-600 font-bold py-3 px-4 rounded-lg transition active:scale-95">
                  ยกเลิก
                </button>
              }
            </div>
          </div>
        </form>
      </div>
    }
  </div>

  <!-- 3. Budget Table -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full text-left border-collapse">
        <thead>
          <tr class="bg-red-900 text-white text-sm uppercase tracking-wider">
            <th class="py-4 px-6 font-semibold w-16 text-center">#</th>
            <th class="py-4 px-6 font-semibold">รายการ / หมวดงบ</th>
            <th class="py-4 px-6 font-semibold text-right w-48">จำนวนเงิน (บาท)</th>
            <th class="py-4 px-6 font-semibold text-center w-32">จัดการ</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 text-sm">
          @for (idx of myTrnMst; track idx.trnseq; let i = $index) {
            <tr class="hover:bg-red-50/40 transition group">
              <td class="py-4 px-6 text-center text-gray-500 font-mono">{{ i + 1 }}</td>

              <td class="py-4 px-6">
                <div class="font-bold text-gray-800">{{ idx.trnbdgnam }}</div>
                <div class="text-xs text-gray-400 font-mono mt-0.5">{{ idx.trnbdgcod }}</div>
              </td>

              <td class="py-4 px-6 text-right font-mono font-medium text-gray-700">
                {{ idx.trnexpbdg | number:'1.2-2' }}
              </td>

              <td class="py-4 px-6 text-center">
                <div class="flex justify-center items-center gap-2">
                  <button (click)="editItem(i)" class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition" title="แก้ไข">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                  </button>
                  <button (click)="removeItem(i)" class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition" title="ลบ">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          } @empty {
            <tr>
              <td colspan="4" class="py-12 text-center text-gray-400 bg-gray-50/30">
                <div class="text-4xl mb-2 opacity-50">📭</div>
                <p>ยังไม่มีรายการงบประมาณ</p>
              </td>
            </tr>
          }
        </tbody>

        <!-- Footer Total & Action Buttons -->
        <tfoot class="bg-gray-50 border-t-2 border-red-200">
          <tr>
            <td colspan="2" class="py-4 px-6 text-right font-bold text-gray-600 uppercase text-xs tracking-wider">รวมยอดสุทธิ</td>
            <td class="py-4 px-6 text-right">
              <span class="text-xl font-extrabold text-red-900">{{ getTotalAmount() | number:'1.2-2' }}</span>
              <span class="text-xs text-gray-500 ml-1 font-medium">THB</span>
            </td>
            <td class="py-4 px-6 text-center">
                <div class="flex items-center justify-center gap-3">
                  <!-- 🟢 ปุ่มย้อนกลับ (Icon Arrow) -->
                  <button (click)="goBack()" class="p-2.5 bg-white border border-gray-200 rounded-lg text-gray-500 hover:text-red-700 hover:border-red-200 hover:bg-red-50 hover:shadow-sm transition active:scale-95 group" title="ย้อนกลับ">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                  </button>

                  <!-- 🟢 ปุ่มยืนยันบันทึกทั้งหมด -->
                    <button (click)="openConfirmModal()"
                       class="bg-green-600 hover:bg-green-700 text-white text-xs font-bold py-2.5 px-5 rounded-lg shadow transition active:scale-95 flex items-center gap-2">
                       <span>✓</span> บันทึก
                    </button>
                </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

      <!-- 🟢 Modal Confirmation (Save / Cancel) -->
      @if(showConfirmModal) {
        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
          <div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">

            <!-- 🟢 Dynamic Header Color -->
            <div class="p-4 text-white flex justify-between items-center"
                 [ngClass]="myTrnMst.length === 0 ? 'bg-red-600' : 'bg-red-900'">
              <h3 class="font-bold text-lg flex items-center gap-2">
                <span>{{ myTrnMst.length === 0 ? '⚠️' : '💾' }}</span>
                {{ myTrnMst.length === 0 ? 'ยืนยันการยกเลิก' : 'ยืนยันการบันทึก' }}
              </h3>
              <button (click)="closeConfirmModal()" class="text-white/70 hover:text-white">✕</button>
            </div>

            <div class="p-6 text-center space-y-4">
              <!-- 🟢 Dynamic Icon -->
              <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-2"
                   [ngClass]="myTrnMst.length === 0 ? 'bg-red-50 text-red-600' : 'bg-red-50 text-red-600'">
                <span class="text-3xl">{{ myTrnMst.length === 0 ? '🗑️' : '📝' }}</span>
              </div>

              <!-- 🟢 Dynamic Message -->
              <p class="text-gray-600">
                @if(myTrnMst.length === 0) {
                   คุณต้องการ <b>ยกเลิกการจัดสรรงบประมาณ</b> <br>ของโครงการนี้ใช่หรือไม่?
                } @else {
                   คุณต้องการ <b>บันทึกข้อมูลการจัดสรรงบประมาณ</b> <br>ของโครงการนี้ใช่หรือไม่?
                }
              </p>

              <!-- Summary Info -->
              <div class="bg-gray-50 p-3 rounded-lg border border-gray-100 text-sm">
                <div class="flex justify-between mb-1">
                  <span class="text-gray-500">จำนวนรายการ:</span>
                  <span class="font-bold text-gray-800">{{ myTrnMst.length }} รายการ</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-500">ยอดรวม:</span>
                  <span class="font-bold text-red-800">{{ getTotalAmount() | number:'1.2-2' }} บาท</span>
                </div>
              </div>

              <!-- 🟢 List of Items (บอกรายการ) -->
              <div class="text-xs text-gray-500 mt-2 text-left max-h-32 overflow-y-auto border-t border-gray-200 pt-2">
                <div class="font-semibold mb-1">รายการ:</div>
                @if(myTrnMst.length > 0) {
                  <ul class="list-disc pl-4 space-y-1">
                    @for(item of myTrnMst; track $index) {
                       <li>{{ item.trnbdgnam }} ({{ item.trnexpbdg | number }})</li>
                    }
                  </ul>
                } @else {
                  <p class="text-red-500 italic">- ไม่พบรายการคงเหลือ (ลบทั้งหมด) -</p>
                }
              </div>
            </div>

            <!-- Modal Footer -->
            <div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
              <button (click)="closeConfirmModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
                ยกเลิก
              </button>
              <!-- 🟢 Dynamic Button Color -->
              <button (click)="confirmSave()"
                 class="flex-1 py-2.5 px-4 text-white font-bold rounded-xl shadow-md hover:shadow-lg transition"
                 [ngClass]="myTrnMst.length === 0 ? 'bg-red-600 hover:bg-red-700' : 'bg-red-800 hover:bg-red-900'">
                 {{ myTrnMst.length === 0 ? 'ยืนยันการยกเลิก' : 'ยืนยัน' }}
              </button>
            </div>
          </div>
        </div>
      }

  <!-- 🟢 Modal Confirmation
  @if(showConfirmModal) {
    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
      <div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">

        Modal Header
        <div class="bg-red-900 p-4 text-white flex justify-between items-center">
          <h3 class="font-bold text-lg flex items-center gap-2">
            <span>💾</span> ยืนยันการบันทึก
          </h3>
          <button (click)="closeConfirmModal()" class="text-white/70 hover:text-white">✕</button>
        </div>

        Modal Body
        <div class="p-6 text-center space-y-4">
          <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
            <span class="text-3xl">📝</span>
          </div>
          <p class="text-gray-600">คุณต้องการบันทึกข้อมูลการจัดสรรงบประมาณใช่หรือไม่?</p>

          <div class="bg-gray-50 p-3 rounded-lg border border-gray-100 text-sm">
            <div class="flex justify-between mb-1">
              <span class="text-gray-500">จำนวนรายการ:</span>
              <span class="font-bold text-gray-800">{{ myTrnMst.length }} รายการ</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">ยอดรวม:</span>
              <span class="font-bold text-red-800">{{ getTotalAmount() | number:'1.2-2' }} บาท</span>
            </div>
          </div>
        </div>

        Modal Footer
        <div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
          <button (click)="closeConfirmModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
            ยกเลิก
          </button>
          <button (click)="confirmSave()" class="flex-1 py-2.5 px-4 bg-red-800 text-white font-bold rounded-xl hover:bg-red-900 shadow-md hover:shadow-lg transition">
            ยืนยัน
          </button>
        </div>
      </div>
    </div>
  } -->


  <!-- 🔴 Modal Confirmation (Delete) -->
      @if(showDeleteModal) {
        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
          <div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">

            <div class="bg-red-600 p-4 text-white flex justify-between items-center">
              <h3 class="font-bold text-lg flex items-center gap-2">
                <span>🗑️</span> ยืนยันการลบ
              </h3>
              <button (click)="closeDeleteModal()" class="text-white/70 hover:text-white">✕</button>
            </div>

            <div class="p-6 text-center space-y-4">
              <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
                <span class="text-3xl">⚠️</span>
              </div>
              <p class="text-gray-600">คุณต้องการลบรายการนี้ใช่หรือไม่?</p>
              <p class="text-sm text-gray-500">การกระทำนี้ไม่สามารถย้อนกลับได้ (ในหน้าจอนี้)</p>
            </div>

            <div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
              <button (click)="closeDeleteModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
                ยกเลิก
              </button>
              <button (click)="confirmDelete()" class="flex-1 py-2.5 px-4 bg-red-600 text-white font-bold rounded-xl hover:bg-red-700 shadow-md hover:shadow-lg transition">
                ลบรายการ
              </button>
            </div>
          </div>
        </div>
      }

</div>
