@extends("newDashboard.index")

@section("css")
    <link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
@endsection

@section("main-content")
    <style>
        /* Spinner styles */
        .spinner {
            width: 5em;
            height: 5em;
            border: 0.5em solid rgba(0, 0, 0, 0.1);
            border-left-color: #8daf21;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 99999;
            /*   margin-left:260px; */
        }

        .spinner-layer {
            position: fixed;
            width: calc(100vw - 260px);
            height: calc(100vh - 70px);
            background: #f2edf3;
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
        }

        /* Spinner animation */
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <form id="convert-form" action="{{route('convert-sell-invoice-to-priced-invoice.store',$invoice->id)}}"
          method="POST">
        @csrf
        <div class="content-wrapper">
            <div class="page-header" style="margin-bottom: 30px;">
                <h3 class="page-title">
                    <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i></span> {{ __('Purchase Un Price Invoice') }}</h3>
            </div>
            {{-- Add Modal --}}

            <div class="container bg-white rounded" id="AddCategoryModal">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 mx-auto">
                            <ul class="nav nav-pills nav-pills-custom justify-content-center"
                                id="pills-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="pills-home-tab"
                                       data-bs-toggle="pill"
                                       href="#pills-health" role="tab" aria-controls="pills-home"
                                       aria-selected="true">{{__('messages.Purchase data')}}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                       href="#pills-career" role="tab" aria-controls="pills-profile"
                                       aria-selected="false">{{__('Files')}} </a>
                                </li>
                            </ul>
                            <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-health"
                                     role="tabpanel"
                                     aria-labelledby="pills-home-tab">
                                    <div class="item-container">
                                        <div class="row">
                                            <div class="table-responsive mb-5">
                                                <table id="itemTable" class="table my-3">
                                                    <thead style="background-color: #8daf21; color:#fff;">
                                                    <tr>
                                                        <th style="">#</th>
                                                        <th style="">{{__('messages.Item')}}</th>
                                                        <th style="">{{__('messages.Inventory')}}</th>
                                                        <th style="">{{__('messages.quantity')}}</th>
                                                        <th colspan="2" style="">{{__('messages.price')}}</th>
                                                        <th style="">
                                                            {{__('messages.Total')}}
                                                        </th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($invoice->salesItems as $item)
                                                        <tr>
                                                            <input type="hidden"
                                                                   name="quantity[{{$item->id}}]"
                                                                   value="{{($item->quantity + $item->meat_weight) - $item->total_damaged_value}}">
                                                            <input type="hidden"
                                                                   name="total_quantity[{{$item->id}}]"
                                                                   value="{{($item->quantity + $item->meat_weight)}}">
                                                            <td>{{$loop->index + 1}}</td>
                                                            <td>{{$item->item->name}}</td>
                                                            <td>{{$item->inventory->name}}</td>
                                                            <td>{{$item->quantity + $item->meat_weight }}</td>
                                                            <td colspan="2">
                                                                <input style="min-width: 130px" min="0" type="number"
                                                                       step=".01"
                                                                       name="price[{{$item->id}}]"
                                                                       class="form-control price">
                                                            </td>

                                                            <td>
                                                                <span id="totalPrice{{$item->id}}">0</span>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="form-group mb-3 col-md-4">
                                                <label for=""> {{__('messages.Serial number')}}</label>
                                                <input name="serial_number" id="serialNumber"
                                                       class="form-control"
                                                       type="text" value="" readonly>
                                                <div class="serial_number-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Serial number')]) }}</div>
                                            </div>
                                            <div class="form-group mb-3 col-md-4">
                                                <label for=""> {{__('messages.Date')}}</label>
                                                <input id="date_time"
                                                       class="form-control"
                                                       disabled
                                                       value="{{$invoice->date_time}}"
                                                       type="datetime-local"
                                                >
                                                <div class="date_time-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.date_time')]) }}</div>
                                            </div>
                                            <div class="form-group mb-3 col-md-4">
                                                <label class="required"
                                                       for=""> {{__('messages.payment method')}}</label>
                                                <select name="payment_method" id="payment-method"
                                                        class="select2  form-control">
                                                    <option value="cridet">{{__('messages.cridet On the account')}}</option>
                                                    <option value="cash">{{__('messages.cash')}}</option>
                                                    <option value="check">{{__('messages.check')}}</option>
                                                    <option value="bank-transfer">{{__('messages.Bank Transfer')}}</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-4 d-none">

                                                <label class="required"
                                                       for=""> {{__('messages.bank transfer method')}}</label>

                                                <select name="bank_transfer_account_id" id="bank_transfer_method"
                                                        class="js-example-disabled-results  form-control">

                                                    <option value=""
                                                            selected>{{ __('validation.Select', ['attribute' => __('messages.transactions')]) }}</option>

                                                    @foreach ($transaction as $row)
                                                        <option value="{{ $row->id }}">
                                                            {{ str_replace('-', '', $row->serial_number) }} -
                                                            {{ $row->name }}
                                                        </option>
                                                    @endforeach

                                                </select>
                                                <div class="final_account_id_error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.bank transfer method')]) }}</div>
                                            </div>
                                            <hr>
                                            <div class="form-group mb-3 col-md-4">
                                                <label for=""> {{__('messages.Subtotal')}}</label>
                                                <input name="subtotal" id="subtotal"
                                                       class="form-control"
                                                       step=".01"
                                                       type="text"
                                                       readonly min="0">
                                            </div>
                                            <div class="form-group mb-3 col-md-4">
                                                <label for=""> {{__('messages.Discount Type')}}</label>
                                                <select name="discount_type" id="discountType"
                                                        class=" form-control">
                                                    <option value="0"
                                                            selected>{{__('messages.Select an Option')}}</option>
                                                    <option value="fixed">{{__('messages.Fixed')}}</option>
                                                    <option value="percentage">{{__('messages.Percentage')}}</option>
                                                </select>
                                            </div>

                                            <div class="form-group mb-3 col-md-4">
                                                <label for=""> {{__('messages.Discount Amount')}}</label>
                                                <input name="discount_amount" id="discountAmount"
                                                       class="form-control"
                                                       step=".01"
                                                       type="number" disabled min="0">
                                            </div>
                                            <div class="form-group my-3 col-md-4">
                                                <label for=""> {{__('messages.Total price')}}</label>
                                                <input name="total_price" id="totalPrice"
                                                       class="form-control"
                                                       disabled
                                                       type="number">
                                                <input type="hidden" id="add-ajax-route"
                                                       value="{{ route('purchases.store') }}"/>
                                            </div>
                                            <div class="form-group my-3 col-md-12">
                                                <label for="note"> {{__('messages.Note')}}</label>
                                                <textarea id="note" name="note" class="form-control"
                                                          rows="5"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="tab-pane fade" id="pills-career" role="tabpanel"
                                     aria-labelledby="pills-profile-tab">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>{{__('File')}}</th>

                                        </tr>
                                        </thead>
                                        <tbody id="files">
                                        @foreach(json_decode($invoice->files ??'{}') as $file)

                                            <tr>
                                                <td>
                                                    <a href="{{asset($file->path)}}"
                                                       target="_blank">
                                                        <i class="fa fa-file"></i>
                                                    </a>
                                                </td>

                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="text-center">
                                <button id="addPurchase"
                                        class="btn btn-primary">{{__('messages.Save')}}</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
    <div class="spinner-layer d-none">
        <div class="spinner"></div>
        <p class="fs-3">{{__('messages.Processing')}}</p>
    </div>

