micro-frontend/ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.html

<div class="p-6 space-y-10">

  <!-- Header -->
  <div class="flex justify-between items-center mb-4 ">
    <h2 class="text-xl font-semibold">
      รายการงบประมาณของโครงการ: ระบบจัดการน้ำดื่ม
      <!-- {{ project?.name }} -->
    </h2>

    <div class="text-gray-600 text-sm">
      แสดงข้อมูล {{ budgetItems.length }} รายการ
    </div>
  </div>


  <!-- Add New Budget Item -->
  <!-- <form [formGroup]="addItemForm" class="bg-gray-50 border rounded-xl p-4 mb-6">

    <h3 class="font-semibold mb-3 text-gray-700">เพิ่มรายการงบประมาณ</h3>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

      หมวดงบ
      <div>
        <label class="text-sm text-gray-600">หมวดงบประมาณ</label>
        <select
          formControlName="category"
          class="w-full px-4 py-2 border rounded-xl bg-white mt-1
                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300" >
          <option value="">-- เลือกหมวดงบ --</option>

          @for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
            <option [value]="item.dtlcod">{{ item.dtlnam }}</option>
          }
        </select>

        error
        <div
          *ngIf="addItemForm.controls['category'].invalid && addItemForm.controls['category'].touched"
          class="text-red-500 text-xs mt-1"
        >
          กรุณาเลือกหมวดงบ
        </div>
      </div>

      รายการ
      <div>
        <label class="text-sm text-gray-600">ชื่อรายการ</label>
        <select
          formControlName="name"
          class="w-full px-4 py-2 border rounded-xl bg-white mt-1
                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
        >
          <option value="">-- เลือกรายการ --</option>

          <option *ngFor="let it of masterItems" [value]="it.name">
            {{ it.name }}
          </option>
        </select>

        <div
          *ngIf="addItemForm.controls['name'].invalid && addItemForm.controls['name'].touched"
          class="text-red-500 text-xs mt-1"
        >
          กรุณาเลือกรายการ
        </div>
      </div>

      จำนวน
      <div>
        <label class="text-sm text-gray-600">จำนวน</label>
        <input
          type="number"
          formControlName="qty"
          class="w-full px-4 py-2 border rounded-xl bg-white mt-1
                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
        />

        <div
          *ngIf="addItemForm.controls['qty'].invalid && addItemForm.controls['qty'].touched"
          class="text-red-500 text-xs mt-1"
        >
          จำนวนต้องมากกว่า 0
        </div>
      </div>

      ราคา
      <div>
        <label class="text-sm text-gray-600">ราคา</label>
        <input
          type="number"
          formControlName="price"
          class="w-full px-4 py-2 border rounded-xl bg-white mt-1
                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"/>

        <div
          *ngIf="addItemForm.controls['price'].invalid && addItemForm.controls['price'].touched"
          class="text-red-500 text-xs mt-1"
        >
          ราคาต้องมากกว่า 0
        </div>
      </div>

    </div>

    Add button
    <button
      type="button"
      (click)="addBudgetItem()"
      class="mt-4 bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-xl shadow"
    >
      ➕ เพิ่มเข้าตาราง
    </button>

  </form> -->

  <div class="bg-white rounded-lg shadow-md border border-gray-200 ">
    <!-- หัวพับได้ -->
    <div class="flex justify-between items-center p-4 border-b bg-gray-50 rounded-t-lg" (click)="toggleFormCollapse()">
        <h3 class="text-base font-semibold text-gray-700">เพิ่มรายการงบประมาณสำหรับโครงการ</h3>
        <button class="text-gray-400 hover:text-gray-600 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            [ngClass]="{'rotate-180': !isFormExpanded}">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>

        </button>
    </div>
    <!-- เนื้อหาพับได้ -->
  @if(!isFormExpanded){
      <div class="p-4 space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                  <label for="borrower_id" class="block text-sm font-medium text-gray-700 mb-1">หมวดงบประมาณ</label>
                  <select name="" id="" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm">
                    <option value="">-- เลือกหมวดงบ --</option>
                    @for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
                      <option [value]="item.dtlcod">{{ item.dtlnam }}</option>
                    }
                  </select>
              </div>

              <div>
                  <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">จำนวนเงิน</label>
                  <input type="text" id="first_name" name="first_name" type="number" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm" placeholder="">
              </div>
          </div>

          <div class="flex justify-end pt-4 space-x-2">

              <!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-500 rounded-md shadow-sm hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                  </svg>
                  รีเซ็ต
              </button> -->

              <!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                  ค้นหา
              </button> -->

              <!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0011.414 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3 3v-6" />
                  </svg>
                  ส่งออก Excel
              </button> -->
              <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0011.414 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3 3v-6" />
                  </svg>
                  เพิ่มเข้าสู่ตาราง
              </button>
          </div>
      </div>
    }
