unioil-cms-fe/resources/views/livewire/buttons/create-photo-slider.blade.php

93 lines
3.9 KiB
PHP

<div>
<!-- anchor tag horizontally -->
<div class="flex items-center gap-2 text-xs text-gray-600">
<!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600">
<x-heroicon-o-home class="w-3 h-3 mr-1" />
<span class="leading-none">Home</span>
</a>
<x-heroicon-o-chevron-right class="w-3 h-3" />
<a href="/main/home-page/photo-slider" class="hover:text-orange-600">
Photo Sliders
</a>
<x-heroicon-o-chevron-right class="w-3 h-3" />
<span>
Create Photo Slider
</div>
<!-- Page Title -->
<h3 class="text-5xl font-semibold text-gray-800 mt-4">Create Photo Slider</h3>
<!-- Bottom border -->
<div class="border-b border-gray-300 mt-5"></div>
<div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
<h2 class="text-lg font-semibold mb-4">Photo Slider Details</h2>
<div class="space-y-4">
<!-- Promotion -->
<div class="flex items-center gap-2">
<label class="w-40">Promotion:</label>
<input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Promotion">
</div>
<!-- Title -->
<div class="flex items-center gap-2">
<label class="w-40">Title:</label>
<input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Title">
</div>
<!-- Description -->
<div class="flex items-start gap-2">
<label class="w-40 pt-2">Description:</label>
<textarea wire:model="email" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="Enter your Description here..."></textarea>
</div>
<!-- Image Upload -->
<div class="flex items-start gap-2">
<label class="w-40 pt-2">Upload Image:</label>
<div class="flex-1">
<input type="file" wire:model="image" class="border rounded px-3 py-2" accept="image/*">
@error('image')
<span class="text-red-500 text-sm">{{ $message }}</span>
@enderror
@if ($image)
<div class="mt-4">
<p class="text-sm text-gray-600 mb-2">Preview:</p>
<img src="{{ $image->temporaryUrl() }}" class="h-48 rounded border">
</div>
@endif
</div>
</div>
<!-- Start Date -->
<div class="flex items-center gap-2">
<label class="w-40">Start Date:</label>
<input type="date" wire:model="start_date" class="flex-1 border rounded px-3 py-2">
</div>
<!-- End Date -->
<div class="flex items-center gap-2">
<label class="w-40">End Date:</label>
<input type="date" wire:model="end_date" class="flex-1 border rounded px-3 py-2">
</div>
<!-- Start Time -->
<div class="flex items-center gap-2">
<label class="w-40">Start Time:</label>
<input type="time" wire:model="start_time" class="flex-1 border rounded px-3 py-2">
</div>
<!-- End Time -->
<div class="flex items-center gap-2">
<label class="w-40">End Time:</label>
<input type="time" wire:model="end_time" class="flex-1 border rounded px-3 py-2">
</div>
<!-- Submit / Cancel -->
<div class="mt-6 flex justify-end gap-2">
<button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
<button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
</div>
</div>
</div>