<div class="card">
  <div class="card-body">
    <form method="get">
      <div class="row">
        <div class="col-md-3">
          <label>Date From</label>
          <input type="date" name="date_from" 
       value="<?= $filters['date_from'] ?? $today ?>" 
       class="form-control">
        </div>
        <div class="col-md-3">
          <label>Date To</label>
          <input type="date" name="date_to" 
       value="<?= $filters['date_to'] ?? $today ?>" 
       class="form-control">
        </div>
        <div class="col-md-3">
          <label>Shift</label>
          <select name="shift_id" class="form-control">
            <option value="">All</option>
            <?php foreach($shifts as $s): ?>
              <option value="<?= $s->id ?>" <?= ($filters['shift_id']==$s->id)?'selected':'' ?>><?= $s->name ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="col-md-3">
          <label>Department</label>
          <select name="department_id" class="form-control">
            <option value="">All</option>
            <?php foreach($departments as $d): ?>
              <option value="<?= $d->id ?>" <?= ($filters['department_id']==$d->id)?'selected':'' ?>><?= $d->name ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="col-md-3">
          <label>Service</label>
          <select name="service_id" class="form-control">
            <option value="">All</option>
            <?php foreach($services as $srv): ?>
              <option value="<?= $srv->id ?>" <?= ($filters['service_id']==$srv->id)?'selected':'' ?>><?= $srv->name ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="col-md-3">
          <label>Sub-Service</label>
          <select name="sub_service_id" class="form-control">
            <option value="">All</option>
            <?php foreach($sub_services as $ss): ?>
              <option value="<?= $ss->id ?>" <?= ($filters['sub_service_id']==$ss->id)?'selected':'' ?>><?= $ss->name ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="col-md-3">
          <label>Funded By</label>
          <input type="text" name="funded_by" value="<?= $filters['funded_by'] ?? '' ?>" class="form-control">
        </div>
        <div class="col-md-2">
          <label>Gender</label>
          <select name="gender" class="form-control">
            <option value="">All</option>
            <option value="Male" <?= ($filters['gender']=='Male')?'selected':'' ?>>Male</option>
            <option value="Female" <?= ($filters['gender']=='Female')?'selected':'' ?>>Female</option>
          </select>
        </div>
        <div class="col-md-1 mt-4 text-right">
          <label></label>
          <button class="btn btn-primary">Filter</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Column Selection -->
<!-- Column Selection -->
<div class="card mt-3">
  <div class="card-body">
    <h5 class="mb-3">Select Columns to Print</h5>
    <div class="row">
      
      <!-- Left side: Checkboxes -->
      <div class="col-md-9">
        <div class="row">
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="0" checked> #SN</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="1" checked> #ID</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="2" checked> Date</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="3" checked> Shift</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="4" checked> Name</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="5" checked> Phone</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="6" checked> Department</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="7" checked> Service</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="8" checked> Gender</label>
          </div>
          <div class="col-md-2">
            <label><input type="checkbox" class="print-col" value="9" checked> Funded By</label>
          </div>
        </div>
      </div>

      <!-- Right side: Print Button -->
      <div class="col-md-3 text-end d-flex align-items-center justify-content-end">
        <button id="printReport" type="button" class="btn btn-success">
          <i class="fa fa-print"></i> Print Report
        </button>
      </div>
    </div>
  </div>
</div>


<!-- Data Table -->
<div class="card mt-3">
  <div class="card-body table-responsive">
    <table id="services-table" class="table table-striped table-bordered nowrap">
      <thead>
        <tr>
          <th>#</th>
          <th>ID</th>
          <th>Date</th>
          <th>Shift</th>
          <th>Name</th>
          <th>Phone</th>
          <th>Department</th>
          <th>Service</th>
          <th>Gender</th>
          <th>Funded By</th>
        </tr>
      </thead>
      <tbody>
        <?php $i=1; foreach($tokens as $t): ?>
          <tr>
            <td><?= $i++ ?></td>
            <td>ALG-<?= $t->id ?></td>
            <td><?= date('Y-m-d', strtotime($t->created_at)) ?></td>
            <td><?= $t->shift_name ?></td>
            <td><?= $t->name ?></td>
            <td><?= $t->phone ?></td>
            <td><?= $t->department_name ?></td>
            <td><?= $t->service_name  ?></td>
            <td><?= $t->gender ?></td>
            <td><?= $t->funded_by ?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

<script>
$(document).ready(function() {
    var table = $('#services-table').DataTable({
        responsive: true,
        pageLength: 10,
        lengthMenu: [10,25,50,100],
        order: [[1,'desc']]
    });

    // Print button click
    $('#printReport').on('click', function() {
        var today = new Date().toISOString().split('T')[0];
        var dateFrom = "<?= $filters['date_from'] ?? date('Y-m-d') ?>";
        var dateTo   = "<?= $filters['date_to'] ?? date('Y-m-d') ?>";

        // get selected columns
        var selectedCols = [];
        $('.print-col:checked').each(function() {
            selectedCols.push(parseInt($(this).val()));
        });

        // clone table
        var tableClone = document.getElementById("services-table").cloneNode(true);

        // loop rows and hide non-selected columns
        Array.from(tableClone.querySelectorAll("tr")).forEach(row => {
            for (let i = row.cells.length - 1; i >= 0; i--) {
                if (!selectedCols.includes(i)) {
                    row.deleteCell(i);
                }
            }
        });

        var tableContent = tableClone.outerHTML;

        // open new window for print
        var printWindow = window.open('', '', 'height=800,width=1200');

        printWindow.document.write(`
            <html>
              <head>
                <title>Token Report</title>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
                <style>
                  body { font-family: Arial, sans-serif; }
                  .report-header { text-align:center; margin-bottom:20px; }
                  .report-footer { text-align:center; margin-top:20px; font-size:12px; }
                  table { font-size:13px; }
                </style>
              </head>
              <body>
                <div class="report-header">
                  <img src="<?= base_url('uploads/settings/' . $settings->logo_sidebar) ?>" alt="Logo" height="60"><br>
                  <br>
                  <p><strong>Date From:</strong> ${dateFrom} | <strong>Date To:</strong> ${dateTo}</p>
                </div>
                ${tableContent}
                <div class="report-footer">
                  <p>Generated on ${today} | Powered by MUNSHI JI</p>
                </div>
              </body>
            </html>
        `);

        printWindow.document.close();
        printWindow.print();
    });
});
</script>