@endsection

@section("scripts")
    <script>
        var translations = {'weight': "{{__('messages.meat weight')}}"};
    </script>
    <script src="{{asset('metronic/js/components/uploadFiles.js')}}"></script>
    <script>
        $(document).ready(function () {
            $("#serialNumber").val(Math.floor(Date.now() / 1000));
        });
        $(".price").on("input", function () {
            let id = $(this).attr("name").split("[")[1].split("]")[0];
            let price = $(this).val();
            let quantity = $("#itemTable").find(`input[name='quantity[${id}]']`).val();
            let totalPrice = parseFloat(price * quantity);
            $("#totalPrice" + id).text(totalPrice);
            updateSummation();
        });
        $("#discountAmount, #discountType").on("input", function () {
            updateSummation();
        });
        $("#discountType").on("change", function () {
            let discountType = $(this).val();
            if (discountType == "0") {
                $("#discountAmount").prop("disabled", true);
            } else {
                $("#discountAmount").prop("disabled", false);
            }
            updateSummation();
        });

        function updateSummation() {
            // Ensure discount amount is less than or equal to 100 if discount type is percentage
            if ($("#discountType").val() === "percentage") {
                let discountAmount = parseFloat($("#discountAmount").val());
                if (discountAmount > 100) {
                    $("#discountAmount").val(100);
                }
            }

            let totalPrice = 0;
            $(".price").each(function () {
                let id = $(this).attr("name").split("[")[1].split("]")[0];
                let price = parseFloat($(this).val()) || 0;
                let quantity = parseFloat($("#itemTable").find(`input[name='quantity[${id}]']`).val()) || 0;
                let totalPriceItem = price * quantity;
                totalPrice += totalPriceItem;
            });

            let priceShipping = parseFloat($("#priceShipping").val()) || 0;
            let customs = parseFloat($("#customs").val()) || 0;
            let clearance = parseFloat($("#clearance").val()) || 0;
            let tax = parseFloat($("#tax").val()) || 0;
            let workersExpenses = parseFloat($("#workersExpenses").val()) || 0;
            let subtotal = totalPrice;
            let total = priceShipping + customs + clearance + tax + workersExpenses;
            let discountAmount = parseFloat($("#discountAmount").val()) || 0;
            let discountType = $("#discountType").val();
            let totalPriceAfterDiscount = total;
            if (discountType === "fixed") {
                subtotal -= discountAmount;
            } else if (discountType === "percentage") {
                subtotal -= (parseFloat(subtotal) * (parseFloat(discountAmount) / 100));
            }
            // Ensure the total price after discount is not negative
            if (totalPriceAfterDiscount < 0) {
                totalPriceAfterDiscount = 0;
            }
            totalPriceAfterDiscount += parseFloat(subtotal);
            // Update the form values with formatted numbers
            $("#subtotal").val(subtotal.toFixed(2));
            $("#totalPrice").val(totalPriceAfterDiscount.toFixed(2));
        }

        $("#convert-form").submit(function (e) {
            e.preventDefault();
            $(".is-invalid").removeClass('is-invalid')
            $(".invalid-feedback").remove();
            let formData = $("#convert-form").serialize();
            $.ajax({
                url: $("#convert-form").attr("action"),
                type: "POST",
                data: formData,
                beforeSend: function () {
                    $(".spinner-layer").removeClass("d-none");
                },
                success: function (response) {
                    $(".spinner-layer").addClass("d-none");
                    if (response.status) {
                        Swal.fire({
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(() => {
                            window.location.href = response.redirect;
                        }, 1500);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                },
                error: function (xhr) {
                    $(".spinner-layer").addClass("d-none");
                    if (xhr.status == 421) {
                        $("#error-list").removeClass("d-none");
                        $("#error-list").text(xhr.responseJSON.error);
                    }
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function (key, value) {
                            $('[name="' + key + '"]').addClass('is-invalid');
                            $('[name="' + key + '"]').after('<div class="invalid-feedback">' + value + '</div>');

                            let newKey = key.replace('.', '[');
                            newKey = newKey.replace('.', '][') + ']';
                            $('[name="' + newKey + '"]').addClass('is-invalid');
                            $('[name="' + newKey + '"]').after('<div class="invalid-feedback">' + value + '</div>');
                        });
                    }
                }
            });
        });
        $(".related-item").on('input', function () {
            let purchase_item_id = $(this).data('purchase-item-id');
            let total = 0;
            // related item for the same purchase item id
            $(`.related-item-${purchase_item_id}`).each(function () {
                total += parseFloat($(this).val());
            });
            let damaged = $("#itemTable").find(`input[name='damaged[${purchase_item_id}]']`);
            let quantity = $("#itemTable").find(`input[name='quantity[${purchase_item_id}]']`);
            let total_quantity = $("#itemTable").find(`input[name='total_quantity[${purchase_item_id}]']`);
            damaged.removeClass('is-invalid');
            if (total > parseFloat($(`input[name='damaged[${purchase_item_id}]']`).data('default'))) {
                // add is-invalid to damaged class and add p with invalid-feedback after damaged
                damaged.addClass('is-invalid');
            } else {
                damaged.val(parseFloat(damaged.data('default')) - total)
                quantity.val(parseFloat(total_quantity.val()) - damaged.val());
                $(`.remaining-${purchase_item_id}`).text(parseFloat(total_quantity.val()) - damaged.val());
            }
        });

        $("#payment-method").on('change', function () {
            if ($(this).val() === 'bank-transfer') {
                $("#bank_transfer_method").parent().removeClass('d-none');
            } else {
                $("#bank_transfer_method").parent().addClass('d-none');
            }
        });
    </script>
@endsection