@extends('layouts.app')

@section('main-content')
<style type="text/css">
    .order-list #nego input[type=text] {
        box-shadow: none;
        border: none;
        padding: 0px 2px 0px 5px;
    }

    .order-list #laborCharge input[type=text] {
        box-shadow: none;
    }

    .order-list #grandTotal {
        font-size: large;
    }

    .amt {
        background-color: #F3F3F3 !important;
        padding: 0px 3px;
    }

    .amount:focus {
        margin: 0px;
        padding: 3px;
        box-shadow: none !important;
        background-color: #F3F3F3;
        font-size: 0.85rem;

    }

    .order-list td {
        padding: 6px;
        vertical-align: middle;
    }

    .order-list[type=text]:focus {
        margin: 0px;
        padding: 3px;
        box-shadow: none;
        font-size: 0.85rem;
    }

    .order-list input[type=text] {
        margin: 0px;
        padding: 3px;
        box-shadow: none;
        font-size: 0.85rem;
    }

    .order-list th {
        padding: 6px;
    }

    .order-list .discount {
        padding: 0px 3px !important;
    }

    #labordetails {
        font-size: 0.82rem;
        resize: none;
        overflow: hidden;
        height: 5.4rem;
        padding: 0.5rem;
        padding-top: 0.2rem;
    }
