@extends("layouts.admin.app")

@section("page-title")
{{__("Dashboard")}}
@endSection

@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("sales-orders")}}</h1>
        <p>{{__("all-sales-orders-invoice")}}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="{{route("admin.supply-of-order.index", "all")}}">{{__("sales-orders")}}</a>
        </li>
        <li class="breadcrumb-item"><a href="#">{{__("Invoice")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<div class="row" style="padding: 11px;">
    <div class="col-md-12">
        <div class="tile" style="padding: 5px 5px 5px 5px">
            <div class="tile-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="scrollable-table">
                            <table id="myTable" class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                                <thead style="font-size: 12px; line-height: 2px">
                                    <tr>
                                        <th style="width: 1%">#</th>
                                        <th style="width: 7%">{{__('code')}}<span class="required"></span></th>
                                        <th style="width: 19%">{{__('item')}}<span class="required"></span></th>
                                        <th style="width: 3%">{{__('unit')}}</th>
                                        <th style="width: 6%">{{__('main-quantity')}}<span class="required"></span></th>
                                        <th style="width: 8%">{{__('delivered-quantity')}}<span class="required"></span></th>
                                        <th style="width: 7%">{{__('invoice-quantity')}}<span class="required"></span></th>
                                        <th style="width: 4%">{{__('quantity')}}<span class="required"></span></th>
                                        <th style="width: 2%">{{__('price')}}<span class="required"></span></th>
                                        <th style="width: 12%">{{__('notes')}}</th>
                                    </tr>
                                </thead>
                                <tbody style="font-size: 12px">
                                                                        @foreach($order_details as $key=>$orderItem)
                                    <tr id="trControl{{$serial_number}}">
                                        <input type="hidden" id="orderItem_id{{$serial_number}}" value="{{$orderItem->id}}">
                                        <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">{{$serial_number}}</td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="text" style="padding: 3px;font-size: 13px" id="code{{$serial_number}}" value="{{$orderItem->item->getItemCode()}}" required readonly>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input type="hidden" id="item{{$serial_number}}" value="{{$orderItem->item_id}}">
                                            <input class="form-control" type="text" style="padding: 3px;font-size: 13px" value="{{$orderItem->item->name}}" required readonly>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="text" style="padding: 3px;font-size: 13px" id="unit{{$serial_number}}" value="{{$orderItem->item->unit->unit_name}}" required readonly>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="number" style="padding: 3px;font-size: 13px" id="main_quantity{{$serial_number}}" value="{{$orderItem->entered_quantity}}" min="0" readonly required>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="number" style="padding: 3px;font-size: 13px" id="delivered_quantity{{$serial_number}}" value="{{$orderItem->delivered_quantity}}" min="0" readonly required>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="number" style="padding: 3px;font-size: 13px" id="invoice_quantity{{$serial_number}}" value="{{$orderItem->invoiced_qty}}" min="0" readonly required>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="number" style="padding: 3px;font-size: 13px" id="quantity{{$serial_number}}" onchange="qty({{$serial_number}})" value="0" min="0" required>
                                            <div class="input-error" id="quantityError{{$serial_number}}" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="number" style="padding: 3px;font-size: 13px" id="price{{$serial_number}}" value="{{$orderItem->price}}" min="0" readonly required>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0"> <input class="form-control" type="text" style="padding: 3px;font-size: 13px" id="notes{{$serial_number}}" value="{{$orderItem->notes}}" readonly required></td>
                                    </tr>
                                                                        @endforeach
                                </tbody>
                            </table>
                            <div class="row1 mt-3" style="padding-top: 5px; display:none">
                                <div class="col-lg-4">
                                    <div class="form-group row">
                                        <label for="staticEmail" class="col-form-label" style="font-size: 13px"><b>{{__("total-qty")}}</b></label>
                                        <div class="col-sm-5">
                                            <input class="form-control" type="number" name="total_qty" id="total_qty" value="0" readonly style="width: 80%; padding: 3px; font-size: 13px">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group row">
                                        <label for="staticEmail" class="col-form-label" style="font-size: 13px"><b>{{__("total-amount")}}</b></label>
                                        <div class="col-sm-5">
                                            <input class="form-control" type="number" name="total_price" id="total_price" value="0" readonly style="width: 80%; padding: 3px; font-size: 13px">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group row">
                                        <label for="staticEmail" class="col-form-label" style="font-size: 13px"><b>{{ __('Total Price After Add Tax Value') }} ({{ ($tax * 100) . '%' }})</b></label>
                                        <div class="col-sm-5">
                                            <input class="form-control" type="number" name="total_price_tax" id="total_price_tax" value="0" readonly style="width: 85%; padding: 3px; font-size: 13px">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr style="padding: 0 0 2px 0; margin: 5px 0 0 0">
                    <div class="d-flex justify-content-end mt-2">
                        <button class="btn btn-primary" id="btn" onclick="save()" type="button"><i class="fa fa-fw fa-lg fa-check-circle" style="font-size: 14px"></i>{{__("create-invoice")}}</button>
                </div>
                @if(isset($invoices) && count($invoices) > 0)
                <div class="text-center">
                    <h1 style="margin: 0;font-size: 24px;font-weight: 400;"><i class="fa fa-dashboard"></i>{{__("all-sales-orders-invoice")}}</h1>
                </div>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <div class="scrollable-table">
                            <table class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                                <thead style="font-size: 12px; line-height: 2px">
                                    <tr>
                                        <th style="width: 5%">#</th>
                                        <th style="width: 5%">{{__('Invoice-number')}}</th>
                                        <th style="width: 5%">{{__('date')}}</th>
                                        <th style="width: 5%">{{__('total')}}</th>
                                        <th style="width: 5%">{{__('client-name')}}</th>
                                        <th style="width: 5%">{{__('print-invoice')}}</th>
                                    </tr>
                                </thead>
                                <tbody style="font-size: 12px">
                                                                @foreach($invoices as $invoice)
                                <tr>
                                    <td>{{$serial_number++}}</td>
                                    <td>{{ $invoice->number }}</td>
                                    <td>{{ $invoice->created_at->format('Y-m-d') }}</td>
                                    <td>{{ $invoice->total }}</td>
                                    <td>{{ $invoice->voucher->client->en_name }}</td>
                                    <td><a href="{{ route('admin.sales-orders.invoice_print', $invoice->id) }}" target="_blank" class="control-link print"><i class="fas fa-file-pdf-o"></i></a></td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section("scripts")
<!-- Add this script block to your HTML file -->
<script type="text/javascript">
    const tableRows = $('#myTable tr');
    let noOfRows = tableRows.length - 1;

    for (var i = 1; i <= noOfRows; i++) {
        $("#quantity" + i).val($("#delivered_quantity" + i).val() - $("#invoice_quantity" + i).val())
        qty(i);
    }

    function qty(id) {
        let error = document.getElementById("quantityError" + id);
        var quantityVal = parseFloat($("#quantity" + id).val());
        var invoiceQuantityVal = parseFloat($("#invoice_quantity" + id).val());
        var mainQuantityVal = parseFloat($("#main_quantity" + id).val());
        var deliveredQuantity = parseFloat($("#delivered_quantity" + id).val());

        if (quantityVal > mainQuantityVal) {
            $("#quantityError" + id).css({
                'display': ''
            });
            error.innerHTML = '{{__("qty-error-msg")}}';
            $("#quantity" + id).val(0);
        } else if ((quantityVal + invoiceQuantityVal) > mainQuantityVal) {
            $("#quantityError" + id).css({
                'display': ''
            });
            error.innerHTML = '{{__("qty-error-msg")}}';
            $("#quantity" + id).val(0);
        } else if (quantityVal > (deliveredQuantity - invoiceQuantityVal) ) {
            $("#quantityError" + id).css({
                'display': ''
            });
            error.innerHTML = '{{__("qty-error-msg")}}';
            $("#quantity" + id).val(0);
        }else if (deliveredQuantity == invoiceQuantityVal){
            $("#quantity" + id).attr('readonly', true);
        } else {
            error.innerHTML = "";
            $("#quantityError" + id).css({
                'display': 'none'
            });

            var TotalQuantity = 0;
            var TotalPrice = 0;
            for (var i = 1; i <= noOfRows; i++) {
                TotalQuantity += parseFloat($("#quantity" + i).val());
                TotalPrice += parseFloat($("#quantity" + i).val()) * parseFloat($("#price" + i).val());
                $("#total_qty").val(TotalQuantity);
                $("#total_price").val(TotalPrice);
                $("#total_price_tax").val(TotalPrice + (TotalPrice * {{$tax}}));
            }
        }
    }

    function save() {
        var dataArr = [];
        var dataArray = [];
        var formData = new FormData();
        var baseUrl = window.location.origin;
        for (var i = 1; i <= noOfRows; i++) {
            var quantityVal = parseFloat($("#quantity" + i).val());
            var invoiceQuantityVal = parseFloat($("#invoice_quantity" + i).val());
            var mainQuantityVal = parseFloat($("#main_quantity" + i).val());
            if (quantityVal <= 0) {
                swal({
                    icon: 'error',
                    title: "{{__('error')}}",
                    text: "{{__('fill-row-qty')}}" + i
                });
                return;
            }
            const dataObject = {
                id: $("#orderItem_id" + i).val(),
                invoice_qty: $("#quantity" + i).val(),
            };
            dataArr.push(dataObject);

            const data = {
                voucher_details_id: $("#orderItem_id" + i).val(),
                item_id: $("#item" + i).val(),
                quantity: $("#quantity" + i).val(),
            };
            dataArray.push(data);
        }
        formData.append("voucher_id", {{$voucher_id}});
        formData.append("total", $("#total_price_tax").val());
        formData.append("items", JSON.stringify(dataArr));
        formData.append("invoice", JSON.stringify(dataArray));
        $.ajax({
            type: "post",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: baseUrl + "/en/ajax/sales-orders/create_invoice",
            dataType: 'json',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response["status"] === 200) {
                    swal({
                        title: "Added Successfully",
                        text: response["message"],
                        icon: "success",
                    }).then(function() {
                        location.reload();
                    })
                } else if (response["status"] === 201) {
                    swal({
                        icon: 'error',
                        title: "{{__('error')}}",
                        text: response["message"]
                    })
                }
            },
            error: function(response) {}
        });
    }
</script>

@endsection