@extends('layouts/billing_layout')
@section('title', '| '. $data['pageTitle'] )
@section('content')
div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="mb-2 row">
            <div class="col-sm-6">
                <h3 class="m-0 text-dark">Manage Invoice</h3>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Invoice</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <!-- Left col -->
            <section class="col-md-12">
                <div class="card-header">
                    <h4 class="m-0 text-dark">Add Invoice
                        <a href="" class="float-right btn btn-sm btn-success" title="Edit">
                            <i class="fa fa-list">Invoice List</i>
                        </a>
                    </h4>
                </div>
                <!-- Custom tabs (Charts with tabs)-->
                <div class="card">
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group col-md-1">
                                <label for="invoice_no">Invoice NO</label>
                                <input type="text" name="invoice_no" class="form-control form-control-sm" id="invoice_no" readonly  style="background-color: #D8FDBA" value="">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="date">Invoice Date</label>
                                <input type="text" name="date" value="" class="form-control datepicker form-control-sm" id="date" placeholder="YYYY-MM-DD" readonly="">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="category_id">Category Name</label>
                                <select class="form-control select2" name="category_id" id="category_id">
                                    <option value="">Select Category</option>

                                    <option value="1">2</option>

                                </select>
                                <font style="color: red">{{($errors->has('category_id'))?($errors->first('category_id')):''}}</font>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="product_id">Product Name</label>
                                <select class="form-control select2" name="product_id" id="product_id">
                                    <option value="">Select Product</option>
                                </select>
                                <font style="color: red">{{($errors->has('product_id'))?($errors->first('product_id')):''}}</font>
                            </div>
                            <div class="form-group col-md-1">
                                <label for="product_current_stock">Stcok(Pcs/kg)</label>
                                <input type="text" name="product_current_stock" class="form-control form-control-sm" id="product_current_stock" readonly  style="background-color: #D8FDBA">
                            </div>
                            <div class="form-group col-md-1" style="padding-top: 30px;">
                                <a class="btn btn-success addEventMore btn-sm"><i class="fa fa-plus-circle"></i>Add</a>
                            </div>
                        </div>
                    </div><!-- /.card-body -->
                    <div class="card-body">
                        <form method="post" action="" id="myForm">
                            @csrf
                            <table class="table-sm table-bordered" width="100%">
                                <thead>
                                    <tr>
                                        <th>Category</th>
                                        <th>Product Name</th>
                                        <th width="7%">Pcs/kg</th>
                                        <th width="10%">Unit Price</th>
                                        <th width="17%">Total Price</th>
                                        <th width="10%">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="addRow" class="addRow">

                                </tbody>
                                <tbody>
                                     <tr>
                                        <td colspan="4" class="text-right">Discount</td>
                                       <td>
                                            <input type="text" class="text-right form-control form-control-sm discount_amount" name="discount_amount" id="discount_amount" value="" placeholder="Enter discount amount">
                                            <br>

                                        </td>

                                    </tr>
                                    <tr>
                                        <td colspan="4" class="text-right">Grand Total</td>
                                       <td>
                                            <input type="text" class="text-right form-control form-control-sm estimated_amount" name="estimated_amount" id="estimated_amount" value="0" readonly style="background-color: #D8FDBA">
                                        </td>

                                    </tr>
                                </tbody>
                            </table>
                            <br>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <textarea class="form-control" name="description" id="description" class="description" placeholder="Write a description here"></textarea>
                                </div>
                            </div>
                             <br>
                            <div class="form-row">
                                <div class="form-group col-md-3">
                                    <label for="paid_status">Paid Status</label>
                                    <select class="form-control form-control-sm" name="paid_status" id="paid_status">
                                        <option value="">Select paid status</option>
                                        <option value="full_paid">Full Paid</option>
                                        <option value="full_due">Full Due</option>
                                        <option value="partial_paid">Partial Paid</option>
                                    </select>
                                     <input type="text" class="form-control form-control-sm paid_amount" name="paid_amount" id="paid_amount" value="" placeholder="Enter paid amount" style="display: none;">
                                </div>
                                <div class="form-group col-md-9">
                                    <label for="customer_id">Customer Name</label>
                                    <select class="form-control select2" name="customer_id" id="customer_id">
                                        <option value="">Select Customer</option>

                                        <option value="0">New Customer</option>
                                    </select>
                                </div>
                            </div>
                             <div class="form-row new_customer" style="display: none">
                                <div class="form-group col-md-4">
                                    <input type="text" class="form-control" name="name" id="name" class="name" placeholder="Enter name">
                                </div>
                                  <div class="form-group col-md-4">
                                    <input type="text" class="form-control" name="mobile_no" id="mobile_no" class="mobile_no" placeholder="Enter mobile no">
                                </div>
                                  <div class="form-group col-md-4">
                                    <input type="text" class="form-control" name="address" id="address" class="address" placeholder="Enter address">
                                </div>
                            </div>
                            <div class="form-group col-md-6" style="padding-top: 30px;">
                                    <input type="submit" value="Invoice Store" class="btn btn-success btn-sm">
                            </div>

                        </form>
                    </div>
                </div>
                <!-- /.card -->
            </section>
        </div>
    </div>
