<?php
// categories.php - Manage Categories
// File location: /bidwheels.net/admin/categories.php

require_once '../includes/auth.php';
require_once '../includes/functions.php';
require_once 'includes/admin_header.php';

requireAdmin();

// Handle add category
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['add_category'])) {
    $name = sanitize($_POST['name']);
    $type = sanitize($_POST['type']);
    $icon = sanitize($_POST['icon']);
    
    if (empty($name)) {
        setError('Category name is required.');
    } else {
        insert('categories', [
            'name' => $name,
            'type' => $type,
            'icon' => $icon
        ]);
        setSuccess('Category added successfully!');
    }
    redirect('/admin/categories.php');
}

// Handle edit category
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['edit_category'])) {
    $id = (int)$_POST['category_id'];
    $name = sanitize($_POST['name']);
    $type = sanitize($_POST['type']);
    $icon = sanitize($_POST['icon']);
    
    if (empty($name)) {
        setError('Category name is required.');
    } else {
        update('categories', [
            'name' => $name,
            'type' => $type,
            'icon' => $icon
        ], "id = $id");
        setSuccess('Category updated successfully!');
    }
    redirect('/admin/categories.php');
}

// Handle delete category
if (isset($_GET['delete'])) {
    $id = (int)$_GET['delete'];
    
    // Check if category has products
    $product_count = getCount('products', "category_id = $id");
    if ($product_count > 0) {
        setError("Cannot delete category. It has $product_count products assigned.");
    } else {
        delete('categories', "id = $id");
        setSuccess('Category deleted successfully!');
    }
    redirect('/admin/categories.php');
}

