<?php include 'header.php'; ?>
 
    <!--Date picker-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/litepicker/dist/css/litepicker.css">

    <style>

      .chatbox1 {
        position: fixed;
        right: 0;
        top: 0;
        width: 320px;
        height: 100%;
        background-color: white;
        z-index: 9999;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        transition: all 0.3s ease;
      }
      .btn1 {
        background-color: #fff;
        color: #006ced;
        border: 1px solid #006ced !important;
        border-radius: 10px !important;
        font-size: 16px;
        font-weight: 700;
        position: relative;
        letter-spacing: 1px;
        text-transform: uppercase;
        z-index: 1;
        transition: all 0.6s ease 0s;
        overflow: hidden;
        align-items: center;
        display: flex;
        padding: 3px 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
      }
      .btn1:hover {
        color: #fff !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
      }
      .btn1:before {
        background: #006ced;
        content: "";
        height: 1000px;
        left: 50%;
        opacity: 1;
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
        transition: all 0.2s linear 0s;
        width: 0;
        z-index: -1;
      }
      .btn1:hover:before {
        opacity: 1;
        width: 100%;
      }
      .modern-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
      }

      .modern-table thead th {
        background: #f1f3f9;
        padding: 14px;
        font-weight: 700;
        color: #4c4f5a;
        border-bottom: 2px solid #e0e6f1;
        text-transform: uppercase;
        font-size: 13px;
      }

      .modern-table tbody tr {
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
        border-radius: 10px;
      }

      .modern-table tbody td {
        padding: 10px;
        vertical-align: middle;
        font-size: 14px;
        color: #333;
      }
      .role-dropdown {
        display: none;          /* hidden by default */
        position: absolute;     /* relative to parent */
        top: 100%;              /* below input */
        left: 10px;
        width: 95%;
        max-height: 200px;      /* set max height */
        overflow-y: auto;       /* scroll if content exceeds max-height */
        background: #fff;
        border: 1px solid #ccc;
        z-index: 1000;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .role-dropdown li {
        padding: 8px 12px;
        cursor: pointer;
    }
    
    .role-dropdown li:hover {
        background-color: #f0f0f0;
    }
    </style>
    
    <div class="dashboard-main-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
            <h6 class="fw-semibold mb-0">Ticket List</h6>
        </div>
      
        <div class="d-flex flex-wrap justify-content-end gap-2 mb-3">
            <a href="add_ticket.php" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="Add">
                <iconify-icon icon="ic:baseline-plus" class="icon text-xl line-height-1"></iconify-icon>
            </a>    
            <a type="button" id="openFilter" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="Filter">
                <iconify-icon icon="mdi:filter-variant" class="icon text-xl line-height-1"></iconify-icon>
            </a>
        </div>

        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
                <div class="d-flex flex-wrap align-items-center gap-3">
                    <form method="get" id="paginationForm" class="row g-2 align-items-center w-100">
                      <!-- Show label -->
                      <div class="col-12 col-sm-auto">
                        <span class="fw-semibold">Show</span>
                      </div>
        
                      <!-- Per page select -->
                      <div class="col-12 col-sm-auto">
                        <select class="form-select form-select-sm" name="per_page" onchange="this.form.submit();">
                          <option value="10">10</option>
                          <option value="15">15</option>
                          <option value="20">20</option>
                        </select>
                      </div>
        
                      <!-- Search input -->
                    <div class="col-12 col-sm-5">
                        <input type="text" name="search" id="searchBox"
                            class="form-control form-control-sm"
                            placeholder="Search here....."/>
                    </div>
                    
                    <div class="col-auto" id="bulkDeleteWrapper" style="display:none;">
                        <button type="button" id="bulkDeleteBtn"
                            class="btn btn-danger btn-sm d-flex align-items-center gap-1">
                            <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                            Delete Selected (<span id="selectedCount">0</span>)
                        </button>
                    </div>
                    </form>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table modern-table mb-0" id="ticketTable">
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="checkAll" class="form-check-input">
            </th>
            <th>S.L.</th>
            <th>Ticket No</th>
            <th>Issue</th>
            <th>Priority</th>
            <th>Created On</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>

        <tr data-leave-id="1">
            <td>
                <input type="checkbox" class="form-check-input row-check" value="1">
            </td>
            <td>1</td>
            <td>T-101</td>
            <td>Login issue</td>
            <td><span class="badge bg-success">Medium</span></td>
            <td>21/01/2025</td>
            <td>
                <div class="d-flex flex-wrap gap-1">
                    <a href="view_ticket.php"
                        class="w-32-px h-32-px bg-primary-light text-primary-600 rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="View">
                        <iconify-icon icon="iconamoon:eye-light"></iconify-icon>
                    </a>

                    <a href="javascript:void(0);"
                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="Edit">
                        <iconify-icon icon="lucide:edit"></iconify-icon>
                    </a>

                    <a href="javascript:void(0);"
                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="Delete">
                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                    </a>
                </div>
            </td>
        </tr>

        <tr data-leave-id="2">
            <td>
                <input type="checkbox" class="form-check-input row-check" value="2">
            </td>
            <td>2</td>
            <td>T-102</td>
            <td>Page not loading</td>
            <td><span class="badge bg-warning">Low</span></td>
            <td>22/01/2025</td>
            <td>
                <div class="d-flex flex-wrap gap-1">
                    <a href="view_ticket.php"
                        class="w-32-px h-32-px bg-primary-light text-primary-600 rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="View">
                        <iconify-icon icon="iconamoon:eye-light"></iconify-icon>
                    </a>

                    <a href="javascript:void(0);"
                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="Edit">
                        <iconify-icon icon="lucide:edit"></iconify-icon>
                    </a>

                    <a href="javascript:void(0);"
                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="Delete">
                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                    </a>
                </div>
            </td>
        </tr>

        <tr data-leave-id="3">
            <td>
                <input type="checkbox" class="form-check-input row-check" value="3">
            </td>
            <td>3</td>
            <td>T-103</td>
            <td>Database error</td>
            <td><span class="badge bg-danger">High</span></td>
            <td>23/01/2025</td>
            <td>
                <div class="d-flex flex-wrap gap-1">
                    <a href="view_ticket.php"
                        class="w-32-px h-32-px bg-primary-light text-primary-600 rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="View">
                        <iconify-icon icon="iconamoon:eye-light"></iconify-icon>
                    </a>

                    <a href="javascript:void(0);"
                        class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="Edit">
                        <iconify-icon icon="lucide:edit"></iconify-icon>
                    </a>

                    <a href="javascript:void(0);"
                        class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center"
                        title="Delete">
                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                    </a>
                </div>
            </td>
        </tr>

    </tbody>
</table>
                </div>

                <!-- Pagination -->
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-24">
                    <span>Showing 1 to 10 of 12 entries</span>
                    <ul class="pagination d-flex flex-wrap align-items-center gap-2 justify-content-center">
                        <li class="page-item">
                            <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)">
                              <iconify-icon icon="ep:d-arrow-left" class=""></iconify-icon>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md bg-primary-600 text-white" href="javascript:void(0)">
                              1
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">
                              2
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)">
                                <iconify-icon icon="ep:d-arrow-right"></iconify-icon>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  
  <!--filter model-->
  <div class="chatbox1" id="filterBox" style="display: none">
      <div class="chatbox-close1" id="closeFilter"></div>
      <div class="custom-tab-2">
          <div style="display: flex; justify-content: space-between">
              <h5 style="margin: 10px 0px 0px 17px">Filter</h5>
              <button class="chatbox-close1" style="font-size: 35px; margin-right: 15px">
                  &times;
              </button>
          </div>
          <hr />
          <div class="custom-tab-1" style="margin: 0px 17px 0px 17px">
          <form class="form row g-3" action="" method="get" id="filterForm" style="margin-top: 5px">
              
            <div class="col-lg-12">
                 <label class="form-label">Date</label> 
                 <!--Here Input type is text because the date script is add so "do not change the type=date" -->
                <input type="text" id="rangeInput" class="form-control" placeholder="dd-mm-yyyy to dd-mm-yyyy" readonly>
            </div>
            
             <!-- Priority -->
            <div class="col-lg-12 position-relative">
                <label class="form-label">Priority<span class="text-danger">*</span></label>
                <input type="text" class="form-control search-input" placeholder="Select Priority">
                <ul class="role-dropdown">
                    <li>Low</li>
                    <li>Medium</li>
                    <li>High</li>
                </ul>
            </div>
             
           <div class="col-lg-12">
                 <label class="form-label">Create On</label>
                 <!--Here Input type is text because the date script is add so "do not change the type=date" -->
                <input type="text" id="singleDate" class="form-control" placeholder="dd-mm-yyyy" readonly>
            </div>
            
            <div style="position:sticky; bottom:0; background:white; padding:10px; z-index:10; border-top:1px solid #ddd;display:flex">
                <div class="col-lg-6 p-2">
                    <button type="submit" style="width:100%" class="btn btn-primary">Submit</button>
                </div>
                <div class="col-lg-6 p-2">
                    <button type="button" id="resetButton" style="width:100%" class="btn btn-primary">Reset</button>
                </div>
          </div>
          </form>
        </div>
      </div>
    </div>
    
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!--Date Picker-->
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/bundle.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!--filter script-->
<script>
  // Open filter
  document.getElementById("openFilter").addEventListener("click", function () {
    document.getElementById("filterBox").style.display = "block";
  });

  // Close filter (all close buttons)
  document.querySelectorAll(".chatbox-close1").forEach((btn) => {
    btn.addEventListener("click", function () {
      document.getElementById("filterBox").style.display = "none";
    });
  });