</div>







  <!-- Table -->
  <!-- <div class="overflow-x-auto bg-white shadow rounded-xl border">
    <table class="min-w-full border-collapse text-sm">

      <thead class="bg-gray-100 border-b">
        <tr class="text-gray-700">
          <th class="py-3 px-4">ลำดับ</th>
          <th class="py-3 px-4">สถานะ</th>
          <th class="py-3 px-4">รหัส</th>
          <th class="py-3 px-4">ชื่อรายการ</th>
          <th class="py-3 px-4 text-center">จำนวน</th>
          <th class="py-3 px-4 text-right">ราคา/หน่วย</th>
          <th class="py-3 px-4 text-right">ยอดชำระ</th>
          <th class="py-3 px-4 text-center">ดำเนินการ</th>
        </tr>
      </thead>

      <tbody>

        <tr
          *ngFor="let item of budgetItems; let i = index"
          class="border-b hover:bg-gray-50 transition"
        >
          <td class="py-3 px-4">{{ i + 1 }}</td>

          <td class="py-3 px-4 text-center">
            <span class="text-green-500 text-xl">●</span>
          </td>

          <td class="py-3 px-4 font-medium">{{ item.code }}</td>

          <td class="py-3 px-4 font-semibold">{{ item.name }}</td>

          <td class="py-3 px-4 text-center">
            <input
              type="number"
              class="w-20 px-3 py-2 border rounded-lg text-center"
            />
          </td>

          <td class="py-3 px-4 text-right">
            {{ item.price | number:'1.0-2' }}
          </td>

          <td class="py-3 px-4 text-right font-semibold">
            {{ item.qty * item.price | number:'1.0-2' }}
          </td>

          <td class="py-3 px-4 text-center space-x-2">
            <button
              class="bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg shadow"
            >
              🗑
            </button>

            <button
              class="bg-gray-600 hover:bg-gray-700 text-white px-3 py-2 rounded-lg shadow"
            >
              👁
            </button>
          </td>
        </tr>

      </tbody>

    </table>
  </div> -->
<div class="overflow-x-auto bg-white border border-gray-200 rounded-2xl shadow-sm">
    <table class="min-w-full text-left border-collapse">
      <thead class="bg-gray-100 border-b border-gray-200 text-gray-700 text-sm">
        <tr>
          <th class="py-3 px-4 font-semibold">ลำดับ</th>
          <th class="py-3 px-4 font-semibold">ชื่องบประมาณ</th>
          <th class="py-3 px-4 font-semibold text-center">จำนวนเงิน</th>
          <th class="py-3 px-4 font-semibold text-right pr-11">ดำเนินการ</th>
        </tr>
      </thead>

    <tbody>
      <tr *ngFor="let p of projects; let i = index"
      class="border-b border-gray-100 hover:bg-blue-50/20 transition">
        <td class="py-4 px-4 text-gray-700">{{ i + 1 }}</td>
        <td class="py-4 px-4 font-medium text-gray-700"> {{ p.code }}</td>

        <td class="py-4 px-4 text-center">
          <input type="number" class="w-40 px-3 py-2 border border-gray-300 rounded-lg text-center hover:shadow-2xl">
        </td>

        <td class="py-4 px-4 text-right space-x-2 whitespace-nowrap pr-8">

             <button
              class="bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg shadow"
            >
              🗑
            </button>

            <button
              class="bg-gray-600 hover:bg-gray-700 text-white px-3 py-2 rounded-lg shadow"
            >
              🖊
            </button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- endtable -->
</div>


  <!-- Summary -->
  <div class="text-right mt-4 text-lg font-semibold">
    ยอดรวมทั้งหมด:
    <span class="text-blue-600">
      {{ getTotalAmount() | number:'1.0-2' }} บาท
    </span>
  </div>

</div>