<form method="POST" wire:submit.prevent="{{$id != null ? 'update' : 'add'}}">
    <div class="row mb-2">
        <div class="col-md-6">
            <div class="input-cont @error('company') is-invalid @enderror">
                <label for="nameLarge" class="form-label">Company<span>*</span></label>
                <select class="form-select form-control" wire:model.defer="company">
                    <option value="">Select</option>
                    @foreach($companies as $comp)
                        <option value="{{$comp->id}}">{{$comp->name}}</option>
                    @endforeach
                </select>
            </div>
            @error('company')
                <span class="invalid-feedback"><strong>{{$message}}</strong></span>
            @enderror
        </div>

        <div class="col-md-6">
            <div class="input-cont @error('name') is-invalid @enderror">
                <label class="form-label">Product Name<span>*</span></label>
                <input type="text" class="form-control" placeholder="Name*" wire:model.defer="name" value="{{old('name')}}">
            </div>
            @error('name') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>
    </div>

    
    <div class="row mb-2">
        <div class="col-md-6">
            <div class="input-cont @error('category') is-invalid @enderror">
                <label class="form-label">Category<span>*</span></label>
                <select class="form-select form-control" aria-label="Default select example" wire:model.defer="category">
                    <option value="">Select*</option>
                    @foreach($categories as $category)
                        <option value="{{$category->id}}" @if($category->id == old('category')) selected @endif>{{$category->name}}</option>
                    @endforeach
                </select>
            </div>
            @error('category') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>

        <div class="col-md-6">
            <div class="input-cont @error('type') is-invalid @enderror">
                <label class="form-label">Type<span>*</span></label>
                <select class="form-select form-control" aria-label="Default select example" wire:model.defer="type">
                    <option value="">Select*</option>
                    <option value="Buying">I am buying</option>
                    <option value="Selling">I am selling</option>
                    
                </select>
            </div>
            @error('type') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>
    </div>
    <div class="row mb-2">
        <div class="col-md-6">
            <div class="input-cont @error('stock_location') is-invalid @enderror">
                <label class="form-label">Stock Location</label>
                <select class="form-select form-control" aria-label="Default select example" wire:model.defer="stock_location">
                    <option value="">Select*</option>
                    @foreach($countries as $location)
                        <option value="{{$location}}" @if($location == old('stock_location')) selected @endif>{{$location}}</option>
                    @endforeach
                </select>
            </div>
            @error('stock_location') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>

        <div class="col-md-6">
            <div class="input-cont @error('unit_type') is-invalid @enderror">
                <label class="form-label">Unit Type</label>
                <select class="form-select form-control" aria-label="Default select example" wire:model.defer="unit_type">
                    <option value="">Select*</option>
                    @foreach(Config::get('constants.unit_types') as $unitType)
                        <option value="{{$unitType}}" 
                            @if($unitType == old('unit_type')) selected @endif>
                            {{$unitType}}
                        </option>
                    @endforeach
                </select>
            </div>
            @error('unit_type') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>
    </div>
    <div class="row mb-2">
        <div class="col-md-6">
            <div class="input-cont @error('unit_size') is-invalid @enderror">
                <label class="form-label">Size</label>
                <input type="number" class="form-control" placeholder="Enter unit size*" wire:model.defer="unit_size" value="{{old('unit_size')}}">
            </div>
            @error('unit_size') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>

        <div class="col-md-6">
            <div class="input-cont @error('unit_per_case') is-invalid @enderror">
                <label class="form-label">Packing (units per case)</label>
                <input type="number" class="form-control" placeholder="Enter*" wire:model.defer="unit_per_case" value="{{old('unit_per_case')}}" >
            </div>
            @error('unit_per_case') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>
    </div>
    <div class="row mb-2">
        <div class="col-md-6">
            <div class="input-cont @error('quantity') is-invalid @enderror">
                <label class="form-label">Quantity (case)</label>
                <input type="number" class="form-control" placeholder="Enter*" wire:model.defer="quantity" value="{{$product->quantity ?? old('quantity')}}" >
            </div>
            @error('quantity') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>

        <div class="col-md-6">
            <div class="input-cont">
                <label class="form-label">Best Before (Optional)</label>
                <input 
                    type="date" 
                    class="form-control" 
                    placeholder="Enter" 
                    wire:model.defer="expiry_date" 
                    value="{{$product->expiry_date ?? old('expiry_date')}}"
                    min="{{ now()->addDay()->format('Y-m-d') }}">
            </div>
        </div>
    </div>
    <div class="row mb-2">
        <div class="col-md-4 mt-3">
            <div class="input-cont @error('currency') is-invalid @enderror">
                <label class="form-label">Currency</label>
                <select class="form-select form-control currency-list" 
                aria-label="Default select example" 
                wire:model.defer="currency"
                wire:change="currencyChanged"
                @if($flagUrl) style="background-image: url('{{$flagUrl}}'),url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%227%22%20viewBox%3D%220%200%2014%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L5.30294%205.30294C6.2402%206.2402%207.7598%206.2402%208.69706%205.30294L13%201%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E');" @endif>
                    {{-- <option value="">Select Currency</option> --}}
                    @foreach(Config::get('constants.currencies') as $currency)
                        <option value="{{$currency['symbol']}}" 
                            @if($currency['symbol'] == old('currency')) selected @endif>
                            {{$currency['currency']}}
                        </option>
                    @endforeach
                </select>
            </div>
            @error('currency') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>

        <div class="col-md-4">
            <div class="input-cont @error('price') is-invalid @enderror">
                <label class="form-label">Price <span style="font-size: 10px">(Enter price, or ask the buyer/seller to contact you to discuss price by selecting the checkbox)</span></label>
                <input type="text" 
                class="form-control numberField"              
                placeholder="{{$selectedCurrencySymbol}}" wire:model.defer="price" value="{{old('price')}}" @if($is_contact == 1) disabled @endif>
            </div>
            @error('price') 
                <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
            @enderror
        </div>
        <div class="col-md-4 mt-3">
            <div class="input-cont">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" 
                        id="flexCheckDefault" wire:model.defer="is_contact"
                        wire:click="updateIsContact"
                        @if($is_contact == 1) checked @endif
                    >
                    <label class="form-check-label" for="flexCheckDefault">
                        Ask buyer/seller to contact you to discuss price
                    </label>
                </div>
            </div>
        </div>
    </div>
            

    <div class="col-md-12 mb-4">
        <div class="input-cont @error('description') is-invalid @enderror">
            <label class="form-label">Description</label>
            <textarea class="form-control" placeholder="Tell about your Products*" rows="6" wire:model.defer="description">{{old('description')}}</textarea>
        </div>
        @error('description') 
            <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
        @enderror
    </div>


    <div class="upload-images  @error('images') is-invalid @enderror">
        <h3>Upload Images & Video</h3>
        <ul id="todo">
            <li>
                {{-- <a href="javascript:;">
                    <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M38.2443 15.3648V22.6375H22.9979V37.8839H15.7252V22.6375H0.566406V15.3648H15.7252V0.206055H22.9979V15.3648H38.2443Z" fill="#060B16"/>
                    </svg>
                    <input type="file" wire:model.defer="images" multiple />
                </a> --}}
                <div class="upload-btn-wrapper">
                    <button class="btn">
                        <a href="javascript:;">
                            <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M38.2443 15.3648V22.6375H22.9979V37.8839H15.7252V22.6375H0.566406V15.3648H15.7252V0.206055H22.9979V15.3648H38.2443Z" fill="#060B16"/>
                            </svg>
                        </a>
                    </button>
                    {{-- <input type="file" id="fileInput" wire:model="images" multiple wire:change.live.debounce.1000ms="storeTemporaryImages"/> --}}
                    <input type="file" id="fileInput" wire:model="images" accept="image/*"/>
                  </div>
            </li>
            <div class="text-center p-3 align-self-center imageLoader" style="display: none">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            @if(!empty($temporaryImages))
                @foreach($temporaryImages as $key => $image)
                    <li wire:key="temp-{{ $key }}">
                        <img src="{{$image->temporaryUrl()}}" alt="forum" class="img-fluid img-preview">
                        <a href="javascript:;" class="delete" wire:click="removeImage({{ $key }})">
                            <svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="18.7244" cy="17.8923" r="17.8923" fill="#060B16"/>
                                <path d="M23.3555 12.5042C23.199 12.3477 22.9866 12.2598 22.7652 12.2598C22.5438 12.2598 22.3315 12.3477 22.1749 12.5042L18.3459 16.3333L14.5169 12.5042C14.3603 12.3477 14.148 12.2598 13.9266 12.2598C13.7052 12.2598 13.4928 12.3477 13.3363 12.5042C13.1797 12.6608 13.0918 12.8731 13.0918 13.0945C13.0918 13.3159 13.1797 13.5283 13.3363 13.6848L17.1653 17.5139L13.3363 21.3429C13.1797 21.4995 13.0918 21.7118 13.0918 21.9332C13.0918 22.1546 13.1797 22.3669 13.3363 22.5235C13.4928 22.68 13.7052 22.768 13.9266 22.768C14.148 22.768 14.3603 22.68 14.5169 22.5235L18.3459 18.6945L22.1749 22.5235C22.3315 22.68 22.5438 22.768 22.7652 22.768C22.9866 22.768 23.199 22.68 23.3555 22.5235C23.5121 22.3669 23.6 22.1546 23.6 21.9332C23.6 21.7118 23.5121 21.4995 23.3555 21.3429L19.5265 17.5139L23.3555 13.6848C23.5121 13.5283 23.6 13.3159 23.6 13.0945C23.6 12.8731 23.5121 12.6608 23.3555 12.5042Z" fill="white"/>
                            </svg>
                        </a>
                        <div wire:loading wire:target="removeImage({{ $key }})" class="text-center p-3">
                            <div class="spinner-border text-danger" role="status">
                                <span class="visually-hidden">Removing...</span>
                            </div>
                        </div>
                    </li>
                @endforeach
            @endif
            @forelse($storedImages as $storedImage)
                <li wire:key="stored-{{ $storedImage['id'] }}">
                    <img src="{{$storedImage['file']}}" alt="forum" class="img-fluid img-preview">
                    <a href="javascript:;" class="delete" wire:click="removeStoredImage({{ $storedImage['id'] }})">
                        <svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="18.7244" cy="17.8923" r="17.8923" fill="#060B16"/>
                            <path d="M23.3555 12.5042C23.199 12.3477 22.9866 12.2598 22.7652 12.2598C22.5438 12.2598 22.3315 12.3477 22.1749 12.5042L18.3459 16.3333L14.5169 12.5042C14.3603 12.3477 14.148 12.2598 13.9266 12.2598C13.7052 12.2598 13.4928 12.3477 13.3363 12.5042C13.1797 12.6608 13.0918 12.8731 13.0918 13.0945C13.0918 13.3159 13.1797 13.5283 13.3363 13.6848L17.1653 17.5139L13.3363 21.3429C13.1797 21.4995 13.0918 21.7118 13.0918 21.9332C13.0918 22.1546 13.1797 22.3669 13.3363 22.5235C13.4928 22.68 13.7052 22.768 13.9266 22.768C14.148 22.768 14.3603 22.68 14.5169 22.5235L18.3459 18.6945L22.1749 22.5235C22.3315 22.68 22.5438 22.768 22.7652 22.768C22.9866 22.768 23.199 22.68 23.3555 22.5235C23.5121 22.3669 23.6 22.1546 23.6 21.9332C23.6 21.7118 23.5121 21.4995 23.3555 21.3429L19.5265 17.5139L23.3555 13.6848C23.5121 13.5283 23.6 13.3159 23.6 13.0945C23.6 12.8731 23.5121 12.6608 23.3555 12.5042Z" fill="white"/>
                        </svg>
                    </a>
                </li>
            @empty
            @endforelse
        </ul>
    </div>
    @error('images') 
        <span class="invalid-feedback"><strong>{{$message}}</strong></span> 
    @enderror
    <button class="post-btn my-4 btn btn-primary" type="submit">Publish</button>
</form>