</style>
<div class="container-fluid p-0">
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('invoices') }}">All Invoices</a></li>
            <li class="breadcrumb-item">New Invoice</li>
        </ol>
    </nav>
    <h1 class="h3 mb-3"><strong>New</strong> Invoice</h1>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between px-4">
                    <h5 class="card-title mb-0">Invoice <span>[@php echo str_pad($numbers, 5, '0', STR_PAD_LEFT) @endphp]</span></h5>
                    <div class="col-sm-2 mb-0 d-flex justify-content-end">
                        <span class="btn btn-sm btn-success text-nowrap me-2 rounded" id="addgas" style="padding: 0.34em 0.40em;"><i data-feather="plus"></i>Add Gas</span>
                        <span class="btn btn-sm btn-primary text-nowrap rounded" id="addflush" style="padding: 0.34em 0.40em;"><i data-feather="plus"></i>Flushing</span>
                    </div>
                </div>
                <div class="card-body mt-0 pt-0 px-4">
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <form id="forms-product" method="post" action="{{ route('invoices.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="">
                            <div class="row mb-3">
                                <div class="col-sm-2 me-0 pe-2">
                                    <div class="form-group">
                                        <label for="indate" class="mb-1 mt-2 ms-1 text-nowrap">Date</label>
                                        <input type="date" name="invoicedate" class="form-control form-control-sm fs-6" style="padding: 3px 10px; box-shadow:none; outline:none;border-radius:4px" value="{{ date('Y-m-d') }}" id="indate">
                                    </div>
                                </div>
                                <div class="col-sm-3 me-0 px-2">
                                    <div class="form-group">
                                        <label class="mb-1 mt-2 ms-1 text-nowrap">Categories</label>
                                        <select name="category" id="category" class="form-control">
                                            <option value="">Open this select menu</option>
                                            @foreach($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6 me-0 pe-1">
                                    <div class="form-group">
                                        <label for="product" class="mb-1 mt-2 ms-1 text-nowrap">Products Name</label>
                                        <select name="product" id="product" class="form-control form-control-md">
                                            <option value="">Open this select menu</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-1 mt-3 mb-0 ps-2 d-flex align-items-end">
                                    <span class="btn btn-sm btn-info text-nowrap rounded" id="additem" style="padding: 0.34em 0.40em;"><i data-feather="plus"></i>Add item</span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-sm-2 pe-0">
                                <div class="form-group">
                                    <label class="mb-1 mt-0 ms-1 text-nowrap">Customer Type</label>
                                    <select name="customerType" id="customerType" class="form-control" required>
                                        <option value="">Open this select menu</option>
                                        <option value="I">Personal</option>
                                        <option value="B">Business</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3 pe-0">
                                <div class="form-group">
                                    <label class="mb-1 mt-0 ms-1 text-nowrap">Customers Name</label>
                                    <select name='customerid' id='cboCustomer' class='form-control' required>
                                        <option value=''>Open this select menu</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2 pe-0">
                                <div class="form-group">
                                    <label class="mb-1 mt-0 ms-1 text-nowrap">Other Info</label>
                                    <input type='text' id="customerInfo" class='form-control' disabled>
                                </div>
                            </div>
                            <div class="col-sm-3 pe-0">
                                <div class="form-group">
                                    <label class="mb-1 mt-0 ms-1 text-nowrap">Foreman</label>
                                    <select name='foreman' id='cboForeman' class='form-control' required>
                                        <option value=''>Select or create</option>
                                        @forelse($foremans as $foreman)
                                        <option value='{{ $foreman->foreman }}'>{{ strtoupper($foreman->foreman) }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2 me-0">
                                <div class="form-group">
                                    <label for="terms" class="mb-1 ms-1 text-nowrap">Payment</label>
                                    <select id="terms" name="terms" class="form-control">
                                        <option value="Cash">Cash</option>
                                        <option value="30 Days">30 Days</option>
                                        <option value="60 Days">60 Days</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-bordered table-condensed table-hover order-list">
                                    <thead class="text-nowrap p-0">
                                        <tr id="row0">
                                            <th class="col-xs-4 text-center">#</th>
                                            <th class="col-sm-7">Product Name</th>
                                            <th class="col-sm-1 text-center px-2">UoM</th>
                                            <th class="col-sm-1 text-center px-2">Qty</th>
                                            <th class="col-sm-1">Unit Price</th>
                                            <th class="col-sm-1">Amount</th>
                                            <th class="col-sm-1 text-center">Action</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-sm-3 d-flex">
                                <button type="submit" class="btn btn-primary rounded-2 btn-sm p-2 me-2">
                                    <i class="align-middle" data-feather="save"></i><span class="align-middle p-1">Save</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('script')
<script type="text/javascript">
    const quantity = document.getElementsByClassName('quantity');
    const unit_price = document.getElementsByClassName('unit_price');
    const amount = document.getElementsByClassName('amount');
    $labordetails = '<textarea class="form-control rows="10" cols="2" name="labor_desc" placeholder="Labour description" maxlength="500" id="labordetails""></textarea>';
    $labour = '<input type="text" name="labour" id="labour" class="form-control form-control-md unit_price" autocomplete="off" maxlength="5">';
    $labor_qty = '<input type="text" value="1" readonly class="form-control form-control-md text-center quantity" autocomplete="off" maxlength="1">';

    $(document).ready(function() {
        $('#category').select2();
        $('#cboCustomer').select2({
            disabled: true

        });
        $('#customerType').select2();
        $('#product').select2({
            disabled: true
        });

        $("#cboForeman").select2({
            tags: true
        });
        //Add Item
        $("#additem").on('click', function() {
            $("#laborCharge").remove();
            $("#nego").remove();
            $("#grandTotal").remove();
            if ($("td.tblrow").length) {
                selector = $("td.tblrow:last");
            } else {
                selector = $(".order-list tr:last");
            }
            $id = selector.attr('id').replace(/[^0-9]/g, '');

            var row = $(".tblrow").length;
            $product = $("#product").val();
            if ($product && row < 10) {
                $id++;
                const data = JSON.parse($product);
                $productid = '<input type="hidden" name="productid[]" value="' + data.id + '" class="form-control form-control-sm eleclass"/>';
                $quantity = '<input type="text" name="quantity[]" value="" class="form-control quantity text-center" maxlength="4" autocomplete="off"/>';
                $unitprice = '<input type="text" name="unitprice[]" value="' + data.unit_price + '" class="form-control mt-0 unit_price" readonly/>';
                $discount = '<input type="text" name="discount" value="" id="discount" class="form-control form-control-md py-2" autocomplete="off" maxlength="4">';
                $amount = "<input type='text' class='form-control form-control-md amount me-0' style='width:100%; background-color:#F3F3F3;box-shadow:none;border:none;' readonly/>";
                $gTotal = '<span id="gTotal" class="fs-4 fw-bold"></span>';

                $(".order-list tr:last").
                after("<tr id='row" + $id + "'><td class='text-center tblrow' id='bil" + $id + "'>" + $id + "</td><td class='d-none'>" + $productid + "</td><td class='col-xs-1'>" + data.description + "</td>" +
                    "<td class='text-center'>" + data.uom + "</td><td class='text-center'>" + $quantity + "</td><td>" + $unitprice + "</td><td class='amt'>" + $amount + "</td>" +
                    "<td class='text-center'><span class='btn btn-sm btn-outline-danger btn-del rounded' id='" + $id + "'><i data-feather='trash-2'></i></span></td>" +
                    "</tr>");
                $(".order-list tr:last").
                after("<tr id='laborCharge'><td></td><td colspan='2'>" + $labordetails + "</td><td class='text-center'>" + $labor_qty + "</td><td class='labour'>" + $labour + "</td><td class='amt'>" + $amount + "</td><td></td></tr>" +
                    "<tr id='nego'><td colspan='5'><div class='d-flex justify-content-between'><strong>Discount</strong><span>RM<span></td><td class='discount'>" + $discount + "</td><td></td></tr>" +
                    "<tr id='grandTotal'><td colspan='5'><div class='d-flex justify-content-between'><strong>Grand Total</strong><span>RM<span></div></td><td>" + $gTotal + "</td><td></td></tr>");
            } else if (row >= 10) {
                $(".order-list tr:last").
                after("<tr id='laborCharge'><td></td><td colspan='2'>" + $labordetails + "</td><td class='text-center'>" + $labor_qty + "</td><td class='labour'>" + $labour + "</td><td class='amt'>" + $amount + "</td><td></td></tr>" +
                    "<tr id='nego'><td colspan='5'><div class='d-flex justify-content-between'><strong>Discount</strong><span>RM<span></td><td class='discount'>" + $discount + "</td><td></td></tr>" +
                    "<tr id='grandTotal'><td colspan='5'><div class='d-flex justify-content-between'><strong>Grand Total</strong><span>RM<span></div></td><td>" + $gTotal + "</td><td></td></tr>");
                alert("Reached item limit!");
            } else {
                alert("Product name cannot be empty!");
            }
            feather.replace();
            formReload();
            row_count();
        });

        //Additional Gas
        $('#addgas').on('click', function() {
            selector = $(".tblrow:last");
            if ($("td.tblrow").length) {
                selector = $("td.tblrow:last");
            } else {
                selector = $(".order-list tr:last");
            }
            $id = selector.attr('id').replace(/[^0-9]/g, '');
            $id = parseInt($id) + 1;

            $flex = $("#flexItem").length;
            if ($flex == 0) {
                $discount = '<input type="text" name="discount" id="discount" class="form-control form-control-md" autocomplete="off" maxlength="4">';
                $gTotal = '<span id="gTotal" class="fs-4 fw-bold"></span>';
                $amount = "<input type='text' class='form-control form-control-md amount me-0' style='width:100%; background-color:#F3F3F3;box-shadow:none;border:none;' readonly/>";

                $("#laborCharge").remove();
                $("#nego").remove();
                $("#grandTotal").remove();

                $("table.order-list tr:last").
                after("<tr id='flexItem' class='OrderTr py-1'><td class='text-center px-2 tblrow' id='bil" + $id + "'>" + $id + "</td><td class='w-50'>Refill gas 134a + vaccum C.F Internal Oil Compressor</td>" +
                    "<td class='text-center'>Lot</td><td class='text-center'><input type='text' value='1' readonly class='form-control text-center quantity' maxlength='1' autocomplete='off'></td><td><input type='text' id='flexUnit' class='form-control unit_price' autocomplete='off' maxlength='4'></td>" +
                    "<td style='background-color:#F3F3F3;'><input id='flexInput' name='flexitem' type='text' class='form-control amount' style='width:100%; background-color:#F3F3F3;box-shadow:none;border:none;' maxlength=4 readonly></td>" +
                    "<td class='text-center'><span class='btn btn-sm btn-outline-danger btn-del rounded' id='btnFlex'><i data-feather='trash-2'></i></span></td>" +
                    "</tr>");
                $("table.order-list tr:last").
                after("<tr id='laborCharge'><td></td><td colspan='2'>" + $labordetails + "</td><td class='text-center'>" + $labor_qty + "</td><td class='labour'>" + $labour + "</td><td class='amt'>" + $amount + "</td><td></td></tr>" +
                    "<tr id='nego'><td colspan='5'><div class='d-flex justify-content-between'><strong>Discount</strong><span>RM<span></td><td class='discount'>" + $discount + "</td><td></td></tr>" +
                    "<tr id='grandTotal'><td colspan='5'><div class='d-flex justify-content-between'><strong>Grand Total</strong><span>RM<span></div></td><td>" + $gTotal + "</td><td></td></tr>");
            }
            feather.replace();
            $("#flexUnit").focus();
            formReload();
            row_count();
        });

        //Remove Additional Gas
        $(document).on('click', '#btnFlex', function() {
            $id = $("table.order-list tr.OrderTr").length;
            $flex = $("#flexItem").length;
            if ($flex == 1 && $id == 1) {
                $("#flexItem").remove();
            } else if ($id > 1) {
                $("#flexItem").remove();
            }
            grandTotal();
            row_count();
        });

        //Add flushing
        $("#addflush").on('click', function() {
            selector = $(".tblrow:last");
            if ($("td.tblrow").length) {
                selector = $("td.tblrow:last");
            } else {
                selector = $(".order-list tr:last");
            }
            $id = selector.attr('id').replace(/[^0-9]/g, '');
            $id = parseInt($id) + 1;
            // $id = $(".order-list tr.OrderTr").length + 1;
            $flush = $("#flushitem").length;

            if ($flush == 0) {
                $discount = '<input type="text" name="discount" id="discount" class="form-control form-control-md" autocomplete="off" maxlength="4">';
                $gTotal = '<span id="gTotal" class="fs-4 fw-bold"></span>';
                $amount = "<input type='text' class='form-control form-control-md amount me-0' style='width:100%; background-color:#F3F3F3;box-shadow:none;border:none;' readonly/>";

                $("#laborCharge").remove();
                $("#nego").remove();
                $("#grandTotal").remove();

                $("table.order-list tr:last").
                after("<tr id='flushitem' class='OrderTr py-1'><td class='text-center px-2 tblrow' id='bil" + $id + "'>" + $id + "</td><td class='w-50'>Flushing System</td>" +
                    "<td class='text-center'>Lot</td><td class='text-center'><input type='text' class='form-control text-center' readonly value='1'></td><td><input type='text' id='flushUnit' class='form-control' autocomplete='off' maxlength='4'></td>" +
                    "<td style='background-color:#F3F3F3;'><input id='flushInput' name='flushInput' type='text' class='form-control' style='width:100%; background-color:#F3F3F3;box-shadow:none;border:none;' maxlength=4 readonly></td>" +
                    "<td class='text-center'><span class='btn btn-sm btn-outline-danger btn-del rounded' id='btnFlush'><i data-feather='trash-2'></i></span></td>" +
                    "</tr>");

                $("table.order-list tr:last").
                after("<tr id='laborCharge'><td></td><td colspan='2'>" + $labordetails + "</td><td class='text-center'>" + $labor_qty + "</td><td class='labour'>" + $labour + "</td><td class='amt'>" + $amount + "</td><td></td></tr>" +
                    "<tr id='nego'><td colspan='5'><div class='d-flex justify-content-between'><strong>Discount</strong><span>RM<span></td><td class='discount'>" + $discount + "</td><td></td></tr>" +
                    "<tr id='grandTotal'><td colspan='5'><div class='d-flex justify-content-between'><strong>Grand Total</strong><span>RM<span></div></td><td>" + $gTotal + "</td><td></td></tr>");
            }
            feather.replace();
            $("#flushUnit").focus();
            grandTotal();
            row_count();
        });

        //Remove Additional Flush
        $(document).on('click', '#btnFlush', function() {
            $id = $("table.order-list tr.OrderTr").length;
            $flex = $("#flushitem").length;
            if ($flex == 1 && $id == 1) {
                $("#flushitem").remove();
            } else if ($id > 1) {
                $("#flushitem").remove();
            }
            formReload();
            grandTotal();
            row_count();

        });

        //Get Products
        $("#category").change(function() {
            let cbo_id = $(this).val();
            let objProduct = {};
            if (cbo_id) {
                $.ajax({
                    type: 'GET',
                    url: '/api/getProducts/' + cbo_id,
                    data: {
                        '_token': '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(data) {
                        if (data) {
                            $('#product').empty();
                            $('#product').append("<option value=''>Choose product</option>");
                            $.each(data, function(key, products) {
                                objProduct = {
                                    id: products.id,
                                    name: products.name,
                                    description: products.description,
                                    uom: products.uom,
                                    unit_price: products.unit_price
                                };
                                $("#product").append("<option value='" + JSON.stringify(objProduct) + "'>" + products.name + "</option>");
                            });
                        }
                        $("#product").select2({
                            disabled: false,
                            // placeholder: 'Choose product',
                            // minimumInputLength: 2
                        });
                    }
                });
            } else {
                $("#product").select2({
                    disabled: true
                });
                $('#product').empty();
                $('#product').append('<option value="">Open this select menu</option>');
            }
        });

        //Get Customers
        $("#customerType").on('change', function() {
            $type = $(this).val();
            if ($type != "") {
                $.ajax({
                    url: '/api/getCustomers',
                    data: {
                        '_token': 'csrf_token()'
                    },
                    dataType: 'json',
                    success: function(data) {
                        if ($type == "B") {
                            $("#cboCustomer").empty();
                            $("#cboCustomer").append("<option value=''>Open this select menu</option>" + "<option value='newCustomer'>Create New Customer</option>");
                            $.each(data, function(key, customers) {
                                var name = customers.name;
                                if (customers.companyname != '') {
                                    name += ` [${customers.companyname}]`;
                                    $("#cboCustomer").append("<option value='" + customers.id + "'>" + name + customers.info + "</option>")
                                }
                            });
                        } else {
                            $("#cboCustomer").empty();
                            $("#cboCustomer").append("<option value=''>Open this select menu</option>" + "<option value='newCustomer'>Create New Customer</option>");
                            $.each(data, function(key, customers) {
                                var name = customers.name;
                                if (customers.companyname.length == '') {
                                    $("#cboCustomer").append("<option value='" + customers.id + "'>" + name + " - " + customers.info + " </option>")
                                }
                            });
                        }
                        $("#cboCustomer").select2({
                            disabled: false,
                            // minimumInputLength: 1,
                            placeholder: 'Choose Customer'
                        });
                    }
                });
            } else {
                $("#cboCustomer").select2({
                    disabled: true
                });
                $("#customerOption").empty();
                $("#customerOption").append("<input type='text' value='' placeholder='Select Customer Type' class='form-control' disabled>");
                $("#customerOption input").prop('disabled', true);
            }
        });

        //CboOption New Customer
        $(document).on('change', '#cboCustomer', function() {
            if ($(this).val() === 'newCustomer') {
                var url = "/customers/create";
                $(location).attr('href', url);
            }
        });

        //Get OtherInfo
        $(document).on('change', '#cboCustomer', function() {
            var id = $(this).val();
            $.ajax({
                url: '/api/getCustomer/' + id,
                data: {
                    '_token': 'csrf_token()'
                },
                success: function(data) {
                    $("#customerInfo").val(data.info);
                }
            });
        });

    }); //Document Ready Function

    //Recound row number
    function row_count() {
        $i = 1;
        $(".tblrow").each(function() {
            let id = $(this).attr('id');
            $("#" + id).text($i);
            $i++;
        });
    }

    //Control Discount
    function discount_control() {
        if ($(".eleclass").length > 0) {
            $("#discount").attr("readonly", false)
        } else {
            $("#discount").attr("readonly", true);
            $("#discount").css("backgroundColor", "#fff");
        }
    }

    //Remove order list row
    $(document).on('click', '.btn-del', function() {
        const rows = $(".unit_price").length;
        const id = $(this).attr('id');
        $("#row" + id).remove();
        if (rows == 1) {
            $("#nego").remove();
            $("#grandTotal").remove();
            $("#laborCharge").remove();
        }
        formReload();
        row_count();
    });


    addEventListener('keyup', function() {
        formReload();
    });


    function formReload() {
        $(".unit_price").each(function(i, unit_price) {
            const qty = quantity[i].value;
            const up = unit_price.value;
            if (qty > 0) {
                amount[i].value = (up * qty).toFixed(2);
            } else {
                amount[i].value = '';
            }
        });
        grandTotal();
        discount_control();
    };

    function grandTotal() {
        const discount = document.getElementById('discount');
        const labour = document.getElementById('labour');
        const flexitem = document.getElementById('flexUnit');
        const flushitem = document.getElementById('flushUnit');

        let gTotal = 0;
        let flexValue = 0;
        let flushValue = 0;

        if (flushitem !== null) {
            flushValue = flushitem.value;
            if (flushValue > 0) {
                $('#flushInput').val(parseFloat(flushValue).toFixed(2));
            } else {
                $('#flushInput').val('');
            }
        }

        $(".amount").each(function(i, amount) {
            if (amount.value > 0) {
                gTotal += +amount.value;
            }
        });

        if (discount != null) {
            if (discount.value <= gTotal) {
                gTotal = (gTotal + +flushValue) - Number(discount.value);
            } else {
                gTotal = 0;
            }
        }

        if (gTotal > 0) {
            $("#gTotal").text(gTotal.toFixed(2));
        } else {
            $("#gTotal").text('');
        }
    }
</script>
@endsection