@extends('layouts.app')
@section('title', \App\CPU\translate('Movement Request Create'))
@push('css_or_js')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            @include('includes.breadcrumb', [
                'title' => 'Movement Create',
                'model' => 'Movement',
                'sub_model' => 'Create',
                'model_object' => null,
            ])
        </div>

        <!-- Content Row -->
        <div class="app-container container-xxxl d-flex flex-stack">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('admin.movement.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <h4 class="fs-1x pb-1">Request Header</h4>
                            <div class="row">
                                <div class="col-3  form-floating mb-10">
                                    @include('newIncludes.vendorSelect', [
                                        'vendors' => $vendors,
                                        'required' => true,
                                        'id' => 'select_vendor_no',
                                    ])
                                </div>
                                <div class="col-3  form-floating  mb-10">
                                    @include('newIncludes.businessSelect', [
                                        'id' => 'select_business',
                                        'required' => false,
                                    ])
                                </div>
                                <div class="col-6 form-floating mb-7">
                                    @include('newIncludes.simpleTextarea', [
                                        'name' => 'note',
                                        'required' => false,
                                        'id' => 'note',
                                        'label' => 'Note',
                                        'placeHolder' => 'Note',
                                        'rows' => 3,
                                    ])
                                </div>
                            </div>
                            <h4 class="fs-1x">Request Details</h4>
                            <div data-kt_ecommerce_add_movement_request="auto-options">
                                <div id="kt_ecommerce_add_movement_request">
                                    <div data-repeater-list="movement_requests" class="d-flex flex-column">
                                        <div data-repeater-item="movement_request">
                                            <div class="row">
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.select', [
                                                        'name' => 'from_warehouse',
                                                        'id' => 'warehouse',
                                                        'data' => $provinceCodeEnum,
                                                        'label' => 'from warehouse',
                                                        'required' => true,
                                                        'placeHolder' => 'Warehouse',
                                                        'optValue' => 'warehouse_code',
                                                        'optLabel' => 'warehouse_code',
                                                        'class' => 'select2select',
                                                    ])
                                                </div>
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.itemSelect', [
                                                        'items' => $items ?? null,
                                                        'required' => false,
                                                        'name' => 'select_item_from',
                                                        'id' => 'select_item_from',
                                                        'label' => 'From Item',
                                                        'class' => 'select2select select_item_from',
                                                    ])
                                                </div>
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.simpleTextField', [
                                                        'name' => 'item_name',
                                                        'required' => false,
                                                        'id' => 'from_item_name',
                                                        'label' => 'From Item Name',
                                                        'disabled' => true,
                                                        'classes' => 'from_item_name h-55px',
                                                    ])
                                                    <p class="select_item_from_price d-inline-block">Price: <span></span>
                                                    </p>
                                                </div>
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.select', [
                                                        'col' => '1',
                                                        'name' => 'from_lot',
                                                        'id' => 'from_lot',
                                                        'label' => 'From Lot',
                                                        'required' => true,
                                                        'placeHolder' => 'From Lot',
                                                        'class' => 'select2select from_lot',
                                                    ])
                                                    <p class="expiry_date d-inline-block">Expiry:<span></span></p>
                                                    <input type="hidden"  class="expiry_dateInput" name="expiry_date">
                                                </div>
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.itemSelect', [
                                                        'items' => $items ?? null,
                                                        'required' => false,
                                                        'name' => 'select_item_to',
                                                        'id' => 'select_item_to',
                                                        'label' => 'To Item',
                                                        'class' => 'select2select select_item_to',
                                                        // 'additionalAttributes' => 'initial-load=false'
                                                    ])

                                                </div>

                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.simpleTextField', [
                                                        'name' => 'from_item_name',
                                                        'required' => false,
                                                        'id' => 'to_item_name',
                                                        'label' => 'To Item Name',
                                                        'disabled' => true,
                                                        'classes' => 'to_item_name flex-grow-1',
                                                    ])
                                                    <p class="select_item_to_price d-inline-block">Price: <span></span></p>
                                                </div>

                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                        @include('newIncludes.select', [
                                                            'name' => 'to_warehouse',
                                                            'id' => 'to_warehouse',
                                                            'data' => $provinceCodeEnum,
                                                            'label' => 'To Warehouse',
                                                            'required' => true,
                                                            'placeHolder' => 'To Warehouse',
                                                            'optValue' => 'warehouse_code',
                                                            'optLabel' => 'warehouse_code',
                                                            'class' => 'select2select',
                                                        ])
                                                    </div>

                                                <div class="col-1 form-floating mb-7 p-1">
                                                    @include('newIncludes.simpleTextField', [
                                                        'name' => 'qty',
                                                        'id' => 'qty',
                                                        'label' => 'Qty',
                                                        'required' => true,
                                                        'placeHolder' => 'Qty',
                                                        'inputType' => 'number',
                                                        'classes' => 'qtyInput flex-grow-1',
                                                        'additionalAttributes' => 'min="1"',
                                                    ])

                                                </div>
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.simpleTextField', [
                                                        'name' => 'price_diffrence',
                                                        'id' => 'price_diffrence',
                                                        'label' => 'Price Diffrence',
                                                        'required' => false,
                                                        'placeHolder' => 'Price Diffrence',
                                                        'classes' => 'price_diffrence flex-grow-1',
                                                        'additionalAttributes' => 'readonly',
                                                    ])

                                                </div>
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.simpleTextField', [
                                                        'name' => 'order_no',
                                                        'required' => true,
                                                        'id' => 'order_number',
                                                        'label' => 'Order Number',
                                                        'classes' => 'flex-grow-1',
                                                    ])
                                                </div>
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.simpleTextField', [
                                                        'name' => 'po_no',
                                                        'required' => true,
                                                        'id' => 'po_number',
                                                        'label' => 'Po Number',

                                                        'classes' => 'flex-grow-1',
                                                    ])
                                                </div>
                                                <div class="col-1">
                                                    <button type="button" data-repeater-delete=""
                                                        class="btn btn-sm btn-icon btn-light-danger ms-2">
                                                        <span class="svg-icon svg-icon-1">
                                                            <svg width="24" height="24" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect opacity="0.5" x="7.05025" y="15.5356" width="12"
                                                                    height="2" rx="1"
                                                                    transform="rotate(-45 7.05025 15.5356)"
                                                                    fill="currentColor" />
                                                                <rect x="8.46447" y="7.05029" width="12" height="2"
                                                                    rx="1" transform="rotate(45 8.46447 7.05029)"
                                                                    fill="currentColor" />
                                                            </svg>
                                                        </span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" data-repeater-create="" class="btn btn-sm btn-light-primary">
                                            <span class="svg-icon svg-icon-2">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <rect opacity="0.5" x="11" y="18" width="12" height="2"
                                                        rx="1" transform="rotate(-90 11 18)" fill="currentColor" />
                                                    <rect x="6" y="11" width="12" height="2" rx="1"
                                                        fill="currentColor" />
                                                </svg>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <hr>
                                <h4 class="fs-1x">Upload Attachments</h4>
                                <div id="kt_ecommerce_add_attachments">
                                    <div data-repeater-list="attachments">
                                        <div data-repeater-item>
                                            <div class="card card-flush py-4 mb-5">
                                                <div class="card-body pt-0">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-4">
                                                            <label class="form-label ">Attachment Name</label>
                                                            <input type="text" class="form-control form-control-solid" name="attachment_name" placeholder="Attachment Name" />
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label  d-block">Choose File</label>
                                                            <div class="d-flex align-items-center">
                                                                <a class="btn btn-light-primary me-3 attachmentBtn">
                                                                    Attach File
                                                                </a>
                                                                <div class="mt-2">
                                                                    <span class="fileName text-muted"></span>
                                                                </div>
                                                            </div>
                                                            <input type="file" class="d-none attached_file" name="attached_file" />
                                                        </div>
                                                        <div class="col-md-2">
                                                        <button type="button" data-repeater-delete=""
                                                            class="btn btn-sm btn-icon btn-light-danger ms-2">
                                                            <span class="svg-icon svg-icon-1">
                                                                <svg width="24" height="24" viewBox="0 0 24 24"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <rect opacity="0.5" x="7.05025" y="15.5356" width="12"
                                                                        height="2" rx="1"
                                                                        transform="rotate(-45 7.05025 15.5356)"
                                                                        fill="currentColor" />
                                                                    <rect x="8.46447" y="7.05029" width="12" height="2"
                                                                        rx="1" transform="rotate(45 8.46447 7.05029)"
                                                                        fill="currentColor" />
                                                                </svg>
                                                            </span>
                                                        </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        <button type="button" data-repeater-create="" class="btn btn-sm btn-light-primary">
                                            <span class="svg-icon svg-icon-2">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <rect opacity="0.5" x="11" y="18" width="12" height="2"
                                                        rx="1" transform="rotate(-90 11 18)" fill="currentColor" />
                                                    <rect x="6" y="11" width="12" height="2" rx="1"
                                                        fill="currentColor" />
                                                </svg>
                                            </span>
                                        </button>
                            </div>

                                <div class="d-flex justify-content-end">
                                    <button type="submit"
                                        class="btn btn-primary px-4">{{ \App\CPU\translate('Create') }}</button>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('script')
    <script src="{{ asset('public/assets/back-end') }}/js/select2.min.js"></script>
    <script src="{{ asset('assets/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/apps/ecommerce/catalog/repeater-js.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(document).on('change', '.select_item_from', function() {
                var select = $(this);

                var itemNo = $(this).val();
                if (itemNo && itemNo.length >= 5) {
                    $.ajax({
                        url: "{{ route('admin.movement.getItemNameAndLot') }}",
                        type: 'GET',
                        data: {
                            item_no: itemNo
                        },
                        success: function(data) {
                            select.closest('.row').find('.from_item_name').val(data.data
                                .itemName);
                            select.closest('.row').find('.from_item_name').attr('title', data
                                .data.itemName);
                            select.closest('.row').find('.select_item_from_price span').text(
                                parseFloat(data
                                    .data.item_price).toFixed(2));

                            var lotSelect = select.closest('.row').find('.from_lot');
                            lotSelect.empty();
                            // Create array of select2 data objects
                            var select2Data = data.data.itemLots.map(function(lot) {
                                return {
                                    id: lot.lotNumber,
                                    text: lot.lotNumber,
                                    'data-expiry': lot.expiryDate
                                };
                            });

                            // Set the select2 data
                            lotSelect.select2({
                                data: select2Data,
                                placeholder: 'Select a lot',
                                allowClear: true,
                                templateResult: function(data) {
                                    if (!data.id) return data.text;
                                    return $('<span data-expiry="' + data['data-expiry'] + '">' + data.text + '</span>');
                                }
                            });

                            // Trigger change event after setting data
                            lotSelect.trigger('change');
                            //  trigger qty change to calculate the new diffret price
                            select.closest('.row').find('.qtyInput').trigger('change');
                        }
                    });
                }
            });

            $(document).on('change', '.select_item_to', function() {
                var select = $(this);
                var selectFrom = select.closest('.row').find('.select_item_from').val();
                var itemNo = $(this).val();

                if (!selectFrom || selectFrom.length === 0) {
                    if (!select.data('initial-load')) {
                        select.data('initial-load', true);
                    } else {
                        Swal.fire({
                            title: 'Please select "From Item" first!',
                            text: "You need to select a source item before selecting the destination item",
                            icon: 'warning',
                            confirmButtonText: 'OK'
                        });
                        select.val(null).trigger('change.select2');
                        return;
                    }
                }

                if (itemNo && itemNo.length >= 5) {
                    $.ajax({
                        url: "{{ route('admin.filter.select2-items-name') }}",
                        type: 'GET',
                        data: {
                            item_no: itemNo
                        },
                        success: function(data) {
                            //  trigger qty change to calculate the new diffret price

                            // INSERT item name
                            select.closest('.row').find('.to_item_name').val(data.item_name);
                            select.closest('.row').find('.to_item_name').attr('title', data.item_name);
                            select.closest('.row').find('.select_item_to_price span').text(
                                parseFloat(data.item_price).toFixed(2));
                                select.closest('.row').find('.qtyInput').trigger('change');
                        }
                    });
                }
            });
        });

        $(document).on('change', '#select_vendor_no', function() {
            var vendor = $(this).val();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            // First AJAX request for business data
            $.ajax({
                url: "{{ route('admin.filter.vendor-business') }}",
                method: 'GET',
                data: {
                    vendor: vendor,
                },
                success: function(data) {
                    $('#select_business_2').empty();
                    $('#select_business_2').append(new Option('No select', 'no', true, true))
                    $(data).each(function(i, z) {
                        var select_business = '{{ $_GET['select_business'] ?? '' }}';
                        if (select_business != '' && select_business == z) {
                            $('#select_business_2').append(new Option(z, z, true, true))
                        } else {
                            $('#select_business_2').append(new Option(z, z, false, false))
                        }
                    })
                    $('#select_business_2').trigger('change');
                }
            });

            // Second AJAX request for items data
            $.ajax({
                url: "{{ route('admin.filter.select2-items') }}",
                method: 'GET',
                data: {
                    vendor: vendor,
                },
                success: function(data) {
                    $('.select_item_from, .select_item_to').each(function() {
                        const $select = $(this);
                        $select.empty(); // Clear old options

                        // Add a placeholder option
                        $select.append(new Option('Select an item', '', true, true)).trigger(
                            'change');

                        // Add new options
                        data.items.forEach(function(item) {
                            $select.append(new Option(item.ITEM_NO, item.ITEM_NO));
                        });
                        $select.select2();
                    });
                },

                error: function(xhr, status, error) {
                    console.error('Error fetching vendor items:', error);
                }
            });
        });
        $(document).on('change', '.qtyInput', function() {
            var value = $(this).val();
            if (value < 1) {
                $(this).val(1);
            }

            var row = $(this).closest('.row');
            var fromPrice = parseFloat(row.find('.select_item_from_price span').text()) || 0;
            var toPrice = parseFloat(row.find('.select_item_to_price span').text()) || 0;
            var qty = parseFloat($(this).val()) || 0;

            setTimeout(function() {
                var priceDifference = (toPrice - fromPrice) * qty;
                row.find('.price_diffrence').val(priceDifference.toFixed(2));
            },400);
        });

        $(document).on('change', '.from_lot', function() {
            var select = $(this);
            var row = select.closest('.row');
            var value = select.val();
            if (value < 1) {
                select.val(1);
            }

            // Fix: Get the data-expiry attribute directly from the selected option's data attributes
            var selectedOption = select.select2('data')[0];
            var expiryDate = '';

            if (selectedOption && selectedOption['data-expiry']) {
                expiryDate = selectedOption['data-expiry'];
            }

            setTimeout(function() {
                row.find('.expiry_date span').text(expiryDate);
                row.find('.expiry_dateInput').val(expiryDate);
            },400);
        });


        $(document).ready(function() {
            $('#warehouse').on('change', function () {
                let selectedVal = $(this).val();
                $('#to_warehouse').val(selectedVal).trigger('change');
                // console.log('Changed warehouse to:', selectedVal);
            });
        });



    </script>
@endpush