@extends('layouts.authUser')

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

    <form method="POST" action="{{ route('ManageItem.StoreNewItem') }}" enctype="multipart/form-data">
    @csrf
        
    <!-- Hidden fields for item_id and user_id -->
    <input type="hidden" name="item_status" value="Ada Stok">
    
    <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') }}" autocomplete="item_name" autofocus 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;" onchange="getImage(this.value);">
            <div id="display-image-name"></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. kod:</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') }}" autocomplete="item_series_num" autofocus placeholder="{{ __('No. kod') }}">
            @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 disabled selected>-Sila pilih-</option>
                @foreach($itemLocations as $itemLocation)
                    <option value="{{ $itemLocation->storageRoomNo }}" {{ old('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 selected>-Sila pilih-</option>
                @foreach($itemCategories as $itemCategory)
                    <option value="{{ $itemCategory->itemCategory_name }}" {{ old('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">Jumlah kuantiti:</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') }}" autocomplete="item_quantity" autofocus placeholder="{{ __('Jumlah kuantiti') }}">
            @error('item_quantity')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="col-auto">
            <label for="inventory_limit" class="col-form-label">Paras Stok:</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') == '10' ? 'selected' : '' }}>Kurang dari 10</option>
                <option value="20" {{ old('inventory_limit') == '20' ? 'selected' : '' }}>Kurang dari 20</option>
                <option value="50" {{ old('inventory_limit') == '50' ? 'selected' : '' }}>Kurang dari 50</option>
                <option value="100" {{ old('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') }}" autocomplete="item_price" autofocus placeholder="{{ __('0.00') }}">
            @error('item_price')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
        </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') == 'no' ? 'selected' : '' }}>Tiada</option>
                <option value="yes" {{ old('expired_date_option') == '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: none;">
                <input type="date" name="expired_date" id="expired_date" class="form-control @error('expired_date') is-invalid @enderror" value="{{ old('expired_date') }}" autocomplete="expired_date" autofocus>
                @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') == 'no' ? 'selected' : '' }}>Tiada</option>
                <option value="yes" {{ old('item_measurement_option') == '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') }}" autocomplete="item_measurement" autofocus 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">Nama Pembekal:</label>
        </div>
        <div class="col-auto">
            <select id="name" class="form-select @error('name') is-invalid @enderror" name="name">
                <option value="" disabled selected>-Sila pilih-</option>
                @foreach($suppliers as $supplier)
                    <option value="{{ $supplier->name }}" {{ old('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') }}" class="btn btn-cancel">{{ __('Batal') }}</a>
        <button type="submit" id="submitBtn" class="btn btn-save">{{ __('Tambah') }}</button>
        </div>
    </div>
    </form>

<script>
    function getImage(imageName)
    {
        var newimg=imageName.replace(/^.*\\/,"");
        $('#display-image-name').html(newimg);
    }

    $(document).ready(function() {
        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