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

<div class="card shadow mb-4">
    <div class="card-header">
        <h5>Assign Material to Product</h5>
    </div>

    <div class="card-body">

        <form id="assignForm">

            <!-- CATEGORY -->
            <div class="row">
                <div class="col-md-4">
                    <label>Category</label>
                    <select id="categorySelect" class="form-control">
                        <option value="">Select Category</option>
                        <?php
                        $cats = mysqli_query($conn,"SELECT * FROM categories WHERE status='active'");
                        while($c = mysqli_fetch_assoc($cats)){
                        ?>
                        <option value="<?= $c['id'] ?>"><?= $c['name'] ?></option>
                        <?php } ?>
                    </select>
                </div>

                <!-- SUB CATEGORY -->
                <div class="col-md-4">
                    <label>Sub Category</label>
                    <select id="subCategorySelect" class="form-control">
                        <option value="">Select Sub Category</option>
                    </select>
                </div>

                <!-- PRODUCT -->
                <div class="col-md-4">
                    <label>Product</label>
                    <select name="product_id" id="productSelect" class="form-control" required>
                        <option value="">Select Product</option>
                    </select>
                </div>
            </div>

            <!-- CALC TYPE FIRST -->
            <div class="row mt-3">
                <div class="col-md-6">
                    <label>Calculation Type</label>
                    <select name="calc_type" id="calcType" class="form-control" required>
                        <option value="">Select Type</option>
                        <option value="sqft">SQFT</option>
                        <option value="lnft">LNFT</option>
                    </select>
                </div>

                <!-- MATERIAL -->
                <div class="col-md-6">
                    <label>Material</label>
                    <select name="material_id" id="materialSelect" class="form-control" required>
                        <option value="">Select Material</option>
                    </select>
                </div>
            </div>

            <!-- VALUE -->
            <div class="row mt-3">

                <!-- SQFT -->
                <div class="col-md-6" id="sqftBox" style="display:none;">
                    <label>SQFT Value</label>
                    <input type="number" step="0.01" name="sqft_value" class="form-control">
                </div>

                <!-- LNFT -->
                <div class="col-md-6" id="lnftBox" style="display:none;">
                    <label>LNFT Value</label>
                    <input type="number" step="0.01" name="lnft_value" class="form-control">
                </div>

            </div>

            <button class="btn btn-primary mt-3">Assign Material</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: "2500"
};

/* =========================
   SHOW INPUT BASED ON TYPE
========================= */
$('#calcType').on('change', function(){

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

    $('#sqftBox, #lnftBox').hide();

    if(type === 'sqft'){
        $('#sqftBox').show();
    } else if(type === 'lnft'){
        $('#lnftBox').show();
    }

    /* LOAD MATERIALS */
    $.post('api/get_materials_by_type.php', { type: type }, function(res){
        $('#materialSelect').html(res);
    });

});

/* =========================
   SUBMIT
========================= */
$('#assignForm').submit(function(e){
    e.preventDefault();

    $.ajax({
        url: 'api/save_product_material.php',
        type: 'POST',
        data: $(this).serialize(),
        dataType: 'json',
        success: function(res){

            if(res.status === 'success'){
                toastr.success(res.message);
                $('#assignForm')[0].reset();
                $('#sqftBox, #lnftBox').hide();
            } else {
                toastr.error(res.message);
            }

        }
    });

});

/* =========================
   CATEGORY LOGIC (same)
========================= */
$('#categorySelect').on('change', function () {

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

    $.post('api/get_subcategories.php', { category_id: catId }, function (res) {

        $('#subCategorySelect').html(res);

        let hasSub = $('#subCategorySelect option[value!=""]').length > 0;

        if (hasSub) {
            $('#productSelect').html('<option value="">Select Product</option>');
        } else {
            $('#subCategorySelect').html('<option value="0">No Sub Category</option>');
            loadProductsByCategory(catId);
        }

    });

});

$('#subCategorySelect').on('change', function () {

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

    if (!subId) return;

    $.post('api/get_products.php', {
        sub_category_id: subId
    }, function (res) {
        $('#productSelect').html(res);
    });

});

function loadProductsByCategory(catId) {

    $.post('api/get_products_by_category.php', {
        category_id: catId
    }, function (res) {
        $('#productSelect').html(res);
    });

}
</script>