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

<style>
body {
    background: #f6f7f9;
}

.card {
    border-radius: 12px;
}
</style>

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

    <div class="container my-4">
        <form id="gvForm">

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

                    <div class="row mt-3">
                       <!-- CATEGORY -->
<div class="col-md-6">
<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 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>Subcategory</label>
<select name="subcategory_id" id="subcategorySelect"
        class="form-control">
<option value="">Select Subcategory</option>
</select>
</div>

                        <div class="col-md-12 mt-2">
                            <label>Variant Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label>Unit</label>
                            <input type="text" name="unit" class="form-control">
                        </div>

                        <div class="col-md-4">
                            <label>Required</label>
                            <select name="required" class="form-control">
                                <option value="0">Optional</option>
                                <option value="1">Required</option>
                            </select>
                        </div>

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

                </div>
            </div>

            <button class="btn btn-primary">Save Variant</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"
};

$('#gvForm').on('submit', function(e) {
    e.preventDefault();

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

        if (r.status === 'success') {
            toastr.success(r.message || 'Variant added');

            // reset form
            $('#gvForm')[0].reset();

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

    }, 'json');
});
</script>
<script>
$('#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>