<?php 
session_start();
include('constant/connect.php');
?>

<?php include('./constant/layout/head.php');?>
<?php include('./constant/layout/header.php');?>
<?php include('./constant/layout/sidebar.php');?>  

<div class="page-wrapper">

    <!-- PAGE TITLE -->
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-primary">Appointment Requests</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Appointment Requests</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">Appointment Requests</h4>

    <a href="add_appointment.php" class="btn btn-primary">
        + Add Appointment
    </a>
</div>

                        <div class="table-responsive">

                        <table class="table table-hover table-bordered">

                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Doctor</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>

<?php
$res = $connect->query("SELECT * FROM appointments WHERE status='pending'");

if($res && $res->num_rows > 0){
    $i=1;
    while($row = $res->fetch_assoc()){
?>

<tr>
<td><?= $i++ ?></td>
<td><?= $row['patient_name'] ?></td>
<td><?= $row['phone'] ?></td>

<td>
<?= $row['doctor_id'] ? $row['doctor_id'] : '<span class="text-muted">Not Selected</span>' ?>
</td>

<td>
<span class="badge bg-warning text-dark">Pending</span>
</td>

<td>
<button onclick="viewData(<?= $row['id'] ?>)" class="btn btn-info btn-sm">
👁
</button>

<a href="approve.php?id=<?= $row['id'] ?>" class="btn btn-success btn-sm">
Approve
</a>
</td>
</tr>

<?php 
    }
}else{
    echo "<tr><td colspan='6' class='text-center'>No Data Found</td></tr>";
}
?>

                            </tbody>

                        </table>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- VIEW MODAL -->
<div id="viewModal" style="display:none; position:fixed; top:20%; left:35%; background:white; padding:25px; border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,0.3); z-index:9999;">
    <div id="modalContent"></div>
    <br>
    <button onclick="closeModal()" class="btn btn-danger">Close</button>
</div>
<style>
    .table-hover tbody tr:hover{
    background:#f1f5f9;
    transition:0.3s;
}

.badge{
    padding:6px 10px;
    border-radius:20px;
    font-size:12px;
}

.btn{
    border-radius:20px;
}
</style>

<script>
function viewData(id){
    fetch("view_appointment.php?id="+id)
    .then(res=>res.text())
    .then(data=>{
        document.getElementById("modalContent").innerHTML = data;
        document.getElementById("viewModal").style.display="block";
    });
}

function closeModal(){
    document.getElementById("viewModal").style.display="none";
}
</script>

<?php include('./constant/layout/footer.php');?>