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

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

    <div class="container my-4">

        <form id="optionForm">

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

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label>Group</label>
                            <select name="group_id" class="form-control" required>
                                <option value="">Select Group</option>
                                <?php
$q = mysqli_query($conn, "
SELECT 
    sg.id, 
    sg.name AS group_name, 
    c.name AS cat_name,
    sc.name AS subcat_name
FROM sorting_groups sg
LEFT JOIN categories c ON c.id = sg.category_id
LEFT JOIN subcategories sc ON sc.id = sg.subcategory_id
WHERE sg.status='active'
ORDER BY c.name, sc.name, sg.name
");
while($g = mysqli_fetch_assoc($q)){

    $label = $g['cat_name'];

    // if subcategory exists → include it
    if(!empty($g['subcat_name'])){
        $label .= " → " . $g['subcat_name'];
    }

    $label .= " → " . $g['group_name'];

    echo "<option value='{$g['id']}'>{$label}</option>";
}
?>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label>Option Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label>Sort Order</label>
                            <input type="number" name="sort_order" class="form-control" value="1">
                        </div>

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

                </div>
            </div>

            <button class="btn btn-primary">Save Option</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,
    timeOut: "3000"
};

$('#optionForm').submit(function(e) {
    e.preventDefault();

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

        if (r.status === 'success') {
            toastr.success(r.message);
            $('#optionForm')[0].reset();
        } else toastr.error(r.message);

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