File: /var/www/html/resources/views/livewire/gig/add.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">Add Service</h5> -->
</div>
<div class="col-xl-12">
<form wire:submit.prevent="addService" class="form-style1">
<div class="row">
<div class="col-sm-12">
<div wire:ignore 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">
<option selected hidden>Select</option>
@foreach ($subcategories as $cat)
<option value="{{ $cat->id }}">{{ $cat->name }}</option>
@endforeach
</select>
</div>
@error('subcategory_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
<div class="col-sm-6">
<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" placeholder="Enter your service title">
@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"> Price </label>
<input x-model="price" x-on:input="formatPrice()" type="tel" class="form-control" placeholder="Enter your price">
@error('price') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-sm-12">
<div class="mb20">
<div class="form-style1">
<label class="heading-color ff-heading fw500 mb10">Delivery timeline</label>
<div class="row">
<!-- Time Unit Selector -->
<div wire:ignore class="col-md-6 mb-2 ">
<div class="bootselect-multiselect">
<select wire:model.live="delivery_unit" class="form-control">
<option value="" hidden>Select</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
<option value="weeks">Weeks</option>
<option value="months">Months</option>
</select>
</div>
</div>
@error('delivery_unit') <span class="text-danger">{{ $message }}</span>@enderror
<!-- Time Value Selector -->
<div class="col-md-6">
<select wire:model="delivery_number" class="form-control">
<option value="" hidden>Select</option>
@php
$maxValue = 30;
$unitLabels = ['hours' => 'Hour', 'days' => 'Day', 'weeks' => 'Week', 'months' => 'Month'];
if ($delivery_unit == 'weeks') {
$maxValue = 4;
} elseif ($delivery_unit == 'hours') {
$maxValue = 24;
} elseif ($delivery_unit == 'months') {
$maxValue = 12;
}
@endphp
@for ($i = 1; $i <= $maxValue; $i++) <option value="{{ $i }}">{{ $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="{ count: 0, maxChars: 1000 }">
<label class="heading-color ff-heading fw500 mb10">Service description</label>
<textarea wire:model.lazy="description" x-model="description" x-on:input="count = $event.target.value.length" maxlength="1000" class="form-control" placeholder="Enter a brief description of your service" style="width: 100%; height: 100px;"></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">
@if ($image_urls)
@foreach($image_urls 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 mt-2 mb-4">
<input multiple required accept="image/jpeg, image/png, image/jpg" id="fileInput" wire:model.live="image_urls" type="file" class="form-control" />
<span class="ud-btn btn-gray me-2" 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.">
<label wire:loading.remove class="heading-color ff-heading fw500 mb10">Upload Service Photos (max 4 images)
</label>
</span>
@error('image_urls') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<!-- <script>
const fileInput = document.getElementById('fileInput');
const maxSizeInBytes = 1024 * 1024; // 1MB
fileInput.addEventListener('change', function(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
if (files[i].size > maxSizeInBytes) {
alert(`File ${files[i].name} exceeds the maximum size of 1MB.`);
fileInput.value = ''; // Clear the input
break; // Stop the loop if a file is too large
}
}
});
</script> -->
<script>
const fileInput = document.getElementById('fileInput');
const maxSizeInBytes = 1024 * 1024; // 1MB
const maxFiles = 4; // Maximum number of files allowed
fileInput.addEventListener('change', function(event) {
const files = event.target.files;
// Check if the number of files exceeds the maximum
if (files.length > maxFiles) {
alert(`You can only upload up to ${maxFiles} files.`);
fileInput.value = ''; // Clear the input
return; // Stop further processing
}
// Check the size of each file
for (let i = 0; i < files.length; i++) {
if (files[i].size > maxSizeInBytes) {
alert(`File ${files[i].name} exceeds the maximum size of 1MB.`);
fileInput.value = ''; // Clear the input
break; // Stop the loop if a file is too large
}
}
});
</script>
<br />
<br />
<br />
<div class="col-md-12">
<div class="text-start">
<button type="submit"
wire:loading.attr="disabled"
:disabled="$image_urls === null"
style="opacity: {{ $image_urls ? '1' : '0.5' }};
cursor: {{ $image_urls ? 'pointer' : 'not-allowed' }};
transition: opacity 0.3s ease-in-out;"
class="ud-btn btn-thm default-box-shadow2 w-100 mt-4">
<span wire:loading wire:target="image_urls" class="spinner-border spinner-border-sm"></span>
<span wire:loading wire:target="image_urls">Please wait ...</span>
<span wire:loading wire:target="addService">Uploading ...</span>
<span wire:loading.remove>Add Service</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</div>