@extends('layouts.app')
@section('title', \App\CPU\translate('Giveaway 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' => 'Giveaway Create',
                'model' => 'Giveaway',
                '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.giveaway.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <h4 class="fs-1x pb-1">Request Header</h4>
                            <div class="row w-100">
                                <div class="col-3 fv-row mb-10">
                                    @include('includes.vendorSelect', [
                                        'vendors' => $vendors,
                                        'required' => true,
                                        'id' => 'select_vendor_no',
                                    ])
                                </div>
                                <div class="col-3 fv-row mb-10">
                                    @include('includes.businessSelect', [
                                        'id' => 'select_business',
                                        'required' => false,
                                    ])
                                </div>
                                <div class="col-3 fv-row mb-10">
                                    @include('includes.select', [
                                        'name' => 'select_customer_no',
                                        'id' => 'select_customer_no',
                                        'data' => $customers,
                                        'label' => 'Customer No',
                                        'required' => true,
                                        'placeHolder' => 'Customer No',
                                        'optValue' => 'CUSTOMER_NUMBER',
                                        'optLabel' => 'name_with_number',
                                    ])
                                </div>
                                <div class="col-3 fv-row mb-10">
                                    @include('includes.select', [
                                        'name' => 'select_bill_to',
                                        'id' => 'select_bill_to',
                                        'data' => [],
                                        'label' => 'Bill To',
                                        'required' => true,
                                    ])
                                </div>
                                <div class="col-4 fv-row mb-10">
                                    @include('includes.select', [
                                        'name' => 'select_type',
                                        'id' => 'select_type',
                                        'data' => $giveawayTypes,
                                        'label' => 'Type',
                                        'required' => true,
                                        'placeHolder' => 'Type',
                                        'class' => 'select2select',
                                    ])
                                </div>
                                <div class="col-6">
                                    <label class="fs-6 fw-semibold mb-2">Note</label>
                                    <textarea class="form-control mb-3" rows="5" data-kt-element="input" name="note" placeholder="Type a Note"></textarea>
                                </div>
                            </div>
                            <h4 class="fs-1x">Request Details</h4>
                            <div data-kt_ecommerce_add_giveaway_request="auto-options">
                                <div id="kt_ecommerce_add_giveaway_request">
                                    <div data-repeater-list="giveaway_requests" class="d-flex flex-column">
                                        <div data-repeater-item="giveaway_request">
                                            <div class="row align-items-center">
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.itemSelect', [
                                                        'items' => $items ?? null,
                                                        'required' => true,
                                                        'name' => 'item_no',
                                                        'id' => 'item_no',
                                                        'label' => 'Item No',
                                                        'class' => 'select2select select_item_no',
                                                    ])
                                                </div>
                                                <div class="col-3 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.simpleTextField', [
                                                        'name' => 'item_name',
                                                        'required' => false,
                                                        'id' => 'item_name',
                                                        'label' => 'Item Description',
                                                        'disabled' => true,
                                                        'classes' => 'item_name h-55px',
                                                    ])
                                                </div>
                                                <div class="col-2 form-floating mb-7 p-1 d-flex flex-column">
                                                    @include('newIncludes.select', [
                                                        'name' => 'from_lot',
                                                        'id' => 'from_lot',
                                                        'label' => 'Lot',
                                                        'required' => true,
                                                        'placeHolder' => '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">
                                                    @include('newIncludes.simpleTextField', [
                                                        'name' => 'qty',
                                                        'id' => 'qty',
                                                        'label' => 'Request Qty',
                                                        'required' => true,
                                                        'placeHolder' => 'Request 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' => 'supplier_note',
                                                        'id' => 'supplier_note',
                                                        'label' => 'Supplier Note',
                                                        'required' => false,
                                                        'placeHolder' => 'Supplier Note',
                                                        'classes' => 'supplier_note flex-grow-1',
                                                    ])
                                                </div>
                                                <div class="col-1 mb-7">
                                                    <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>
                                <div class="d-flex justify-content-end">
                                    <button type="submit"
                                        class="btn btn-primary px-4">{{ \App\CPU\translate('Create') }}</button>
                                </div>
                            </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') }}?v={{ time() }}"></script>
    <script>
        $(document).ready(function() {
            $(document).on('change', '.select_item_no', function() {
                var select = $(this);
                var itemNo = $(this).val();
                
                if (itemNo && itemNo.length >= 5) {
                    $.ajax({
                        url: "{{ route('admin.giveaway.getItemNameAndLot') }}",
                        type: 'GET',
                        data: {
                            item_no: itemNo
                        },
                        success: function(data) {
                            select.closest('.row').find('.item_name').val(data.data.itemName);
                            select.closest('.row').find('.item_name').attr('title', data.data.itemName);
                            
                            var lotSelect = select.closest('.row').find('.from_lot');
                            lotSelect.empty();
                            
                            if (data.data.itemLots && data.data.itemLots.length > 0) {
                                var select2Data = data.data.itemLots.map(function(lot) {
                                    return {
                                        id: lot.lotNumber,
                                        text: lot.lotNumber,
                                        'data-expiry': lot.expiryDate
                                    };
                                });
                                
                                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>');
                                    }
                                });
                                
                                lotSelect.trigger('change');
                            }
                        }
                    });
                }
            });

            $(document).on('change', '.from_lot', function() {
                var select = $(this);
                var row = select.closest('.row');
                var selectedOption = select.select2('data')[0];
                var expiryDate = '';

                if (selectedOption && selectedOption['data-expiry']) {
                    expiryDate = selectedOption['data-expiry'];
                } else {
                    var option = select.find('option:selected');
                    if (option.length) {
                        expiryDate = option.attr('data-expiry') || '';
                    }
                }

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

        $(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').empty();
                    $('#select_business').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').append(new Option(z, z, true, true))
                        } else {
                            $('#select_business').append(new Option(z, z, false, false))
                        }
                    })
                    $('#select_business').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_no').each(function() {
                        const $select = $(this);
                        $select.empty();

                        $select.append(new Option('Select an item', '', true, true)).trigger('change');

                        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', '#select_customer_no', function() {
            var customer = $(this).val();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('admin.filter.customer-bill-to') }}",
                method: 'get',
                data: {
                    customer: customer,
                },
                success: function(data) {
                    $('#select_bill_to').empty();
                    $(data).each(function(i, z) {
                        $('#select_bill_to').append(new Option(z, z, true, true))
                        $('#select_bill_to').trigger('change');
                    })
                }
            });
        });
    </script>
@endpush