@extends('operations.layout.mainlayout')

@section('content')
    {{--@if(session('role') != 4 && session('role') != 2 && session('role') != 5 && session('role') != 9 && session('role') != 1)
        {{exit("<h1>Unauthorized access</h1>")}}
    @endif--}}
    <style>
        .dataTable > thead > tr > th[class*="sort"]:before,
        .dataTable > thead > tr > th[class*="sort"]:after {
            content: "" !important;
        }


        table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
            border: 1px solid #ddd !important;
        }

        table.dataTable tbody th, table.dataTable tbody td {
            padding: 4px 7px;
        }

        #warehouse-items-table tr td {
            height: 10px !important;
        }

        .table > tfoot > tr > th {
            background-color: #f5f5f5;
        }

        .table > tfoot > tr {
            border: 1px solid #ddd;;
        }

        .table thead th {
            padding: 5px 5px;
        }

        .input-group-addon:first-child {
            border-right: 0;
            padding-left: 10px;
            padding-right: 10px;
        }

        .well {
            border: 1px solid #ddd;
            background-color: #f6f6f6;
            box-shadow: none;
            padding: 9px;
            border-radius: 3px;
        }

        .well-sm {
            min-height: 20px;
        }

        .panel {
            margin-bottom: 15px;
            border-radius: 0;
            box-shadow: none;
            background-color: #fff;
            border: 1px solid transparent;
        }

        .panel-warning > .panel-heading {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .panel-warning {
            border-color: #faebcc;
        }

        .panel-body {
            padding: 5px;
        }

        .panel-heading {
            border-radius: 0;
            font-weight: 700;
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
        }

        .introtext {
            background: #f9f9f9;
            margin: -20px -20px 20px;
            padding: 10px;
            border-bottom: 1px solid #dbdee0;
        }

        #description {
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
        }

        .red-star {
            color: red;
        }

        #infowindow-content .title {
            font-weight: bold;
        }

        #infowindow-content {
            display: none;
        }

        #map #infowindow-content {
            display: inline;
        }

        .pac-card {
            margin: 10px 10px 0 0;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            font-family: Roboto;
        }

        #pac-container {
            padding-bottom: 12px;
            margin-right: 12px;
        }

        .pac-controls {
            display: inline-block;
            padding: 5px 11px;
        }

        .pac-controls label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 400px;
        }

        #pac-input:focus {
            border-color: #4d90fe;
        }

        #title {
            color: #fff;
            background-color: #4d90fe;
            font-size: 25px;
            font-weight: 500;
            padding: 6px 12px;
        }

        #target {
            width: 345px;
        }

        .pac-container {
            z-index: 10000 !important;
        }

        .wizard > .content > .body {
            position: relative !important;
        }
    </style>
    <style>
        .cards tbody tr {
            float: left;
            width: 19rem;
            margin: 0.5rem;
            border: 0.0625rem solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
        }

        .cards tbody td {
            display: block;
        }

        .cards thead {
            display: none;
        }

        .cards td:before {
            content: attr(data-label);
            position: relative;
            float: left;
            color: #808080;
            min-width: 4rem;
            margin-left: 0;
            margin-right: 1rem;
            text-align: left;
        }

        tr.selected td:before {
            color: #CCC;
        }

        .table .avatar {
            width: 50px;
        }

        .cards .avatar {
            width: 110px;
            margin: 15px;
        }

        #booking-users-table td {
            padding-bottom: 0;
        }

        #booking-users-table td:last-child {
            padding-bottom: 10px;
        }

        .buttons-csv {
            display: none !important;
        }

        .sw-theme-dots > .nav .nav-link.done {
            color: #e35a80;
            cursor: pointer;
        }

        .sw-theme-dots > .nav .nav-link.done::after {
            background-color: #e35a80;
        }

        .modal-title {
            width: 90%;
        }

        blinkid-in-browser {
            /* Customization of UI - see variables in src/components/shared/styles/_globals.scss */
            /* --mb-component-background: red; */
        }

        td.details-control {
            background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
            cursor: pointer;
            width: 18px;
        }

        tr.shown td.details-control {
            background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
        }

        .table-hover tbody tr:hover {
            color: unset;
            background-color: unset;
        }

        .disabled {
            pointer-events: none;
        }
    </style>
    <style>
        #transfer_submit.processing {
            background-color: #6c757d;
            cursor: progress;
            min-width: 150px;
            transition: none !important;
            will-change: contents;
            contain: content;
        }
        
        #transfer_submit:disabled {
            opacity: 0.7;
        }

        #transfer_submit {
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
        }
    </style>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        @if($consumable)
                            <h1 class="m-0 text-dark" style="color: #e35a80!important;">Consumable Items</h1>
                        @elseif($returns)
                            <h1 class="m-0 text-dark" style="color: #e35a80!important;">Returns Items</h1>
                        @else
                            <h1 class="m-0 text-dark" style="color: #e35a80!important;">Transfer Items</h1>
                        @endif

                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">

                        <!-- /.card -->

                        <div class="card">
                            <div class="card-header">
                                @if($consumable)
                                    <h4 style="color: #e35a80"><img
                                                style="filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(295deg) brightness(95%) contrast(80%);"
                                                src="/images/consumable.png" width="50" alt=""> &nbsp; Add Consumables
                                    </h4>
                                @elseif($disposable)
                                    <h4 style="color: #e35a80"><img
                                                style="filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(295deg) brightness(95%) contrast(80%);"
                                                src="/images/consumable.png" width="50" alt=""> &nbsp; Add Disposable
                                    </h4>
                                @elseif($returns)
                                    <h4 style="color: #e35a80"><img
                                                style="filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(295deg) brightness(95%) contrast(80%);"
                                                src="/images/consumable.png" width="50" alt=""> &nbsp; Add Returns
                                    </h4>
                                @else
                                    <h4 style="color: #e35a80"><i class="fa-fw fa fa-plus"></i>Add Transfers</h4>
                                @endif
                            </div>

                            <div class="card-body">
                                <p class="introtext">Please fill in the information below. The field labels marked with
                                    <span class="red-star">*</span> are required input fields.</p>
                                <button style="display:none;" id="loading" class="btn btn-primary float-right"
                                        type="button" disabled>
                                    <span class="spinner-border spinner-border-sm" role="status"
                                          aria-hidden="true"></span>
                                    Loading...
                                </button>
                                <br/>
                                @if(!empty($error))
                                    <div class="alert alert-danger" role="alert">
                                        {{$error}}
                                    </div>
                                @endif

                                <div class="row form-group">
                                    <div class="col-md-6">
                                        <label for="po_date">Date <span class="red-star">*</span></label>
                                        <input style="padding:15px" class="form-control" disabled type="date"
                                               id="transfer_date"
                                               name="transfer_date">
                                    </div>

                                </div>
                                <div class="row form-group">
                                    <div @if($returns) class="col-md-12" @else class="col-md-6" @endif  >
                                        <label for="reference_no">From Location <span class="red-star">*</span></label>
                                        <select name="from_location" id="from_location">
                                            <option value="" disabled selected>Select from location</option>
                                            @if($disposable)
                                                @foreach($consumableLocations as $location)
                                                    <option value="{{ $location->id }}">{{ $location->text }}</option>
                                                @endforeach
                                            @else
                                                @foreach($storableLocations as $location)
                                                    <option value="{{ $location->id }}">{{ $location->text }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-md-6" @if($returns) style="display: none" @endif >
                                        <label for="reference_no">To Location <span class="red-star">*</span></label>
                                        <select name="to_location" disabled id="to_location">
                                            <option value="" disabled selected>Select to location</option>
                                            @if($consumable)
                                                @foreach($consumableLocations as $location)
                                                    <option value="{{ $location->id }}">{{ $location->text }}</option>
                                                @endforeach
                                            @elseif($disposable)
                                                @foreach($disposableLocations as $location)
                                                    <option value="{{ $location->id }}">{{ $location->text }}</option>
                                                @endforeach
                                            @elseif($returns)
                                                @foreach($returnLocation as $location)
                                                    <option value="{{ $location->id }}" selected>{{ $location->text }}</option>
                                                @endforeach
                                            @else
                                                @foreach($storableLocations as $location)
                                                    <option value="{{ $location->id }}">{{ $location->text }}</option>
                                                @endforeach
                                            @endif

                                        </select>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel panel-warning">
                                            <div class="panel-heading" style="text-align: center">Add items to
                                                transfer
                                            </div>
                                            <div class="panel-body" style="padding: 5px; text-align: -webkit-center;">
                                                <div class="col-md-4 form-group pt-2">
                                                    <button class="btn btn-info disabled" style="width: 50%;"
                                                            id="add_items_btn"><i class="fa fa-plus-circle"></i> | Add
                                                        Items
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 form-group">
                                    <div class="control-group table-group">
                                        <label class="table-label">Transfer Items</label>
                                        <div class="controls table-controls">
                                            <table id="warehouse-items-transfer-table"
                                                   class="table items table-striped table-bordered table-condensed table-hover sortable_table">
                                                {{-- <thead>
                                                 <tr>
                                                     <th>Item (ID)</th>
                                                     <th>Item (Code - Name)</th>
                                                     <th>Net Unit Cost</th>
                                                     <th>Quantity</th>
                                                     <th>Product Tax</th>
                                                     <th>Subtotal (<span class="currency">SAR</span>)</th>
                                                     <th></th>
                                                 </tr>
                                                 </thead>
                                                 <tfoot id="poItemsFooter" style="display: none">
                                                 <tr>
                                                     <th>Total</th>
                                                     <th></th>
                                                     <th>Net Unit Cost</th>
                                                     <th>Quantity</th>
                                                     <th>Product Tax</th>
                                                     <th>Subtotal (<span class="currency">SAR</span>)</th>
                                                     <th></th>
                                                 </tr>
                                                 </tfoot>--}}
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 form-group text-center">
                                    <form action="/operations/warehouse/transfer" id="transfer-form" method="POST">
                                        <input type="submit" 
                                               style="width: 20%; font-weight: bold;" 
                                               class="btn btn-info" 
                                               value="Submit" 
                                               id="transfer_submit">
                                    </form>
                                </div>

                            </div>


                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <div class="col-md-1"></div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <div class="modal fade" id="modal-add-items">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Items</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-member" role="alert"
                                 style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <table id="transfer-items-table" class="table table-bordered table-striped"></table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button"
                            class="btn btn-default" data-dismiss="modal"
                            id="tests-cancel">{{trans("web.cancel")}}</button>
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;font-color: white !important;"
                            id="continue" type="button" class="btn btn-info">Continue
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection

@section('warehouse_scripts')

    <script>

        $(document).ready(function () {

            var today = new Date().toISOString().split('T')[0];
            $("#transfer_date").val(today);

            $('#from_location').select2();
            $('#to_location').select2();

            $('#from_location').on('change', function (e) {
                if ($(this).val() === $('#to_location').val()) {
                    alert('Please select different warehouse');
                    $(this).val("").trigger("change");
                    return;
                }
                $('#to_location').removeAttr('disabled');
                @if($returns)
                $('#add_items_btn').removeClass('disabled');
                @endif
            })

            $('#to_location').on('change', function (e) {
                if ($(this).val() === $('#from_location').val()) {
                    alert('Please select different warehouse');
                    $(this).val("").trigger("change");
                    return;
                }
                $('#add_items_btn').removeClass('disabled');
            })

            $('#add_items_btn').on('click', function (e) {
                itemsArray = [];
                e.preventDefault();

                itemsDatatable();
                $('#modal-add-items').modal('show');
            })
            let itemsArray = [];
            let itemsToTransferArray = [];
            let itemsSelectedArray = [];

            function itemsDatatable() {
                let from_location = $('#from_location').val();
                $("#transfer-items-table").DataTable({
                    "responsive": true,
                    "autoWidth": false,
                    "searching": true,
                    "paging": true,
                    destroy: true,
                    "bInfo": true,
                    "lengthChange": false,
                    serverSide: true,
                    "processing": true,
                    ajax: {
                        url: '/operations/warehouse/items-transfer-table',
                        data: {
                            from_location: from_location
                        },
                        dataSrc: function (json) {
                            var rows = [];
                            for (var i = 0; i < json.data.length; i++) {
                                if (json.data[i].TOTAL_QTY > 0)
                                    rows.push(json.data[i]);
                            }
                            return rows;
                        },
                    },
                    columns: [
                        {data: "DT_RowIndex", name: "ID", title: "Raw #"},
                        {data: "ITEM.NAME_EN", title: "Item"},
                        {data: "TOTAL_QTY", title: "Quantity", orderable: false, searchable: false},
                        {data: "ID", name: "ID"}
                    ],
                    "rowCallback": function (row, data) {
                        const index = itemsArray.indexOf(data["ID"]);
                        if (index > -1) {
                            $('td:eq(3)', row).html('<a style="color:white !important;" class="add-transfer-item form-control btn btn-danger" item-id="' + data['ITEM']['ID'] + '">Remove</a>');
                        } else {
                            if (data['TOTAL_QTY'] !== 0)
                                $('td:eq(3)', row).html('<a style="color:white !important;" class="add-transfer-item form-control btn btn-info" item-id="' + data['ITEM']['ID'] + '">Add Item</a>');
                            else $('td:eq(3)', row).html('');
                        }
                    }
                });
            }

            $("body").on("click", ".add-transfer-item", function () {

                if ($(this).hasClass("btn-info")) {
                    itemsArray.push($(this).attr("item-id"));
                    $(this).removeClass("btn-info");
                    $(this).addClass("btn-danger");
                    $(this).html("Remove");
                    $("#add-new-person-contract").prop("disabled", false);
                } else if ($(this).hasClass("btn-danger")) {
                    const index = itemsArray.indexOf($(this).attr("item-id"));
                    if (index > -1) {
                        itemsArray.splice(index, 1);
                    }
                    $(this).removeClass("btn-danger");
                    $(this).addClass("btn-info");
                    $(this).html("Add Item");
                }
                return false;
            });

            $(document).on('click', '#continue', function (e) {

                itemsToTransferArray = [];
                itemsSelectedArray = [];
                if ($.fn.DataTable.isDataTable('#warehouse-items-transfer-table')) {
                    $("#warehouse-items-transfer-table").DataTable().clear().destroy();
                    $('#warehouse-items-transfer-table').empty();
                }

                e.preventDefault();
                itemsToTransferTable();
                $('#transfer_submit').removeClass('disabled').css('display', 'initial');
                $('#modal-add-items').modal('hide');
            })

            //itemsToTransferTable();

            function itemsToTransferTable() {

                let from_location = $('#from_location').val();
                let to_location = $('#to_location').val();

                var table = $("#warehouse-items-transfer-table");

                table.DataTable({
                    "responsive": true,
                    "autoWidth": false,
                    destroy: true,
                    "searching": false,
                    "paging": false,
                    sorting: false,
                    "bInfo": false,
                    serverSide: true,
                    cache: false,
                    "processing": true,
                    ajax: {
                        url: '/operations/warehouse/items-to-transfer-table',
                        data: {
                            from_location: from_location,
                            items: itemsArray
                            //from_location: 25,
                            //items: ['7', '4', '6']
                        }
                    },
                    columns: [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "searchable": false,
                            "data": null,
                            "defaultContent": ''
                        },
                        {data: "DT_RowIndex", title: "Row #",},
                        {data: "ITEM.NAME_EN", title: "Item (Name)"},
                        {data: "TOTAL_QTY", title: "QTY"},
                        {data: "TRANSFER_QTY", title: @if($returns) "Return (QTY)" @else "Transfer (QTY)" @endif, sortable: false, searchable: false},
                        {
                            title: 'Action', sortable: false, width: "5%", "mRender": function (data, type, row) {
                                return '<i style="cursor: pointer;" item-id="' + row.ITEM_ID + '" class="remove-item-cart fa fa-times"></i>'
                            }
                        }
                    ],
                    "fnCreatedRow": function (nRow, aData, iDataIndex) {
                        $(nRow).attr('id', aData['ITEM_ID']);
                    },
                    "rowCallback": function (row, data) {
                        if (data['ITEM']['HAS_LINE_ITEM'] === 0)
                            $('td:eq(0)', row).removeClass('details-control');
                        $('td:eq(4)', row).html('<input style="height: 30px" type="number" class="form-control item-transfer-qty" has_line_item = "' + data['ITEM']['HAS_LINE_ITEM'] + '" id="edit_qty_' + data['DT_RowIndex'] + '" item-id="' + data['ITEM']['ID'] + '" qty="' + data['TOTAL_QTY'] + '" value="' + data['TRANSFER_QTY'] + '"/>');
                    },
                    "drawCallback": function (settings) {
                        var api = this.api();
                        $('.item-transfer-qty').on('blur', function (e) {
                            let rowItemId = $(this).closest('tr').attr('id');
                            $("button[item-id=" + rowItemId + "].btn-success").removeClass('btn-success').addClass('btn-info').text('Select');
                            for (var i = itemsSelectedArray.length - 1; i >= 0; i--) {
                                var obj = itemsSelectedArray[i]
                                if (obj.id === rowItemId)
                                    itemsSelectedArray.splice(i, 1);
                            }
                            let qty = parseInt($(this).attr('qty'));
                            let value = parseInt(this.value);
                            let has_line_item = $(this).attr('has_line_item');
                            if (value > qty) {
                                alert('Unexpected value provided!')
                                $(this).val(qty)

                                for (var i = 0; i < itemsToTransferArray.length; i++) {
                                    var obj = itemsToTransferArray[i]
                                    if (obj.id === rowItemId)
                                        itemsToTransferArray.splice(i, 1);
                                }
                                itemsToTransferArray.push({id: rowItemId, qty: qty, has_line_item: has_line_item});
                            } else {
                                $(this).val(value)
                                for (var i = 0; i < itemsToTransferArray.length; i++) {
                                    var obj = itemsToTransferArray[i]
                                    if (obj.id === rowItemId)
                                        itemsToTransferArray.splice(i, 1);
                                }

                                $(this).val(value)
                                itemsToTransferArray.push({id: rowItemId, qty: value, has_line_item: has_line_item});
                            }
                        })
                    },
                    "footerCallback": function (row, data, start, end, display) {
                    },
                });

                $("body").on("click", ".remove-item-cart", function (e) {
                    item_id = $(this).attr('item-id');
                    for (var i = itemsSelectedArray.length - 1; i >= 0; i--) {
                        var obj = itemsSelectedArray[i]
                        if (obj.id === item_id)
                            itemsSelectedArray.splice(i, 1);
                    }

                    for (var i = itemsToTransferArray.length - 1; i >= 0; i--) {
                        var obj = itemsToTransferArray[i]
                        if (obj.id === item_id)
                            itemsToTransferArray.splice(i, 1);
                    }

                    $('.line_' + item_id).parent().css('display', 'none')

                    $('#warehouse-items-transfer-table tr').removeClass("shown");
                    $("#warehouse-items-transfer-table tbody").find('#' + item_id).remove();
                    return false;
                });

                $('#warehouse-items-transfer-table tbody').on('click', 'td.details-control', function (e) {

                    var tr = $(this).closest('tr');

                    let itemsTable = $("#warehouse-items-transfer-table").DataTable();
                    var row = $("#warehouse-items-transfer-table").DataTable().row(tr);
                    let line_id = $('#line-' + row.data().ID);
                    var t = $("#warehouse-items-transfer-table").DataTable().row(this);
                    var row2 = t.row(this);
                    var qty = $('#edit_qty_' + t.cell(row2, 1).data()).val();

                    if (tr.hasClass('shown')) {
                        if (line_id.length > 0) {
                            line_id.parent().css('display', 'none')
                        } else row.child.hide()

                        tr.removeClass('shown');
                    } else {
                        if (qty === '0') {
                            alert('Please add quantity for transfer first!')
                            return;
                        }

                        if (itemsTable.row('.shown').length) {
                            $('.details-control', itemsTable.row('.shown').node()).click();
                        }

                        if (line_id.length > 0) {
                            line_id.parent().css('display', 'revert')
                        } else {
                            row.child(format(row.data(), qty)).show();
                        }

                        tr.addClass('shown');
                    }

                    function format(data, numberOfRows) {
                        var i = 0;
                        var table = '<div id="line-' + data.ID + '" line-rows="' + numberOfRows + '" style="height: 7vw; overflow: auto; padding: 1%;" class="expiry-div line_' + data.ITEM_ID + '">' +
                            '<table id="table-' + data.ID + '" class="table expiry-div"><thead style="background: darkgray;"><tr><th>Serial Code</th><th>Expiry Date</th><th style="text-align: center;">Actions</th></tr></thead>';
                        var tr = '';
                        for (i; i < data.LINE_ITEMS.length; i++) {
                            tr += '<tr class="expirey-line">' +
                                '<td class="item-description">' +
                                '<b>' + data.LINE_ITEMS[i].SERIAL_NUMBER + '</b>' +
                                '</td>' +
                                '<td class="item-description">' +
                                '<b>' + data.LINE_ITEMS[i].EXPIRY_DATE + '</b>' +
                                '</td>' +
                                '<td style="text-align-last: center;"><button class="btn btn-sm btn-info select-line-item-btn" style="width: 100px;" item-id="' + data.ITEM_ID + '" qty_transfer="' + numberOfRows + '" serial-id="' + data.LINE_ITEMS[i].ID + '">Select</button></td>' +
                                '</tr>';
                        }

                        return table + tr + '</table></div><hr>';
                    }
                });
            }

            $(document).on('click', '.select-line-item-btn', function (e) {
                e.preventDefault();
                let row = $('#warehouse-items-transfer-table tr.shown');
                let row_index = row.find("td:eq(1)").text();
                let qty_should_transfer = $('#edit_qty_' + row_index).val();

                let itemId = $(this).attr('item-id');
                let serialId = $(this).attr('serial-id');

                let selectedQty = 0;
                for (var i = itemsSelectedArray.length - 1; i >= 0; i--) {
                    var obj = itemsSelectedArray[i]
                    if (obj.id === itemId)
                        selectedQty++;
                }

                if ($(this).text() === 'Select') {
                    if (selectedQty === parseInt(qty_should_transfer)) {
                        alert('You have exceeded selected transfer quantity');
                        return;
                    }
                    $(this).removeClass('btn-info');
                    $(this).addClass('btn-success');
                    $(this).text('Selected')
                    itemsSelectedArray.push({id: itemId, serialId: serialId});

                } else {
                    $(this).removeClass('btn-success');
                    $(this).addClass('btn-info');
                    $(this).text('Select')
                    for (var i = 0; i < itemsSelectedArray.length; i++) {
                        var obj = itemsSelectedArray[i]
                        if (obj.id === itemId && obj.serialId === serialId)
                            itemsSelectedArray.splice(i, 1);
                    }
                }
            })

            $('#transfer-form').submit(function (e) {
                e.preventDefault();
                let type = 1;

                @if($consumable)
                    type = 2;
                @elseif($disposable)
                    type = 3;
                @elseif($returns)
                    type = 4;
                @endif

                var action_url = e.currentTarget.action;
                let from_location = $('#from_location').val();
                let to_location = $('#to_location').val();

                if (itemsToTransferArray.length === 0) {
                    alert('Please add quantity to transfer before submit')
                    return;
                }

                const submitBtn = $('#transfer_submit');
                submitBtn.prop('disabled', true)
                         .addClass('processing')
                         .val('Processing (0%)');

                const chunkSize = 5;
                const chunks = [];
                for (let i = 0; i < itemsToTransferArray.length; i += chunkSize) {
                    chunks.push(itemsToTransferArray.slice(i, i + chunkSize));
                }

                let processedChunks = 0;
                let lastResponseId = null;
                let totalChunks = chunks.length;

                const progress = {
                    upload: 0,
                    processing: 0,
                    current: 0,
                    get total() {
                        return Math.min(Math.round((this.upload * 0.3) + (this.processing * 0.7)), 99);
                    }
                };

                function debounce(func, wait) {
                    let timeout;
                    return function executedFunction(...args) {
                        const later = () => {
                            clearTimeout(timeout);
                            func(...args);
                        };
                        clearTimeout(timeout);
                        timeout = setTimeout(later, wait);
                    };
                }

                const updateDisplay = debounce(() => {
                    const newProgress = progress.total;
                    if (newProgress !== progress.current) {
                        progress.current = newProgress;
                        submitBtn.val(`Processing (${progress.current}%)`);
                    }
                }, 50);

                async function processChunk(chunk, index) {
                    const data = {
                        from_location: from_location,
                        to_location: to_location,
                        type: type,
                        itemsSelectedArray: itemsSelectedArray,
                        itemsToTransferArray: chunk,
                        isChunked: true,
                        totalChunks: totalChunks,
                        currentChunk: index + 1,
                        lastResponseId: lastResponseId
                    };

                    try {
                        const response = await $.ajax({
                            url: action_url,
                            type: 'post',
                            dataType: "json",
                            data: data,
                            xhr: function() {
                                const xhr = new window.XMLHttpRequest();
                                
                                xhr.upload.addEventListener('progress', function(e) {
                                    if (e.lengthComputable) {
                                        const chunkUploadProgress = (e.loaded / e.total) * 100;
                                        progress.upload = ((index * 100) + chunkUploadProgress) / totalChunks;
                                        updateDisplay();
                                    }
                                });

                                xhr.addEventListener('progress', function(e) {
                                    if (e.lengthComputable) {
                                        const chunkProcessProgress = (e.loaded / e.total) * 100;
                                        progress.processing = ((index * 100) + chunkProcessProgress) / totalChunks;
                                        updateDisplay();
                                    }
                                });

                                return xhr;
                            },
                            beforeSend: function() {
                                progress.processing = (index * 100) / totalChunks;
                                updateDisplay();
                            }
                        });

                        processedChunks++;
                        lastResponseId = response.response?.ID;

                        progress.processing = ((index + 1) * 100) / totalChunks;
                        updateDisplay();

                        return response;
                    } catch (error) {
                        throw new Error(error.responseJSON?.errorMessage || 'Transfer chunk failed');
                    }
                }

                async function processAllChunks() {
                    try {
                        const concurrencyLimit = 2; // Process 2 chunks at a time
                        for (let i = 0; i < chunks.length; i += concurrencyLimit) {
                            const chunkPromises = chunks.slice(i, i + concurrencyLimit)
                                .map((chunk, index) => processChunk(chunk, i + index));
                            
                            await Promise.all(chunkPromises);
                            
                            if (i + concurrencyLimit < chunks.length) {
                                await new Promise(resolve => setTimeout(resolve, 100));
                            }
                        }

                        submitBtn.val('Processing (100%)');
                        await new Promise(resolve => setTimeout(resolve, 300));
                        window.location.href = "/operations/warehouse/transfer-history/" + lastResponseId;
                    } catch (error) {
                        console.error('Transfer failed:', error);
                        submitBtn.prop('disabled', false)
                                .removeClass('processing')
                                .val('Submit');
                        alert(error.message || 'An error occurred during transfer');
                    }
                }

                processAllChunks().catch(error => {
                    console.error('Transfer process failed:', error);
                    submitBtn.prop('disabled', false)
                            .removeClass('processing')
                            .val('Submit');
                });
            });
        });
    </script>
@endsection