<div id="page-wrapper">
  <div id="page-inner">
    <div class="container mt-4"> 

    </div>
    <?php
    if (session_status() == PHP_SESSION_NONE) session_start();
    if (!empty($_SESSION['message'])): ?>
        <div class="custom-alert" id="customAlert">
            <?= $_SESSION['message'] ?>
            <span class="close-btn" onclick="closeAlert()">&times;</span>
        </div>
    <?php 
        unset($_SESSION['message']); // Clear message after displaying
    endif;
    ?>

    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <?= isset($_GET['edit']) ? 'Edit Image' : 'Add Image' ?>
          </div>
          <div class="card-body mt-3">
            <?php
                    $editData = null;
                    if(isset($_GET['edit'])){
                        foreach($images as $img){
                            if($img['id']==$_GET['edit']){
                                $editData = $img; break;
                            }
                        }
                    }
                    ?>
            <form method="post" enctype="multipart/form-data">
              <input type="hidden" name="id" value="<?= $editData['id'] ?? '' ?>">
              <input type="hidden" name="old_image" value="<?= $editData['image'] ?? '' ?>">

              <div class="mb-3">
                <label>Upload Image:</label>
                <input type="file" name="image" class="form-control" accept=".png,.jpg,.jpeg,.webp" <?=isset($editData)
                  ? '' : 'required' ?>>
                <?php if(!empty($editData['image'])): ?>
                <img src="../assets/images/gallery/<?= $editData['image'] ?>" width="80" class="mt-2">
                <?php endif; ?>
              </div> 
              <button type="submit" name="<?= isset($editData) ? 'edit' : 'add' ?>" class="btn btn-primary w-100 mt-3">
                <?= isset($editData) ? 'Update Image' : 'Add Image' ?>
              </button>
            </form>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card">
          <div class="card-header">Gallery List</div>
          <div class="card-body">
            <table class="table table-bordered">
              <thead class="table-dark">
                <tr>
                  <th>#</th>
                  <th>Image</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <?php foreach($images as $i=>$img): ?>
                <tr>
                  <td>
                    <?= $i+1 ?>
                  </td>
                  <td>
                    <img src="../assets/images/gallery/<?= $img['image'] ?>" width="50">

                  </td>
                  <td>
                    <a href="?edit=<?= $img['id'] ?>" class="btn btn-sm btn-warning">Edit</a>
                    <a href="?delete=<?= $img['id'] ?>" class="btn btn-sm btn-danger"
                      onclick="return confirm('Delete this image?')">Delete</a>
                  </td>
                </tr>
                <?php endforeach; ?>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>