<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>
            Update Photo Slider
    </div>

    <!-- Page Title -->
    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Update 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="promotion" class="flex-1 border rounded px-3 py-2" placeholder="Promotion">
            </div> -->

            <!-- Promotion Dropdown -->
            <div class="flex items-center gap-2">
                <label class="w-40">Promotion:</label>
                <select wire:model="promotion_id" class="flex-1 border rounded px-3 py-2">
                    <option value="">-- Select Promotion --</option>
                    @foreach ($promotions as $promo)
                    @if (!is_null($promo['promotion']) && isset($promo['promotion']['promotion_uuid']))
                    <option value="{{ $promo['promotion']['promotion_uuid'] }}">
                        {{ $promo['promotion']['title'] }}
                    </option>
                    @endif
                    @endforeach

                </select>
            </div>

            <!-- Title -->
            <div class="flex items-center gap-2">
                <label class="w-40">Title:</label>
                <input type="text" wire:model="title" class="flex-1 border rounded px-3 py-2" placeholder="Title">
                @error('title')
                <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <!-- Description -->
            <div class="flex items-start gap-2">
                <label class="w-40 pt-2">Description:</label>
                <textarea wire:model="description" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="Enter your Description here..."></textarea>
                @error('description')
                <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </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 (New Upload):</p>
                        <img src="{{ $image->temporaryUrl() }}" class="h-48 rounded border">
                    </div>
                    @elseif (!empty($existingImage))
                    <div class="mt-4">
                        <p class="text-sm text-gray-600 mb-2">Current Image:</p>
                        <img src="{{ config('services.backend_api.url') . $existingImage }}" 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">
                @error('start_date')
                <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </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">
                @error('end_date')
                <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </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>