<?php  
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>NHIA Claim Form | DripDental</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>
:root {
  --blue: #004aad;
  --blue-dark: #003580;
  --gray-light: #f5f7fa;
  --white: #ffffff;
  --border: #d1d5db;
  --text: #222;
  --green: #28a745;
  --red: #dc3545;
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --transition: all 0.3s ease;
}

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

.container {
  max-width: 1100px;
  margin: 40px auto;
  background: var(--white);
  padding: 35px 40px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

h1 {
  color: var(--blue);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 25px;
  font-size: 1.6rem;
}

.top-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.top-actions a {
  background: var(--blue);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}
.top-actions a:hover { background: var(--blue-dark); }

.section {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafafa;
  padding: 25px;
  margin-bottom: 35px;
}

.section h2 {
  color: var(--blue);
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 6px;
}

.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: 20px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

label {
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 4px;
}

input, select, textarea {
  width: 95%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  transition: var(--transition);
}

input[readonly] {
  background: #eef2f7;
  color: #555;
  cursor: not-allowed;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 5px rgba(0,64,255,0.15);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.9rem;
}

th, td {
  border: 1px solid var(--border);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

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

tr:hover td {
  background: #f1f6ff;
}

.btn-add {
  background: var(--blue);
  color: #fff;
  font-size: 0.8rem;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
}
.btn-add:hover { background: var(--blue-dark); }

.btn-remove {
  background: var(--red);
  color: #fff;
  font-size: 0.8rem;
  border: none;
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
}
.btn-remove:hover { background: #b02a37; }

.actions {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}

button {
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-save { background: var(--green); color: var(--white); }
.btn-save:hover { background: #218838; }

.btn-draft { background: var(--blue); color: var(--white); }
.btn-draft:hover { background: var(--blue-dark); }

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

@media(max-width:768px){
  .container { padding: 20px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}
</style>
</head>

<body>
<div class="container">
<div class="top-actions">
  <a href="nhisClaimsListing.php"><i class="fa-solid fa-arrow-left"></i> Back to Claims</a>
</div>

<h1>NHIA Claim Form</h1>

<!-- PATIENT INFORMATION -->
<div class="section">
  <h2>Patient Information</h2>
  <div class="grid-3">
    <div><label>Surname</label><input type="text" value="NYARKOA" readonly></div>
    <div><label>Other Name</label><input type="text" value="ABIGAIL" readonly></div>
    <div><label>Patient No.</label><input type="text" value="GA-A18-AAA7635" readonly></div>
  </div>
  <div class="grid-3">
    <div><label>NHIA No.</label><input type="text" value="39839243" readonly></div>
    <div><label>Date of Birth</label><input type="text" value="08/05/1992" readonly></div>
    <div><label>Age</label><input type="text" value="33 Year(s)" readonly></div>
  </div>
  <div class="grid-3">
    <div><label>Gender</label><input type="text" value="Female" readonly></div>
    <div><label>Month of Claim (Batch)</label><input type="text" value="Oct 2025" readonly></div>
    <div><label>Claim Check Code</label><input type="text" value="53031" readonly></div>
  </div>
</div>

<!-- SERVICE PROVIDED -->
<div class="section">
  <h2>Service Provided</h2>
  <div class="grid-3">
    <div><label>Type of Service (a)</label>
      <select><option>OUT Patient</option><option>IN Patient</option></select>
    </div>
    <div><label>Type of Service (b)</label>
      <select><option>All Inclusive</option><option>Unbundled</option></select>
    </div>
    <div><label>Outcome</label>
      <select><option>Discharged</option><option>Died</option></select>
    </div>
  </div>
  <div class="grid-3">
    <div><label>Duration of Spell (days)</label><input type="number"></div>
    <div><label>Type of Attendance</label>
      <select><option>Chronic Follow-up</option><option>Emergency/Acute Episode</option></select>
    </div>
    <div><label>Speciality Code</label><select><option>General</option></select></div>
  </div>
</div>

<!-- PROCEDURES -->
<div class="section">
  <h2>Procedures <button class="btn-add" onclick="addProcedureRow()"><i class="fa fa-plus"></i> Add</button></h2>
  <table id="procedureTable">
    <thead>
      <tr><th>Description</th><th>Code</th><th>Unit Price</th><th>Qty</th><th>Total</th><th>Date</th><th>Action</th></tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" value="Blood Test"></td>
        <td><input type="text" value="PROC001"></td>
        <td><input type="number" value="15.00"></td>
        <td><input type="number" value="1"></td>
        <td><input type="number" value="15.00"></td>
        <td><input type="date" value="2025-10-10"></td>
        <td><button class="btn-remove" onclick="removeRow(this)"><i class="fa fa-trash"></i></button></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- INVESTIGATIONS -->
<div class="section">
  <h2>Investigations <button class="btn-add" onclick="addInvestigationRow()"><i class="fa fa-plus"></i> Add</button></h2>
  <table id="investigationTable">
    <thead>
      <tr><th>Description</th><th>Code</th><th>Unit Price</th><th>Qty</th><th>Total</th><th>Date</th><th>Action</th></tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<!-- DIAGNOSIS -->
<div class="section">
  <h2>Diagnosis <button class="btn-add" onclick="addDiagnosisRow()"><i class="fa fa-plus"></i> Add</button></h2>
  <table id="diagnosisTable">
    <thead>
      <tr><th>Description</th><th>ICD-10 Code</th><th>Type</th><th>Date Recorded</th><th>Action</th></tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<!-- MEDICINES -->
<div class="section">
  <h2>Medicines <button class="btn-add" onclick="addMedicineRow()"><i class="fa fa-plus"></i> Add</button></h2>
  <table id="medicineTable">
    <thead>
      <tr><th>Description</th><th>Dosage</th><th>Frequency</th><th>Price</th><th>Qty</th><th>Total</th><th>Date</th><th>Code</th><th>Action</th></tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<!-- CLIENT CLAIM SUMMARY -->
<div class="section">
  <h2>Client Claim Summary</h2>
  <table>
    <thead>
      <tr><th>Type of Service</th><th>G-DRG/Code</th><th>Tariff Amount</th></tr>
    </thead>
    <tbody>
      <tr><td>A - In-Patient</td><td><input type="text"></td><td><input type="number"></td></tr>
      <tr><td>B - Out-Patient</td><td><input type="text"></td><td><input type="number"></td></tr>
      <tr><td>D - Pharmacy</td><td><input type="text"></td><td><input type="number"></td></tr>
      <tr><td>C - Investigations</td><td><input type="text"></td><td><input type="number"></td></tr>
      <tr><td><b>Total</b></td><td></td><td><input type="number"></td></tr>
    </tbody>
  </table>
</div>

<!-- SCHEME USE ONLY -->
<div class="section">
  <h2>For Scheme Use Only</h2>
  <div class="grid-3">
    <div><label>Date Received:</label><input type="date"></div>
    <div><label>Action 1:</label><input type="text"></div>
    <div><label>Date:</label><input type="date"></div>
  </div>
  <div class="grid-3">
    <div><label>Date Current:</label><input type="date"></div>
    <div><label>Action 2:</label><input type="text"></div>
    <div><label>Date:</label><input type="date"></div>
  </div>
</div>

<!-- ACTION BUTTONS -->
<div class="actions">
  <button class="btn-save"><i class="fa-solid fa-check-circle"></i> Save & Finalize</button>
  <button class="btn-draft"><i class="fa-solid fa-save"></i> Save as Draft</button>
  <button class="btn-cancel"><i class="fa-solid fa-ban"></i> Cancel</button>
</div>
</div>

<script>
function removeRow(btn){ btn.closest("tr").remove(); }

function addProcedureRow(){
  const t=document.querySelector("#procedureTable tbody");
  const r=document.createElement("tr");
  r.innerHTML=`<td><input type='text'></td><td><input type='text'></td><td><input type='number'></td><td><input type='number'></td><td><input type='number'></td><td><input type='date'></td><td><button class='btn-remove' onclick='removeRow(this)'><i class='fa fa-trash'></i></button></td>`;
  t.appendChild(r);
}

function addInvestigationRow(){
  const t=document.querySelector("#investigationTable tbody");
  const r=document.createElement("tr");
  r.innerHTML=`<td><input type='text'></td><td><input type='text'></td><td><input type='number'></td><td><input type='number'></td><td><input type='number'></td><td><input type='date'></td><td><button class='btn-remove' onclick='removeRow(this)'><i class='fa fa-trash'></i></button></td>`;
  t.appendChild(r);
}

function addDiagnosisRow(){
  const t=document.querySelector("#diagnosisTable tbody");
  const r=document.createElement("tr");
  r.innerHTML=`<td><input type='text'></td><td><input type='text'></td><td><select><option>Primary</option><option>Secondary</option></select></td><td><input type='date'></td><td><button class='btn-remove' onclick='removeRow(this)'><i class='fa fa-trash'></i></button></td>`;
  t.appendChild(r);
}

function addMedicineRow(){
  const t=document.querySelector("#medicineTable tbody");
  const r=document.createElement("tr");
  r.innerHTML=`<td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='number'></td><td><input type='number'></td><td><input type='number'></td><td><input type='date'></td><td><input type='text'></td><td><button class='btn-remove' onclick='removeRow(this)'><i class='fa fa-trash'></i></button></td>`;
  t.appendChild(r);
}
</script>
</body>
</html>
