@extends('layouts.order-master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .error {
            color: red;
        }

        table tr td .stock-item+.select2-container {
            min-width: 700px !important;
            max-width: 700px !important;
        }

        table tr td .unit_change+.select2-container {
            min-width: 350px !important;
        }

        .form-input-box {
            text-align: center !important;
            height: 36px !important;
            padding: 0px !important;
        }

        .min-width50 {
            min-width: 50px !important;
        }

        .min-width400 {
            min-width: 350px !important;
        }

        .checkbox {
            height: 35px !important;
            width: 35px !important;
            margin-top: 2px;
        }

    @media only screen and (max-width: 1200px) {
        table tr td .stock-item+.select2-container {
            min-width: 400px !important;
            max-width: 400px !important;
        }

        table tr td .unit_change+.select2-container {
            min-width: 300px !important;
        }

        .form-input-box {
            text-align: center !important;
            height: 36px !important;
            padding: 0px !important;
        }

        .min-width50 {
            min-width: 50px !important;
        }

        .min-width400 {
            min-width: 100px !important;
        }

        .checkbox {
            height: 35px !important;
            width: 35px !important;
            margin-top: 2px;
        }
    }
    @media only screen and (max-width: 1440px) {
        table tr td .stock-item+.select2-container {
            min-width: 500px !important;
            max-width: 500px !important;
        }

        table tr td .unit_change+.select2-container {
            min-width: 300px !important;
        }

        .form-input-box {
            text-align: center !important;
            height: 36px !important;
            padding: 0px !important;
        }

        .min-width50 {
            min-width: 50px !important;
        }

        .min-width400 {
            min-width: 100px !important;
        }

        .checkbox {
            height: 35px !important;
            width: 35px !important;
            margin-top: 2px;
        }
    }
    @media only screen and (max-width: 1500px) {
        table tr td .stock-item+.select2-container {
            min-width: 500px !important;
            max-width: 500px !important;
        }

        table tr td .unit_change+.select2-container {
            min-width: 300px !important;
        }

        .form-input-box {
            text-align: center !important;
            height: 36px !important;
            padding: 0px !important;
        }

        .min-width50 {
            min-width: 50px !important;
        }

        .min-width400 {
            min-width: 100px !important;
        }

        .checkbox {
            height: 35px !important;
            width: 35px !important;
            margin-top: 2px;
        }
    }
    @media only screen and (max-width: 768px) {
        table tr td .stock-item+.select2-container {
            min-width: 200px !important;
            max-width: 200px !important;
        }

        table tr td .unit_change+.select2-container {
            min-width: 100px !important;
        }

        .form-input-box {
            text-align: center !important;
            height: 36px !important;
            padding: 0px !important;
        }

        .min-width50 {
            min-width: 50px !important;
        }

        .min-width400 {
            min-width: 50px !important;
        }

        .checkbox {
            height: 35px !important;
            width: 35px !important;
            margin-top: 2px;
        }
    }
    </style>
@endsection
@section('title')
    Assign Direct Delivery
