@extends(config('admin_theme.layout', 'admin.modern.layout.master'))
@section('title')
    {{ $current_route->{'name_' . trans('admin.lang')} }}
@stop
@section('page-breadcrumb')
    @include(config('admin_theme.view_prefix', 'admin.modern').'.layout.breadcrumb_add')
@stop
@section('page-content')
    <!-- Dashboard Section Overview -->
    <div class="dashboard__section__overview d-md-flex justify-content-between pt-4">
        <div class="dashboard__section-tile">
            <h3>{{ $current_route->{'name_' . trans('admin.lang')} }}</h3>
        </div>
    </div>
    <div class="sales__invoice">
        <div class="sales__invoice__form__container">
            <div class="col-md-12 col-sm-12">
                @include(config('admin_theme.view_prefix', 'admin.modern').'.layout.error')
            </div>
            <div class="invoice__information">
                <h3>@lang('admin.order_information')</h3>
                <div class="invoice__information-form d-flex flex-wrap flex-xl-nowrap">
                    <div class="form__input__field">
                        <label for="order_date" class="col-form-label">@Lang('admin.order_date')<span
                                class="require">*</span></label>
                        <input type="text" autocomplete="off" class="form-control" disabled
                               value="{{ $order->order_date }}"
                               id="order_date" readonly="" disabled="">
                    </div>
                    <div class="form__input__field">
                        <label for="customers_id" class="col-form-label">@Lang('admin.customer')<span
                                class="require">*</span></label>

                        <input type="text" autocomplete="off" class="form-control" disabled
                               value="{{ $order->customer->{'customer_name_' . app()->getLocale()} }}" id="customer"
                               readonly=""
                               disabled="">
                    </div>
                </div>
                <div class="divider"></div>
                <div class="sales__invoice__table">
                    <h3>@lang('admin.order_items')</h3>
                    <div class="table__responsive">
                        <table id="items_table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>@Lang('admin.store_id') </th>
                                <th>@Lang('admin.items_id') </th>
                                <th>@Lang('admin.units_id') </th>
                                <th>@Lang('admin.sale_rate') </th>
                                <th>@Lang('admin.total') </th>
                                <th>@Lang('admin.tax_per') </th>
                                <th>@Lang('admin.qty') </th>
                                <th>@lang('admin.inv_qty')</th>
                                <th>@lang('admin.total')</th>
                                <th></th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="divider"></div>
                    <div class="sales__invoice__table">

                        <h3 class="mt-4">@lang('admin.order_invoice_items')</h3>
                        <div class="invoice_div">
                            <div class="table__responsive">
                                <table id="invoice_table">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>@Lang('admin.store_id') </th>
                                        <th>@Lang('admin.items_id') </th>
                                        <th>@Lang('admin.units_id') </th>
                                        <th>@Lang('admin.sale_rate') </th>
                                        <th>@Lang('admin.total') </th>
                                        <th>@Lang('admin.tax_per') </th>
                                        <th>@Lang('admin.qty') </th>
                                        <th>@lang('admin.inv_qty')</th>
                                        <th>@lang('admin.total')</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('modal')
    @include(config('admin_theme.view_prefix', 'admin.modern').'.layout.ajax')
