@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; */
        }

        .text-green {
            margin-top: 10px;

        }

        .text-green span {
            color: #8daf21;
            font-weight: bold;
        }

        .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);
            }
        }

        .CUSTOM-d-none {
            display: none
        }
    </style>
    <form method="POST" action="{{route('convert-sell-invoice-to-priced-invoice.store')}}" id="sale_without_price_form">
        @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> {{ __('messages.Sales invoice') }} {{__("Invoices Without Price")}}
                </h3>
            </div>

            <div class="container bg-white" id="AddCategoryModal">
                <div class="">
                    <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.Sales 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">{{__('messages.Add purchase 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">
                                            <input hidden="" id="item-total-weight" value="0"/>
                                            <div class="row">
                                                <input type="hidden"
                                                       id="get-available-quantities-or-meats-for-item"
                                                       value="{{ route('sales-without-price.check-quantities') }}"/>

                                                <div class="form-group mb-3 col-md-4">
                                                    <label class="required"
                                                           for=""> {{__('messages.Item')}}</label>
                                                    <select id="item"
                                                            class="select2  form-control">
                                                        <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Item')]) }}</option>
                                                        @foreach($items as $item)
                                                            <option value="{{$item->id}}"
                                                                    data-item-is-carton="{{$item->isCartonMeat()}}"
                                                                    data-item-is-meat="{{$item->isMeat()}}"
                                                                    data-item-category-id="{{$item->category_id}}">{{$item->name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="itemId-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Item')]) }}</div>
                                                </div>
                                                <div class="form-group mb-3 col-md-4">
                                                    <label class="required"
                                                           for=""> {{__('messages.Inventory')}}</label>
                                                    <select id="inventor_id"
                                                            class="select2 form-control">
                                                        <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Inventory')]) }}</option>
                                                        @foreach($inventories as $inventory)
                                                            <option value="{{$inventory->id}}">{{$inventory->name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="inventoryId-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Inventory')]) }}</div>
                                                </div>
                                                <div class="form-group mb-3 col-md-4">
                                                    <label class="required quantity_and_weight_label"
                                                           for="validationServer05">{{__('messages.Quantity')}}
                                                        <small class="text-muted"
                                                               id="automatic-count"></small></label>
                                                    <input name="quantity" id="quantity" type="number"
                                                           step="0.000"

                                                           class="form-control">
                                                    <div class="quantity-error d-none text-danger "
                                                         id="validationServer05">{{ __('validation.required', ['attribute' => __('messages.quantity')]) }}</div>
                                                    <div id="validationServer05Feedback"
                                                         class="invalid-feedback customQntText">
                                                        {{__('messages.quantity not exist')}}
                                                    </div>
                                                    <div class="text-center text-green d-none">
                                                        {{__("Available Quantities / Weights")}} :
                                                        <span id="available_quantities_or_meats">
                                                                      0
                                                                    </span>
                                                    </div>
                                                </div>

                                                <div class="col-md-12 text-danger d-none error-quantity-not-matching">
                                                    {{__('messages.The quantity of meat options should be equivalent to quantity of cartoon meat')}}
                                                </div>
                                                <div class="col-md-12 text-danger d-none error-quantity-meat"></div>
                                                <div id="carton-meat-area" class="col-md-12"></div>
                                                <div class=" mb-3 ps-0 row justify-content-between">
                                                    <button id="confirmItem" type="button"
                                                            class="btn btn-primary col-2"
                                                            disabled="disabled">{{__('messages.Confirm item')}}</button>

                                                </div>
                                                <div id="success_message"></div>
                                                <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 style="">{{__('messages.item weight')}}</th>
                                                        <th style="">{{__('messages.Action')}}</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="confirmedItems">
                                                    <tr class="row col d-none">
                                                        <td colspan="8"
                                                            class="text-center text-danger">{{ __('validation.size.array', ['attribute' => __('messages.Item'), 'size' => 1]) }}</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                                <div class="form-group mb-3 col-md-4">
                                                    <label class="required"
                                                           for=""> {{__('messages.Customer')}}</label>
                                                    <select id="customer" name="customer_id"
                                                            class="select2  form-control">
                                                        <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Customer')]) }}</option>
                                                        @foreach($customers as $customer)
                                                            <option value="{{$customer->id}}">{{$customer->name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="customerId-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.Customer')]) }}</div>
                                                </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 class="required"
                                                           for=""> {{__('messages.The maximum date for receiving the quantity')}}</label>
                                                    <input name="max_receiving_date" type="date"
                                                           id="max_receiving_date" required
                                                           class=" form-control">
                                                </div>
<!--                                                 <div class="form-group mb-3 col-md-12"> -->
<!--                                                     <label class="required" -->
<!--                                                            for=""> {{__('messages.Date')}}</label> -->
<!--                                                     <input type="datetime-local" name="date_time" -->
<!--                                                            id="date_time" required class=" form-control"> -->
<!--                                                     <div class="date_time-error d-none text-danger">{{ __('validation.required', ['attribute' => __('messages.date_time')]) }}</div> -->
<!--                                                 </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">

                                        <div class="containerDragDop">
                                            <div class="header-section" style="padding: 14px 0px;">
                                                <h1>{{__('messages.upload files')}}</h1>
                                                <p>{{__('messages.Upload files you want to share with your team members')}}</p>
                                                <p>{{__('messages.PDF, Images & Videos are allowed')}}</p>
                                                <p class="files-error d-none text-danger">{{__('messages.too_many_files')}}</p>
                                            </div>
                                            <div class="drop-section-customcss drop-section">
                                                <div class="col">
                                                    <div class="cloud-icon">
                                                        <img src="/metronic/images/iconsDragAndDrop/cloud.png"
                                                             alt="cloud">
                                                    </div>
                                                    <span>{{__('messages.Drag & Drop your files here')}}</span>
                                                    <span>{{__('messages.OR')}}</span>
                                                    <button class="file-selector">{{__('messages.Browse Files')}}</button>
                                                    <input name="files" type="file" id="FileList"
                                                           class="file-selector-input" multiple>
                                                </div>
                                                <div class="col">
                                                    <div class="drop-here">{{__('messages.Drop Here')}}</div>
                                                </div>
                                            </div>
                                            <div class="list-section-customcss list-section">
                                                <div class="list-title">{{__('messages.Uploaded Files')}}</div>
                                                <div class="list" id="FileList"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button
                                                class="btn btn-primary">{{__('messages.Save')}}</button>
                                    </div>
                                </div>
                            </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')}}",
            "item_weight": "{{__('messages.weight')}}",
            "quantity": "{{__('messages.Quantity')}}",
            "weightError": "{{ __('validation.required', ['attribute' => __('messages.meat weight')]) }}",
            "automatic": "{{ __('messages.automatic') }}",
            "shoulder_meat": "{{__('messages.Shoulder meat')}}",
            "thigh_meat": "{{__('messages.Thigh meat')}}",
            "Carton_veal": "{{__('messages.Carton veal')}}"
        };
    </script>
    <script src="{{asset('metronic/js/components/uploadFiles.js')}}"></script>
    <script>
        function resetForm() {
            $("#inventor_id").val(0).trigger('change');
            $("#quantity").val('');
            $("#carton-meat-area").html('');
        }

        $(".select2").select2();
        $("#inventor_id,#item").change(function () {
            $(".text-green").addClass("d-none");
            $("#available_quantities_or_meats").text(0);
            $("#quantity").val('');
            $("#quantity").removeAttr('disabled');
            $("#confirmItem").attr("disabled", "disabled");
            $("#carton-meat-area").html('');
            let is_meat = $("#item option:selected").data('item-is-meat');
            if (is_meat) {
                $(".quantity_and_weight_label").text(translations.weight);
            } else {
                $(".quantity_and_weight_label").text(translations.quantity);
            }
            $.ajax({
                url: $("#get-available-quantities-or-meats-for-item").val(),
                type: 'get',
                data: {
                    item_id: $("#item").val(),
                    inventory_id: $("#inventor_id").val(),
                },
                success: function (data) {
                    $("#quantity").removeAttr('disabled');
                    if (data.max_quantity != undefined) {
                        $("#quantity").data('max', data.max_quantity);
                        $(".text-green").removeClass("d-none");
                        $("#available_quantities_or_meats").text(data.max_quantity);
                        if (data.max_quantity == 0) {
                            $("#confirmItem").attr("disabled", "disabled");
                        } else {
                            $("#confirmItem").removeAttr("disabled");
                        }
                    } else if (data.items != undefined && data.items.length > 0) {
                        let total = 0;
                        $("#quantity").attr('disabled', 'disabled');
                        let result = '<div class="row p-3 rounded mt-4 mb-3" style="background: #e7e6e6">';
                        $.each(data.items, function (index, value) {
                            result += '<div class="form-group item-carton-item mb-3 col-md-4">' +
                                '<label class="required" for="">' + value.name + ' ( ' + value.total_weights + ' ) </label>' +
                                '<input data-item-name="'+value.name+'" data-id="' + value.id + '" data-value="' + value.total_weights + '" step="0.000" type="number" max="' + value.total_weights + '" name="' + value.name + '" id="' + value.name + '"  required class="form-control">' +
                                '<div class="' + value.name + '-error d-none text-danger ">' + translations.weightError + '</div>' +
                                '</div>';
                            total += value.total_weights;
                        });
                        result += '</div>';
                        $("#carton-meat-area").html(result);
                        $("#item-total-weight").val(total);
                    }
                },
                error: function (data) {

                }
            })
        });
        $(document).on('input', '.item-carton-item', function () {
            if ($(this).val() > $(this).data('value')) {
                $(this).addClass("is-invalid")
            }
            let total = 0;
            let confirm = true;
            $('.item-carton-item').each(function (index, value) {
                $(this).find('input').removeClass("is-invalid")
                if ($(this).find('input').val() > $(this).find('input').data('value')) {
                    $(this).find('input').addClass("is-invalid")
                    confirm = false;
                }
                total += parseFloat($(this).find('input').val() || 0);
            });
            $("#quantity").val(total);
            if (!confirm) {
                $("#confirmItem").attr("disabled", "disabled");
            } else {
                $("#confirmItem").removeAttr("disabled");
            }
        });
        $("#confirmItem").on('click', function () {
            let tableItem = ``;
            let index = $("#confirmedItems tr").length;
            // check if the item is meat in cartoon
            let related_items = ``;
            let item_is_meat = $("#item option:selected").data('data-item-is-meat');
            let item_is_meat_carton = $("#item option:selected").data('item-is-carton');
            if (item_is_meat_carton == 1) {
                $('.item-carton-item').each(function (sub_index, value) {
                    let input = $(this).find('input');
                    if(input.val() == 0){
                        return;
                    }
                    tableItem += `<tr id="item-tr-${index}">
                    <td>${$("#confirmedItems tr").length}</td>
                    <td>
                        ${input.data('item-name')}
                        <input type="hidden" name="items[${index}][id]" value="${input.data('id')}">
                    </td>
                    <td>
                        ${$("#inventor_id option:selected").text()}
                        <input type="hidden" name="items[${index}][inventory_id]" value="${$("#inventor_id").val()}">
                    </td>
                    <td>
                            ${item_is_meat_carton ? 0 : input.val()}
                        <input type="hidden" name="items[${index}][value]" value="${input.val()}">
                        </td>
                    <td>
                        ${item_is_meat_carton ? input.val() :0 }
                        <input type="hidden" name="items[${index}][value]" value="${input.val()}">
                       </td>
                    <td>
                        <button type="button" class="btn btn-danger delete-item" onclick="removeItem(${index})">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
            </tr>`;
                    // related_items += `<input type="hidden" value="${$(this).find('input').val()}" name="items[${index}][related_items][${$(this).find('input').data('id')}]"/>`
                    index++;
                });
            } else {
                 tableItem = `
                    <tr  id="item-tr-${index}">
                    <td>${$("#confirmedItems tr").length}</td>
                    <td>
                        ${$("#item option:selected").text()}
                        <input type="hidden" name="items[${index}][id]" value="${$("#item").val()}">
                    </td>
                    <td>
                        ${$("#inventor_id option:selected").text()}
                        <input type="hidden" name="items[${index}][inventory_id]" value="${$("#inventor_id").val()}">
                    </td>
                    <td>
                            ${item_is_meat ? 0 : $("#quantity").val()}
                        <input type="hidden" name="items[${index}][value]" value="${$("#quantity").val()}">
                        </td>
                    <td>
                        ${item_is_meat ? $("#quantity").val() : 0}
                        ${related_items || ''}
                       </td>
                    <td>
                        <button type="button" class="btn btn-danger delete-item" onclick="removeItem(${index})">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
            </tr>
            `;
            }

            $("#confirmItem").attr("disabled", "disabled");
            // reset the form
            $("#item").val(0).trigger('change');
            $("#inventor_id").val(0).trigger('change');
            $("#quantity").val('');
            $("#carton-meat-area").html('');

            $("#confirmedItems").append(tableItem);
        })

        $("#quantity").on('input', function () {
            if ($(this).val() == 0) {
                $(this).addClass("is-invalid")
                $("#confirmItem").attr("disabled", "disabled");
            } else if ($(this).val() > $(this).data('max')) {
                $(this).addClass("is-invalid")
                $("#confirmItem").attr("disabled", "disabled");
            } else {
                $(this).removeClass("is-invalid")
                $("#confirmItem").removeAttr("disabled");
            }
        })
        document.addEventListener('DOMContentLoaded', function () {
            var serialNumberInput = document.getElementById('serialNumber');
            if (serialNumberInput !== null) {
                var currentTimeStamp = Math.floor(Date.now() / 1000); // Get the current timestamp in seconds
                serialNumberInput.value = currentTimeStamp;
            }
        });
        function removeItem(index) {
            $(`#item-tr-${index}`).remove();
        }
        $("#sale_without_price_form").on('submit', function (e) {
            e.preventDefault();
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            let items = $("#confirmedItems tr").length;
            if (items == 0) {
                $("#confirmedItems tr").removeClass('d-none');
                return false;
            }
            let form = $(this);
            let formData = new FormData(form[0]);
            let files = document.getElementById('FileList').files;
            if (files.length > 0) {
                for (let i = 0; i < files.length; i++) {
                    formData.append('files[]', files[i]);
                }
            }
            $.ajax({
                url: form.attr('action'),
                type: 'post',
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    $(".spinner-layer").removeClass('d-none');
                },
                success: function (data) {
                    $(".spinner-layer").addClass('d-none');
                    if (data.status == 1) {
                        window.location.href = '/admin/sales-without-price';
                    }
                },
                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>');
                        });
                    }
                }
            })

        })
    </script>

@endsection