
<?php 
  
  // if (strtoupper($type) == 'EXCEL') {
  //   header("Content-type: application/vnd-ms-excel");
  //   header("Content-Disposition: attachment; filename=Laporan-Pelanggan-Taghun-" . date('Y') . ".xls");
  // }
  
 ?>


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Export Data Pelanggan</title>

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="<?= base_url() ?>assets/vendor/fonts/boxicons.css" />
    <style>
    table {
      width: 100%;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      vertical-align: middle;
    }

    th {
      background-color: #d6d6d6;
      color: black;
      font-weight: 500;
      font-size: 14px;
    }

    .text-danger{
      color: #ff3e1d;
    }


    .text-success{
      color: #71dd37;
    }


    @media print {


    .text-danger{
      color: #ff3e1d;
    }


    .text-success{
      color: #71dd37;
    }


      body {
        margin: 0;
        padding: 0;
        font-size: 10px;
      }

      table {
        table-layout: fixed;
        width: 100%;
      }

        th {
          background-color: #d6d6d6;
          color: black;
        }

      th, td {
        word-wrap: break-word;
        font-size: 10px;
      }


      @page {
        size: A4 landscape;
        margin: 10mm;
      }

      th,
      td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }
  </style>
</head>
<body>

    <?php if(!empty((array)$data)): ?>
      <?php foreach($data AS $subdistrict): ?>

        <?php if($subdistrict->villages!=null&&!empty((array)$subdistrict->villages)): ?>
          <?php foreach($subdistrict->villages AS $village): ?>
                

            <table style="margin-bottom: 50px;">
                <thead>
                  <tr>
                    <td colspan="14" style="text-align: center; background-color: #d6d6d6; padding: 15px; font-weight: 600;">Data Pelanggan <?= $village->name ?> - <?= $subdistrict->name ?> </td>
                  </tr>
                  <tr>
                    <th style="text-align: center;">No</th>
                    <th style="text-align: left;">Nama</th>
                    <th style="text-align: center;">01-<?= $year ?></th>
                    <th style="text-align: center;">02-<?= $year ?></th>
                    <th style="text-align: center;">03-<?= $year ?></th>
                    <th style="text-align: center;">04-<?= $year ?></th>
                    <th style="text-align: center;">05-<?= $year ?></th>
                    <th style="text-align: center;">06-<?= $year ?></th>
                    <th style="text-align: center;">07-<?= $year ?></th>
                    <th style="text-align: center;">08-<?= $year ?></th>
                    <th style="text-align: center;">09-<?= $year ?></th>
                    <th style="text-align: center;">10-<?= $year ?></th>
                    <th style="text-align: center;">11-<?= $year ?></th>
                    <th style="text-align: center;">12-<?= $year ?></th>
                  </tr>
                </thead>
                <tbody>      


            <?php if($village->customers!=null&&!empty((array)$village->customers)): ?>
              <?php foreach($village->customers AS $customer): ?>

                  <tr>
                    <td style="text-align: center;"><?= $customer[0] ?></td>
                    <td><?= $customer[1] ?></td>
                    <td style="text-align: center;"><?= $customer[2] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[3] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[4] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[5] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[6] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[7] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[8] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[9] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[10] ? '<i class="bx bx-check text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[11] ? '<i class="bx bx-check text-success text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[12] ? '<i class="bx bx-check text-success text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                    <td style="text-align: center;"><?= $customer[13] ? '<i class="bx bx-check text-success text-success"></i>' : '<i class="bx bx-x text-danger"></i>' ?></td>
                  </tr>



              <?php endforeach; ?>
            <?php else: ?>
              <tr>
                <td colspan="14" style="text-align: center; background-color: #d6d6d6; padding: 15px; font-weight: 600;"> Data Tidak Pelanggan Temukan </td>
              </tr>
            <?php endif; ?>

              </tbody>      
            </table>

          <?php endforeach; ?>
        <?php endif; ?>



      <?php endforeach; ?>
    <?php endif; ?>
 

<script src="<?= base_url() ?>assets/vendor/libs/jquery/jquery.js"></script>   
<script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script>
<script type="text/javascript">
    
      $(document).ready(function ($) {
          if ('<?= $type ?>'.toUpperCase() == "PDF") {
              window.print();
          } else if ('<?= $type ?>'.toUpperCase() == "EXCEL") {
              
            const dataExport = <?= json_encode(array_map(function($subdistrict) {
              return array_map(function($village) use ($subdistrict) {
                return [
                  'title' => "Data Pelanggan {$village->name} - {$subdistrict->name}",
                  'village' => $village->name,
                  'subdistrict' => $subdistrict->name,
                  'customers' => array_map(function($cust) {
                    return [
                      'name' => $cust[1],
                      'payments' => array_slice($cust, 2, 12)
                    ];
                  }, $village->customers ?? [])
                ];
              }, $subdistrict->villages ?? []);
            }, $data ?? []), JSON_UNESCAPED_UNICODE) ?>.flat();

            exportToExcel(dataExport)
          }
      });



      async function exportToExcel(data) {
        const workbook = new ExcelJS.Workbook();

        data.forEach((area) => {
          const sheet = workbook.addWorksheet(area.title.substring(0, 31), {
            properties: { tabColor: { argb: 'FFC0000' } }
          });

          // Subjudul
          const title = `Data Pelanggan ${area.village} - ${area.subdistrict}`;
          sheet.addRow([title]);
          sheet.mergeCells('A1:N1');
          const cell = sheet.getCell('A1');
          cell.font = { bold: true };
          cell.alignment = { vertical: 'middle', horizontal: 'center' };
          cell.fill = {
            type: 'pattern',
            pattern: 'solid',
            fgColor: { argb: 'FFD6D6D6' }
          };

          // Header
          const header = ['No', 'Nama', '01-<?= $year ?>', '02-<?= $year ?>', '03-<?= $year ?>', '04-<?= $year ?>', '05-<?= $year ?>', '06-<?= $year ?>',
                          '07-<?= $year ?>', '08-<?= $year ?>', '09-<?= $year ?>', '10-<?= $year ?>', '11-<?= $year ?>', '12-<?= $year ?>'];
          const headerRow = sheet.addRow(header);
          headerRow.font = { bold: true };
          headerRow.alignment = { horizontal: 'center' };
          headerRow.fill = {
            type: 'pattern',
            pattern: 'solid',
            fgColor: { argb: 'FFD6D6D6' }
          };

          // Rows
          area.customers.forEach((cust, idx) => {
            const row = [idx + 1, cust.name];
            for (let i = 0; i < 12; i++) {
              const value = cust.payments[i] ? '✔' : '✘';
              row.push(value);
            }

            const rowObj = sheet.addRow(row);
            for (let i = 2; i < row.length; i++) {
              rowObj.getCell(i + 1).alignment = { horizontal: 'center' };
              rowObj.getCell(i + 1).font = {
                color: { argb: cust.payments[i - 2] ? 'FF71DD37' : 'FFFF3E1D' }
              };
            }
          });

          sheet.columns.forEach((col) => {
            col.width = 12;
          });
        });

        const buf = await workbook.xlsx.writeBuffer();
        const blob = new Blob([buf], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = `Laporan_Pelanggan_Tahun_${'<?= $year ?>'}.xlsx`;
        link.click();
      }

</script>

</body>
</html>