</script>

<!--Date Picker script-->
<script>
  new Litepicker({
    element: document.getElementById('rangeInput'),
    singleMode: false,
    format: 'DD-MM-YYYY',
    delimiter: ' to ',
    dropdowns: {
      months: true,
      years: true
    }
  });

  new Litepicker({
    element: document.getElementById('singleDate'),
    singleMode: true,
    format: 'DD-MM-YYYY',
    dropdowns: {
      months: true,
      years: true
    }
  });
</script>

<!--delete btn script-->
<script>
document.addEventListener('DOMContentLoaded', function () {

    // Shared SweetAlert config
    const swalConfig = {
        width: '350px',
        customClass: {
            popup:         'swal-modern',
            title:         'swal-title',
            htmlContainer: 'swal-text',
            confirmButton: 'swal-confirm',
            cancelButton:  'swal-cancel'
        }
    };

    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            const row      = this.closest('tr');
            const ticketNo = row.querySelector('td:nth-child(2)').textContent.trim();
            const issue    = row.querySelector('td:nth-child(3)').textContent.trim();

            Swal.fire({
                ...swalConfig,
                title: 'Delete Ticket?',
                html: `Are you sure you want to delete ticket <strong>${ticketNo}</strong> - <strong>"${issue}"</strong>?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
            }).then((result) => {
                if (result.isConfirmed) {
                    row.remove();

                    // Update serial numbers
                    const rows = document.querySelectorAll('#ticketTable tbody tr');
                    rows.forEach((r, i) => {
                        r.querySelector('td:nth-child(1)').textContent = i + 1;
                    });

                    // Update entries text
                    const totalRows = rows.length;
                    const info = document.querySelector('.d-flex.align-items-center.justify-content-between.flex-wrap.gap-2.mt-24 span');
                    if (info) info.textContent = `Showing 1 to ${totalRows} of ${totalRows} entries`;

                    Swal.fire({
                        ...swalConfig,
                        title: 'Deleted!',
                        html: `Ticket <strong>${ticketNo}</strong> - <strong>"${issue}"</strong> has been deleted successfully.`,
                        icon: 'success',
                        confirmButtonColor: '#4a63ff',
                    });
                }
            });
        });
    });
});
</script>

<!--Searchbale dropdown-->
<script>
document.addEventListener('DOMContentLoaded', function () {

  const allDropdowns = document.querySelectorAll('.position-relative');

  allDropdowns.forEach(container => {

    const search = container.querySelector('.search-input');
    const dropdown = container.querySelector('.role-dropdown');
    const items = dropdown.querySelectorAll('li');

    function showDropdown() {
      dropdown.style.display = 'block';
    }

    function hideDropdown() {
      dropdown.style.display = 'none';
    }

    function filterDropdown() {
      const value = search.value.toLowerCase().trim();

      let visible = 0;

      items.forEach(item => {
        if (item.textContent.toLowerCase().includes(value)) {
          item.style.display = 'block';
          visible++;
        } else {
          item.style.display = 'none';
        }
      });

      dropdown.style.display = visible ? 'block' : 'none';
    }

    // Open
    search.addEventListener('focus', showDropdown);
    search.addEventListener('click', showDropdown);

    // Typing
    search.addEventListener('input', filterDropdown);

    // Select
    items.forEach(item => {
      item.addEventListener('click', () => {
        search.value = item.textContent;
        hideDropdown();
      });
    });

    // Outside click
    document.addEventListener('click', function (e) {
      if (!container.contains(e.target)) {
        hideDropdown();
      }
    });

  });

});
</script>
<script>
const checkAll = document.getElementById('checkAll');
const bulkWrapper = document.getElementById('bulkDeleteWrapper');
const selectedCount = document.getElementById('selectedCount');

function getVisibleRowCheckboxes() {
    return Array.from(document.querySelectorAll('#ticketTable tbody tr'))
        .filter(row => row.style.display !== 'none')
        .map(row => row.querySelector('.row-check'))
        .filter(Boolean);
}

function getCheckedRowCheckboxes() {
    return Array.from(
        document.querySelectorAll('#ticketTable tbody .row-check:checked')
    );
}

function updateBulkUI() {
    const checked = getCheckedRowCheckboxes();
    const count = checked.length;

    bulkWrapper.style.display = count > 0 ? '' : 'none';
    selectedCount.textContent = count;

    const visibleBoxes = getVisibleRowCheckboxes();
    const visibleChecked = visibleBoxes.filter(cb => cb.checked).length;

    checkAll.checked =
        visibleBoxes.length > 0 &&
        visibleChecked === visibleBoxes.length;

    checkAll.indeterminate =
        visibleChecked > 0 &&
        visibleChecked < visibleBoxes.length;
}

checkAll.addEventListener('change', function () {
    getVisibleRowCheckboxes().forEach(cb => {
        cb.checked = this.checked;
    });
    updateBulkUI();
});

document.getElementById('ticketTable').addEventListener('change', function(e) {
    if (e.target.matches('.row-check')) {
        updateBulkUI();
    }
});

document.getElementById('bulkDeleteBtn').addEventListener('click', function () {

    const checked = getCheckedRowCheckboxes();
    const count = checked.length;

    Swal.fire({
        title: 'Delete ' + count + ' ticket' + (count > 1 ? 's' : '') + '?',
        text: 'This action cannot be undone!',
        icon: 'warning',
        showCancelButton: true,
        width: '350px',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        customClass: {
            popup: 'swal-modern',
            title: 'swal-title',
            htmlContainer: 'swal-text',
            confirmButton: 'swal-confirm',
            cancelButton: 'swal-cancel'
        }
    }).then((result) => {

        if (result.isConfirmed) {

            checked.forEach(cb => {
                cb.closest('tr').remove();
            });

            updateBulkUI();

            document.querySelectorAll('#ticketTable tbody tr')
                .forEach((row, index) => {
                    row.querySelector('td:nth-child(2)').textContent = index + 1;
                });

            Swal.fire({
                title: 'Deleted!',
                text: 'Selected tickets have been deleted.',
                icon: 'success',
                width: '350px',
                confirmButtonColor: '#4a63ff',
                customClass: {
                    popup: 'swal-modern',
                    title: 'swal-title',
                    htmlContainer: 'swal-text',
                    confirmButton: 'swal-confirm'
                }
            });
        }
    });
});
</script>
 <?php include 'footer.php'; ?>