File: /var/www/html/resources/views/livewire/gig/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">Update - "{{ $gig['title'] }}"</h5>
</div>
<div class="col-xl-12">
<form wire:submit.prevent="updateService" class="form-style1">
<div class="row">
<div wire:ignore class="col-sm-12">
<div class="mb20">
<div class="form-style1">
<label class="heading-color ff-heading fw500 mb10">Service type</label>
<div class="bootselect-multiselect">
<select wire:model="subcategory_id" class="selectpicker">
@foreach ($subcategories as $cat)
<option value="{{ $cat->id }}" @if($cat->id == $gig['subcategory_id']) selected @endif>{{ $cat->name }}</option>
@endforeach
</select>
</div>
@error('subcategory_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" x-data="{ title: @entangle('title') }">
<div class="mb20">
<label class="heading-color ff-heading fw500 mb10">Service title</label>
<input x-model="title" x-on:input="updateTitle()" wire:model="title" type="text" class="form-control">
@error('title') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-sm-6" x-data="{
price: @entangle('price'),
formatPrice() {
let value = this.price.replace(/[^\d.-]/g, '');
if (!isNaN(value) && value !== '') {
this.price = this.currency + ' ' + parseFloat(value).toLocaleString('en-US', { maximumFractionDigits: 2 });
}
},
currency: '{{ $currency }}'
}">
<div class="mb20">
<label class="heading-color ff-heading fw500 mb10">Service price ({{ $currency }})</label>
<input x-model="price" x-on:input="formatPrice()" type="tel" value="{{ $gig['price'] }}" class="form-control" placeholder="Enter your price">
@error('price') <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 text-red"><b>Status</b></label>
<div class="bootselect-multiselect">
<select wire:model="status" class="selectpicker">
<option value="active" @selected($gig['status']==='active' )>Active</option>
<option value="inactive" @selected($gig['status']==='inactive' )>Inactive</option>
</select>
</div>
@error('subcategory_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
<div class="col-sm-12">
<div class="mb20">
<div class="form-style1">
<label class="heading-color ff-heading fw500 mb10">Service delivery</label>
<div class="row">
<!-- Time Unit Selector -->
<div wire:ignore class="col-md-6 mb-2 ">
<div class="bootselect-multiselect">
<select required wire:model.live="delivery_unit" class="selectpicker">
<!-- <option value="{{ $gig['delivery_unit'] }}" selected>{{ $gig['delivery_unit'] }}</option> -->
<option value="day" @if($gig['delivery_unit']==='day' ) selected @endif>Days</option>
<option value="week" @if($gig['delivery_unit']==='week' ) selected @endif>Weeks</option>
<option value="month" @if($gig['delivery_unit']==='month' ) selected @endif>Months</option>
</select>
</div>
</div>
@error('delivery_unit') <span class="text-danger">{{ $message }}</span>@enderror
<!-- Time Value Selector -->
<div class="col-md-6">
<select required wire:model="delivery_number" class="form-control">
<option value="{{ $gig['delivery_number'] }}" selected>{{ $gig['delivery_number'] }}</option>
@php
$maxValue = 30; // Default maximum value for days
$unitLabels = ['day' => 'Day', 'week' => 'Week', 'month' => 'Month'];
// Adjust max value based on the selected time unit
if ($delivery_unit == 'week') {
$maxValue = 10; // 10 weeks
} elseif ($delivery_unit == 'month') {
$maxValue = 6; // 6 months
}
@endphp
@for ($i = 1; $i <= $maxValue; $i++) <option value="{{ $i }}" @if($gig['delivery_number']==$i) selected @endif>{{ $i }} {{ $unitLabels[$delivery_unit] ?? 'day' }}{{ $i > 1 ? 's' : '' }}</option>
@endfor
</select>
</div>
@error('delivery_unit') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="mb20" x-data="{ description: @entangle('description').defer, count: @entangle('description').defer.length, maxChars: 1000 }">
<label class="heading-color ff-heading fw500 mb10">Service description</label>
<textarea x-on:input="count = $event.target.value.length" wire:model.lazy="description" cols="30" rows="6" maxlength="1000" class="form-control" placeholder="Describe your service" style="width: 100%; height: 250px;"></textarea>
<span x-text="count + '/' + maxChars + ' limit'" class="text-muted"></span>
@error('description')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</div>
<style>
.rounded-full-preview {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
}
</style>
<div class="col-sm-12">
<div class="row">
@foreach($gig['image_urls'] as $index => $photo)
<div class="col-sm-3 mb-2">
<img src="{{ $photo }}" class="img-thumbnail rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
<a href="#" class="icon me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"
wire:click.prevent="deleteGigPhoto('{{ $gig['image_public_ids'][$index] }}')"
onclick="return confirm('Are you sure you want to delete this service photo?');">
<span class="flaticon-delete"></span>
</a>
</div>
@endforeach
@if ($new_img_url)
@foreach($new_img_url as $photo)
<div class="col-sm-3 mb-2">
<img src="{{ $photo->temporaryUrl() }}" class="img-thumbnail rounded-circle" style="width: 100px; height: 100px; 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.">Update Service Photos (max 4 images)</label></a>
<input multiple wire:model="new_img_url" type="file" class="form-control" />
@error('new_img_url') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<br />
<br />
<br />
<div class="col-md-12">
<div class="d-flex justify-center-between gap-3">
<a href="{{ url()->previous() }}" class="ud-btn btn-thm default-box-shadow2 w-100">
Back
</a>
<button type="submit" wire:loading.attr="disabled" class="ud-btn btn-thm default-box-shadow2 w-100">
<span wire:loading wire:target="updateService" class="spinner-border spinner-border-sm"></span>
<span wire:loading wire:target="updateService">Please wait</span>
<span wire:loading.remove> Update</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</div>