<?php
session_start();
include "config.php";
include "header.php";

$pid = $_GET['id'];

if(isset($_POST['save'])){

$diag = $_POST['diagnosis'];
$adv = $_POST['advice'];

mysqli_query($conn,"INSERT INTO prescriptions(patient_id,diagnosis,advice)
VALUES('$pid','$diag','$adv')");

$pres_id = mysqli_insert_id($conn);

for($i=0;$i<count($_POST['medicine']);$i++){

  $m = $_POST['medicine'][$i];
  $d = $_POST['dosage'][$i];
  $f = $_POST['frequency'][$i];
  $du = $_POST['duration'][$i];

  mysqli_query($conn,"INSERT INTO prescription_items
  (prescription_id,medicine_name,dosage,frequency,duration)
  VALUES('$pres_id','$m','$d','$f','$du')");
}

header("Location: print_prescription.php?id=$pres_id");
exit();
}
?>

<!-- ================= CSS FIX ================= -->

<style>
.med-row{
  background:#f8f9fa;
  padding:10px;
  border-radius:10px;
  margin-bottom:10px;
}

/* MOBILE LAYOUT */
@media(max-width:768px){
  .med-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .med-row .col,
  .med-row .col-1{
    width:100%;
  }

  .remove-btn{
    grid-column: span 2;
    width:100%;
  }
}
</style>

<!-- =========================================== -->

<h4>Create Prescription</h4>

<form method="post">

<label>Diagnosis:</label>
<textarea name="diagnosis" class="form-control" required></textarea>

<br>

<div id="medblock">

<!-- MEDICINE ROW -->
<div class="row mt-2 med-row">

<div class="col">
<select name="medicine[]" class="form-control" required>
<option value="">Select Medicine</option>
<?php
$r=mysqli_query($conn,"SELECT medicine_name FROM medicines");
while($row=mysqli_fetch_assoc($r)){
echo "<option value='{$row['medicine_name']}'>{$row['medicine_name']}</option>";
}
?>
</select>
</div>

<div class="col">
<input name="dosage[]" placeholder="Dosage" class="form-control" required>
</div>

<div class="col">
<input name="frequency[]" placeholder="Frequency" class="form-control" required>
</div>

<div class="col">
<input name="duration[]" placeholder="Duration" class="form-control" required>
</div>

<div class="col-1">
<button type="button" class="btn btn-danger remove-btn" onclick="removeRow(this)">X</button>
</div>

</div>
<!-- END ROW -->

</div>

<br>

<button type="button" class="btn btn-primary" onclick="addRow()">+ Add Medicine</button>

<br><br>

<label>Advice:</label>
<textarea name="advice" class="form-control"></textarea>

<br>

<button class="btn btn-success" name="save">Save Prescription</button>

</form>

<!-- ================= JS ================= -->

<script>
function addRow(){
  let container = document.getElementById("medblock");
  let firstRow = container.querySelector(".med-row");
  let newRow = firstRow.cloneNode(true);

  newRow.querySelectorAll("input").forEach(e => e.value="");
  newRow.querySelector("select").selectedIndex = 0;

  container.appendChild(newRow);
}

function removeRow(btn){
  let rows = document.querySelectorAll(".med-row");
  if(rows.length > 1){
    btn.closest(".med-row").remove();
  }
}
</script>

<?php include "footer.php"; ?>