@stop
@section('js')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#items_table').DataTable({
                " dom": 'Bfrtip',
                "processing": true,
                "serverSide": true,
                "responsive": true,
                paging: false,
                info: false,
                "lengthChange": false,
                "autoWidth": false,
                "searching": false,
                "ajax": {
                    url: "{{ route('sale_order.getOrderItems') }}",
                    data: function (d) {
                        d.order_id = "{{ Crypt::encrypt($order->id) }}";
                    }
                },
                "drawCallback": function () {
                },
                "order": [
                    [0, 'desc']
                ],
                "columnDefs": [{
                    "targets": "_all",
                    "defaultContent": ""
                }],
                "columns": [{
                    "data": "id"
                },
                    {
                        "data": "store_name"
                    },
                    {
                        "data": "items_id"
                    },
                    {
                        "data": "units_id"
                    },
                    {
                        "data": "sale_rate"
                    },
                    {
                        "data": "total"
                    },
                    {
                        "data": "tax_per"
                    },
                    {
                        "data": "qty"
                    },
                    {
                        "data": "inv_qty"
                    },
                    {
                        "data": "item_inv_total"
                    },
                    {
                        data: 'actions', orderable: false
                    },
                ]
            });
        });
        $(document).on("blur", "input[name='inv_qty']", function () {
            var elem = $(this);
            if (parseInt(elem.val()) > parseInt(elem.attr("max")) || parseInt(elem.val()) < parseInt(elem.attr(
                "min"))) {
                alert(parseInt(elem.val()) + " - " + parseInt(elem.attr("max")) + " - " + parseInt(elem.attr(
                    "min")));
                if (parseInt(elem.val()) > parseInt(elem.attr("max"))) {
                    elem.val(parseInt(elem.attr("max")));
                } else if (parseInt(elem.val()) < parseInt(elem.attr("min"))) {
                    elem.val(parseInt(elem.attr("min")));
                }
            }
            var item_total = 0;
            var sale_rate = parseFloat(elem.closest("tr").find("td:nth-child(5)").html());
            var item_inv_total = elem.closest("tr").find("input[name='item_inv_total']");
            var tax = parseFloat(elem.closest("tr").find("td:nth-child(7)").html());
            var qty = parseInt(elem.val());
            item_inv_total.val((parseFloat(qty * sale_rate) + (parseFloat(qty * sale_rate) * tax)).toFixed(2));

        });

        $(document).on("change", "input[name='inv_qty']", function () {
            var elem = $(this);
            if (parseInt(parseInt(elem.val())) > parseInt(parseInt(elem.attr("max")))) {
                elem.val(parseInt(elem.attr("max")));
            } else if (parseInt(parseInt(elem.val())) < parseInt(parseInt(elem.attr("min")))) {
                elem.val(parseInt(elem.attr("min")));
            }

            var item_total = 0;
            var sale_rate = parseFloat(elem.closest("tr").find("td:nth-child(5)").html());
            var item_inv_total = elem.closest("tr").find("input[name='item_inv_total']");
            var tax = parseFloat(elem.closest("tr").find("td:nth-child(7)").html());
            var qty = parseInt(elem.val());
            item_inv_total.val((parseFloat(qty * sale_rate) + (parseFloat(qty * sale_rate) * tax)).toFixed(2));
        });
        $(document).on("click", ".btn-add-item", function () {
            // Clone the table row containing the clicked button
            var tr = $(this).closest("tr").clone();
            var rowId = parseInt(tr.find("td:nth-child(1)").html());
            $.each($("#invoice_table tbody tr"), function () {
                var item_id = parseInt($(this).find("td:nth-child(1)").html());
                if (item_id == rowId) {
                    showNotification("error", "", "@lang('admin.item_exist_message')");
                    $(this).closest("tr").remove();
                }
            });
            var qty_elem = tr.find("input[name='inv_qty']");
            var button = tr.find(".btn-add-item");
            button.addClass("btn-remove-item").removeClass("btn-add-item").html(
                '<img src="/assets/modern/images/delete-icon.svg" alt="delete-icon"/>');
            var qty = qty_elem.val();
            tr.find("td:nth-child(9)").text(qty);
            qty_elem.remove();
            $("#invoice_table tbody").append(tr);

            if ($("#invoice_table tbody tr").length > 0) {
                if ($(".btn-send").length <= 0) {
                    $(".invoice_div").append(
                        '<div class="notes__buttons d-flex flex-wrap justify-content-md-end gap-3 pt-4 pt-md-0"> <div class="dashboard__btn-fill"><button class="btn-send" name="Save" type="button">@Lang("admin.save")</button></div></div>');
                }
            }
        });
        $(document).on("click", ".btn-remove-item", function () {
            $(this).closest("tr").remove();
            if ($("#invoice_table tbody tr").length == 0) {
                $(".btn-send").remove();
            }
        });
        $(document).on("click", ".btn-send", function () {
            var data = [];
            $("#invoice_table tbody tr").each(function () {
                // Get the values of each column in the current row
                var item_id = parseInt($(this).find("td:nth-child(1)").text());
                var qty = parseFloat($(this).find("td:nth-child(9)").text());

                // Add the values to the data array
                data.push({
                    item_id: item_id,
                    qty: qty
                });
            });

            // Send the data array to the controller using AJAX
            $.ajax({
                headers: {
                    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('sale_order.save_inv') }}", // Replace 'invoice_sale.save' with the actual route name
                method: "POST",
                data: {
                    data: data,
                    order_id: "{{ Crypt::encrypt($order->id) }}"
                },
                beforeSend: function () {
                    $(".ezdan_loading").show();
                },
                complete: function () {
                    $(".ezdan_loading").hide();
                },
                success: function (response) {
                    if (response.status == "success") {
                        location.href =
                            "{{ route('invoice_sale.add', ['order_id' => Crypt::encrypt($order->id)]) }}"
                    }
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    </script>
@stop