@extends('layouts.authUser')

@section('content')
<h2>Kemaskini peralatan makmal</h2>

<form method="post" action="{{ route('ManageItem.UpdateItem', $item->id) }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <div class="content-container">
    <div class="item_content mt-4">
        <div class="col-auto">
            <label for="item_name" class="col-form-label">Nama alat radas:</label>
        </div>
        <div class="col-auto">
            <input type="text" name="item_name" id="item_name" class="form-control @error('item_name') is-invalid @enderror" value="{{ old('item_name', $item->item_name) }}" autocomplete="item_name" placeholder="{{ __('Nama alat radas') }}">
            @error('item_name')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror 
        </div>
           
        <div class="col-auto">
            <label for="item_image" class="@error('item_image') is-invalid @enderror">
                <i class="bx bx-image-add" style="font-size: 35px; cursor: pointer;"></i>
            </label>
            <input type="file" name="item_image" id="item_image" style="display: none; visibility: none;" accept="image/*">
            <div id="display-image-name">
                @if($item->item_image)
                    {{ basename($item->item_image) }}
                @else
                    Tiada gambar yang dipilih
                @endif
            </div>
            @error('item_image')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>
    
    <div class="content-info mt-1">
        <div class="col-auto">
            <label for="item_series_num" class="col-form-label">No. siri:</label>
        </div>
        <div class="col-auto">
            <input type="text" name="item_series_num" id="item_series_num"  class="form-control @error('item_series_num') is-invalid @enderror" value="{{ old('item_series_num', $item->item_series_num) }}" autocomplete="item_series_num" placeholder="{{ __('No. siri') }}">
            @error('item_series_num')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
        
        <div class="col-auto">
            <label for="storageRoomNo" class="col-form-label">No. Bilik Penyediaan:</label>
        </div>
        <div class="col-auto">
            <select id="storageRoomNo" class="form-select @error('storageRoomNo') is-invalid @enderror" name="storageRoomNo">
                <option value="" disabled>-Sila pilih-</option>
                @foreach($itemLocations as $itemLocation)
                    <option value="{{ $itemLocation->storageRoomNo }}" {{ $item->itemLocation->storageRoomNo == $itemLocation->storageRoomNo ? 'selected' : '' }}>
                        {{ $itemLocation->storageRoomNo }}
                    </option>
                @endforeach
            </select>
            @error('storageRoomNo')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="col-auto">
            <label for="itemCategory_name" class="col-form-label">Kategori:</label>
        </div>
        <div class="col-auto">
            <select id="itemCategory_name" class="form-select @error('itemCategory_name') is-invalid @enderror" name="itemCategory_name">
                <option value="" disabled>-Sila pilih-</option>
                @foreach($itemCategories as $itemCategory)
                    <option value="{{ $itemCategory->itemCategory_name }}" {{ $item->itemCategory->itemCategory_name == $itemCategory->itemCategory_name ? 'selected' : '' }}>
                        {{ $itemCategory->itemCategory_name }}
                    </option>
                @endforeach
            </select>
            @error('itemCategory_name')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="col-auto">
            <label for="item_quantity" class="col-form-label">Kuantiti terima:</label>
        </div>
        <div class="col-auto">
            <input type="text" name="item_quantity" id="item_quantity"  class="form-control @error('item_quantity') is-invalid @enderror" value="{{ old('item_quantity', $item->item_quantity) }}" autocomplete="item_quantity" placeholder="{{ __('Jumlah kuantiti') }}">
            @error('item_quantity')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="col-auto">
            <label for="item_currentQuantity" class="col-form-label">Kuantiti baki:</label>
        </div>
        <div class="col-auto">
            <input type="text" name="item_currentQuantity" id="item_currentQuantity"  class="form-control @error('item_currentQuantity') is-invalid @enderror" value="{{ old('item_currentQuantity', $item->item_currentQuantity) }}" autocomplete="item_currentQuantity" placeholder="{{ __('Kuantiti terkini') }}">
            @error('item_currentQuantity')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="col-auto">
            <label for="inventory_limit" class="col-form-label">Had inventori:</label>
        </div>
        <div class="col-auto">
            <select id="inventory_limit" class="form-select @error('inventory_limit') is-invalid @enderror" name="inventory_limit">
                <option value="" disabled selected>-Sila pilih-</option>
                <option value="10" {{ old('inventory_limit', $item->inventory_limit) == 10 ? 'selected' : '' }}>Kurang dari 10</option>
                <option value="20" {{ old('inventory_limit', $item->inventory_limit) == 20 ? 'selected' : '' }}>Kurang dari 20</option>
                <option value="50" {{ old('inventory_limit', $item->inventory_limit) == 50 ? 'selected' : '' }}>Kurang dari 50</option>
                <option value="100" {{ old('inventory_limit', $item->inventory_limit) == 100 ? 'selected' : '' }}>Kurang dari 100</option>
            </select>
            @error('inventory_limit')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="col-auto">
            <label for="item_price" class="col-form-label">Harga seunit:</label>
        </div>
        <div class="col-auto">
        <div class="input-group">
            <span class="input-group-text">RM</span>
            <input type="text" name="item_price" id="item_price" class="form-control border @error('item_price') is-invalid @enderror" value="{{ old('item_price', $item->item_price) }}" autocomplete="item_price" placeholder="{{ __('0.00') }}">
        </div>
            @error('item_price')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="col-auto">
            <label for="expired_date_option" class="col-form-label">Tarikh luput:</label>
        </div>
        <div class="col-auto">
            <select name="expired_date_option" id="expired_date_option" class="form-select @error('expired_date_option') is-invalid @enderror">
                <option value="" disabled selected>-Sila pilih-</option>
                <option value="no" {{ old('expired_date_option', $item->expired_date === null ? 'no' : 'yes') === 'no' ? 'selected' : '' }}>Tiada</option>
                <option value="yes" {{ old('expired_date_option', $item->expired_date !== null ? 'yes' : 'no') === 'yes' ? 'selected' : '' }}>Pilih tarikh luput</option>
            </select>
            @error('expired_date_option')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror

            <div class="col-auto mt-2 mb-2" id="expired_date_container" style="display: {{ old('expired_date_option', $item->expired_date !== null ? 'yes' : 'no') === 'yes' ? 'block' : 'none' }};">
                <input type="date" name="expired_date" id="expired_date" class="form-control @error('expired_date') is-invalid @enderror" value="{{ old('expired_date', $item->expired_date ? $item->expired_date->format('Y-m-d') : '') }}">
                @error('expired_date')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
        </div>


        <div class="col-auto">
            <label for="item_measurement" class="col-form-label">Isipadu/Ukuran:</label>
        </div>
        <div class="col-auto">
            <select name="item_measurement_option" id="item_measurement_option" class="form-select @error('item_measurement_option') is-invalid @enderror">
                <option value="" disabled selected>-Sila pilih-</option>
                <option value="no" {{ old('item_measurement_option', $item->item_measurement === null ? 'no' : 'yes') == 'no' ? 'selected' : '' }}>Tiada</option>
                <option value="yes" {{ old('item_measurement_option', $item->item_measurement !== null ? 'yes' : 'no') == 'yes' ? 'selected' : '' }}>Pilih isipadu/ukuran</option>    
            </select>
            @error('item_measurement_option')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
         
        <div class="col-auto mt-2 mb-2" id="item_measurement_container" style="display: none;">
            <input type="text" name="item_measurement" id="item_measurement"  class="form-control @error('item_measurement') is-invalid @enderror" value="{{ old('item_measurement', $item->item_measurement) }}" autocomplete="item_measurement" placeholder="{{ __('Isipadu/Ukuran') }}">
            @error('item_measurement')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
        
        </div>
        
        <div class="col-auto">
            <label for="name" class="col-form-label">Pembekal:</label>
        </div>
        <div class="col-auto">
            <select id="name" class="form-select @error('name') is-invalid @enderror" name="name">
                <option value="" disabled>-Sila pilih-</option>
                @foreach($suppliers as $supplier)
                    <option value="{{ $supplier->name }}" {{ $item->supplier->name == $supplier->name ? 'selected' : '' }}>
                        {{ $supplier->name }}
                    </option>
                @endforeach
            </select>
            @error('name')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>
  
    <div class="button-container">
        <a href="{{ route('ManageItem.ItemList', $item->id) }}" class="btn btn-cancel">{{ __('Batal') }}</a>
        <button type="submit" id="submitBtn" class="btn btn-save">{{ __('Simpan') }}</button>
    </div>
