@php
    $openingHoursDefault = [
        ['day' => 'Pazartesi', 'open' => '', 'close' => ''],
        ['day' => 'Salı', 'open' => '', 'close' => ''],
        ['day' => 'Çarşamba', 'open' => '', 'close' => ''],
        ['day' => 'Perşembe', 'open' => '', 'close' => ''],
        ['day' => 'Cuma', 'open' => '', 'close' => ''],
        ['day' => 'Cumartesi', 'open' => '', 'close' => ''],
        ['day' => 'Pazar', 'open' => '', 'close' => ''],
    ];
    $openingHours = old('attributes.opening_hours', $openingHoursDefault);
@endphp
@extends('admin.layouts.app')

@section('title', 'İçerik Ekle | Admin')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    <style>
        .wizard-container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
            position: relative;
        }

        .step-indicator::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background: #e5e7eb;
            z-index: 0;
        }

        .step {
            position: relative;
            z-index: 1;
            text-align: center;
            flex: 1;
        }

        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            border: 2px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .step.active .step-circle {
            background: #3b82f6;
            border-color: #3b82f6;
            color: white;
        }

        .step.completed .step-circle {
            background: #10b981;
            border-color: #10b981;
            color: white;
        }

        .step-label {
            font-size: 12px;
            color: #6b7280;
        }

        .step.active .step-label,
        .step.completed .step-label {
            color: #111827;
            font-weight: 500;
        }

        .step-content {
            display: none;
            animation: fadeIn 0.3s;
        }

        .step-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .type-card {
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            background: white;
        }

        .type-card:hover {
            border-color: #3b82f6;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }

        .type-card.selected {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .type-card .icon {
            font-size: 48px;
            margin-bottom: 12px;
            color: #3b82f6;
        }

        /* Dropzone Styles */
        .dropzone-container {
            position: relative;
            min-height: 300px;
        }

        .dropzone {
            border: 2px dashed #cbd5e0;
            border-radius: 12px;
            padding: 40px;
            text-align: center;
            background: #f9fafb;
            transition: all 0.3s;
            cursor: pointer;
        }

        .dropzone.dragover {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .dropzone-icon {
            font-size: 48px;
            color: #9ca3af;
            margin-bottom: 16px;
        }

        .dropzone-text {
            color: #6b7280;
            font-weight: 500;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 16px;
            margin-top: 24px;
        }

        .image-item {
            position: relative;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
            aspect-ratio: 1;
            background: #f3f4f6;
            cursor: grab;
            transition: all 0.2s;
        }

        .image-item:active {
            cursor: grabbing;
        }

        .image-item.sortable-ghost {
            opacity: 0.3;
            border: 3px dashed #3b82f6;
            background: #eff6ff;
            transform: scale(0.95);
        }

        .image-item.sortable-drag {
            opacity: 0.8;
            transform: scale(1.05);
            z-index: 9999;
        }

        .image-item:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
        }

        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .image-item .delete-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(239, 68, 68, 0.9);
            color: white;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .image-item .delete-btn:hover {
            background: rgba(220, 38, 38, 1);
            transform: scale(1.1);
        }

        .image-item .order-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background: rgba(59, 130, 246, 0.9);
            color: white;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            z-index: 10;
        }

        .image-item .drag-handle {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            cursor: grab;
            z-index: 5;
        }

        .image-item .drag-handle::before {
            content: '';
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .image-item:hover .drag-handle::before {
            content: '⋮⋮ Sürükle';
        }

        .image-item:active .drag-handle {
            cursor: grabbing;

        }
    </style>
@endpush
@section('content')
    <div class="py-8" x-data='{
        currentStep: 1,
        totalSteps: 6,
        formType: "",
        selectedImages: [],
        openingHours: @json($openingHours),
        features: @json(old("attributes.features", [])),
        faqs: @json(old("attributes.faq", [])),
        otherProducts: @json(old("attributes.other_products", [])),
        selectType(type) {
            this.formType = type;
            setTimeout(() => this.nextStep(), 300);
        },
        nextStep() {
            if (this.currentStep < this.totalSteps) {
                this.currentStep++;
            }
        },
        prevStep() {
            if (this.currentStep > 1) {
                this.currentStep--;
            }
        },
        goToStep(step) {
            this.currentStep = step;
        },
        isStepCompleted(step) {
            return this.currentStep > step;
        },
        isStepActive(step) {
            return this.currentStep === step;
        },
        handleFileSelect(event) {
            const files = Array.from(event.target.files);
            files.forEach(file => {
                if (file.type.startsWith("image/")) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.selectedImages.push({
                            file: file,
                            url: e.target.result,
                            name: file.name
                        });
                    };
                    reader.readAsDataURL(file);
                }
            });
        },
        removeImage(index) {
            this.selectedImages.splice(index, 1);
        },
        handleDragOver(event) {
            event.preventDefault();
            event.currentTarget.classList.add("dragover");
        },
        handleDragLeave(event) {
            event.currentTarget.classList.remove("dragover");
        },
        handleDrop(event) {
            event.preventDefault();
            event.currentTarget.classList.remove("dragover");
            const files = Array.from(event.dataTransfer.files);
            files.forEach(file => {
                if (file.type.startsWith("image/")) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.selectedImages.push({
                            file: file,
                            url: e.target.result,
                            name: file.name
                        });
                    };
                    reader.readAsDataURL(file);
                }
            });
        }
    }'>
        <div class="wizard-container px-4">

            <!-- Header -->
            <div class="mb-8 text-center mt-10">
                <h1 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">İçerik Ekle</h1>
                <p class="text-gray-600 dark:text-gray-400">Adım adım formu doldurarak içeriğinizi ekleyin</p>
            </div>

            @if ($errors->any())
                <div
                        class="mb-6 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                      clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Formda hatalar
                                var</h3>
                            <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                                <ul class="list-disc pl-5 space-y-1">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Steps Indicator -->
            <div class="step-indicator">
                <div class="step" :class="{'active': currentStep === 1, 'completed': currentStep > 1}"
                     @click="goToStep(1)">
                    <div class="step-circle">1</div>
                    <div class="step-label">Tip Seç</div>
                </div>
                <div class="step" :class="{'active': currentStep === 2, 'completed': currentStep > 2}"
                     @click="goToStep(2)">
                    <div class="step-circle">2</div>
                    <div class="step-label">Genel</div>
                </div>
                <div class="step" :class="{'active': currentStep === 3, 'completed': currentStep > 3}"
                     @click="goToStep(3)">
                    <div class="step-circle">3</div>
                    <div class="step-label">Fotoğraflar</div>
                </div>
                <div class="step" :class="{'active': currentStep === 4, 'completed': currentStep > 4}"
                     @click="goToStep(4)">
                    <div class="step-circle">4</div>
                    <div class="step-label">Özellikler</div>
                </div>
                <div class="step" :class="{'active': currentStep === 5, 'completed': currentStep > 5}"
                     @click="goToStep(5)">
                    <div class="step-circle">5</div>
                    <div class="step-label">Konum</div>
                </div>
                <div class="step" :class="{'active': currentStep === 6, 'completed': currentStep > 6}"
                     @click="goToStep(6)">
                    <div class="step-circle">6</div>
                    <div class="step-label">SEO</div>
                </div>
            </div>

            <form action="{{ route('admin.items.store') }}" method="POST" enctype="multipart/form-data"
                  id="wizardForm">
                @csrf

                <!-- STEP 1: Tip Seçimi -->
                <div class="step-content" :class="{'active': currentStep === 1}">
                    <div
                            class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                        <h2 class="mb-6 text-2xl font-bold dark:text-white">İçerik Tipi Seçin</h2>
                        <p class="mb-8 text-gray-600 dark:text-gray-400">Hangi tür bir içerik eklemek
                            istiyorsunuz?</p>

                        <div class="grid grid-cols-2 gap-6 md:grid-cols-2">
                            <div class="type-card" :class="{'selected': formType === 'hizmet_detay'}"
                                 @click="selectType('hizmet_detay')">
                                <div class="icon">
                                    <i class="fas fa-utensils"></i>
                                </div>
                                <h3 class="mb-2 text-lg font-semibold dark:text-white">Restoran</h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Menü bilgileri ve restoran
                                    detayları</p>
                            </div>

                            <div class="type-card" :class="{'selected': formType === 'mekan'}"
                                 @click="selectType('mekan')">
                                <div class="icon">
                                    <i class="fas fa-building"></i>
                                </div>
                                <h3 class="mb-2 text-lg font-semibold dark:text-white">Mekan</h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Düğün salonu ve kapasite
                                    bilgileri</p>
                            </div>

                            <div class="type-card" :class="{'selected': formType === 'hizmet'}"
                                 @click="selectType('hizmet')">
                                <div class="icon">
                                    <i class="fas fa-tools"></i>
                                </div>
                                <h3 class="mb-2 text-lg font-semibold dark:text-white">Hizmet</h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Hizmet bilgileri ve
                                    fiyatlar</p>
                            </div>

                            <div class="type-card" :class="{'selected': formType === 'arac_kiralama'}"
                                 @click="selectType('arac_kiralama')">
                                <div class="icon">
                                    <i class="fas fa-car"></i>
                                </div>
                                <h3 class="mb-2 text-lg font-semibold dark:text-white">Araç Kiralama</h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Araç bilgileri ve kiralama
                                    detayları</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 2: Genel Bilgiler -->
                <div class="step-content" :class="{'active': currentStep === 2}">
                    <div
                            class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                        <h2 class="mb-6 text-2xl font-bold dark:text-white">Genel Bilgiler</h2>

                        <input type="hidden" name="type" x-model="formType" required>
                        <input type="hidden" name="category_id" :value="formType" required>

                        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Durum
                                    <span class="text-red-500">*</span></label>
                                <select name="status"
                                        class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                                        required>
                                    <option value="draft">Taslak</option>
                                    <option value="published">Yayında</option>
                                </select>
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Başlık
                                    <span class="text-red-500">*</span></label>
                                <input type="text" name="title" value="{{ old('title') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                                       placeholder="Örn: Lezzet Restoran" required>
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Slug
                                    (URL) <span class="text-red-500">*</span></label>
                                <input type="text" name="slug" value="{{ old('slug') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                                       placeholder="ornek-icerik" required>
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Telefon</label>
                                <input type="text" name="phone" value="{{ old('phone') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                                       placeholder="0(5xx) xxx xx xx">
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Puan</label>
                                <input type="number" step="0.01" min="0" max="5" name="rating"
                                       value="{{ old('rating') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                                       placeholder="4.5">
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Şehir</label>
                                <input type="text" name="location_city" value="{{ old('location_city') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                                       placeholder="Bursa">
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">İlçe</label>
                                <input type="text" name="location_district"
                                       value="{{ old('location_district') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                                       placeholder="Nilüfer">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 3: Fotoğraflar - Dropzone -->
                <div class="step-content" :class="{'active': currentStep === 3}" data-step="3">
                    <div
                            class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                        <h2 class="mb-6 text-2xl font-bold dark:text-white">Fotoğraflar</h2>
                        <p class="mb-6 text-gray-600 dark:text-gray-400">İçerik için fotoğraflarınızı
                            yükleyin</p>

                        <div class="dropzone-container">
                            <!-- Dropzone -->
                            <div
                                    class="dropzone"
                                    @dragover="handleDragOver($event)"
                                    @dragleave="handleDragLeave($event)"
                                    @drop="handleDrop($event)"
                                    @click="$refs.fileInput.click()"
                            >
                                <div class="dropzone-icon">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </div>
                                <div class="dropzone-text">
                                    <p class="mb-2">Fotoğrafları buraya sürükleyip bırakın</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">veya tıklayarak
                                        seçin</p>
                                    <p class="mt-2 text-xs text-gray-400">Birden fazla görsel seçebilirsiniz
                                        (JPG, PNG, WEBP - Maks 5MB)</p>
                                </div>
                            </div>

                            <!-- Hidden file input -->
                            <input
                                    type="file"
                                    x-ref="fileInput"
                                    multiple
                                    accept="image/*"
                                    @change="handleFileSelect($event)"
                                    class="hidden"
                            >

                            <!-- Persistent hidden input to submit ordered files -->
                            <input
                                    type="file"
                                    name="gallery[]"
                                    multiple
                                    class="hidden"
                                    x-ref="galleryInput"
                            >

                            <!-- Preview Grid -->
                            <div class="image-grid" x-show="selectedImages.length > 0" x-ref="imageGrid">
                                <template x-for="(image, index) in selectedImages" :key="index">
                                    <div class="image-item" :data-image-index="index">
                                        <div class="drag-handle"></div>
                                        <img :src="image.url" :alt="image.name">
                                        <div class="order-badge" x-text="index + 1"></div>
                                        <button type="button" class="delete-btn" @click="removeImage(index)"
                                                style="z-index: 9999;">
                                            <svg class="cursor-pointer fill-white " width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.54142 3.7915C6.54142 2.54886 7.54878 1.5415 8.79142 1.5415H11.2081C12.4507 1.5415 13.4581 2.54886 13.4581 3.7915V4.0415H15.6252H16.666C17.0802 4.0415 17.416 4.37729 17.416 4.7915C17.416 5.20572 17.0802 5.5415 16.666 5.5415H16.3752V8.24638V13.2464V16.2082C16.3752 17.4508 15.3678 18.4582 14.1252 18.4582H5.87516C4.63252 18.4582 3.62516 17.4508 3.62516 16.2082V13.2464V8.24638V5.5415H3.3335C2.91928 5.5415 2.5835 5.20572 2.5835 4.7915C2.5835 4.37729 2.91928 4.0415 3.3335 4.0415H4.37516H6.54142V3.7915ZM14.8752 13.2464V8.24638V5.5415H13.4581H12.7081H7.29142H6.54142H5.12516V8.24638V13.2464V16.2082C5.12516 16.6224 5.46095 16.9582 5.87516 16.9582H14.1252C14.5394 16.9582 14.8752 16.6224 14.8752 16.2082V13.2464ZM8.04142 4.0415H11.9581V3.7915C11.9581 3.37729 11.6223 3.0415 11.2081 3.0415H8.79142C8.37721 3.0415 8.04142 3.37729 8.04142 3.7915V4.0415ZM8.3335 7.99984C8.74771 7.99984 9.0835 8.33562 9.0835 8.74984V13.7498C9.0835 14.1641 8.74771 14.4998 8.3335 14.4998C7.91928 14.4998 7.5835 14.1641 7.5835 13.7498V8.74984C7.5835 8.33562 7.91928 7.99984 8.3335 7.99984ZM12.4168 8.74984C12.4168 8.33562 12.081 7.99984 11.6668 7.99984C11.2526 7.99984 10.9168 8.33562 10.9168 8.74984V13.7498C10.9168 14.1641 11.2526 14.4998 11.6668 14.4998C12.081 14.4998 12.4168 14.1641 12.4168 13.7498V8.74984Z" fill=""></path>
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>

                            <!-- Count info -->
                            <div class="mt-4 text-sm text-gray-600 dark:text-gray-400"
                                 x-show="selectedImages.length > 0">
                                Toplam <span x-text="selectedImages.length"
                                             class="font-semibold text-blue-600"></span> fotoğraf seçildi
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 4: Özellikler -->
                <div class="step-content" :class="{'active': currentStep === 4}">
                    <div
                            class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                        <h2 class="mb-6 text-2xl font-bold dark:text-white">Özellikler ve Ekstra Bilgiler</h2>

                        <!-- Hakkında -->
                        <div class="mb-6">
                            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Hakkında</label>
                            <textarea name="attributes[about_html]"
                                      class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                      id="detail" rows="6"
                                      placeholder="İçerik hakkında bilgi">{{ old('attributes.about_html') }}</textarea>
                        </div>

                        <!-- Özellikler -->
                        <div class="mb-6">
                            <div class="flex justify-between mb-3">
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Özellikler</label>
                                <button type="button"
                                        class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white"
                                        @click="features.push('')">
                                    <i class="fas fa-plus mr-1"></i>Özellik Ekle
                                </button>
                            </div>
                            <div class="space-y-3">
                                <template x-for="(feat, fidx) in features" :key="fidx">
                                    <div class="flex gap-2">
                                        <input
                                                class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                                x-model="feat" :name="'attributes[features]['+fidx+']'"
                                                placeholder="Özellik">
                                        <button type="button" class="text-red-600"
                                                @click="features.splice(fidx,1)">
                                            <svg
                                                    class="cursor-pointer hover:fill-error-500 dark:hover:fill-error-500 fill-gray-700 dark:fill-gray-400"
                                                    width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M6.54142 3.7915C6.54142 2.54886 7.54878 1.5415 8.79142 1.5415H11.2081C12.4507 1.5415 13.4581 2.54886 13.4581 3.7915V4.0415H15.6252H16.666C17.0802 4.0415 17.416 4.37729 17.416 4.7915C17.416 5.20572 17.0802 5.5415 16.666 5.5415H16.3752V8.24638V13.2464V16.2082C16.3752 17.4508 15.3678 18.4582 14.1252 18.4582H5.87516C4.63252 18.4582 3.62516 17.4508 3.62516 16.2082V13.2464V8.24638V5.5415H3.3335C2.91928 5.5415 2.5835 5.20572 2.5835 4.7915C2.5835 4.37729 2.91928 4.0415 3.3335 4.0415H4.37516H6.54142V3.7915ZM14.8752 13.2464V8.24638V5.5415H13.4581H12.7081H7.29142H6.54142H5.12516V8.24638V13.2464V16.2082C5.12516 16.6224 5.46095 16.9582 5.87516 16.9582H14.1252C14.5394 16.9582 14.8752 16.6224 14.8752 16.2082V13.2464ZM8.04142 4.0415H11.9581V3.7915C11.9581 3.37729 11.6223 3.0415 11.2081 3.0415H8.79142C8.37721 3.0415 8.04142 3.37729 8.04142 3.7915V4.0415ZM8.3335 7.99984C8.74771 7.99984 9.0835 8.33562 9.0835 8.74984V13.7498C9.0835 14.1641 8.74771 14.4998 8.3335 14.4998C7.91928 14.4998 7.5835 14.1641 7.5835 13.7498V8.74984C7.5835 8.33562 7.91928 7.99984 8.3335 7.99984ZM12.4168 8.74984C12.4168 8.33562 12.081 7.99984 11.6668 7.99984C11.2526 7.99984 10.9168 8.33562 10.9168 8.74984V13.7498C10.9168 14.1641 11.2526 14.4998 11.6668 14.4998C12.081 14.4998 12.4168 14.1641 12.4168 13.7498V8.74984Z"
                                                      fill=""></path>
                                            </svg>
                                        </button>
                                    </div>
                                </template>

                            </div>
                        </div>

                        <!-- S.S.S -->
                        <div>
                            <div class="flex justify-between mb-3">
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Sıkça
                                    Sorulan Sorular</label>
                                <button type="button"
                                        class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white"
                                        @click="faqs.push({q:'',a:''})">
                                    <i class="fas fa-plus mr-1"></i>Soru Ekle
                                </button>
                            </div>
                            <div class="space-y-3">
                                <template x-for="(qa, qidx) in faqs" :key="qidx">
                                    <div class="grid grid-cols-1 gap-2">

                                        <input
                                                class="col-span-5 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                                x-model="qa.q" :name="'attributes[faq]['+qidx+'][q]'"
                                                placeholder="Soru">
                                        <textarea
                                                class="col-span-6 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                                x-model="qa.a" :name="'attributes[faq]['+qidx+'][a]'"
                                                placeholder="Cevap"></textarea>
                                        <div class="flex justify-end">
                                            <button type="button" class="text-red-600"
                                                    @click="faqs.splice(qidx,1)">
                                                <svg
                                                        class="cursor-pointer hover:fill-error-500 dark:hover:fill-error-500 fill-gray-700 dark:fill-gray-400"
                                                        width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                          d="M6.54142 3.7915C6.54142 2.54886 7.54878 1.5415 8.79142 1.5415H11.2081C12.4507 1.5415 13.4581 2.54886 13.4581 3.7915V4.0415H15.6252H16.666C17.0802 4.0415 17.416 4.37729 17.416 4.7915C17.416 5.20572 17.0802 5.5415 16.666 5.5415H16.3752V8.24638V13.2464V16.2082C16.3752 17.4508 15.3678 18.4582 14.1252 18.4582H5.87516C4.63252 18.4582 3.62516 17.4508 3.62516 16.2082V13.2464V8.24638V5.5415H3.3335C2.91928 5.5415 2.5835 5.20572 2.5835 4.7915C2.5835 4.37729 2.91928 4.0415 3.3335 4.0415H4.37516H6.54142V3.7915ZM14.8752 13.2464V8.24638V5.5415H13.4581H12.7081H7.29142H6.54142H5.12516V8.24638V13.2464V16.2082C5.12516 16.6224 5.46095 16.9582 5.87516 16.9582H14.1252C14.5394 16.9582 14.8752 16.6224 14.8752 16.2082V13.2464ZM8.04142 4.0415H11.9581V3.7915C11.9581 3.37729 11.6223 3.0415 11.2081 3.0415H8.79142C8.37721 3.0415 8.04142 3.37729 8.04142 3.7915V4.0415ZM8.3335 7.99984C8.74771 7.99984 9.0835 8.33562 9.0835 8.74984V13.7498C9.0835 14.1641 8.74771 14.4998 8.3335 14.4998C7.91928 14.4998 7.5835 14.1641 7.5835 13.7498V8.74984C7.5835 8.33562 7.91928 7.99984 8.3335 7.99984ZM12.4168 8.74984C12.4168 8.33562 12.081 7.99984 11.6668 7.99984C11.2526 7.99984 10.9168 8.33562 10.9168 8.74984V13.7498C10.9168 14.1641 11.2526 14.4998 11.6668 14.4998C12.081 14.4998 12.4168 14.1641 12.4168 13.7498V8.74984Z"
                                                          fill=""></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 5: Konum -->
                <div class="step-content" :class="{'active': currentStep === 5}">
                    <div
                            class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                        <h2 class="mb-6 text-2xl font-bold dark:text-white">Konum Bilgileri</h2>


                        <div class="md:col-span-2">
                            <label
                                    class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Adres</label>
                            <textarea type="text" name="attributes[location_address]"
                                      value="{{ old('attributes.location_address') }}"
                                      class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                      placeholder="Açık adres"></textarea>
                        </div>
                        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 mt-2">
                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Enlem
                                    (Lat)</label>
                                <input type="text" name="attributes[location_lat]"
                                       value="{{ old('attributes.location_lat') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                       placeholder="40.195">
                            </div>
                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Boylam
                                    (Lng)</label>
                                <input type="text" name="attributes[location_lng]"
                                       value="{{ old('attributes.location_lng') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                       placeholder="29.060">
                            </div>
                        </div>

                        <!-- Çalışma Saatleri -->
                        <div class="mt-8">
                            <label class="mb-4 block text-sm font-medium text-gray-700 dark:text-gray-300">Çalışma
                                Saatleri</label>
                            <div class="space-y-3">
                                <template x-for="(h, hidx) in openingHours" :key="hidx">
                                    <div class="grid grid-cols-12 gap-2">
                                        <input
                                                class="col-span-4 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                                x-model="h.day" :name="'attributes[opening_hours]['+hidx+'][day]'"
                                                placeholder="Gün" disabled>
                                        <input type="time"
                                               class="col-span-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                               x-model="h.open" :name="'attributes[opening_hours]['+hidx+'][open]'"
                                               placeholder="Açılış">
                                        <input type="time"
                                               class="col-span-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                               x-model="h.close"
                                               :name="'attributes[opening_hours]['+hidx+'][close]'"
                                               placeholder="Kapanış">
                                        <button type="button" class="text-red-600"
                                                @click="openingHours.splice(hidx,1)">
                                            <svg
                                                    class="cursor-pointer hover:fill-error-500 dark:hover:fill-error-500 fill-gray-700 dark:fill-gray-400"
                                                    width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M6.54142 3.7915C6.54142 2.54886 7.54878 1.5415 8.79142 1.5415H11.2081C12.4507 1.5415 13.4581 2.54886 13.4581 3.7915V4.0415H15.6252H16.666C17.0802 4.0415 17.416 4.37729 17.416 4.7915C17.416 5.20572 17.0802 5.5415 16.666 5.5415H16.3752V8.24638V13.2464V16.2082C16.3752 17.4508 15.3678 18.4582 14.1252 18.4582H5.87516C4.63252 18.4582 3.62516 17.4508 3.62516 16.2082V13.2464V8.24638V5.5415H3.3335C2.91928 5.5415 2.5835 5.20572 2.5835 4.7915C2.5835 4.37729 2.91928 4.0415 3.3335 4.0415H4.37516H6.54142V3.7915ZM14.8752 13.2464V8.24638V5.5415H13.4581H12.7081H7.29142H6.54142H5.12516V8.24638V13.2464V16.2082C5.12516 16.6224 5.46095 16.9582 5.87516 16.9582H14.1252C14.5394 16.9582 14.8752 16.6224 14.8752 16.2082V13.2464ZM8.04142 4.0415H11.9581V3.7915C11.9581 3.37729 11.6223 3.0415 11.2081 3.0415H8.79142C8.37721 3.0415 8.04142 3.37729 8.04142 3.7915V4.0415ZM8.3335 7.99984C8.74771 7.99984 9.0835 8.33562 9.0835 8.74984V13.7498C9.0835 14.1641 8.74771 14.4998 8.3335 14.4998C7.91928 14.4998 7.5835 14.1641 7.5835 13.7498V8.74984C7.5835 8.33562 7.91928 7.99984 8.3335 7.99984ZM12.4168 8.74984C12.4168 8.33562 12.081 7.99984 11.6668 7.99984C11.2526 7.99984 10.9168 8.33562 10.9168 8.74984V13.7498C10.9168 14.1641 11.2526 14.4998 11.6668 14.4998C12.081 14.4998 12.4168 14.1641 12.4168 13.7498V8.74984Z"
                                                      fill=""></path>
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- STEP 6: Ekstra ve SEO -->
                <div class="step-content" :class="{'active': currentStep === 6}">
                    <div
                            class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                        <h2 class="mb-6 text-2xl font-bold dark:text-white">SEO</h2>

                        <div class="grid grid-cols-1 gap-6">
                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">SEO
                                    Başlık</label>
                                <input type="text" name="meta[seo_title]" value="{{ old('meta.seo_title') }}"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                       placeholder="SEO başlık">
                            </div>
                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">SEO
                                    Açıklama</label>
                                <textarea name="meta[seo_description]"
                                          class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                          rows="3"
                                          placeholder="SEO açıklama">{{ old('meta.seo_description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Navigation Buttons -->
                <div class="mt-8 flex justify-between">
                    <button type="button" x-show="currentStep > 1" @click="prevStep()"
                            class="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-5 py-2  text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                        <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M2.58301 9.99868C2.58272 10.1909 2.65588 10.3833 2.80249 10.53L7.79915 15.5301C8.09194 15.8231 8.56682 15.8233 8.85981 15.5305C9.15281 15.2377 9.15297 14.7629 8.86018 14.4699L5.14009 10.7472L16.6675 10.7472C17.0817 10.7472 17.4175 10.4114 17.4175 9.99715C17.4175 9.58294 17.0817 9.24715 16.6675 9.24715L5.14554 9.24715L8.86017 5.53016C9.15297 5.23717 9.15282 4.7623 8.85983 4.4695C8.56684 4.1767 8.09197 4.17685 7.79917 4.46984L2.84167 9.43049C2.68321 9.568 2.58301 9.77087 2.58301 9.99715C2.58301 9.99766 2.58301 9.99817 2.58301 9.99868Z"
                                  fill=""></path>
                        </svg>
                        Geri
                    </button>
                    <div class="ml-auto"></div>
                    <button type="button" x-show="currentStep < totalSteps" @click="nextStep()"
                            class="flex items-center gap-1 rounded-md bg-blue-600 px-5 py-2 text-white hover:bg-blue-700">
                        İleri
                        <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M17.4175 9.9986C17.4178 10.1909 17.3446 10.3832 17.198 10.53L12.2013 15.5301C11.9085 15.8231 11.4337 15.8233 11.1407 15.5305C10.8477 15.2377 10.8475 14.7629 11.1403 14.4699L14.8604 10.7472L3.33301 10.7472C2.91879 10.7472 2.58301 10.4114 2.58301 9.99715C2.58301 9.58294 2.91879 9.24715 3.33301 9.24715L14.8549 9.24715L11.1403 5.53016C10.8475 5.23717 10.8477 4.7623 11.1407 4.4695C11.4336 4.1767 11.9085 4.17685 12.2013 4.46984L17.1588 9.43049C17.3173 9.568 17.4175 9.77087 17.4175 9.99715C17.4175 9.99763 17.4175 9.99812 17.4175 9.9986Z"
                                  fill=""></path>
                        </svg>
                    </button>
                    <button type="submit" x-show="currentStep === totalSteps"
                            class="rounded-md bg-blue-600 px-6 py-2.5 text-white hover:bg-green-700">
                        <i class="fas fa-check mr-2"></i> Kaydet
                    </button>
                </div>
            </form>
        </div>
    </div>
    </div>
@endsection

@push('styles')
    <style>
        .ck-editor__editable[role="textbox"] {
            min-height: 300px;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>

    <script>
        ClassicEditor
            .create(document.querySelector('#detail'), {
                toolbar: [
                    'undo', 'redo', '|', 'heading', '|',
                    'bold', 'italic', 'underline', '|',
                    'bulletedList', 'numberedList', 'blockQuote', '|',
                    'link', 'insertTable'
                ]
            })
            .catch(error => {
                console.error(error);
            });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let sortableInstance = null;
            let sortableReady = false;

            // Alpine.js ile sync
            const initSortable = () => {
                const imageGrid = document.querySelector('.image-grid');
                const root = document.querySelector('[x-data]');
                if (!imageGrid || !root) return;
                if (sortableReady && sortableInstance && sortableInstance.el === imageGrid) return;

                const alpineData = Alpine.$data(root);

                sortableInstance = new Sortable(imageGrid, {
                    animation: 150,
                    easing: 'cubic-bezier(0.2, 0, 0, 1)',  // istersen bırak
                    draggable: '.image-item',              // SADECE bu çocuklar sürüklenir
                    handle: '.drag-handle',                // tutma noktası
                    filter: '.delete-btn',                 // sil butonuna tıklayınca sürükleme olmasın
                    preventOnFilter: false,
                    scroll: true,
                    scrollSensitivity: 60,
                    scrollSpeed: 10,
                    fallbackTolerance: 5,
                    ghostClass: 'sortable-ghost',
                    dragClass: 'sortable-drag',
                    chosenClass: 'sortable-chosen',
                    // forceFallback: true,                // gerçekten ihtiyaç varsa aç
                    onStart(evt) {
                        evt.item.style.transform = 'rotate(2deg)';
                        evt.item.style.opacity = '0.8';
                    },
                    onChoose() {
                        // Eski sınıflar kalmışsa temizle
                        const grid = document.querySelector('.image-grid');
                        if (grid) {
                            grid.querySelectorAll('.image-item').forEach(el => {
                                el.classList.remove('sortable-ghost', 'sortable-chosen', 'sortable-drag');
                            });
                        }
                    },
                    onUnchoose() {
                        const grid = document.querySelector('.image-grid');
                        if (grid) {
                            grid.querySelectorAll('.image-item').forEach(el => {
                                el.classList.remove('sortable-ghost', 'sortable-chosen', 'sortable-drag');
                            });
                        }
                    },
                    onEnd(evt) {
                        evt.item.style.transform = '';
                        evt.item.style.opacity = '';

                        // Temizlik: kalan sınıfları kaldır
                        const imageGrid = document.querySelector('.image-grid');
                        if (imageGrid) {
                            imageGrid.querySelectorAll('.image-item').forEach(el => {
                                el.classList.remove('sortable-ghost', 'sortable-chosen', 'sortable-drag');
                            });
                        }

                        const oldIndex = evt.oldIndex;
                        const newIndex = evt.newIndex;

                        if (oldIndex !== newIndex) {
                            // Diziyi güncelle (reaktif kalsın diye kopyayla)
                            const arr = [...alpineData.selectedImages];
                            arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0]);
                            alpineData.selectedImages = arr;

                            // Rozetleri güncelle
                            requestAnimationFrame(() => {
                                imageGrid.querySelectorAll('.order-badge').forEach((b, i) => {
                                    b.textContent = i + 1;
                                });
                            });
                        }
                    }
                });
                sortableReady = true;
            };

            const destroySortable = () => {
                if (sortableInstance) {
                    try { sortableInstance.destroy(); } catch (e) {}
                }
                sortableInstance = null;
                sortableReady = false;
            };

            // Adım 3 görünür olduğunda veya grid oluştuğunda başlat, yoksa kapat
            const observer = new MutationObserver(() => {
                const activeStep = document.querySelector('.step-content.active[data-step="3"]');
                const imageGrid = document.querySelector('.image-grid');
                if (activeStep && imageGrid) {
                    initSortable();
                } else if (!imageGrid && sortableReady) {
                    destroySortable();
                }
            });
            const wizard = document.querySelector('.wizard-container');
            if (wizard) {
                observer.observe(wizard, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'style'] });
            }

            // Form submit olduğunda seçilen görselleri, sıralı şekilde input'a aktar
            const form = document.getElementById('wizardForm');
            form.addEventListener('submit', function (e) {
                const dataTransfer = new DataTransfer();
                const alpineData = Alpine.$data(document.querySelector('[x-data]'));

                if (alpineData && alpineData.selectedImages) {
                    alpineData.selectedImages.forEach(image => {
                        dataTransfer.items.add(image.file);
                    });
                }

                const galleryInput = document.querySelector('[x-ref="galleryInput"]');
                if (galleryInput) {
                    galleryInput.files = dataTransfer.files;
                }
            });
            // İlk yüklemede dene
            setTimeout(() => {
                const activeStep = document.querySelector('.step-content.active[data-step="3"]');
                const imageGrid = document.querySelector('.image-grid');
                if (activeStep && imageGrid) initSortable();
            }, 300);
        });
    </script>
@endpush