File: /var/www/html/resources/views/livewire/shop/update.blade.php
<div class="col-xl-12">
<div class="ps-widget bgc-white bdrs4 p30 mb30 overflow-hidden position-relative">
<div class="bdrb1 pb15 mb25">
<h5 class="list-title">Manage Shop Information</h5>
</div>
<div class="col-xl-12">
<form wire:submit.prevent="updateShop" class="form-style1">
<div class="row">
<div wire:ignore>
<div class="col-sm-12">
<div class="mb20">
<div class="form-style1">
<label class="heading-color ff-heading fw500 mb10">Shop Category</label>
<div class="bootselect-multiselect">
<select wire:model="category_id" class="selectpicker">
<option selected hidden>Select</option>
@foreach ($categories as $cat)
<option value="{{ $cat->id }}">{{ $cat->name }}</option>
@endforeach
</select>
</div>
@error('category_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="mb20" x-data="{ count: 0, maxChars: 2000 }">
<label class="heading-color ff-heading fw500 mb10">Shop Description</label>
<textarea wire:model.lazy="description" x-model="description" x-on:input="count = $event.target.value.length" cols="30" rows="6" maxlength="2000" class="form-control" placeholder="Describe your shop" style="width: 100%; height: 300px;"></textarea>
<span x-text="count + '/' + maxChars + ' limit'" class="text-muted"></span>
@error('description')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-sm-6">
<div class="mb20">
<label class="heading-color ff-heading fw500 mb10">Shop Name</label>
<input wire:model="name" type="text" class="form-control" placeholder="Enter your shop name">
@error('name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-sm-6">
<div class="mb20">
<label class="heading-color ff-heading fw500 mb10">Shop Address</label>
<input wire:model="address" type="text" class="form-control" placeholder="Enter your shop address">
@error('address') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div wire:ignore class="col-sm-6">
<div class="mb20">
<div class="form-style1">
<label class="heading-color ff-heading fw500 mb10">State</label>
<div class="bootselect-multiselect">
<select wire:model.live="selectedState" class="selectpicker">
<option selected hidden>Select State</option>
@foreach($states as $state)
<option value="{{ $state->id }}">{{ $state->name }}</option>
@endforeach
</select>
@error('selectedState') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="mb20">
<div class="form-style1">
<label class="heading-color ff-heading fw500 mb10">City</label>
<div class="bootselect-multiselect">
<select wire:model="city_id" class="form-control">
<option selected hidden>Select City</option>
@if(!empty($cities))
@foreach($cities as $city)
<option value="{{ $city->id }}">{{ $city->name }}</option>
@endforeach
@endif
</select>
@error('city_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
</div>
<style>
.rounded-full-preview {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
</style>
<div class="col-sm-12">
@if ($profile_photo_url)
<img src="{{ $profile_photo_url->temporaryUrl() }}" class="img-thumbnail rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
@endif
<div class="mb20">
<a class="icon me-2 heading-color ff-heading fw500 mb20" data-bs-toggle="tooltip" data-bs-placement="top" title="A clear professional photograph."><span class="flaticon-pencil"></span>
<label class="heading-color ff-heading fw500 mb10">Upload Personal Photo</label></a>
<input wire:model.blur="profile_photo_url" type="file" class="form-control" />
@error('profile_photo_url') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-sm-12">
<div class="row">
@if ($workshop_photo_urls)
@foreach($workshop_photo_urls as $photo)
<div class="col-sm-3 mb-2">
<img src="{{ $photo->temporaryUrl() }}" class="img-thumbnail rounded-circle" style="width: 50px; height: 50px; object-fit: cover;">
</div>
@endforeach
@endif
</div>
<div class="mb20">
<a class="icon me-2 heading-color ff-heading fw500 mb20" data-bs-toggle="tooltip" data-bs-placement="top" title="Upload up to 4 images showcasing your workshop. Each image should be detailed enough and should not exceed 1MB."><span class="flaticon-pencil"></span>
<label class="heading-color ff-heading fw500 mb10" data-toggle="tooltip" data-placement="top" title="Upload up to 4 images showcasing your workshop. Each image should be detailed enough and should not exceed 1MB.">Upload Workshop Photos (max 4 images)</label></a>
<input multiple wire:model="workshop_photo_urls" type="file" class="form-control" />
@error('workshop_photo_urls') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<br />
<br />
<br />
<div class="col-md-12">
<div class="text-start">
<button type="submit" wire:loading.attr="disabled" class="ud-btn btn-thm default-box-shadow2 w-100">
<span wire:loading wire:target="updateShop" class="spinner-border spinner-border-sm"></span>
<span wire:loading.remove> Update Shop</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</div>