</div>  
</div>
</form>

<script>
    $(document).ready(function() {
        document.getElementById('item_image').addEventListener('change', function(event) {
        const file = event.target.files[0]; // Get the selected file
        const displayName = document.getElementById('display-image-name');
        
        if (file) {
            // Display the file name
            displayName.textContent = file.name; // Set the text content to the file name
        } else {
            // If no file is selected, reset to default message
            displayName.textContent = 'Tiada gambar yang dipilih';
        }
    });

    const expiredDateOption = document.getElementById('expired_date_option');
    const expiredDateContainer = document.getElementById('expired_date_container');

    expiredDateOption.addEventListener('change', function() {
        if (this.value === 'yes') {
            expiredDateContainer.style.display = 'block';
        } else {
            expiredDateContainer.style.display = 'none';
        }
    });

    if (expiredDateOption.value === 'yes') {
        expiredDateContainer.style.display = 'block';
    }

    const itemMeasurementOption = document.getElementById('item_measurement_option');
    const itemMeasurementContainer = document.getElementById('item_measurement_container');

    itemMeasurementOption.addEventListener('change', function() {
        if (this.value === 'yes') {
            itemMeasurementContainer.style.display = 'block';
        } else {
            itemMeasurementContainer.style.display = 'none';
        }
    });

        if (itemMeasurementOption.value === 'yes') {
            itemMeasurementContainer.style.display = 'block';
        }
    });
</script>
@endsection