@extends('warehouse.app')
@section('title', __('w_transfer.title_create'))
@section('content')
    @include('components.errors')
    <div class="card mb-3">
        <div class="card-body">
            <div class="row flex-between-center">
                <div class="col-md">
                    <h5 class="mb-2 mb-md-0">@lang('w_transfer.title_create')</h5>
                </div>
            </div>

            <div class="row flex-between-center my-3">
                <form method="POST" action="{{ route('w_transfer.store',$entity_id) }}" enctype="multipart/form-data">
                    @csrf
                    @method('POST')
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="mb-3">
                                <label class="form-label"
                                    for="transfer_number">{{ __('w_transfer.transfer_number') }}</label>
                                <input name="transfer_number" type="text"
                                    class="form-control  @error('transfer_number') is-invalid @enderror"
                                    id="transfer_number">
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="from_entity_id">{{ __('w_transfer.from_entity_id') }}</label>
                                <select required class="form-select js-choice @error('from_entity_id') is-invalid @enderror"
                                    id="from_entity_id" size="1" name="from_entity_id"
                                    data-options='{"removeItemButton":true,"placeholder":true}'>
                                    {{-- <option disabled selected value="">{{ __('w_transfer.choose_warehouse') }} --}}
                                    </option>
                                    @foreach ($warehouses_from as $warehouse)
                                        <option value="{{ $warehouse->id }}">{{ $warehouse->name . ' _ ' }}
                                            @if ($warehouse->warehouse->warehouse_type == 'prints')
                                            {{ __('w_transfer.prints') }}
                                            @elseif ($warehouse->warehouse->warehouse_type == 'equipments')
                                            {{ __('w_transfer.equipments') }}
                                            @else
                                            {{ __('w_transfer.both') }}
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="to_entity_id">{{ __('w_transfer.to_entity_id') }}</label>
                                <select required class="form-select js-choice @error('to_entity_id') is-invalid @enderror"
                                    id="to_entity_id" size="1" name="to_entity_id"
                                    data-options='{"removeItemButton":true,"placeholder":true}'>
                                    <option disabled selected value="">{{ __('w_transfer.choose_warehouse') }}
                                    </option>
                                    @foreach ($warehouses as $warehouse)
                                        <option value="{{ $warehouse->id }}">{{ $warehouse->name . ' _ ' }}
                                            @if ($warehouse->warehouse->warehouse_type == 'prints')
                                                {{ __('w_transfer.prints') }}
                                            @elseif ($warehouse->warehouse->warehouse_type == 'equipments')
                                                {{ __('w_transfer.equipments') }}
                                            @else
                                                {{ __('w_transfer.both') }}
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="entity-error" style="display: none;">
                                    {{ __('w_transfer.select_different_entity') }}
                                </div>
                            </div>
                            <div class="">
                                <label class="form-label" for="notes">{{ __('w_transfer.notes') }}</label>
                                <textarea class="form-control @error('entry_number') is-invalid @enderror" name="notes"
                                    id="exampleFormControlTextarea1" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="mb-3">
                                <label class="form-label" for="date">{{ __('w_transfer.date') }}</label>
                                <input class="form-control datetimepicker @error('date') is-invalid @enderror"
                                    id="datepicker" name="date" type="text" placeholder="dd/mm/yy"
                                    data-options='{"disableMobile":true}' />
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="file-upload">{{ __('w_transfer.file') }}</label>
                                <label class="d-flex justify-content-center align-items-center" for="file-upload"
                                    style="width: 100%;">
                                    <div class="d-flex justify-content-center align-items-center bg-light"
                                        style="width: 100%; height: 250px; max-width: 100%;">
                                        <img id="preview-selected-image" src="{{ URL('assets/img/uploadimg.jpg') }}"
                                            class="img-fluid" alt="{{ __('w_transfer.file_preview') }}"
                                            style="max-height: 100%; max-width: 100%; object-fit: cover; width: 100%; height: 100%;" />
                                        <input type="file" id="file-upload" name="file" {{-- accept="image/jpeg, image/png, image/jpg, image/svg"  --}}
                                            onchange="previewImage(event);" class="form-control" hidden />
                                    </div>
                                </label>

                                @error('file')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-12">
                            <h4>{{ __('w_transfer.details_title') }}</h4>
                            <hr>
                        </div>
                        <div class="row">
                            <div class="col-md-5 mb-3">
                                <select class="form-select js-choice @error('item_id') is-invalid @enderror" tabindex="0"
                                    id="item_id" size="1" name="item_id"
                                    data-options='{"removeItemButton":true,"placeholder":true}'>
                                    <option disabled selected value="">{{ __('w_transfer.choose_item') }}</option>
                                    @foreach ($items as $item)
                                        <option value="{{ $item->id }}">
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <input name="quantity" type="text" id="quantity"
                                    class="form-control  @error('quantity') is-invalid @enderror"
                                    placeholder="{{ __('w_transfer.placeholder_quantity') }}" id="quantity"
                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
                            </div>
                            <script>
                                let unitNames = {};

                                @foreach ($items as $item)
                                    @php
                                        $unitName = $item->unit->name; // Get the unit name for each item
                                    @endphp
                                    unitNames["{{ $item->id }}"] = "{{ $unitName }}";
                                @endforeach
                                document.getElementById('quantity').addEventListener('keypress', function(event) {
                                    if (event.key === 'Enter') {
                                        event.preventDefault(); // Prevent the default form submit behavior
                                        addProduct(); // Call the addProduct function
                                    }
                                });
                            </script>
                            <div class="col-md-1">
                                <button class="btn btn-success me-1 mb-1" type="button"
                                    onclick="addProduct()">{{ __('w_transfer.add_item') }}</button>
                            </div>
                        </div>
                        <table class="table mt-3">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('w_transfer.item_id') }}</th>
                                    <th>{{ __('w_transfer.quantity') }}</th>
                                    <th>{{ __('w_transfer.unit') }}</th>
                                    <th>{{ __('w_transfer.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody id="invoiceBody">
                                <!-- Dynamically added product rows will appear here -->
                            </tbody>
                        </table>

                        <div>
                            <a href="{{ route('w_transfer.index',$entity_id) }}"
                                class="btn btn-primary col-md-2 ms-3">@lang('w_damage.back')</a>
                            <button type="submit" class="btn btn-success col-md-2 ms-3">@lang('w_damage.save')</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const fromEntitySelect = document.getElementById('from_entity_id');
            const toEntitySelect = document.getElementById('to_entity_id');
            const errorLabel = document.getElementById('entity-error');
    
            // Function to check if the values are the same
            function checkEntities() {
                if (fromEntitySelect.value === toEntitySelect.value && fromEntitySelect.value !== '') {
                    // Show error and prevent form submission
                    errorLabel.style.display = 'block';
                    toEntitySelect.setCustomValidity('{{ __('w_transfer.select_different_entity') }}');
                } else {
                    // Hide error and allow form submission
                    errorLabel.style.display = 'none';
                    toEntitySelect.setCustomValidity('');
                }
            }
    
            // Attach the event listeners to both select elements
            fromEntitySelect.addEventListener('change', checkEntities);
            toEntitySelect.addEventListener('change', checkEntities);
        });
    </script>
    
@endsection