// Get all categories
$categories = fetchAll("SELECT * FROM categories ORDER BY type, name");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Categories - Admin Panel</title>
    
    <style>
        .admin-page {
            max-width: 1200px;
        }
        
        .page-header {
            margin-bottom: 25px;
        }
        
        .page-header h1 {
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .page-header h1 i {
            color: #FF8C3E;
        }
        
        /* Categories Layout */
        .categories-layout {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 30px;
        }
        
        /* Form Panel */
        .category-form-panel {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .category-form-panel h3 {
            font-size: 18px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #FF8C3E;
            display: inline-block;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 13px;
            color: #333;
        }
        
        .form-group label i {
            color: #FF8C3E;
            margin-right: 6px;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 14px;
            transition: all 0.3s;
            background: #f8f8f8;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #FF8C3E;
            background: white;
        }
        
        select.form-control {
            cursor: pointer;
        }
        
        .form-hint {
            font-size: 11px;
            color: #888;
            margin-top: 5px;
            display: block;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 40px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,140,62,0.3);
        }
        
        /* List Panel */
        .categories-list-panel {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .categories-list-panel h3 {
            font-size: 18px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #FF8C3E;
            display: inline-block;
        }
        
        .stats-badge {
            background: #f8f9fa;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            color: #FF8C3E;
            margin-left: 10px;
        }
        
        .table-responsive {
            overflow-x: auto;
        }
        
        .admin-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .admin-table th,
        .admin-table td {
            padding: 14px 12px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
        }
        
        .admin-table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #333;
            font-size: 13px;
        }
        
        .admin-table tr:hover td {
            background: #fef5ee;
        }
        
        .category-icon {
            font-size: 20px;
            color: #FF8C3E;
        }
        
        .badge-type {
            background: #e3f2fd;
            color: #1976d2;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            display: inline-block;
        }
        
        .badge-type.car {
            background: #d4edda;
            color: #155724;
        }
        
        .badge-type.bike {
            background: #fff3cd;
            color: #856404;
        }
        
        .badge-type.ship {
            background: #d1ecf1;
            color: #0c5460;
        }
        
        .badge-type.other {
            background: #e2e3e5;
            color: #383d41;
        }
        
        .actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .btn-icon {
            padding: 6px 12px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 12px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s;
            cursor: pointer;
            border: none;
        }
        
        .btn-edit {
            background: #ffc107;
            color: #333;
        }
        
        .btn-edit:hover {
            background: #e0a800;
        }
        
        .btn-delete {
            background: #dc3545;
            color: white;
        }
        
        .btn-delete:hover {
            background: #c82333;
        }
        
        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(8px);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            border-radius: 24px;
            width: 90%;
            max-width: 500px;
            padding: 30px;
            position: relative;
            animation: modalSlide 0.3s ease;
        }
        
        @keyframes modalSlide {
            from {
                transform: translateY(-30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #FF8C3E;
        }
        
        .modal-header h3 {
            font-size: 20px;
            color: #1a1a1a;
            font-weight: 700;
        }
        
        .modal-close {
            font-size: 28px;
            cursor: pointer;
            color: #888;
            transition: color 0.3s;
        }
        
        .modal-close:hover {
            color: #FF8C3E;
        }
        
        .modal-buttons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        .btn-modal-cancel {
            flex: 1;
            padding: 12px;
            background: #f0f0f0;
            border: none;
            border-radius: 40px;
            color: #666;
            font-weight: 600;
            cursor: pointer;
        }
        
        .btn-modal-save {
            flex: 1;
            padding: 12px;
            background: #FF8C3E;
            border: none;
            border-radius: 40px;
            color: white;
            font-weight: 600;
            cursor: pointer;
        }
        
        /* Alert Messages */
        .alert {
            padding: 12px 16px;
            border-radius: 12px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }
        
        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }
        
        .alert i {
            font-size: 16px;
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #888;
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .categories-layout {
                grid-template-columns: 1fr;
                gap: 25px;
            }
        }
        
        @media (max-width: 768px) {
            .actions {
                flex-direction: column;
            }
            
            .btn-icon {
                justify-content: center;
            }
            
            .admin-table th,
            .admin-table td {
                padding: 10px 8px;
                font-size: 12px;
            }
        }

        /* Fix white text on white background */
.admin-table td,
.admin-table th {
    color: #333;
}

.admin-table td strong,
.admin-table td a {
    color: #333;
}

.admin-table td a:hover {
    color: #FF8C3E;
}

.category-icon {
    font-size: 20px;
    color: #FF8C3E;
}

.badge-type {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}

.badge-type.car {
    background: #d4edda;
    color: #155724;
}

.badge-type.bike {
    background: #fff3cd;
    color: #856404;
}

.badge-type.ship {
    background: #d1ecf1;
    color: #0c5460;
}

.badge-type.other {
    background: #e2e3e5;
    color: #383d41;
}

/* Make buttons text visible */
.btn-icon {
    color: white;
}

.btn-edit {
    background: #ffc107;
    color: #333;
}

.btn-delete {
    background: #dc3545;
    color: white;
}
    </style>
</head>
<body>

<div class="admin-page">
    <div class="page-header">
        <h1><i class="fas fa-tags"></i> Manage Categories</h1>
    </div>
    
    <?php echo getMessage(); ?>
    
    <div class="categories-layout">
        <!-- Add Category Form -->
        <div class="category-form-panel">
            <h3><i class="fas fa-plus-circle"></i> Add New Category</h3>
            <form method="POST" action="" class="admin-form">
                <div class="form-group">
                    <label><i class="fas fa-tag"></i> Category Name *</label>
                    <input type="text" name="name" class="form-control" placeholder="e.g., Luxury Cars" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-filter"></i> Type</label>
                    <select name="type" class="form-control">
                        <option value="car">Car</option>
                        <option value="bike">Bike / Motorcycle</option>
                        <option value="ship">Ship / Yacht</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-icons"></i> Icon Class (Font Awesome)</label>
                    <input type="text" name="icon" class="form-control" placeholder="fas fa-car" value="fas fa-car">
                    <small class="form-hint">Example: fas fa-car, fas fa-motorcycle, fas fa-ship, fas fa-truck</small>
                </div>
                <button type="submit" name="add_category" class="btn-primary">
                    <i class="fas fa-plus"></i> Add Category
                </button>
            </form>
        </div>
        
        <!-- Categories List -->
        <div class="categories-list-panel">
            <h3>
                <i class="fas fa-list"></i> Existing Categories
                <span class="stats-badge"><?php echo count($categories); ?> total</span>
            </h3>
            
            <?php if (count($categories) > 0): ?>
                <div class="table-responsive">
                    <table class="admin-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Icon</th>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($categories as $cat): ?>
                                <tr>
                                    <td><?php echo $cat['id']; ?></td>
                                    <td><i class="<?php echo $cat['icon']; ?> category-icon"></i></td>
                                    <td><strong><?php echo htmlspecialchars($cat['name']); ?></strong></td>
                                    <td>
                                        <span class="badge-type <?php echo $cat['type']; ?>">
                                            <?php 
                                            switch($cat['type']) {
                                                case 'car': echo '<i class="fas fa-car"></i> Car'; break;
                                                case 'bike': echo '<i class="fas fa-motorcycle"></i> Bike'; break;
                                                case 'ship': echo '<i class="fas fa-ship"></i> Ship'; break;
                                                default: echo '<i class="fas fa-tag"></i> Other';
                                            }
                                            ?>
                                        </span>
                                    </td>
                                    <td class="actions">
                                        <button class="btn-icon btn-edit" onclick="openEditModal(<?php echo htmlspecialchars(json_encode($cat)); ?>)">
                                            <i class="fas fa-edit"></i> Edit
                                        </button>
                                        <a href="?delete=<?php echo $cat['id']; ?>" class="btn-icon btn-delete" onclick="return confirm('Delete this category? This will only work if no products are using it.')">
                                            <i class="fas fa-trash"></i> Delete
                                        </a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php else: ?>
                <div class="empty-state">
                    <i class="fas fa-tags" style="font-size: 48px; color: #ddd;"></i>
                    <p>No categories found. Create your first category above.</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div id="editModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-edit"></i> Edit Category</h3>
            <span class="modal-close" onclick="closeEditModal()">&times;</span>
        </div>
        <form method="POST" action="">
            <input type="hidden" name="category_id" id="edit_id">
            <div class="form-group">
                <label><i class="fas fa-tag"></i> Category Name</label>
                <input type="text" name="name" id="edit_name" class="form-control" required>
            </div>
            <div class="form-group">
                <label><i class="fas fa-filter"></i> Type</label>
                <select name="type" id="edit_type" class="form-control">
                    <option value="car">Car</option>
                    <option value="bike">Bike / Motorcycle</option>
                    <option value="ship">Ship / Yacht</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div class="form-group">
                <label><i class="fas fa-icons"></i> Icon Class</label>
                <input type="text" name="icon" id="edit_icon" class="form-control">
                <small class="form-hint">Font Awesome icon class (e.g., fas fa-car)</small>
            </div>
            <div class="modal-buttons">
                <button type="button" class="btn-modal-cancel" onclick="closeEditModal()">Cancel</button>
                <button type="submit" name="edit_category" class="btn-modal-save">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<script>
// Edit Modal Functions
function openEditModal(category) {
    document.getElementById('edit_id').value = category.id;
    document.getElementById('edit_name').value = category.name;
    document.getElementById('edit_type').value = category.type;
    document.getElementById('edit_icon').value = category.icon;
    document.getElementById('editModal').style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeEditModal() {
    document.getElementById('editModal').style.display = 'none';
    document.body.style.overflow = 'auto';
}

// Close modal on outside click
window.onclick = function(event) {
    const modal = document.getElementById('editModal');
    if (event.target === modal) {
        closeEditModal();
    }
}
</script>

<?php require_once 'includes/admin_footer.php'; ?>