<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Categories | Admin Panel</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { background-color: #f8f9fa; font-family: 'Poppins', sans-serif; }
    .sidebar { height: 100vh; background: #0d6efd; color: #fff; position: fixed; width: 230px; top: 0; left: 0; padding-top: 70px; }
    .sidebar a { color: #e4e4e4; display: block; padding: 12px 20px; text-decoration: none; }
    .sidebar a:hover, .sidebar a.active { background: #084298; border-left: 4px solid #ffc107; }
    .content { margin-left: 240px; padding: 30px; }
    .navbar { background-color: #fff !important; border-bottom: 1px solid #e3e3e3; }
    .table th { background-color: #f1f3f5; }
    .card { border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border: none; }
    .cat-img { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; }
    .image-preview { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; margin-top: 10px; display: none; }
  </style>
</head>
<body>

<nav class="navbar navbar-expand-lg fixed-top shadow-sm">
  <div class="container-fluid">
    <a class="navbar-brand fw-semibold text-primary" href="#">🛍️ Admin Panel</a>
    <div class="d-flex">
      <span class="me-3 text-muted"><?php echo e(auth()->user()->name); ?></span>
      <form method="POST" action="<?php echo e(route('admin.logout')); ?>">
        <?php echo csrf_field(); ?>
        <button type="submit" class="btn btn-outline-danger btn-sm">Logout</button>
      </form>
    </div>
  </div>
</nav>

<div class="sidebar">
  <a href="<?php echo e(route('admin.dashboard')); ?>">🏠 Dashboard</a>
  <a href="<?php echo e(route('admin.products')); ?>">📦 Products</a>
  <a href="<?php echo e(route('admin.categories')); ?>" class="active">🗂 Categories</a>
  <a href="<?php echo e(route('admin.orders')); ?>">🧾 Orders</a>
  <a href="<?php echo e(route('admin.coupons')); ?>">🏷 Coupons</a>
  <a href="<?php echo e(route('admin.settings')); ?>">⚙ Settings</a>
</div>

<div class="content">
  <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h3 class="fw-bold mb-0">Categories</h3>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#categoryModal">➕ Add Category</button>
    </div>

    
    <?php if(session('success')): ?>
      <div class="alert alert-success"><?php echo e(session('success')); ?></div>
    <?php elseif(session('error')): ?>
      <div class="alert alert-danger"><?php echo e(session('error')); ?></div>
    <?php endif; ?>

    <div class="card">
      <div class="card-body table-responsive">
        <table class="table align-middle table-hover">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>Image</th>
              <th>Name</th>
              <th>Status</th>
              <th>Created</th>
              <th width="160">Action</th>
            </tr>
          </thead>
          <tbody>
            <?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
              <tr>
                <td><?php echo e($loop->iteration); ?></td>
                <td>
                  <?php if($category->image): ?>
                    <img src="<?php echo e(asset('storage/'.$category->image)); ?>" class="cat-img" alt="">
                  <?php else: ?>
                    <img src="https://via.placeholder.com/60" class="cat-img" alt="">
                  <?php endif; ?>
                </td>
                <td><?php echo e($category->name); ?></td>
                <td>
                  <?php if($category->is_active): ?>
                    <span class="badge bg-success">Active</span>
                  <?php else: ?>
                    <span class="badge bg-secondary">Inactive</span>
                  <?php endif; ?>
                </td>
                <td><?php echo e($category->created_at?->format('d M Y')); ?></td>
                <td>
                  <button class="btn btn-sm btn-outline-primary"
                          data-bs-toggle="modal"
                          data-bs-target="#categoryModal"
                          data-id="<?php echo e($category->id); ?>"
                          data-name="<?php echo e($category->name); ?>"
                          data-status="<?php echo e($category->is_active); ?>"
                          data-image="<?php echo e($category->image ? asset('storage/'.$category->image) : ''); ?>">
                    ✏ Edit
                  </button>
                  <form action="<?php echo e(route('admin.category.delete', $category->id)); ?>" method="POST" class="d-inline">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('DELETE'); ?>
                    <button type="submit" class="btn btn-sm btn-outline-danger"
                            onclick="return confirm('Delete this category?')">🗑 Delete</button>
                  </form>
                </td>
              </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
              <tr><td colspan="6" class="text-center text-muted">No categories found.</td></tr>
            <?php endif; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form method="POST" action="<?php echo e(route('admin.category.save')); ?>" enctype="multipart/form-data" class="modal-content">
      <?php echo csrf_field(); ?>
      <input type="hidden" name="id" id="cat_id">

      <div class="modal-header">
        <h5 class="modal-title" id="categoryModalLabel">Add Category</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Category Name</label>
          <input type="text" name="name" id="cat_name" class="form-control" required>
        </div>

        <div class="mb-3">
          <label class="form-label">Image</label>
          <input type="file" name="image" id="cat_image" class="form-control" accept="image/*" onchange="previewImage(event)">
          <img id="image_preview" src="#" class="image-preview" alt="Preview">
        </div>

        <div class="mb-3">
          <label class="form-label">Status</label>
          <select name="is_active" id="cat_status" class="form-select">
            <option value="1">Active</option>
            <option value="0">Inactive</option>
          </select>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-success">Save</button>
      </div>
    </form>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const categoryModal = document.getElementById('categoryModal');
  const imagePreview = document.getElementById('image_preview');

  categoryModal.addEventListener('show.bs.modal', event => {
    const button = event.relatedTarget;
    const id = button.getAttribute('data-id');
    const name = button.getAttribute('data-name');
    const status = button.getAttribute('data-status');
    const image = button.getAttribute('data-image');

    const modalTitle = categoryModal.querySelector('.modal-title');
    modalTitle.textContent = id ? 'Edit Category' : 'Add Category';

    document.getElementById('cat_id').value = id || '';
    document.getElementById('cat_name').value = name || '';
    document.getElementById('cat_status').value = status || 1;

    if (image) {
      imagePreview.src = image;
      imagePreview.style.display = 'block';
    } else {
      imagePreview.style.display = 'none';
    }
  });

  function previewImage(event) {
    const [file] = event.target.files;
    if (file) {
      imagePreview.src = URL.createObjectURL(file);
      imagePreview.style.display = 'block';
    }
  }
</script>
</body>
</html>
<?php /**PATH /home2/jitrealx/public_html/track/resources/views/admin/categories/index.blade.php ENDPATH**/ ?>