<?php
require 'vendor/autoload.php';
require 'function.php';
require 'config.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>PBB Management Tool</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Custom shadow for cards */
    .card-shadow {
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    /* Icon container background */
    .icon-bg-blue {
      background-color: #e0f0ff;
      color: #3b82f6;
    }
    .icon-bg-green {
      background-color: #e6f4ea;
      color: #22c55e;
    }
    .icon-bg-yellow {
      background-color: #fef4d6;
      color: #facc15;
    }
    .icon-bg-red {
      background-color: #ffe7e6;
      color: #ef4444;
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800">

  <header class="border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center py-6">
      <div class="flex items-center space-x-3 mb-4 sm:mb-0">
        <div class="">
  <img src="logo.jpg" style="width:190px" />
</div>
        <div>
          <h1 class="text-xl font-semibold">PBB Bukti Bayar Tools</h1>
          <p class="text-sm text-gray-500">Generated Bukti Bayar PBB Kolektif Desa</p>
        </div>
      </div>
     <div class="flex items-center space-x-2 text-gray-500 text-sm select-none">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
    viewBox="0 0 24 24" aria-hidden="true">
    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
    <line x1="16" y1="2" x2="16" y2="6" />
    <line x1="8" y1="2" x2="8" y2="6" />
    <line x1="3" y1="10" x2="21" y2="10" />
  </svg>
  <span id="datetime-display">Memuat waktu...</span>
</div>
    </div>
    
  </header>

  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">

  <section aria-label="Upload sections" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
  <!-- Upload PBB Receipts -->
  <form action="" method="post" enctype="multipart/form-data" class="bg-white rounded-lg card-shadow p-6" onsubmit="return validateAndSubmit()">
    <h2 class="text-lg font-semibold mb-1">UNGGAHNO BUKTI BAYAR PBB</h2>
    <p class="text-gray-500 text-sm mb-4">Unggahno file Excel ID Billing Collective untuk di proses</p>

    <label for="upload-pbb" class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg h-48 cursor-pointer hover:border-blue-400 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 12v8m0-8l4-4m-4 4l-4-4" />
        </svg>
        <span class="text-gray-600 text-sm">
            Drag & drop your Excel file here, or
            <span class="text-blue-600 underline">browse</span>
        </span>
        <input id="upload-pbb" name="file" type="file" accept=".xlsx,.xls" class="hidden" onchange="handleFileChangePBB()" />
        <p id="file-name-preview-pbb" class="text-sm text-green-600 mt-2 hidden"></p>
    </label>
    <p class="text-xs text-gray-400 mt-2">Supports .xlsx and .xls files</p>
    <div id="submit-btn-container" class="mt-4">
        <button type="submit" name="start" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
            Sikat Munggah
        </button>
        <?php if (!empty($insertMessage)) echo $insertMessage; ?>
        <p id="file-error" class="text-red-600 text-sm mt-2 hidden">File harus bertipe .xls atau .xlsx</p>

      <div id="loading-spinner" class="flex items-center space-x-2 mt-3 hidden">
        <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none"
          viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
            stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor"
            d="M4 12a8 8 0 018-8v8H4z"></path>
        </svg>
        <span class="text-sm text-gray-600">Mengunggah dan memproses file...</span>
      </div>
    </div>
</form>
    
<form action="" method="post" enctype="multipart/form-data" class="bg-white rounded-lg card-shadow p-6" onsubmit="return validateAndSubmit()">
    <h2 class="text-lg font-semibold mb-1">CEK MANIFEST</h2>
    <p class="text-gray-500 text-sm mb-4">Unggahno file Excel ID Billing Collectiv untuk cek Manifest Data</p>

    <label for="upload-manifest" class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg h-48 cursor-pointer hover:border-blue-400 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 12v8m0-8l4-4m-4 4l-4-4" />
        </svg>
        <span class="text-gray-600 text-sm">
            Drag & drop your Excel file here, or
            <span class="text-blue-600 underline">browse</span>
        </span>
        <input id="upload-manifest" name="cekmanifest" type="file" accept=".xlsx,.xls" class="hidden" onchange="handleFileChangeManifest()" />
        <p id="file-name-preview-manifest" class="text-sm text-green-600 mt-2 hidden"></p>
    </label>
    <p class="text-xs text-gray-400 mt-2">Supports .xlsx and .xls files</p>
    <p id="file-name-preview" class="text-sm text-green-600 mt-2 hidden"></p>
    <div id="submit-btn-container" class="mt-4">
        <button type="submit" name="start_manifest" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
            GASS
        </button>
        <?php if (!empty($totalSuksesMessage)): ?>
    <div class="mt-4 bg-green-50 border border-green-300 text-green-700 text-sm px-4 py-3 rounded-lg shadow-sm animate-fade-in">
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" stroke-width="2"
             viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M5 13l4 4L19 7"/>
        </svg>
        <span><strong>Sukses!</strong> Berhasil insert <strong><?= $totalSukses ?></strong> data ke database.</span>
      </div>
    </div>
  <?php endif; ?>
        <p id="file-error" class="text-red-600 text-sm mt-2 hidden">File harus bertipe .xls atau .xlsx</p>

      <div id="loading-spinner1" class="flex items-center space-x-2 mt-3 hidden">
        <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none"
          viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
            stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor"
            d="M4 12a8 8 0 018-8v8H4z"></path>
        </svg>
        <span class="text-sm text-gray-600">Mengunggah dan memproses file...</span>
      </div>
    </div>
</form>
      <section class="mt-12 bg-white rounded-lg card-shadow p-6">
  <h2 class="text-lg font-semibold mb-4">GENERATE BUKTI BAYAR</h2>
  <p>Pilih Tanggal untuk Download Bukti Bayar bentuk PDF</p>

  <form action="" method="POST" class="flex flex-col sm:flex-row items-center gap-4">
    <label class="text-sm text-gray-600">Pilih Tanggal:
      <input type="date" name="tgl" id="" value="<?= ($tgl=='')? date('Y-m-d') : $tgl ?>" class="ml-2 border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring focus:border-blue-400" required>
    </label>

    <button type="submit" class="bg-green-600 text-white px-5 py-2 rounded hover:bg-green-700 transition">
      SIKAT!
    </button>
     </form>
     <div class="col-1"></div>
        <div class="col card pt-2 pb-2 text-center">
        <p style="font-weight: bold;" >STATUS</p>
        <form target="_blank" action="cekdata.php" method="get">
            <input type="hidden" value="<?= $tgl ?>" name="tanggal">
            <textarea name="kecamatan" id="">
                <?php
                $temp_data_k = '';
                while($row = mysqli_fetch_assoc($kuery_data1)){
                    if($row['Kd_Kecamatan'] == $temp_data_k){
                    }else{
                        
                        file_get_contents("http://".$_SERVER['HTTP_HOST']."/bc/cekdata.php?tanggal=".$tgl."&kecamatan=".$row['Kd_Kecamatan']);
                        $temp_data_k = $row['Kd_Kecamatan'];
                        print "sukses\n";
                    }
                }

                print "";
                ?>
            </textarea>
    </section>
    </section>
  </main>
<script>
 function handleFileChangePBB() {
  const input = document.getElementById('upload-pbb');
  const fileNamePreview = document.getElementById('file-name-preview-pbb');
  const errorText = document.getElementById('file-error-pbb');

  if (input.files.length > 0) {
    const file = input.files[0];
    const allowedTypes = [
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/vnd.ms-excel'
    ];

    if (!allowedTypes.includes(file.type)) {
      errorText.textContent = "Hanya file Excel (.xls atau .xlsx) yang diizinkan.";
      errorText.classList.remove('hidden');
      fileNamePreview.classList.add('hidden');
    } else {
      fileNamePreview.textContent = "Selected file: " + file.name;
      fileNamePreview.classList.remove('hidden');
      errorText.classList.add('hidden');
    }
  } else {
    fileNamePreview.textContent = '';
    fileNamePreview.classList.add('hidden');
    errorText.classList.add('hidden');
  }
}

function handleFileChangeManifest() {
  const input = document.getElementById('upload-manifest');
  const fileNamePreview = document.getElementById('file-name-preview-manifest');
  const errorText = document.getElementById('file-error-manifest');

  if (input.files.length > 0) {
    const file = input.files[0];
    const allowedTypes = [
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/vnd.ms-excel'
    ];

    if (!allowedTypes.includes(file.type)) {
      errorText.textContent = "Hanya file Excel (.xls atau .xlsx) yang diizinkan.";
      errorText.classList.remove('hidden');
      fileNamePreview.classList.add('hidden');
    } else {
      fileNamePreview.textContent = "Selected file: " + file.name;
      fileNamePreview.classList.remove('hidden');
      errorText.classList.add('hidden');
    }
  } else {
    fileNamePreview.textContent = '';
    fileNamePreview.classList.add('hidden');
    errorText.classList.add('hidden');
  }
}


function validateAndSubmit() {
  const input = document.getElementById('upload-pbb');
  const errorText = document.getElementById('file-error');
  const spinner = document.getElementById('loading-spinner');

  if (input.files.length === 0) {
    errorText.textContent = "Silakan pilih file Excel terlebih dahulu.";
    errorText.classList.remove('hidden');
    return false;
  }

  

  const file = input.files[0];
  const allowedTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
  if (!allowedTypes.includes(file.type)) {
    errorText.textContent = "Hanya file Excel (.xls atau .xlsx) yang diizinkan.";
    errorText.classList.remove('hidden');
    return false;
  }

  // Tampilkan spinner
  spinner.classList.remove('hidden');

  return true;
}
  
   function updateDateTime() {
    const hariIndo = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    const bulanIndo = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

    const now = new Date();
    const hari = hariIndo[now.getDay()];
    const tanggal = now.getDate();
    const bulan = bulanIndo[now.getMonth()];
    const tahun = now.getFullYear();

    const jam = now.getHours().toString().padStart(2, '0');
    const menit = now.getMinutes().toString().padStart(2, '0');
    const detik = now.getSeconds().toString().padStart(2, '0');

    const fullDateTime = `${hari}, ${tanggal} ${bulan} ${tahun} ${jam}:${menit}:${detik}`;
    document.getElementById('datetime-display').textContent = fullDateTime;
  }

  // Jalankan sekali, lalu update setiap detik
  updateDateTime();
  setInterval(updateDateTime, 1000);
</script>
</body>
</html>

