File: /var/www/html/resources/views/livewire/shop/add.blade copy.php
<div>
<style>
body {
background-color: #f7f7f7;
}
.steps {
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.step-item {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
background-color: #f1f1f1;
}
.step-item.active {
background-color: #e6f4ff;
color: #007bff;
}
.service-grid a {
text-align: center;
display: block;
padding: 10px;
background-color: #f8f9fa;
border-radius: 10px;
text-decoration: none;
color: black;
transition: background-color 0.3s;
}
.service-grid a:hover {
background-color: #e2e6ea;
}
.service-grid i {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.continue-btn {
text-align: center;
margin-top: 20px;
}
</style>
<div class="container">
<!-- <center>
<img src="{{ asset('fixgini_logo.png') }}" class="text-center mb-4 mt-4" />
</center> -->
<div class="row">
<!-- Steps on the left -->
<div class="col-md-4">
<div class="steps">
<div class="step-item" :class="{ 'active': {{ $currentStep }} === 1 }">
<span>Step 1: What do you do?</span>
<span :class="{ 'bg': {{ $currentStep }} === 1, 'bg-thm': {{ $currentStep }} !== 1 }">@if ($currentStep === 1) In progress @else Pending @endif</span>
</div>
<div class="step-item" :class="{ 'active': {{ $currentStep }} === 2 }">
<span>Step 2: Shop details</span>
<span :class="{ 'bg': {{ $currentStep }} === 2, 'bg-thm': {{ $currentStep }} !== 2 }">@if ($currentStep === 2) In progress @else Pending @endif</span>
</div>
<div class="step-item" :class="{ 'active': {{ $currentStep }} === 3 }">
<span>Step 3: Shop pictures</span>
<span :class="{ 'bg': {{ $currentStep }} === 3, 'bg-thm': {{ $currentStep }} !== 3 }">@if ($currentStep === 3) In progress @else Pending @endif</span>
</div>
<!-- <div class="step-item" :class="{ 'active': {{ $currentStep }} === 4 }">
<span>Step 4: Certifications</span>
<span :class="{ 'bg': {{ $currentStep }} === 4, 'bg-thm': {{ $currentStep }} !== 4 }">@if ($currentStep === 4) In progress @else Pending @endif</span>
</div>
<div class="step-item" :class="{ 'active': {{ $currentStep }} === 5 }">
<span>Step 5: Services</span>
<span :class="{ 'bg': {{ $currentStep }} === 5, 'bg-thm': {{ $currentStep }} !== 5 }">@if ($currentStep === 5) In progress @else Pending @endif</span>
</div>
<div class="step-item" :class="{ 'active': {{ $currentStep }} === 6 }">
<span>Step 6: Preview profile</span>
<span :class="{ 'bg': {{ $currentStep }} === 6, 'bg-thm': {{ $currentStep }} !== 6 }">Pending</span>
</div> -->
</div>
</div>
<div class="col-md-8">
@if ($currentStep === 1)
<!-- Service Grid: Category Selection -->
<div class="col-xl-12">
<div class="ps-widget bgc-white bdrs4 p30 mb30 overflow-hidden position-relative">
<h3 class="mb-4">What do you do?</h3>
<div class="row row-cols-2 row-cols-md-4 g-3 service-grid">
@php
$shuffledCategories = $categories;
@endphp
@foreach ($shuffledCategories as $cat)
<div class="col">
<a href="#" @click.prevent="$wire.set('category_id', '{{ $cat['id'] }}')" :class="{ 'active-category': '{{ $cat['id'] }}' === '{{ $category_id }}' }">
<img src="{{ $cat['icon_url'] }}" style="width: 40px; height:40px;" />
{{ $cat['name'] }}
</a>
</div>
@endforeach
</div>
<br>
<button class="ud-btn btn-thm default-box-shadow2 w-100" :disabled="!category_id" @click="$wire.nextStep()">Continue</button>
</div>
</div>
<!-- Continue button -->
@endif
<!-- Next Step: Shop Details Form -->
@if ($currentStep === 2)
<h3 class="mb-4">Shop Details</h3>
<!-- Shop Name Input -->
<div class="col-xl-12">
<div class="ps-widget bgc-white bdrs4 p30 mb30 overflow-hidden position-relative">
<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>
<!-- Shop Description Textarea -->
<div class="mb20" x-data="{ count: 0, maxChars: 2000 }">
<label class="heading-color ff-heading fw500 mb10">Description</label>
<textarea wire:model.lazy="description" x-model="description" x-on:input="count = $event.target.value.length" cols="5" rows="2" maxlength="2000" class="form-control" placeholder="Enter a brief description of the shop" 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 class="col-sm-12">
<div class="mb20">
<label class="heading-color ff-heading fw500 mb10">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 class="row">
<div 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="form-control">
<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>
</div>
<div class="d-flex justify-center-between gap-4">
<button class="ud-btn btn-thm default-box-shadow2 w-100 mt-4" @click="$wire.prevStep()">Back</button>
<button class="ud-btn btn-thm default-box-shadow2 w-100 mt-4" @click="$wire.nextStep()">Continue</button>
</div>
</div>
</div>
@endif
@if ($currentStep === 3)
<h3 class="mb-4">Shop Photos</h3>
<div class="col-xl-12">
<div class="ps-widget bgc-white bdrs4 p30 mb30 overflow-hidden position-relative">
<div class="row">
<!-- Upload placeholder (Hidden file input) -->
<div class="col-sm-6">
<div class="gallery-item bdrs4 overflow-hidden">
<a href="#" @click.prevent="$refs.fileInput.click()">
<img class="w-100" src="{{ asset('images/background/upload.png') }}" alt="Upload Image">
</a>
</div>
</div>
<!-- Hidden input field -->
<input type="file" accept="image/png, image/jpeg, image/jpg" style="display: none;" wire:model="profile_photo_url" x-ref="fileInput" @change="handleFile">
<!-- Preview -->
<div class="col-sm-6" x-data="{ imagePreview: null }" x-init="handleFile = (event) => {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
imagePreview = e.target.result;
};
reader.readAsDataURL(file);
}
}">
<template x-if="imagePreview">
<div class="gallery-item bdrs4 overflow-hidden">
<img style="height: 200px;" class="w-90 rounded" :src="imagePreview" alt="Image Preview">
</div>
</template>
</div>
</div>
<div class="row" x-data="{ imagePreviews: [] }" x-init="handleFiles = (event) => {
const files = event.target.files;
imagePreviews = [];
if (files.length > 4) {
alert('You can only upload up to 4 images.');
return;
}
Array.from(files).forEach(file => {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
imagePreviews.push(e.target.result);
};
reader.readAsDataURL(file);
}
});
}">
<!-- Upload placeholder (Hidden file input) -->
<div class="col-sm-3">
<div class="gallery-item bdrs4 overflow-hidden" style="border: 2px dashed #ccc; width: 100%; padding-top: 100%; position: relative;">
<a href="#" @click.prevent="$refs.fileInput.click()" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center;">
<img src="{{ asset('images/background/upload2.png') }}" alt="Upload Images" style="max-width: 180%; max-height: 180%;">
</a>
</div>
</div>
<!-- Hidden input field for uploading multiple images -->
<input type="file" wire:model="workshop_photo_urls" accept="image/png, image/jpeg, image/jpg" style="display: none;" multiple x-ref="fileInput" @change="handleFiles">
<!-- Preview the selected images -->
<template x-for="(imagePreview, index) in imagePreviews" :key="index">
<div class="col-sm-3">
<div class="gallery-item bdrs4 overflow-hidden" style="border: 2px solid #ddd; width: 100%; padding-top: 100%; position: relative;">
<img :src="imagePreview" alt="Image Preview" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
</div>
</div>
</template>
</div>
<!-- Hidden input field -->
<div class="d-flex justify-center-between gap-4 mb-4">
<button class="ud-btn btn-thm default-box-shadow2 w-100 mt-4" @click="$wire.prevStep()">Back</button>
<button class="ud-btn btn-thm default-box-shadow2 w-100 mt-4" @click="$wire.nextStep()">Continue</button>
</div>
</div>
</div>
@endif
@if ($currentStep === 4)
<h3 class="mb-4">Certification</h3>
@livewire('certificate.add')
<div class="d-flex justify-center-between gap-4 mb-4">
<button class="ud-btn btn-thm default-box-shadow2 w-100 mt-4" @click="$wire.prevStep()">Back</button>
<button class="ud-btn btn-thm default-box-shadow2 w-100 mt-4" @click="$wire.nextStep()">Continue</button>
</div>
@endif
@if ($currentStep === 5)
<h3 class="mb-4">Service</h3>
@livewire('gig.add')
<div class="d-flex justify-center-between gap-4 mb-4">
<button class="ud-btn btn-thm default-box-shadow2 w-100 mt-4" @click="$wire.prevStep()">Back</button>
<button class="ud-btn btn-thm default-box-shadow2 w-100 mt-4" @click="$wire.nextStep()">Continue</button>
</div>
@endif
</div>
</div>
</div>
<style>
.active-category {
border: 2px solid #007bff;
padding: 10px;
}
</style>
</div>