@endsection
@section('content')
    @isset($directDelivery)
        <form action="/admin/direct-delivery/{{ $directDelivery->id }}" method="POST" autocomplete="off" class="needs-validation"
            novalidate id="direct-delivery">
            @method('put')
        @else
            <form action="/admin/direct-delivery" method="POST" autocomplete="off" class="needs-validation" novalidate
                id="direct-delivery">
            @endisset
            @csrf
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header d-flex align-items-center">
                            <h5 class="card-title mb-0 flex-grow-1">
                                @isset($directDelivery)
                                    Edit Assign Direct Delivery
                                @else
                                    Add Assign Direct Delivery
                                @endisset
                            </h5>
                            <div>
                                <a type="button" class="btn btn-soft-primary waves-effect waves-light"
                                    href="/admin/direct-delivery"><i class="las la-angle-double-left"></i> Go Back</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label class="form-label">Stock Type</label>
                                    <select class="form-select" id="stock_type" name="stock_type" required
                                        onchange="changeStockType()">
                                        <option value="0"
                                            {{ isset($directDelivery) && $directDelivery->stock_type == 0 ? 'selected' : '' }}>
                                            Assign Stock</option>
                                        <option value="1"
                                            {{ isset($directDelivery) && $directDelivery->stock_type == 1 ? 'selected' : '' }}>
                                            Return Stock</option>
                                    </select>
                                </div>
                                <div class="col-lg-3">
                                    <label class="form-label">Staff</label>
                                    <select class="form-select" id="staff" name="staff" required>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}"
                                                {{ isset($directDelivery) && $directDelivery->user_id == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3">
                                    <label class="form-label">Stock Location</label>
                                    <select class="form-select" id="stock-location" name="stock_location_id" required>
                                        <option value="">Choose stock location</option>
                                    </select>
                                </div>
                                <div class="col-lg-3">
                                    <label class="form-label">Date</label>
                                    <input type="date"
                                        class="form-control {{ isset($directDelivery) ? '' : 'datepicker' }}" name="date"
                                        value="{{ isset($directDelivery) ? $directDelivery->date : date('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label class="form-label">Remarks</label>
                                    <input type="text" class="form-control" name="remarks"
                                        value="{{ isset($directDelivery) ? $directDelivery->reference : '' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header d-flex align-items-center">
                            <h5 class="card-title mb-0 flex-grow-1">
                                Add Items
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="table-responsive">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>Item</th>
                                                <th>Unit</th>
                                                <th>Qty</th>
                                                <th class="damage" style="display: none;">Is Damage</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody id="appendRow">
                                            @isset($directDeliveryItems)
                                                @php
                                                    $tabIndex = 0;
                                                @endphp
                                                @if (count($directDeliveryItems) > 0)
                                                    @foreach ($directDeliveryItems as $key => $directDeliveryItem)
                                                        @php
                                                            $key = $key + 1;
                                                        @endphp
                                                        <tr id="{{ $key }}" class="row_{{ $key }} headrow">
                                                            <td>
                                                                <select tabindex="{{ $tabIndex + 1 }}"
                                                                    class="form-control stock-item" name="item[]"
                                                                    onchange="fetchItemData({{ $key }})"
                                                                    id="item_{{ $key }}">
                                                                    <option value="">Select item</option>
                                                                    <option value="{{ $directDeliveryItem->stock_item_id }}"
                                                                        selected>
                                                                        {{ $directDeliveryItem->stockItem->name }}
                                                                    </option>
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <select name="unit_id[]" tabindex="{{ $tabIndex + 2 }}"
                                                                    class="mousetrap form-control min-width400 unit_change unit_{{ $key }}"
                                                                    id="unit_change_{{ $key }}">
                                                                    @foreach ($directDeliveryItem->StockItem->itemUnits as $stockItemUnit)
                                                                        <option value="{{ $stockItemUnit->unit->id }}"
                                                                            {{ $directDeliveryItem->unit_id == $stockItemUnit->unit->id ? 'selected' : '' }}>
                                                                            {{ $stockItemUnit->unit->symbol }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td><input type="number" tabindex="{{ $tabIndex + 3 }}"
                                                                    name="qty[]" value="{{ $directDeliveryItem->quantity }}"
                                                                    id="qty_{{ $key }}"
                                                                    class="mousetrap form-control qty min-width400 form-input-box">
                                                            </td>
                                                            <td class="damage" style="display:none;"><input type="checkbox"
                                                                    name="is_damage[{{ $key }}]"
                                                                    class="form-input-box checkbox"
                                                                    id="damage_{{ $key }}"
                                                                    {{ $directDeliveryItem->is_damage ? 'checked' : '' }}>
                                                            </td>
                                                            <td><button type="button" class="btn btn-sm btn-danger"
                                                                    onclick="removeRow({{ $key }})"><i
                                                                        class="las la-minus"></i></button></td>
                                                        </tr>
                                                        @php
                                                            $tabIndex = $tabIndex + 3;
                                                        @endphp
                                                    @endforeach
                                                @endif
                                            @endisset
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                            <div class="row firsthidden_rows text-end">
                                <div class="col-md-12 text-right">
                                    <button type="button" class="btn btn-info" id="row_add"
                                        @isset($directDeliveryItems)
                                            tabindex="{{ $tabIndex + 1 }}"
                                        @endisset
                                        onclick="appendStockItemRow()"><i class="las la-plus"></i>Add</button>
                                    <button id="submit" type="submit"
                                        class="btn btn-primary submit-btn">Submit</button>
                                </div>
                            </div>
                            <small class="text-danger">* Stock is based on the base unit of the item</small>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    @endsection
    @section('script')
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
            integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="{{ URL::asset('/assets/js/mousetrap.min.js') }}"></script>
        <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
        <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
        <script>
            Mousetrap.bind(['command+left', 'ctrl+left'], function() {
                var focusedElement = $(":focus");
                var tabindex = $(focusedElement).attr('tabindex');
                if (tabindex == undefined || isNaN(tabindex)) {
                    return;
                }
                var nextindex = parseInt(tabindex) - 1;
                calculateSum();
                $("[tabindex='" + nextindex + "']").focus().select();
            });

            $('.stock-item').select2({
                placeholder: 'Select item',
                ajax: {
                    url: "/admin/get-stock-items",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            var name = item.description != null ? item.name + ' (' + item.description +
                                ')' : item.name;
                            return {
                                id: item.id,
                                text: name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });
            $('.unit_change').select2();

            $('#stock_type').select2({
                placeholder: 'Select stock type',
            })

            $('#staff').select2({
                placeholder: 'Select staff',
            })
            const stockLocationSelect = new Choices('#stock-location', {
                placeholder: true,
            });

            stockLocationSelect.setChoices(async () => {
                try {
                    const items = await fetch('/admin/get-stock-locations', {
                        method: 'post',
                        headers: new Headers({
                            'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        }),
                        body: `stockLocationId=${'{{ isset($directDelivery) ? $directDelivery->stock_location_id : '' }}'}`
                    }).then((response) => response.json());
                    return items.data;
                    var result = items.json();
                } catch (err) {
                    console.error(err);
                }
            });



            $(document).ready(function() {

                @if (!isset($directDelivery))
                    appendStockItemRow();
                @else
                    var tabIndex = 0;
                    $(append_row + ' > tr').each(function() {
                        var rowCount = $(this).attr('id');
                        const select2Item = $('#item_' + rowCount).attr('tabindex', tabIndex + 1);
                        const select2ItemUnit = $('#unit_change_' + rowCount).attr('tabindex', tabIndex + 3);
                        tabIndex = parseInt(tabIndex) + parseInt(3);
                    });
                    changeStockType();
                @endif
            });

            $('#submit').click(function(e) {
                e.preventDefault();
                $("#direct-delivery").submit();
            });

            $('#direct-delivery').validate({
                rules: {
                    'staff': {
                        required: true,
                    },
                    'date': {
                        required: true,
                    },
                    'stock_type': {
                        required: true,
                    },
                    'stock_location_id': {
                        required: true,
                    },
                },
                messages: {
                    'staff': {
                        required: "Please select staff",
                    },
                    'date': {
                        required: "Please select date",
                    },
                    'stock_type': {
                        required: "Please enter stock type",
                    },
                    'stock_location_id': {
                        required: "Please select stock location",
                    },
                },
                submitHandler: function(form, e) {
                    e.preventDefault();
                    $('.submit-btn').prop('disabled', true);
                    var url = $(form).attr('action');
                    var formData = new FormData(form);
                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if (data.status == 'success') {
                                form.reset();
                                Swal.fire({
                                    title: 'Success!',
                                    text: data.message,
                                    icon: 'success',
                                    confirmButtonText: 'Ok'
                                })
                                location.reload();
                            } else {
                                Swal.fire({
                                    title: 'Error!',
                                    text: data.message,
                                    icon: 'error',
                                    confirmButtonText: 'Ok'
                                })
                            }
                            $('.submit-btn').prop('disabled', false);
                        },
                        error: function(data) {
                            $('.submit-btn').prop('disabled', false);
                            if (data.status === 422) {
                                var message = data.responseJSON.message;
                                Swal.fire({
                                    title: 'Error!',
                                    text: message,
                                    icon: 'error',
                                    confirmButtonText: 'Ok'
                                })
                            } else {
                                // Handle other error cases
                                console.log('Other Error:', data.responseText);
                            }
                        }
                    });
                }
            });

            function fetchItemData(id) {
                var prd = $("#item_" + id).val();
                if (prd != "" && id != "") {
                    $.ajax({
                        url: "{{ route('fetch-stock-item') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            "prd": prd,
                        },
                        success: function(data) {
                            $("#unit_change_" + id).html(data.options);
                        },
                        error: function(xhr) {
                            alert("Something went wrong. Please try again");
                        }
                    });
                } else {
                    alert("Something went wrong. Please try again");
                }
            };

            $('form').on('keypress', '#submit', function(event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                    return false;
                }
            });
            let append_row = '#appendRow';
            var tabIndex = 0;

            function appendStockItemRow() {
                var rowCount = $('#appendRow tr:last').attr('id');
                if (rowCount == "" || rowCount == undefined) {
                    rowCount = 1;
                } else {
                    rowCount = parseInt(rowCount) + parseInt(1);
                }
                var rows = '<tr id="' + rowCount + '" class="row_' + rowCount +
                    ' headrow"><td><select tabindex="1" class="form-control stock-item" name="item[]" onchange="fetchItemData(' +
                    rowCount + ')" id="item_' + rowCount + '"><option value="">Select item</option>';

                var rows1 = '</select><div class="errormsg" id="error_item_' + rowCount +
                    '"></div></td><td><select name="unit_id[]" tabindex="' + `${tabIndex+2}` +
                    '" class="mousetrap form-control min-width400 unit_change unit_' + rowCount +
                    '" id="unit_change_' + rowCount + '"></select></td><td><input type="number" tabindex="' + `${tabIndex+3}` +
                    '" name="qty[]" id="qty_' +
                    rowCount +
                    '" class="mousetrap form-control form-input-box qty min-width400"><div class="errormsg" id="error_qty_' +
                    rowCount +
                    '"></div></td><td class="damage" style="display:none;"><input type="checkbox" name="is_damage[' + rowCount +
                    ']" class="form-input-box checkbox" id="damage_' +
                    rowCount + '"></td><td><button type="button" class="btn btn-sm btn-danger" onclick="removeRow(' +
                    rowCount +
                    ')"><i class="las la-minus"></i></button></td></tr>';
                $("#appendRow").append(rows + rows1);
                $('.stock-item').select2({
                    placeholder: 'Select item',
                    ajax: {
                        url: "/admin/get-stock-items",
                        type: "POST",
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                _token: "{{ csrf_token() }}",
                                search: params.term,
                                page: params.page,
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;
                            var results = data.data.map(function(item) {
                                var name = item.description != null ? item.name + ' (' + item.description +
                                    ')' : item.name;
                                return {
                                    id: item.id,
                                    text: name,
                                };
                            });

                            return {
                                results: results,
                                pagination: {
                                    more: (params.page * data.per_page) < data.total
                                }
                            };
                        },
                        cache: true
                    }
                });
                $('.unit_change').select2();
                $('#item_' + rowCount + '').prop('tabindex', tabIndex + 1);
                $('#unit_change_' + rowCount + '').prop('tabindex', tabIndex + 2);
                $('#row_add').prop('tabindex', tabIndex + 4);
                tabIndex += 3;
                $('#item_' + rowCount + '').focus().select();
                changeStockType();
            }

            function removeRow(id) {
                var rowCount = $('#appendRow .headrow').length;
                if (rowCount == 1) {
                    alert("Sorry, last row can't be remove");
                } else {
                    $(".row_" + id).remove();
                    calculateSum();
                }
            }

            $(document).on('keydown', '.qty', function(e) {
                var key = e.which;
                if (key == 13) // the enter key code
                {
                    e.preventDefault();
                    var tabindex = $(this).attr('tabindex');
                    if (tabindex == undefined || isNaN(tabindex)) {
                        return;
                    }
                    var nextindex = parseInt(tabindex) + 1;
                    $("[tabindex='" + nextindex + "']").focus().select();
                }
            });

            $(document).on('select2:select', '.stock-item,.unit_change', function(e) {
                var tabindex = $(this).attr('tabindex');
                var nextindex = parseInt(tabindex) + 1;
                $("[tabindex='" + nextindex + "']").focus().select();
            });

            $(document).on('select2:close', '.stock-item,.unit_change', function(e) {
                var tabindex = $(this).attr('tabindex');
                var nextindex = parseInt(tabindex) + 1;
                $("[tabindex='" + nextindex + "']").focus().select();
            });

            $(document).on('select2:open', '.stock-item, .unit_change', function(e) {
                $('.select2-search__field').focus().select();
            });

            function changeStockType() {
                if ($('#stock_type').val() == 1) {
                    $('.damage').show();
                } else {
                    $('.damage').hide();
                }
            }
        </script>
    @endsection