<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
include('include/header.php');
$page_title = WEB_NAME . " | Add Logs Category";
?>
<title>Add Logs Category - <?php echo $site_data['web_name']; ?></title>

<style>
  .image-preview {
    width: 130px; height: 130px;
    object-fit: contain;
    border: 2px solid #e3e6f0;
    border-radius: 8px;
    padding: 8px;
    background: white;
    display: none;
    margin-top: 10px;
  }
  .image-preview.show { display: block; }
</style>

<div class="container-fluid" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Add Logs Category</h1>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="dashboard.php">Home</a></li>
      <li class="breadcrumb-item"><a href="show_sm_categories.php">Logs Categories</a></li>
      <li class="breadcrumb-item active" aria-current="page">Add Category</li>
    </ol>
  </div>

  <div class="row">
    <div class="col-lg-7 mx-auto">
      <div class="card mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
          <h6 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-folder-plus mr-2"></i>Add Social Media Category
          </h6>
          <a href="show_sm_categories.php" class="btn btn-sm btn-secondary">
            <i class="fas fa-arrow-left mr-1"></i> Back
          </a>
        </div>
        <div class="card-body">

          <div id="alertBox"></div>

          <div class="form-group">
            <label class="font-weight-bold">Category Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="category_name"
                   placeholder="e.g., Facebook, Instagram, TikTok">
          </div>

          <div class="form-group">
            <label class="font-weight-bold">Category Image URL</label>
            <input type="text" class="form-control" id="category_image"
                   placeholder="https://example.com/logo.png"
                   oninput="previewImage()">
            <small class="text-muted"><i class="fas fa-info-circle mr-1"></i>Enter a direct URL to the category logo/image</small>
            <div class="mt-2">
              <img id="image_preview" class="image-preview" src="" alt="Preview">
            </div>
          </div>

          <button type="button" id="add_category_btn" class="btn btn-primary btn-block">
            <i class="fas fa-plus-circle mr-2"></i>Add Category
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function previewImage() {
  var url = document.getElementById('category_image').value;
  var img = document.getElementById('image_preview');
  if (url) { img.src = url; img.classList.add('show'); }
  else { img.classList.remove('show'); }
}

document.getElementById('add_category_btn').addEventListener('click', function() {
  var name  = document.getElementById('category_name').value.trim();
  var image = document.getElementById('category_image').value.trim();

  if (!name) { Swal.fire('Validation', 'Category name is required.', 'warning'); return; }

  var btn = this;
  btn.disabled = true;
  btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Adding...';

  $.ajax({
    url: 'ajax/sm_handler.php',
    type: 'POST',
    data: { action: 'add_category', category_name: name, category_image: image },
    dataType: 'json',
    success: function(res) {
      btn.disabled = false;
      btn.innerHTML = '<i class="fas fa-plus-circle mr-2"></i>Add Category';
      if (res.status == '1') {
        document.getElementById('alertBox').innerHTML =
          '<div class="alert alert-success alert-dismissible fade show" role="alert">' +
          '<i class="fas fa-check-circle mr-2"></i>' + res.msg +
          '<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button></div>';
        document.getElementById('category_name').value  = '';
        document.getElementById('category_image').value = '';
        document.getElementById('image_preview').classList.remove('show');
      } else {
        document.getElementById('alertBox').innerHTML =
          '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
          '<i class="fas fa-exclamation-circle mr-2"></i>' + res.msg +
          '<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button></div>';
      }
    },
    error: function() {
      btn.disabled = false;
      btn.innerHTML = '<i class="fas fa-plus-circle mr-2"></i>Add Category';
      Swal.fire('Error!', 'An error occurred. Please try again.', 'error');
    }
  });
});
</script>

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