<?php  include "header.php"; ?>

<div class="content-wrapper">
        <section class="content-header">
            <h1>Add Products</h1>
            <ol class="breadcrumb">
                <li><a href="index.php"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Add Products</li>            
            </ol>
        </section>


        <div class="col-lg-12 alerts">
            <div id="custom-alerts" style="display:none;">
                <div class="alert alert-dismissable">
                    <div class="custom-msg"></div>
                </div>
            </div>
            
            <?php if ($error)  { ?>
            <div class="alert alert-danger alert-dismissable">
                <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                <h4><i class="icon fa fa-ban"></i> Error</h4>
                <?= $error; ?>
            </div>
            <?php $error=0;} if ($warning) { ?>
            <div class="alert alert-warning alert-dismissable">
                <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                <h4><i class="icon fa fa-warning"></i> Warning</h4>
                <?= $warning; ?>
            </div>
            <?php  $warning=0;} if ($message) { ?>
            <div class="alert alert-success alert-dismissable">
                <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                <h4>    <i class="icon fa fa-check"></i> Success</h4>
                <?= $message; ?>
            </div>
            <?php $message=0; } ?>
        </div>
        <div class="clearfix"></div>







<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-primary" style="box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;">
                <div class="box-header">
                    <h3 class="box-title">Please fill in the information below</h3>
                </div>
                <div class="box-body">
                    <div class="col-lg-12">

                        <form id="form_details" autocomplete="off">
                                                                 
                        <div class="row">
                            
                             <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="product_ids">Product</label>                                   
                                    <select name="product_ids" class="form-control select2" style="width:100%" id="product_ids" required="required">
                                        <option value="">Select Product</option>
                                        <?php $statement = $pdo->prepare("SELECT * FROM `tbl_ids_products` WHERE status=1");
                                            $statement->execute();
                                            $resultss = $statement->fetchAll(PDO::FETCH_ASSOC); 
                                            foreach ($resultss as $ress) { ?>
                                                <option value="<?=$ress['id']?>"><?=$ress['name']?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                            
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="product_name">Product Name</label>                                    
                                    <input type="text" name="product_name" value="" placeholder="Enter the Product Name" class="form-control tip" id="product_name"  required="required" />
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="category">Category</label>                                   
                                    <select name="category" class="form-control select2" style="width:100%" id="category" required="required">
                                        <option value="">Select Category</option>
                                        <?php $statement = $pdo->prepare("SELECT * FROM `tbl_category` WHERE status=1");
                                            $statement->execute();
                                            $resultss = $statement->fetchAll(PDO::FETCH_ASSOC); 
                                            foreach ($resultss as $ress) { ?>
                                                <option value="<?=$ress['id']?>"><?=$ress['name']?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                            
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="optional" for="sub_category">Sub Category</label>                                   
                                    <select name="sub_category" class="form-control select2" style="width:100%" id="sub_category">
                                        <option value="0">Select Sub Category</option>
                                        <?php $statement = $pdo->prepare("SELECT * FROM `tbl_sub_category` WHERE status=1");
                                            $statement->execute();
                                            $resultss = $statement->fetchAll(PDO::FETCH_ASSOC); 
                                            foreach ($resultss as $ress) { ?>
                                                <option value="<?=$ress['id']?>"><?=$ress['name']?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                            
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="product_type">Product Type</label>                                   
                                    <select name="product_type" class="form-control select2" style="width:100%" id="product_type" required="required">
                                        <option value="1">Plain</option>
                                        <option value="2">Stone</option>
                                    </select>
                                </div>
                            </div>
                            
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="unit">Unit</label>                                   
                                    <select name="unit" class="form-control select2" style="width:100%" id="unit" required="required">
                                        <?php $statement = $pdo->prepare("SELECT * FROM `tbl_units` WHERE status=1");
                                                $statement->execute();
                                                $resultss = $statement->fetchAll(PDO::FETCH_ASSOC); 
                                                foreach ($resultss as $ress) { ?>
                                                    <option value="<?=$ress['id']?>"><?=$ress['name']?> (<?=$ress['short_name']?>)</option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                            
                            
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="quantity">Quantity</label>                                    
                                    <input type="text" name="quantity" value="" placeholder="Enter the Quantity" class="form-control" id="quantity" onkeypress="return isNumberKey(this, event);" required="required" />
                                </div>
                            </div>
                            
                            
                            
                            
                            <div id="plain_section"></div>
                            
                            
                            
                            
                            
                            
                            
                            <div id="stone_section"></div>
                            
                            
                            
                            
                            
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="wastage">Wastage</label>                                   
                                    <select name="wastage" class="form-control select2" style="width:100%" id="wastage" required="required">
                                        <option value="">Select Wastage</option>
                                        <?php $statement = $pdo->prepare("SELECT * FROM `tbl_wastage` WHERE status=1");
                                            $statement->execute();
                                            $resultss = $statement->fetchAll(PDO::FETCH_ASSOC); 
                                            foreach ($resultss as $ress) { ?>
                                                <option value="<?=$ress['id']?>"><?=$ress['name']?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="purity">Purity</label>                                   
                                    <select name="purity" class="form-control select2" style="width:100%" id="purity" required="required">
                                        <option value="">Select Purity</option>
                                        <?php $statement = $pdo->prepare("SELECT * FROM `tbl_ids_purity` WHERE status=1");
                                                $statement->execute();
                                                $resultss = $statement->fetchAll(PDO::FETCH_ASSOC); 
                                                foreach ($resultss as $ress) { ?>
                                                    <option value="<?=$ress['id']?>"><?=$ress['name']?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                            
                        </div>
                        
                        
                        

                        <div class="form-group" style="text-align:center;">
                            <input type="submit"  id="submit" value="Add Products" class="btn btn-success" />
                        </div>
                    
                    
                    
                    </form>
                    
                    
                    </div>
                    
                    
                        <div class="form-group" style="text-align:center;">
                            <a href="products-add.php"><button class="btn btn-primary" ><i class="fa fa-refresh"></i> Reset Form</button></a>
                            <a href="products-list.php"><button class="btn btn-warning" ><i class="fa fa-chevron-left"></i> Back to List</button></a>
                        </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</section>


<?php include "footer.php"; ?>
<!--<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>-->
<style>
/*.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgb(228, 228, 228);
    box-sizing: border-box;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    position: relative;
    max-width: 100%;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space-collapse: collapse;
    text-wrap: nowrap;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(170, 170, 170);
    border-image: initial;
    border-radius: 4px;
    padding: 0px 10px 0px 20px;
    overflow: hidden;
    color: black;
    font-weight: 800;
}
.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
    height: 100px;
    padding-bottom: 5px;
    padding-right: 5px;
    position: relative;
}*/
</style>

<script>
$(document).ready(function() {
   $('#form_details').on('submit', function(e){
                e.preventDefault();
                $('#loading-div').show();
                $('#content-div').hide();
                $("#submit").prop('disabled', true);
                var formData = new FormData(this);
                formData.append('type', 'create_products');
                    $.ajax({
                            url: 'apis/products.php',
                            type: 'post',
                            dataType: 'json',
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            enctype: 'multipart/form-data',
                            success: function (response) {
                                console.log(response);
                                if(response['status']==200){
                                     toastr.success(response['message']);
                                     $('#form_details').trigger("reset");
                                     $("#submit").prop('disabled', false);
                                     $('#content-div').show();
                                     $('#loading-div').hide();
                                }else{
                                    toastr.error(response['message']);
                                    $("#submit").prop('disabled', false);
                                    $('#loading-div').hide();
                                    $('#content-div').show();
                                }
                            }
                        });
   });
});
</script>

<script type="text/javascript">
$(document).ready(function () {
    ProductType();
    
    $("#product_type").change(function(){
        ProductType();
    });
});

function ProductType(){
    $("#plain_section").empty();
    $("#stone_section").empty();
    
    var product_type = $("#product_type").val();
    if(product_type==1){
        var row=`<div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="cross_weight">Cross Weight</label>                                   
                                     <input type="text" name="cross_weight" placeholder="Enter the Cross Weight" value=""  class="form-control" id="cross_weight" onkeypress="return isNumberKey(this, event);" required="required" />
                                </div>
                            </div>`;
        $("#plain_section").append(row);
    }else{
        var row=`<div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="cross_weight">Cross Weight</label>                                   
                                     <input type="text" name="cross_weight" placeholder="Enter the Cross Weight" value="" oninput="calculateNetWeight()" class="form-control" id="cross_weight" onkeypress="return isNumberKey(this, event);" required="required" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="stone_weight">Stone Weight</label>                                   
                                     <input type="text" name="stone_weight" placeholder="Enter the Stone Weight" value="" oninput="calculateNetWeight()" class="form-control" id="stone_weight"  onkeypress="return isNumberKey(this, event);" required="required" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="net_weight">Net Weight</label>                                   
                                     <input type="text" name="net_weight" placeholder="Enter the Net Weight" value=""  class="form-control" id="net_weight" onkeypress="return isNumberKey(this, event);" required="required" />
                                </div>
                            </div>
                            
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required" for="stone_cost">Stone Cost</label>                                   
                                     <input type="text" name="stone_cost" placeholder="Enter the Stone Cost" value=""  class="form-control" id="stone_cost" onkeypress="return isNumberKey(this, event);" required="required" />
                                </div>
                            </div>`;
        $("#stone_section").append(row);
    }
}

function calculateNetWeight() {
    var crossWeight = parseInt($("#cross_weight").val());
    var stoneWeight = parseInt($("#stone_weight").val());

    // Check if stoneWeight is null, if so, assign it a value of 0
    if (stoneWeight === null || isNaN(stoneWeight)) {
        stoneWeight = 0;
    }

    var netWeight = crossWeight - stoneWeight;

    if (!isNaN(netWeight)) {
        $("#net_weight").val(netWeight);
    } else {
        $("#net_weight").val("");
    }
}

</script>