<?php session_start();?>
<?php include'includes/header.php'; ?>
<?php include'includes/sidebar.php';?>
<?php include'includes/functions.php';?>
<?php include'includes/navbar.php'; ?>

<!-- Handle Add Slider -->
<style>
    td span{
        padding: 10px; border-radius: 6px;
        font-size: 13px;
    }
    .success_stutus{
        background: #E8FCEF; color: #4ECA74;
    }
    .error_status{
        background: #F8D7DA; color: #90151C;
    }
    .info-box{
        width: 100%;
        padding: 8px;
        border:2px solid #ddd;
    }
    .info-box h4{
        font-size: 16px;
        font-weight: bold;
    }
.iconside{
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iconside i{
    font-size: 200px;
    color: #ccc;
}
.nav-tabs .nav-link {
  border: none;
  color: #555;
  font-weight: 600;
}
.nav-tabs .nav-link.active {
  color: #0d6efd;
  border-bottom: 3px solid #0d6efd;
  background: none;
}
.tab-content {
  background: #fff;
  border-radius: 6px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}
</style>


<div id="notification-containers" class="notification-containers"></div>
<div class="insider">
    <div class="container">
        <div class="cat-pag">
            <!-- <div class="cat-page-header d-flex justify-content-between align-items-center">
                <h5>All Students</h5>
                <div>
                    <a href="test_score.php?class=<?=$class?>" class="btn info text-white">Add Test Scores <i class="fa fa-plus-circle"></i></a>

                    <a href="exam_score.php?class=<?=$class?>" class="btn invoice text-white">Add Exam Score <i class="fa fa-pen"></i></a>
                </div>
            </div> -->
            <div class="card-body" style="margin-top: 10px">
                <!-- ===== Nav Tabs ===== -->
                <ul class="nav nav-tabs justify-content-center mb-3" id="studentTabs" role="tablist">
                  <li class="nav-item">
                    <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                      type="button" role="tab"><i class="fa fa-id-card"></i> Profile</button>
                  </li>
                  <li class="nav-item">
                    <button class="nav-link" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments"
                      type="button" role="tab"><i class="fa fa-wallet"></i> Payments</button>
                  </li>
                  <li class="nav-item">
                    <button class="nav-link" id="results-tab" data-bs-toggle="tab" data-bs-target="#results"
                      type="button" role="tab"><i class="fa fa-chart-line"></i> Results</button>
                  </li>
                </ul>

                <!-- ===== Tab Contents ===== -->
                <div class="tab-content" id="studentTabsContent">

                  <!-- Profile Tab -->
                  <div class="tab-pane fade show active" id="profile" role="tabpanel">
                    <div class="row">
                      <div class="col-md-4 text-center">
                        <img src="assets/img/student-avatar.png" alt="Profile Picture" class="rounded-circle mb-3" width="120">
                        <h5>John Doe</h5>
                        <p class="text-muted">Admission No: SC2023/001</p>
                        <button class="btn btn-outline-primary btn-sm"><i class="fa fa-edit"></i> Edit Profile</button>
                      </div>
                      <div class="col-md-8">
                        <h6 class="text-primary mb-3"><i class="fa fa-user"></i> Personal Information</h6>
                        <div class="row">
                          <div class="col-md-6"><strong>Surname:</strong> Doe</div>
                          <div class="col-md-6"><strong>Other Names:</strong> John Michael</div>
                          <div class="col-md-6"><strong>Gender:</strong> Male</div>
                          <div class="col-md-6"><strong>Class:</strong> SS3</div>
                        </div>
                        <hr>
                        <h6 class="text-success"><i class="fa fa-user-friends"></i> Parent / Guardian</h6>
                        <p><strong>Parent:</strong> Mrs. Elizabeth Doe</p>
                        <p><strong>Phone:</strong> +234 803 123 4567</p>
                      </div>
                    </div>
                  </div>

                  <!-- Payments Tab -->
                  <div class="tab-pane fade" id="payments" role="tabpanel">
                    <h6 class="text-primary"><i class="fa fa-wallet"></i> Payment Summary</h6>
                    <table class="table table-bordered table-striped mt-3">
                      <thead class="table-secondary">
                        <tr>
                          <th>#</th>
                          <th>Fee Description</th>
                          <th>Amount (₦)</th>
                          <th>Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td><td>Tuition Fee</td><td>80,000</td><td><span class="badge bg-success">Paid</span></td>
                        </tr>
                        <tr>
                          <td>2</td><td>Exam Fee</td><td>15,000</td><td><span class="badge bg-danger">Not Paid</span></td>
                        </tr>
                      </tbody>
                    </table>

                    <div class="text-end mt-3">
                      <h6>Total: ₦95,000</h6>
                      <h6>Paid: ₦80,000</h6>
                      <h5 class="text-danger">Balance: ₦15,000</h5>
                      <button class="btn btn-success mt-2"><i class="fa fa-credit-card"></i> Pay Now</button>
                    </div>

                    <hr>
                    <h6><i class="fa fa-history"></i> Payment History</h6>
                    <ul class="list-group">
                      <li class="list-group-item d-flex justify-content-between">
                        <span>12 Jan 2025 - ₦40,000</span>
                        <span class="badge bg-success">Success</span>
                      </li>
                      <li class="list-group-item d-flex justify-content-between">
                        <span>10 Mar 2025 - ₦40,000</span>
                        <span class="badge bg-success">Success</span>
                      </li>
                    </ul>
                  </div>

                  <!-- Results Tab -->
                  <div class="tab-pane fade" id="results" role="tabpanel">
                    <h6 class="text-primary mb-3"><i class="fa fa-chart-line"></i> Academic Results</h6>
                    <table class="table table-striped table-bordered">
                      <thead class="table-secondary">
                        <tr>
                          <th>Subject</th>
                          <th>Test (40)</th>
                          <th>Exam (60)</th>
                          <th>Total (100)</th>
                          <th>Grade</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr><td>Mathematics</td><td>35</td><td>50</td><td>85</td><td>A</td></tr>
                        <tr><td>English</td><td>30</td><td>45</td><td>75</td><td>B</td></tr>
                      </tbody>
                    </table>
                  </div>

                </div>
              </div>

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

<?php include'includes/notification-alert-js.php';?>
<?php include 'includes/footer.php'; ?>


