@extends("newDashboard.index")

@section("css")
    <link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
    <style>
        .select2-container--open .select2-dropdown {
            z-index: 2000; /* Adjust as needed */
        }
    </style>
@endsection

@section("main-content")
    <div class="content-wrapper">
        <div class="page-header">
            <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> {{__('messages.Inventories Items')}}
            </h3>
        </div>
        <div class="row">
            <div id="success_message"></div>

            <input type="hidden" id="view-ajax-route" value="{{ route('inventories.rejected.order.details') }}"/>
            <input type="hidden" id="accept-ajax-route" value="{{ route('inventories.rejected.order.accept') }}"/>
            <input type="hidden" id="accept-id-input"/>

            <div class="table-responsive customscroll ">
                <table class="table datatable text-center" id="table">
                    <thead>
                    <tr>
                        <th>{{__('messages.ID')}}</th>
                        <th>{{__('messages.Items')}}</th>
                        <th>{{__('messages.Inventories')}}</th>
                        <th>{{__('messages.Users')}}</th>
                        <th class="text-center">{{__('messages.quantity')}}</th>
                        <th>{{__('messages.Avarage Price')}}</th>
                        <th>{{__('messages.Total Price')}}</th>
                        <th>{{__('messages.Action')}}</th>

                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ------------- MODALS ----------------- --}}

    {{-- View Modal --}}
    <div class="modal fade" id="ViewOrderModal" tabindex="-1" aria-labelledby="ViewOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ViewOrderModalLabel">{{__('messages.Rejected Reason')}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">
                    <div class="form-group">
                        <label for="rejected-reason">{{__("Rejected Reason")}}</label>
                        <textarea class="form-control" id="rejected-reason" rows="3" disabled></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- View Modal End--}}

    {{-- START ACCEPT MODAL --}}
    <div class="modal fade" id="transportInventory" aria-labelledby="transportInventoryLabel"
         aria-hidden="true">

        <form action="{{route('transport-item-from-inventory-to-other-split')}}" method="POST"
              id="transport-inventory">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">


                    <div class="modal-header">
                        <h5 class="modal-title" id="acceptModalLabel">{{__('messages.Transport Inventory Item')}}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                {{__("messages.Item Name")}} : <strong id="item-name"></strong>
                            </div>
                            <input hidden="" id="inventory_id" name="inventory_id">
                            <input hidden="" id="item_id" name="item_id">
                            <div class="col-md-6">
                                <label>{{__("messages.Current Inventory")}}</label>
                                <input class="form-control" disabled id="inventory-name">
                            </div>
                            <div class="col-md-6">
                                <label>{{__("messages.To Inventory")}}</label>
                                <select class="select2  form-control" id="new-inventory" name="new_inventory">
                                    <option>{{__("messages.Select Inventory")}}</option>
                                    @foreach($inventories as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mt-4 d-none " id="single-item">
                            <div class="col-md-4">
                                <label>{{__("messages.Available Quantity")}}</label>
                                <input class="form-control" disabled id="available_quantity">
                            </div>
                            <div class="col-md-4">
                                <label>{{__("messages.Quantity To Be Transferred")}}</label>
                                <input min="0" step="0.01"  type="number" name="transferred_quantity" class="form-control"
                                       id="transferred_quantity">
                            </div>
                            <div class="col-md-4">
                                <label>{{__("messages.Remaining quantity")}}</label>
                                <input min="0" type="number" disabled class="form-control" id="remaining_quantity">
                            </div>
                        </div>
                        <div id="multiple-items">

                        </div>
                        <br>
                            <div class="col-md-6">
                                <label>{{__("messages.To")}} {{__("messages.Item Name")}}</label>
                                <select class="select2  form-control" id="new-item" name="new_item">
                                    <option>{{__("messages.Select Item")}}</option>
                                    @foreach($items as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                        <button type="submit" class="btn btn-primary accept_order"
                                data-id=>{{__('messages.Accept')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <input type="hidden" value="{{route("get-item-information-for-transport-to-other-inventory-split")}}"
           id="getItemInformationForTransportToOtherInventory">
    <input type="hidden" value="{{route("transport-item-from-inventory-to-other-split")}}"
           id="transport-single-item-route">
    <input type="hidden" value="{{route("transport-items-from-inventory-to-other-split")}}"
           id="transport-multiple-items-route">
    <input type="hidden" id="category_id">


    {{-- END DELETE MODAL --}}
@endsection

@section("scripts")
    <script>
        var translations = {
            'ID': '{{ __("messages.ID") }}',
            'Permit ID': '{{ __("messages.Permit ID") }}',
            'Status': '{{ __("messages.Status") }}',
            'Driver Name': '{{ __("messages.Driver Name") }}',
            'Rejected Orders': '{{ __("messages.Rejected Orders") }}',
            'Inventories Items': '{{ __("messages.Inventories Items") }}',
            'Available Quantity': '{{ __("messages.Available Quantity") }}',
            'Available Weight': '{{ __("messages.Available Weight") }}',
            'Quantity To Be Transferred': '{{ __("messages.Quantity To Be Transferred") }}',
            'Weight To Be Transferred': '{{ __("messages.Weight To Be Transferred") }}',
            'Remaining quantity': '{{ __("messages.Remaining quantity") }}',
            'Remaining Weight': '{{ __("messages.Remaining Weight") }}',
        };
    </script>
    <script src="{{asset('metronic/js/pages/InventoriesItems-split.js?v=').uniqId()}}"></script>
    <script>
        $(document).on('click', '.transport-button', function () {
            let itemData = $(this);
            $("#item_id").val(itemData.data('item_id'))
            $("#category_id").val(itemData.data('category_id'))
            $("#inventory_id").val(itemData.data('inventory_id'))
            $("#single-item").addClass("d-none");
            $("#multiple-items").html('');
            $.ajax({
                url: $("#getItemInformationForTransportToOtherInventory").val(),
                type: "POST",
                data: {
                    item_id: $("#item_id").val(),
                    inventory_id: $("#inventory_id").val(),
                    _token: $("meta[name='csrf-token']").attr('content')
                },
                success: function (response) {
                    $("#inventory-name").val(itemData.data('inventory_name'));
                    $("#available_quantity").val(itemData.data('qty'));
                    $("#item-name").text(itemData.data('name'));

                    if (response.is_one_item) {
                        $("#transferred_quantity").attr('maxlength', itemData.data('qty'))
                        $("#transport-inventory").attr('action', $("#transport-single-item-route").val())
                    $("#single-item").removeClass("d-none");
                    }
                    else if (response.is_multiple_items) {
                        $("#transport-inventory").attr('action', $("#transport-multiple-items-route").val())

                        let result = '';
                        for (let i = 0; i < response.items.length; i++) {
                            let item = response.items[i];
                            result += `
                                <div class="row mt-4">
                                <div class="col-12 mb-4">
                                    اسم الصنف : <strong> ${item.name}</strong>
                                </div>
                                <div class="col-md-4">

                                    <div class="row">
                                        <div class="col-md-12">
                                            <label>
                                            ${translations['Available Quantity']}
                                            </label>
                                            <input disabled min="0" id="available_quantity_${item.item_id}"
                                            type="number" name="available_quantity[${item.item_id}]"
                                                   class="form-control" value="${item.total_quantity}">
                                        </div>
                                        <div class="col-md-12">
                                            <label>      ${translations['Available Weight']}</label>
                                            <input  disabled   min="0" type="number"
                                             id="available_weight_${item.item_id}" name="available_weight[${item.item_id}]"
                                                   class="form-control"  value="${item.total_meet}"
                                               >
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">

                                    <div class="row">
                                        <div class="col-md-12 ">
                                            <label>${translations['Quantity To Be Transferred']}</label>
                                            <input  oninput="changeQuantityMultipleLine(${item.item_id})" min="0" type="number" id="transferred_quantity_${item.item_id}" name="transferred_quantity[${item.item_id}]"
                                                   class="form-control"
                                                   id="transferred_quantity">
                                        </div>
                                        <div class="col-md-12">
                                            <label>${translations['Weight To Be Transferred']}</label>
                                            <input  oninput="changeWeightMultipleLine(${item.item_id})" min="0" type="number" id="transferred_weight_${item.item_id}" name="transferred_weight[${item.item_id}]"
                                                   class="form-control"
                                                   id="transferred_quantity">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">

                                    <div class="row">
                                        <div class="col-md-12">
                                            <label>${translations['Remaining quantity']}</label>
                                            <input min="0" type="number" name="transferred_quantity"
                                                   disabled  class="form-control"
                                                   id="remaining_quantity_${item.item_id}">
                                        </div>
                                        <div class="col-md-12">

                                            <label>${translations['Remaining Weight']}</label>
                                            <input disabled min="0" type="number"
                                                   class="form-control"
                                                   id="remaining_weight_${item.item_id}">
                                        </div>
                                    </div>
                                </div>
                            </div>
        `
                        }
                        $("#multiple-items").html(result);
                    }
                    $("#transportInventory").modal('show');
                },
                error: function () {

                },
            });
        })
        $(".select2").select2();
        $("#transferred_quantity").on("input", function () {
            var category_id = $("#category_id").val();
            console.log(category_id);

            var checkCategory = $("#item_categoryid").val();
            var inputValue = $(this).val();
            var availableQuantity = parseFloat($("#available_quantity").val());
            if(category_id == 11){
                if (parseFloat($(this).val()) < 0) {
                    $(this).val(0)
                }
                if (parseFloat($(this).val()) > parseFloat($("#available_quantity").val())) {
                    $(this).val($("#available_quantity").val())
                }
                $("#remaining_quantity").val(parseFloat($("#available_quantity").val()) - parseFloat($(this).val()))
                
            }else{

                console.log('ff', checkCategory);
                inputValue = parseInt(inputValue, 10);
                if (isNaN(inputValue) || inputValue < 0) {
                    inputValue = 0;
                } else if (inputValue > availableQuantity) {
                    inputValue = availableQuantity;
                }
                $(this).val(inputValue);
                $("#remaining_quantity").val(parseInt(availableQuantity, 10) - inputValue);
            }
        })
        
        $('#transportInventory').on('hidden.bs.modal', function () {
            $('#transferred_quantity').val(0);
            $('#remaining_quantity').val(0);
            
        });
        
        $("#transport-inventory").on('submit', function (e) {
            e.preventDefault();
            $(".is-invalid").removeClass('is-invalid');
            $(".invalid-feedback").remove();
            let formData = $(this).serialize();
            let url = $(this).attr('action');
            $.ajax({
                url: url,
                data: formData,
                type: "POST",
                success: function (response) {
                    if (response.message) {
                        $("#transportInventory").modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: response.message,
                        })
                        $("#transport-inventory")[0].reset();
                        window.location.reload();
                    }
                },
                error: function (xhr) {

                    if (xhr.status === 421) {
                        Swal.fire({

                            text: xhr.responseJSON.message,
                            icon: "error",
                            buttons: true,
                            dangerMode: true,
                        })
                    }
                    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('.', '[') + ']'
                            console.log(newKey);
                            $('[name="' + newKey + '"]').addClass('is-invalid');
                            $('[name="' + newKey + '"]').after('<div class="invalid-feedback">' + value + '</div>');


                        });
                    }
                }
            });
        })

        function changeWeightMultipleLine(id) {
            let available_weight = parseFloat($(`#available_weight_${id}`).val());
            let transferred_weight = parseFloat($(`#transferred_weight_${id}`).val());
            if (transferred_weight < 0) {
                $(`#transferred_weight_${id}`).val(0)
                $(`#remaining_weight_${id}`).val(available_weight)
            } else if (transferred_weight > available_weight) {
                $(`#transferred_weight_${id}`).val(available_weight)
                $(`#remaining_weight_${id}`).val(0)
            } else {
                $(`#remaining_weight_${id}`).val(parseFloat(available_weight - transferred_weight))
            }
        }

        function changeQuantityMultipleLine(id) {
            let available_quantity = parseFloat($(`#available_quantity_${id}`).val());
            let transferred_quantity = parseFloat($(`#transferred_quantity_${id}`).val());
            if (transferred_quantity < 0) {
                $(`#transferred_quantity_${id}`).val(0)
                $(`#remaining_quantity_${id}`).val(available_quantity)
            } else if (transferred_quantity > available_quantity) {
                $(`#transferred_quantity_${id}`).val(available_quantity)
                $(`#remaining_quantity_${id}`).val(0)
            } else {
                $(`#remaining_quantity_${id}`).val(parseFloat(available_quantity - transferred_quantity))
            }

        }
    </script>
@endsection