@extends("newDashboard.index")

@section("css")
    <link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
@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"/>
            <form method="POST" id="warehouse-inventory" action="{{route('warehouse-inventory')}}">
                <div class="d-flex justify-content-end rounded rounded-5 card mb-4 p-3">
                    <div class="">
                        <label>{{__("Date Of Stock Take")}}</label>
                        <input id="month" name="month" value="{{now()->format("Y-m")}}" class="form-control"
                               type="month">
                    </div>
                    <div class="mt-3">
                        <button class="btn btn-primary mb-4">{{__("Warehouse Stocktaking")}}</button>
                    </div>

                </div>
                @csrf
                <div class="table-responsive customscroll ">
                    <table class="table datatable text-center" id="table">
                        <thead>
                        <tr>
                            <th>{{__('messages.ID')}}</th>
                            <th>{{__('messages.Items')}}</th>
                            <th>{{__('Inventory Name')}}</th>
                            <th class="text-center">{{__('messages.quantity')}}</th>
                            <th class="text-center">{{__('messages.Current Quantity')}}</th>
                            <th class="text-center">{{__('messages.Difference')}}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </form>
        </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="acceptModal" tabindex="-1" aria-labelledby="acceptModalLabel" aria-hidden="true">
        <input type="hidden" id="acceptModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="acceptModalLabel">{{__('messages.Accept Order')}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>{{__('messages.Confirm Accept Order')}}</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                    <button type="button" class="btn btn-primary accept_order"
                            data-id=>{{__('messages.Accept')}}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- END DELETE MODAL --}}
@endsection

