@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title" style="color:#115548;">Create Invoice</h3>
            <div class="card-tools">
                <a href="{{ route('bw-sale.index') }}"><button class="btn btn-sm btn-primary"><i
                            class="fa fa-arrow-circle-left" aria-hidden="true"></i> &nbsp; Back</button></a>
            </div>
        </div>

        <div class="card-body">
            <form action="{{ route('bw-sale.store') }}" method="POST" class="" id="purchaseForm"
                enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-xl-4 col-md-4 col-12 mb-1">
                        <div class="form-group">
                            <label>Customer</label>
                            <select class="form-control select2" name="customer_id" id="customer_id" required>
                                <option value="">Select One</option>
                                @foreach ($customer as $item)
                                    <option value="{{ $item->id }}">{{ $item->customer_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-4 col-12 mb-1" style="display: none">
                        <div class="form-group">
                            <label>Invoice No</label>
                            <input type="text" class="form-control" id="invoice_no" name="invoice_no" readonly>
                        </div>
                    </div>

                    <div class="col-xl-4 col-md-4 col-12 mb-1">
                        <div class="form-group">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="billing_date" required>
                                Billing Date
                            </label>
                            <div class="input-group date" id="searchTo" data-target-input="nearest">
                                <input type="text" name="billing_date" value=""
                                    class="form-control datetimepicker-input input-group-append"
                                    data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-5">
                        <label>Select Service</label>
                        <select class="form-control " id="serviceId">
                            <option value="">Select One</option>
                            @foreach ($service as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="table-responsive">
                        <table id="result" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th style="padding-left: 2px;padding-right: 2px">Service </th>
                                    <th style="padding-left: 2px;padding-right: 2px">Description</th>
                                    <th style="padding-left: 2px;padding-right: 2px">From Date</th>
                                    <th style="padding-left: 2px;padding-right: 2px">To Date</th>
                                    <th style="padding-left: 2px;padding-right: 2px">Quantity</th>
                                    <th style="padding-left: 2px;padding-right: 2px">Rate</th>
                                    <th style="padding-left: 2px;padding-right: 2px">Vat</th>
                                    <th style="padding-left: 2px;padding-right: 2px">Value</th>
                                    <th style="padding-left: 2px;padding-right: 2px">Action</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-3 float-right">
                            <input type="number" class="form-control" id="subTotal" name="subTotal" autocomplete="off"
                                step=".01" min="0" readonly>
                        </div>
                        <div class="col-md-3 float-right">
                            Sub Total
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <div class="col-md-3 float-right">
                            <input type="number" class="form-control" id="marketing_total" name="marketing_total"
                                autocomplete="off" value="0" step=".01" min="0">
                        </div>
                        <div class="col-md-3 float-right">
                            Paid
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <div class="col-md-3 float-right">
                            <input type="number" class="form-control" id="total" name="total" autocomplete="off"
                                step=".01" min="0" readonly>
                        </div>
                        <div class="col-md-3 float-right">
                            Due
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary waves-effect waves-float waves-light float-right mt-2" type="submit"
                    id="submitButton">Submit
                </button>
            </form>
        </div>
    </div>

    <style>
        li.selected {
            background: #17A2B8 !important;
        }
    </style>
@endsection

@section('ajax')
    <script src="{{ asset('adminlte/js/jquery.validate.js') }}"></script>
    <script>
        const fetchData = (productId) => {
            searchResult(productId);
        }

        $('#serviceId').change(() => {
            var serviceSelect = $('#serviceId').val();
            fetchData(serviceSelect);
        });

        function all(thisObj) {
            var qty = thisObj.parents("tr").find("input.quantity").val();
            var rate = thisObj.parents("tr").find("input.rate").val();
            var vat = thisObj.parents("tr").find("input.vat").val();
            var from = new Date(thisObj.parents("tr").find("input.effDate").val());
            var to = new Date(thisObj.parents("tr").find("input.expDate").val());
            var diffTime = Math.abs(to - from);
            var diffDay = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            var days = diffDay + 1;
            var month = days / 30;
            var price = parseFloat(rate) * parseFloat(vat);
            var price_vat = parseFloat(price) / 100;
            var price_with_vat = parseFloat(price_vat) + parseFloat(rate);
            var lineTotal = parseFloat(price_with_vat) * parseFloat(qty) * month;
            console.log(lineTotal);
            thisObj.parents("tr").find("input.line_total").val(lineTotal.toFixed(2));
            subTotalAndTotal();
        }

        function subTotalAndTotal() {
            var TotalLineCost = 0;
            var TotalQty = 0;
            $("tr .line_total").each(function(index, value) {
                currentRowLineCost = parseFloat($(this).val());
                TotalLineCost += parseFloat(currentRowLineCost);
            });
            $("tr .quantity").each(function(index, value) {
                currentRowQty = parseFloat($(this).val());
                TotalQty += parseFloat(currentRowQty);
            });
            $('#subTotal').val(TotalLineCost.toFixed(2));
            $('#total_qty').val(TotalQty.toFixed(3));
            var marketing_commision = $('#marketing_total').val();
            var total = parseFloat(TotalLineCost) - parseFloat(marketing_commision);
            $('#total').val(total.toFixed(2));
        }

        function calCall() {
            $(".effDate").change(function() {
                var from_date = new Date($(this).parents("tr").find("input.effDate").val());
                var dd = String(from_date.getDate()).padStart(2, '0');
                var mm = String(from_date.getMonth() + 1).padStart(2, '0');
                var yyyy = from_date.getFullYear();
                from_date = yyyy + '-' + mm + '-' + dd;
                $('.expDate').attr('min', from_date);
                all($(this));
            });

            $(".expDate").change(function() {
                all($(this));
            });

            $(".quantity").keyup(function() {
                all($(this));
            });

            $(".rate").keyup(function() {
                all($(this));
            });

            $(".vat").keyup(function() {
                all($(this));
            });
        }

        function searchResult(productId) {
            $.ajax({
                type: 'get',
                url: '{{ route('productinfo') }}',
                data: {
                    data: productId
                },
                success: function(res) {
                    console.log(res);
                    r = res;
                    var check = 0;

                    var id = $('#serviceId').val();
                    $("tr .product_id").each(function(index, value) {
                        currentId = parseFloat($(this).val());
                        if (id == currentId) {
                            check = 1;
                        }
                    });
                    if (check == 0) {
                        $('#result tbody').append('<tr>' +
                            '<td style="padding-left: 2px; align: center; display:none"><input style="width: 90px" class="product_id" value="' +
                            r.id + '" type="number" name="service_id[]" required></td>' +
                            '<td style="padding-left: 2px"><lable style="width: 50px" class="product_name"> ' +
                            r.name + '</td>' +
                            '<td style="padding-left: 2px"><lable style="width: 50px" class="description"> ' +
                            r
                            .description + '</td>' +

                            '<td style="padding-left: 2px"><input style="width: 150px" class="effDate" id="from" type="date" required name="from_date[]"></td>' +
                            '<td style="padding-left: 2px"><input style="width: 150px" class="expDate" id="to" type="date" required name="to_date[]"></td>' +

                            '<td style="padding-left: 2px; align: center"><input style="width: 90px" class="quantity border-0" value="" type="number" name="quantity[]" min=0 required> </td>' +
                            '<td style="padding-left: 2px; align: center"><input style="width: 90px" class="rate border-0" value="0" type="number" step=".01" name="rate[]" min=0 required></td>' +
                            '<td style="padding-left: 2px"><input style="width: 90px" class="vat border-0" type="number" value="0" name="vat[]" min=0></td>' +

                            '<td style="padding-left: 2px; display:none"><select style="width: 90px" class="rate_per_um" name="status[]" required>' +
                            '<option value="Active">Active</option></select></td>' +

                            '<td style="padding-left: 2px"><input style="width: 90px" class="line_total border-0" min=0 value="" type="number" readonly step=".01" name="line_total[]" required></td>' +
                            '<td><lable style="width: 40px" id="btnCancle" step=".01" class="btn btn-dark float-right">-</lable></td>' +
                            +'</tr>');
                    } else {
                        toastr.error('You have seleceed Same Service');
                    }

                    liSelected = null;
                    index = -1;

                    subTotalAndTotal();

                    $("#result").on("click", "#btnCancle", function() {
                        $(this).closest("tr").remove();
                        subTotalAndTotal();
                    });

                    calCall();
                }
            });
        }

        $(document).ready(function() {
            var liSelected;
            var index = -1;

            $('#marketing_total').keyup(function() {
                subTotalAndTotal();
            });

            $('#submitButton').click(function(e) {
                e.preventDefault();
                var rowCount = $("#result tr").length;

                if (rowCount > 1) {
                    $('#purchaseForm').valid();
                    $('#purchaseForm').submit();
                } else {
                    toastr.error('Please Add Service');
                }
            });

            $('#purchaseForm').on('keydown', 'input', function(event) {
                if (event.which == 13) {
                    event.preventDefault();
                }
            });

            function removeClass(el, className) {
                if (el.classList) {
                    el.classList.remove(className);
                } else {
                    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ')
                        .join('|') + '(\\b|$)', 'gi'), ' ');
                }
            };

            function addClass(el, className) {
                if (el.classList) {
                    el.classList.add(className);
                } else {
                    el.className += ' ' + className;
                }
            };

        });
    </script>
@endsection