page

[tongexe3-blip]

className="max-w-[297mm] h-[210mm] mx-auto bg-white shadow-xl print:shadow-none p-[12mm] text-[12px] leading-tight text-black font-khmer relative overflow-hidden"
>
{/* Header Center */}

ព្រះរាជាណាចក្រកម្ពុជា

ជាតិ សាសនា ព្រះមហាក្សត្រ

    {/* Title Section */}
    <div className="text-center font-bold mb-2">
      <p className="text-sm">សលាកប័ត្របង្គាប់រស់ លម្អិត នៃអាគារសង់លើដី</p>
      <p className="text-xs">លេខ {permit.logNum} លើ {permit.logTotal}</p>
    </div>

    {/* Main Form Content */}
    <div className="text-[11px] space-y-1">
      
      {/* Row 1: Authority */}
      <div className="flex gap-2">
        <span className="font-bold min-w-[150px]">អាជ្ញាធរកាន់កាប់ទ្រព្យសម្បត្តិរដ្ឋ :</span>
        <span className="flex-1 border-b border-dotted border-gray-700">{permit.authority}</span>
      </div>

      {/* Row 2: Unit */}
      <div className="flex gap-2">
        <span className="font-bold min-w-[150px]">អង្គភាពប្រើប្រាស់ :</span>
        <span className="flex-1 border-b border-dotted border-gray-700">{permit.unit}</span>
      </div>

      {/* Row 3: User */}
      <div className="flex gap-2">
        <span className="font-bold min-w-[150px]">អ្នកប្រើប្រាស់ :</span>
        <span className="flex-1 border-b border-dotted border-gray-700">{permit.user}</span>
      </div>

      {/* Row 4: School/Project */}
      <div className="flex gap-2">
        <span className="font-bold min-w-[150px]">ឈ្មោះសាលា :</span>
        <span className="flex-1 border-b border-dotted border-gray-700">{permit.school}</span>
      </div>

      {/* Building Log Section */}
      <div className="font-bold mt-2 mb-1 text-[11px]">
        សលាកប័ត្របង្គាប់រស់ លម្អិត នៃអាគារសង់លើដី លេខ
        <span className="font-normal"> {permit.logNum}</span>
        លើ
        <span className="font-normal"> {permit.logTotal}</span>
      </div>

      {/* Row 5: Building Number */}
      <div className="flex gap-2">
        <span className="font-bold min-w-[150px]">អគារលេខ :</span>
        <span className="font-normal">{permit.buildingNum}</span>
        <span className="font-normal">លើ {permit.buildingTotal}</span>
      </div>

      {/* Row 6: Usage Type */}
      <div className="flex gap-2 mt-1">
        <span className="font-bold min-w-[150px]">ការប្រើប្រាស់ (គូសខ្វែង) :</span>
        <div className="flex gap-3 flex-wrap">
          <label className="flex items-center gap-1">
            <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.usageBur ? 'font-bold' : ''}`}>
              {permit.usageBur ? '✓' : ''}
            </div>
            <span className="text-[10px]">ការិយាល័យ(BUR)</span>
          </label>
          <label className="flex items-center gap-1">
            <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.usageTec ? 'font-bold' : ''}`}>
              {permit.usageTec ? '✓' : ''}
            </div>
            <span className="text-[10px]">បច្ចេកទេស(TEC)</span>
          </label>
          <label className="flex items-center gap-1">
            <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.usageLog ? 'font-bold' : ''}`}>
              {permit.usageLog ? '✓' : ''}
            </div>
            <span className="text-[10px]">លំនៅដ្ឋាន(LOG)</span>
          </label>
          <label className="flex items-center gap-1">
            <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.usageMix ? 'font-bold' : ''}`}>
              {permit.usageMix ? '✓' : ''}
            </div>
            <span className="text-[10px]">ចម្រុះ(MIX)</span>
          </label>
        </div>
      </div>

      {/* Two Column Layout: Location and Dimensions */}
      <div className="grid grid-cols-2 gap-4 mt-1">
        <div>
          <div className="flex gap-2">
            <span className="font-bold min-w-[80px]">ក្រុង/ខេត្ត :</span>
            <span className="flex-1 border-b border-dotted border-gray-700">{permit.province}</span>
          </div>
          <div className="flex gap-2">
            <span className="font-bold min-w-[80px]">ស្រុក :</span>
            <span className="flex-1 border-b border-dotted border-gray-700">{permit.district}</span>
          </div>
          <div className="flex gap-2">
            <span className="font-bold min-w-[80px]">ឃុំ :</span>
            <span className="flex-1 border-b border-dotted border-gray-700">{permit.commune}</span>
          </div>
        </div>
        <div>
          <div className="flex gap-2 items-baseline">
            <span className="font-bold min-w-[100px]">ទទឹង (ម៉ែត្រ) :</span>
            <span className="font-normal">{permit.width}</span>
            <span className="text-[10px]">m</span>
          </div>
          <div className="flex gap-2 items-baseline">
            <span className="font-bold min-w-[100px]">បណ្ដោយ (ម៉ែត្រ) :</span>
            <span className="font-normal">{permit.length}</span>
            <span className="text-[10px]">m</span>
          </div>
          <div className="flex gap-2 items-baseline">
            <span className="font-bold min-w-[100px]">ផ្ទៃក្រឡា (ម៉ែត្រក្រឡា) :</span>
            <span className="font-normal">{permit.area}</span>
            <span className="text-[10px]">m²</span>
          </div>
        </div>
      </div>

      {/* Row 7: Address */}
      <div className="flex gap-2 mt-1">
        <span className="font-bold min-w-[150px]">អាស័យដ្ឋានពិតប្រាកដ :</span>
        <span className="flex-1 border-b border-dotted border-gray-700">{permit.address}</span>
      </div>

      {/* Row 8: Construction Type */}
      <div className="flex gap-2 mt-1">
        <span className="font-bold min-w-[150px]">ប្រភេទសំណង់ (គូសខ្វែង) :</span>
        <div className="flex gap-3">
          <label className="flex items-center gap-1">
            <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.typeStone ? 'font-bold' : ''}`}>
              {permit.typeStone ? '✓' : ''}
            </div>
            <span className="text-[10px]">ធ្វើអំពីថ្ម</span>
          </label>
          <label className="flex items-center gap-1">
            <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.typeWood ? 'font-bold' : ''}`}>
              {permit.typeWood ? '✓' : ''}
            </div>
            <span className="text-[10px]">ធ្វើអំពីឈើ</span>
          </label>
          <label className="flex items-center gap-1">
            <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.typeMix ? 'font-bold' : ''}`}>
              {permit.typeMix ? '✓' : ''}
            </div>
            <span className="text-[10px]">ធ្វើចម្រុះ</span>
          </label>
        </div>
      </div>

      {/* Two Column: Year and Utilities */}
      <div className="grid grid-cols-2 gap-4 mt-1">
        <div>
          <div className="flex gap-2">
            <span className="font-bold min-w-[100px]">ថ្ងៃសាងសង់ :</span>
            <span className="flex-1 border-b border-dotted border-gray-700">{permit.year}</span>
          </div>
        </div>
        <div>
          <div className="flex gap-2">
            <span className="font-bold min-w-[80px]">លេខចុះបញ្ជីសុរិយោដី :</span>
            <span className="flex-1 border-b border-dotted border-gray-700">{permit.cadastral || ''}</span>
          </div>
        </div>
      </div>

      {/* Row 9: Water and Electricity */}
      <div className="grid grid-cols-2 gap-4 mt-1">
        <div>
          <div className="flex gap-2 items-center">
            <span className="font-bold min-w-[80px]">មានទឹក :</span>
            <label className="flex items-center gap-1">
              <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.hasWater ? 'font-bold' : ''}`}>
                {permit.hasWater ? '✓' : ''}
              </div>
              <span className="text-[10px]">មាន</span>
            </label>
            <label className="flex items-center gap-1">
              <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${!permit.hasWater ? 'font-bold' : ''}`}>
                {!permit.hasWater ? '✓' : ''}
              </div>
              <span className="text-[10px]">គ្មាន</span>
            </label>
          </div>
        </div>
        <div>
          <div className="flex gap-2 items-center">
            <span className="font-bold min-w-[80px]">អគ្គិសនី :</span>
            <label className="flex items-center gap-1">
              <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${permit.hasElec ? 'font-bold' : ''}`}>
                {permit.hasElec ? '✓' : ''}
              </div>
              <span className="text-[10px]">មាន</span>
            </label>
            <label className="flex items-center gap-1">
              <div className={`w-4 h-4 border border-black flex items-center justify-center text-xs ${!permit.hasElec ? 'font-bold' : ''}`}>
                {!permit.hasElec ? '✓' : ''}
              </div>
              <span className="text-[10px]">គ្មាន</span>
            </label>
          </div>
        </div>
      </div>

      {/* Row 10: Floors */}
      <div className="flex gap-2 mt-1">
        <span className="font-bold min-w-[150px]">ចំនួនជាន់ :</span>
        <span className="flex-1 border-b border-dotted border-gray-700">{permit.floors}</span>
      </div>

      {/* Row 11: Total Value */}
      <div className="flex gap-2 mt-1">
        <span className="font-bold min-w-[150px]">តម្លៃអគារសរុប (រៀល) :</span>
        <span className="flex-1 border-b border-dotted border-gray-700">{permit.totalValue}</span>
      </div>
    </div>

    {/* Signature Section */}
    <div className="absolute bottom-[12mm] left-[12mm] right-[12mm] flex justify-end">
      <div className="text-right text-[10px] space-y-1">
        <p>ថ្ងៃ{new Date(permit.createdAt!).toLocaleDateString('km-KH')}</p>
        <div className="h-16"></div>
        <p className="font-bold">ហត្ថលេខា</p>
      </div>
    </div>

  </div>
</div>

);
}