@section("scripts")
    <script>
        var translations = {
            'ID': '{{ __("messages.ID") }}',
            'Permit ID': '{{ __("messages.Permit ID") }}',
            'Warehouse Stocktaking': '{{ __("Warehouse Stocktaking") }}',
            'Status': '{{ __("messages.Status") }}',
            'Driver Name': '{{ __("messages.Driver Name") }}',
            'Rejected Orders': '{{ __("messages.Rejected Orders") }}',
            'Inventories Items': '{{ __("messages.Inventories Items") }}',
            'Are you sure?': '{{ __('Are you sure?') }}',
            "This action cannot be undone. Please note that this process is valid once a year and cannot be undone.": '{{ __("This action cannot be undone. Please note that this process is valid once a year and cannot be undone.") }}',
            'Yes, confirm it!': '{{ __("Yes, confirm it!") }}',
            'No, cancel!': '{{ __("No, cancel!") }}',

        };

        $("#warehouse-inventory").on('submit', function (e) {
            $(".is-invalid").removeClass('is-invalid');
            $(".invalid-feedback").remove();
            e.preventDefault();
            Swal.fire({
                title: translations['Are you sure?'],
                text: translations["This action cannot be undone. Please note that this process is valid once a year and cannot be undone."],
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: translations['Yes, confirm it!'],
                cancelButtonText: translations['No, cancel!']
            }).then((result) => {
                if (result.isConfirmed) {
                    let data = $(this).serialize();
                    let url = $(this).attr('action');
                    $.ajax({
                        url: url,
                        method: "POST",
                        data: data,
                        success: function (data) {
                            Swal.fire({
                                icon: 'success',
                                text: data.success,
                            });
                            window.location.reload()
                        },
                        error: function (xhr) {
                            if (xhr.status == 421) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    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>');
                                });
                            }
                        }
                    });
                }
            });


        })
        $("#month").on('change', function () {
            fetch();
        })

        function fetch() {
            jQuery(document).ready(function ($) {
                if ($.fn.DataTable.isDataTable('.datatable')) {
                    $('.datatable').DataTable().destroy();
                }
                var InventoriesItems = translations['Inventories Items'] || 'Inventories Items';
                var WarehouseInventory = translations['Warehouse Stocktaking'] || 'Warehouse Stocktaking';

                var currentUrl = window.location.href;
                var languageCode = currentUrl.includes("/en/") ? "en" : "ar";
                var languageURL = languageCode === "en" ?
                    "https://stage-alneam.ncitsolutions.com/metronic/js/English.json" :
                    "https://stage-alneam.ncitsolutions.com/metronic/js/Arabic.json";

                pdfMake.fonts = {
                    Arial: {
                        normal: 'Arial.ttf',
                        bold: 'Arial.ttf'
                    }
                };

                $('.datatable').DataTable({
                    language: {
                        url: languageURL,
                    },
                    "columnDefs": [
                        {"className": "dt-center", "targets": "_all"}
                    ],
                    buttons: {
                        print: languageCode === "ar" ? "طباعة" : "Print",
                    },
                    dom: "<''<\"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr\"lfB>'" +
                        "+\n" +
                        "'t'+\n" +
                        '\'<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>>',
                    pageLength: 10,
                    ordering: false, // Disable sorting
                    buttons: [
                        {
                            extend: 'csv',
                            text: 'CSV',
                            exportOptions: {
                                columns: ':visible',
                                modifier: {
                                    order: 'index'
                                },
                            },
                            charset: 'UTF-8',
                            bom: true
                        },
                        {
                            extend: 'print',
                            exportOptions: {
                                modifier: {
                                    order: 'index'
                                },
                            },
                            header: true,
                            customize: function (win) {
                                $(win.document.head).append('<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">');
                                $(win.document.head).append('<style>@media print { .responsive-text { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; white-space: pre-wrap; } }</style>');

                                var customHeader = '<div style="text-align: center; font-size: 18px; margin-bottom: 20px;">' +
                                    '<img src="/dashboard/images/logo/logo.png" alt="Your Image" style="max-width: 100px; max-height: 100px; margin-bottom: 20px;"><br>' +
                                    WarehouseInventory +
                                    '</div>'
                                    + `<div class="mt-4 text-center">
                      ${$("#month").val()}
                </div>`;

                                $(win.document.body).find('h1').html(customHeader);
                                $(win.document.body).find('table').addClass('table-bordered text-center');
                            }
                        },
                        {
                            text: getRestButtonText(),
                            className: 'print-all-data-button',
                            action: function () {
                                resrtData();
                            }
                        },
                    ],
                    columns: [
                        {data: 'item_id'},
                        {data: 'item_name'},
                        {data: 'inventory_names'},
                        {
                            data: null, render: function (data) {
                                return `<input type="number" class="form-input origin-input" readonly id="origin_${data.inventory_item_id}" value="${ data.total_received_quantity}"><span style="display: none">${data.total_received_quantity}</span>`;
                            }
                        },
                        {
                            data: null, render: function (data) {
                                return `<input type="number" min="0" class="form-input diff-input" value="${data.current_value}" name="current-qty[${data.inventory_item_id}]" data-id="${data.inventory_item_id}"><span style="display: none">${data.current_value != 0 ? data.current_value : data.total_received_quantity}</span>`;
                            }
                        },
                        {
                            data: null, render: function (data) {
                                return `<input type="number" value="${data.deficit_value}" class="form-input diff-item-${data.inventory_item_id}" disabled><span style="display: none">${data.deficit_value}</span>`;
                            }
                        }
                    ],
                    serverSide: true,
                    ajax: {
                        url: "/admin/inventory/get-inventories-items-data",
                        data: function (d) {
                            d.month = $("#month").val()
                        }
                    },
                    "pageLength": -1, // Show all items by default
                    "lengthMenu": [[-1], ["All"]], // Option to show all
                });


                $('<style>')
                    .prop('type', 'text/css')
                    .html('@media print { .print{display:block} html{direction:rtl} .datatable td { white-space: normal !important; } }')
                    .appendTo('head');


//	     // Function to get the text dynamically based on the language code
//	        function getPrintAllDataButtonText() {
//	            var languageCode = currentUrl.includes("/en/") ? "en" : "ar";
//	            return languageCode === "ar" ? "طباعة جميع البيانات" : "Print All Data";
//	        }
                $(document).on('input | keydown', '.diff-input', function (ele) {
                    var value = parseFloat($(this).val());
                    var id = $(this).data('id');
                    var original_val = parseFloat($('#origin_' + id).val());
                    var diff_value = 0;
                    if (value < 1) {
                        value = 0
                    }
                    // if (value > original_val) {
                    //     console.log(value);
                    //     console.log(original_val)
                    //     $(this).val(original_val);
                    //     value = original_val;
                    // }

                    diff_value = original_val - value;

                    $('.diff-item-' + id).val(diff_value);
                    $(`.diff-item-${id} + span`).html(diff_value);
                })
            });
        }

        function getRestButtonText() {
            var currentUrl = window.location.href;
            var languageCode = currentUrl.includes("/en/") ? "en" : "ar";
            return languageCode === "ar" ? "اعادة ضبط" : "Rest Data";
        }

        function resrtData() {
            $("#start_date").val('');
            $("#end_date").val('');
            $("#table_filter").val('');
            $("#customersFilter").val("0").trigger('change');
            $("#config-demo").val('');
            fetch();
        }

        fetch();


    </script>

@endsection