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



<div class="content-wrapper">
        <section class="content-header">
            <h1>Create Labels</h1>
            <ol class="breadcrumb">
                <li><a href="index.php"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Add Labels</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-body">
                    <div class="col-lg-12">

                        <form method="post" action="show-label.php" target="_blank">
                                                                 
                        <div class="row">
                            
                            
                            
                           
                            
                            
                            <div class="col-md-12">
                                <div class="form-group search-box">
                                    <label class="" for="search_products">Search Products</label>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                       
                                    <input type="text" name="search_products" placeholder="Enter the Products" value=""  class="form-control" id="search_products"  />
                                    <div class="result" style="max-height: 200px; overflow-y: scroll;"></div>
                                </div>
                                
                                <table style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th style="width: 10%">Product Name</th>
                                            <th style="width: 10%">HSN</th>
                                            <th style="width: 10%">Unit</th>
                                            <th style="width: 10%">Label Quantity</th>
                                            <th style="width: 15%">Cross - Stone - Net</th>
                                            <th style="width: 10%">Stone Cost</th>
                                            <th style="width: 10%">Wastage</th>
                                            <th style="width: 5%"><i class="fa fa-times"></i></th>
                                        </tr>
                                    </thead>
                                    <tbody id="product_tbody">
                                        
                                    </tbody>
                                </table>
                            </div>
                            
                           
                            
                            
                            
                        </div>
                        
                        
                        

                        <div class="form-group" style="text-align:center; margin: 20px 0px;">
                            <input type="submit"  id="submit" value="Print Label" class="btn btn-success" />
                        </div>
                        
                        
                        </form>

                    </div>
                    
                    
                        <div class="form-group" style="text-align:center;">
                            <a href="label-create.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 Product List</button></a>
                        </div>
                        
                        
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<?php include "footer.php"; ?>


<script>

</script>
<script>
    $(document).on('click', '.remove_product', function() {
        $(this).closest('.porow').remove();
    });
</script>



<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_sales');
                    $.ajax({
                            url: 'apis/sales.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){
                                     alert(response['message']);
                                     $('#form_details').trigger("reset");
                                     $("#submit").prop('disabled', false);
                                     $('#content-div').show();
                                     $('#loading-div').hide();
                                }else{
                                    alert(response['message']);
                                    $("#submit").prop('disabled', false);
                                    $('#loading-div').hide();
                                    $('#content-div').show();
                                }
                            }
                        });
   });
});
</script>


<style>
        /*table {
          border-collapse: collapse;
          width: 100%;
        }
        
        th, td {
          padding: 8px;
          text-align: left;
          border-bottom: 1px solid #ddd;
        }
        */
        /*tr:hover {background-color: coral;}*/
        
    /* Formatting search box */
    .search-box{
        width: auto;
        display: inline-block;
        font-size: 14px;
    }
    .search-box {
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        /*position: absolute; */       
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box, .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result div{
        margin: 0;
        background: white;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result div:hover{
        background: blue;
        color: white;
    }
</style>
<script>
function product_selection(id, quantity){ 
       console.log("Product Selection ID: "+id);
    var product_present = 0;
    $('.product_ids').each(function(){
        if(id==$(this).val()){
            product_present = 1;
        }
    });
    
    if(product_present==0){
    $.ajax({
        url: 'api/label-search-append-api.php',
        type: 'post',
        dataType: 'text',
        data:{pro_id:id, quantity:quantity },
        success: function (response) {
            console.log('Id   :'+id);
            $(".select22").select2();
            console.log('Response   :'+response);
            $('#product_tbody').append(response);
            $('.search-box input[type="text"]').val('');
            $(".result").empty();
            $('.search-box input[type="text"]').focus();
        }
    });
    }else{
        alert("Product Already Added");
    }
   }
$(document).ready(function(){
    var n='';
    n=parseFloat(n) || 0;

    
    $('.search-box input[type="text"]').on("keyup input", function(){
        console.log('bn Value='+n);
        var search_text = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(search_text.length>1){
            $.get("api/product-search-api.php", {search_text: search_text}).done(function(data){
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
});



</script>
<style>
    thead{
        background: antiquewhite;
    }
    th{
        padding: 5px;
        text-align: center;
    }
    td{
        text-align: center;
        padding: 5px;
    }
</style>