<?php
include 'inc/header.php';

if (isset($_SESSION['user_role']) && $_SESSION['user_role'] == 'user') {
    echo "<script>window.location.href='index.php'</script>";
    exit;
}
?>

<style>
body {
    background: #f6f7f9;
}

.card {
    border-radius: 12px;
}

.form-section {
    background: #fafafa;
    border: 1px dashed #ddd;
    border-radius: 10px;
    padding: 15px;
}
</style>

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-secondary">Add Sorting Group</h6>
    </div>

    <div class="container my-4">

        <form id="groupForm">

            <!-- BASIC INFO -->
            <div class="card mb-3">
                <div class="card-body">
                    <h5>Basic Information</h5>

                    <div class="row mt-3">

                        <!-- CATEGORY -->
                        <!-- CATEGORY -->
<div class="col-md-6">
    <label class="form-label">Category</label>
    <select name="category_id" id="categorySelect"
            class="form-control" required>
        <option value="">Select Category</option>
        <?php
        $cq = mysqli_query($conn, "SELECT id,name FROM categories WHERE status='active' ORDER BY name ASC");
        while ($c = mysqli_fetch_assoc($cq)) {
            echo "<option value='{$c['id']}'>{$c['name']}</option>";
        }
        ?>
    </select>
</div>

<!-- SUBCATEGORY -->
<div class="col-md-6">
    <label class="form-label">Subcategory</label>
    <select name="subcategory_id" id="subcategorySelect"
            class="form-control">
        <option value="">Select Subcategory</option>
    </select>
</div>

                        <!-- GROUP NAME -->
                        <div class="col-md-12 mt-2">
                            <label class="form-label">Group Name</label>
                            <input type="text"
                                   name="name"
                                   class="form-control"
                                   placeholder="e.g. Color, Size, Finish"
                                   required>
                        </div>

                    </div>

                    <div class="row mt-3">

                        <!-- SORT ORDER -->
                        <div class="col-md-6">
                            <label class="form-label">Sort Order</label>
                            <input type="number"
                                   name="sort_order"
                                   class="form-control"
                                   value="1">
                        </div>

                        <!-- STATUS -->
                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select form-control">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>

                    </div>

                </div>
            </div>

            <button type="submit" class="btn btn-primary">
                Save Sorting Group
            </button>

        </form>

    </div>
</div>

<?php include 'inc/footer.php'; ?>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
toastr.options = {
    closeButton: true,
    progressBar: true,
    positionClass: "toast-top-right",
    timeOut: "3000"
};

/* SUBMIT */
$('#groupForm').on('submit', function(e){
    e.preventDefault();

    $.post('api/save_sorting_group.php', $(this).serialize(), function(r){

        if(r.status === 'success'){
            toastr.success(r.message || 'Sorting group added successfully');

            // ✅ reset form (same as category)
            $('#groupForm')[0].reset();

        } else {
            toastr.error(r.message || 'Insertion failed');
        }

    }, 'json');
});
</script>

<script>
/* LOAD SUBCATEGORIES */
$('#categorySelect').on('change', function(){

    let category_id = $(this).val();

    if(category_id === ''){
        $('#subcategorySelect').html('<option value="">Select Subcategory</option>');
        return;
    }

    $.post('api/get_subcategories.php', 
        { category_id: category_id }, 
        function(data){
            $('#subcategorySelect').html(data);
        }
    );
});
</script>