<div ></div>
</section>

</div>
<!-- get product by category_id -->
<script>
$(function(){
    $(document).on('change', '#category_id', function () {
        var category_id = $(this).val();
        $.ajax({
            url: "",
            type: "GET",
            data: {category_id: category_id},
            success: function (data) {
                var html = '<option value="">Select Product</option>';
                $.each(data, function (key, v) {
                    html += '<option value="'+v.id+'">'+v.name + '</option>';
                });
                $('#product_id').html(html);
            }
        });
    });
});
</script>
<!-- get product by category_id -->
<script>
$(function () {
    $(document).on('change', '#product_id', function () {
        var product_id = $(this).val();
       // alert(product_id);
        $.ajax({
            url: "",
            type: "GET",
            data: {product_id: product_id},
            success: function (data) {
                $('#product_current_stock').val(data);
            }
        });
    });
});
// paid status on change

</script>
<!-- partial paid amount show -->
<script>
$(function () {
    $(document).on('change', '#paid_status', function () {
        var paid_status = $(this).val();
        if(paid_status == 'partial_paid'){
            $('.paid_amount').show();
        }else{
           $('.paid_amount').hide();
        }

    });
});

</script>
<!-- new customer show-->
<script>
$(function () {
    $(document).on('change', '#customer_id', function () {
        var customer_id = $(this).val();
        if(customer_id == '0'){
            $('.new_customer').show();
        }else{
           $('.new_customer').hide();
        }

    });
});

</script>
<script type="text/javascript">
$(function(){
    $('.select2').select2();
});
</script>
<script id="document-template" type="text/x-handlebars-template">
<tr class="delete_add_more_item" id="delete_add_more_item">
    <input type="hidden" name="date" value="">
    <input type="hidden" name="invoice_no" value="">
    <td> <input type="hidden" name="category_id[]" value=""></td>

    <td>
        <input type="hidden" name="product_id[]" value="">
    </td>
     <td>
        <input type="number" min="1" class="text-right form-control form-control-sm selling_qty" name="selling_qty[]" value="1">
    </td>
     <td>
        <input type="number" min="1" class="text-right form-control form-control-sm unit_price" name="unit_price[]" value="">
    </td>
    <td>
        <input type="number" class="text-right form-control form-control-sm selling_price" name="selling_price[]" value="0" readonly>
    </td>
    <td>
       <i class="btn btn-danger btn-sm fa fa-window-close removeEventMore"></td>
    </td>
</tr>
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.addEventMore',function(){
        var date = $('#date').val();
        var invoice_no = $('#invoice_no').val();
        var category_id = $('#category_id').val();
        var category_name = $('#category_id').find('option:selected').text();
        var product_id = $('#product_id').val();
        var product_name = $('#product_id').find('option:selected').text();


        var source =$('#document-template').html();

        var data = {
            date:date,
            invoice_no:invoice_no,
            category_id:category_id,
            category_name:category_name,
            product_id:product_id,
            product_name:product_name,
        };

        var html = template(data);
        $('#addRow').append(html);


    });

    $(document).on('click','.removeEventMore',function(event){
        $(this).closest('.delete_add_more_item').remove();
        totalAmountPrice();
    });

    $(document).on('keyup click','.unit_price,.selling_qty',function(event){
        var unit_price = $(this).closest("tr").find("input.unit_price").val();
        var qty = $(this).closest("tr").find("input.selling_qty").val();
        var total = unit_price * qty;
        $(this).closest("tr").find("input.selling_price").val(total);
        // totalAmountPrice();
        $('#discount_amount').trigger('keyup');
    });

    $(document).on('keyup','#discount_amount',function(){
       totalAmountPrice();
    });

    function totalAmountPrice(){
        var sum = 0;
        $('.selling_price').each(function(){
            var value = $(this).val();
            if(!isNaN(value) && value.length != 0){
                sum += parseFloat(value);
            }
        });

        var discount_amount = parseFloat($('#discount_amount').val());
        if(!isNaN(discount_amount) && discount_amount.length != 0){
             sum -= parseFloat(discount_amount);
        }

        $('#estimated_amount').val(sum);
    }
});
</script>

<script>
$('.datepicker').datepicker({
    uiLibrary: 'bootstrap4'
});

</script>
    </script>
@endsection