<?php  
// Include sidebar if applicable
include('../../../dripend/statpages/sidebar.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export NHIA Claims to XML | DripDental System</title>

<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>
:root {
  --primary-blue: #004aad;
  --hover-blue: #003b8e;
  --white: #ffffff;
  --gray-light: #f4f6f9;
  --text-dark: #1f2937;
  --border-color: #d1d5db;
  --danger-red: #dc3545;
  --success-green: #28a745;
  --transition: all 0.3s ease;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--gray-light);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
}

.container {
  margin: 40px auto;
  background-color: var(--white);
  max-width: 1300px;
  padding: 25px 30px;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.header h1 {
  font-size: 1.8rem;
  color: var(--primary-blue);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.header .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.header .actions a {
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--white);
  transition: var(--transition);
}

.btn-blue { background-color: var(--primary-blue); }
.btn-blue:hover { background-color: var(--hover-blue); }

.btn-red { background-color: var(--danger-red); }
.btn-red:hover { background-color: #b02a37; }

/* Table Styles */
.claims-card {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px;
}

.claims-card h2 {
  font-size: 1rem;
  color: var(--primary-blue);
  text-transform: uppercase;
  margin-bottom: 15px;
}

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

thead {
  background-color: var(--primary-blue);
  color: var(--white);
}

th, td {
  padding: 12px 15px;
  border-bottom: 1px solid #dee2e6;
  text-align: left;
}

th:last-child, td:last-child {
  text-align: center;
}

tr:hover { background-color: #f5f9ff; }

.checkbox-cell { text-align: center; }

.generate-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 25px;
}

.btn-generate {
  background-color: var(--success-green);
  color: var(--white);
  border: none;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-generate:hover { background-color: #1e7e34; }

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: var(--white);
  border-radius: 12px;
  width: 500px;
  max-width: 95%;
  padding: 25px 30px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  animation: popIn 0.4s ease;
}

@keyframes popIn {
  from {transform: scale(0.9); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

.modal-content h3 {
  color: var(--primary-blue);
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.modal-content p {
  color: var(--text-dark);
  font-size: 1rem;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.modal-actions button {
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-cancel {
  background-color: var(--danger-red);
  color: var(--white);
}
.btn-cancel:hover { background-color: #a71d2a; }

.btn-confirm {
  background-color: var(--primary-blue);
  color: var(--white);
}
.btn-confirm:hover { background-color: var(--hover-blue); }

</style>
</head>

<body>
<div class="container">
  <div class="header">
    <h1>Export NHIA Claims to XML</h1>
    <div class="actions">
      <a href="nhisClaimsListing.php" class="btn-blue"><i class="fa-solid fa-file-invoice"></i> Go to NHIA Claims Listing</a>
      <a href="../insurance_claims_dashboard.php" class="btn-red"><i class="fa-solid fa-home"></i> Go to Main Dashboard</a>
    </div>
  </div>

  <div class="claims-card">
    <h2>Claims Available for Export</h2>
    <div class="table-wrapper">
      <table id="claimsTable">
        <thead>
          <tr>
            <th><input type="checkbox" id="selectAll"></th>
            <th>#</th>
            <th>Claim ID</th>
            <th>Patient Name</th>
            <th>Category</th>
            <th>Modality</th>
            <th>Amount (GHS)</th>
            <th>Status</th>
            <th>Date Submitted</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="checkbox-cell"><input type="checkbox" class="claim-checkbox"></td>
            <td>1</td><td>CLM001</td><td>John Doe</td><td>OPD</td><td>Dental</td>
            <td>150.00</td><td>Pending</td><td>29-10-2025</td>
          </tr>
          <tr>
            <td class="checkbox-cell"><input type="checkbox" class="claim-checkbox"></td>
            <td>2</td><td>CLM002</td><td>Mary Owusu</td><td>Medical</td><td>Paediatric</td>
            <td>260.50</td><td>Approved</td><td>28-10-2025</td>
          </tr>
          <tr>
            <td class="checkbox-cell"><input type="checkbox" class="claim-checkbox"></td>
            <td>3</td><td>CLM003</td><td>Emmanuel Addai</td><td>Investigation</td><td>Eye</td>
            <td>100.75</td><td>Rejected</td><td>27-10-2025</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="generate-section">
      <button class="btn-generate" onclick="openModal('confirmModal')">
        <i class="fa-solid fa-file-export"></i> Generate Claimit File
      </button>
    </div>
  </div>
</div>

<!-- Confirmation Modal -->
<div id="confirmModal" class="modal">
  <div class="modal-content">
    <h3>Generate Claimit File</h3>
    <p>Are you sure you want to generate the XML Claimit file for the selected claims? This process will export data for submission to NHIA.</p>
    <div class="modal-actions">
      <button class="btn-cancel" onclick="closeModal('confirmModal')"><i class="fa-solid fa-xmark"></i> Cancel</button>
      <button class="btn-confirm" onclick="confirmExport()"><i class="fa-solid fa-check"></i> Proceed</button>
    </div>
  </div>
</div>

<script>
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.claim-checkbox');

selectAll.addEventListener('change', function() {
  checkboxes.forEach(cb => cb.checked = selectAll.checked);
});

function openModal(id) {
  document.getElementById(id).style.display = 'flex';
}

function closeModal(id) {
  document.getElementById(id).style.display = 'none';
}

function confirmExport() {
  const selected = Array.from(checkboxes).filter(cb => cb.checked);
  if (selected.length === 0) {
    alert('Please select at least one claim before exporting.');
    closeModal('confirmModal');
    return;
  }

  closeModal('confirmModal');
  alert(`${selected.length} claim(s) selected. Generating XML Claimit File...`);
  // TODO: Implement backend XML export logic here
}
</script>
</body>
</html>
