Update
This commit is contained in:
@@ -0,0 +1,735 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'MakerWorld Modellen Importeren | Jouwdriedee.nl Beheer')
|
||||
|
||||
@section('content')
|
||||
<div class="bg-slate-900 text-white py-8 border-b border-slate-800" x-data="makerWorldApp()">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<!-- Breadcrumb & Top Bar -->
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-slate-800">
|
||||
<div>
|
||||
<div class="flex items-center space-x-2 text-xs text-indigo-400 font-medium uppercase tracking-wider mb-1">
|
||||
<span class="inline-block w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
||||
<span>Backend Beheer</span>
|
||||
<span>•</span>
|
||||
<span>3D Model Synchronisatie</span>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-extrabold text-white flex items-center space-x-3">
|
||||
<span class="p-2 bg-gradient-to-tr from-indigo-600 to-sky-500 rounded-xl text-white shadow-lg shadow-indigo-500/25">
|
||||
<i data-lucide="layers" class="w-6 h-6"></i>
|
||||
</span>
|
||||
<span>MakerWorld Product Importer</span>
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-slate-400">
|
||||
Haal eenvoudig 3D modellen binnen vanaf <a href="https://makerworld.com/nl/3d-models" target="_blank" class="text-indigo-400 hover:text-indigo-300 underline font-medium">makerworld.com</a> en publiceer ze direct in jouw webshop.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Account Connection Status Card -->
|
||||
<div class="flex items-center space-x-3 bg-slate-800/80 backdrop-blur p-3 rounded-2xl border border-slate-700">
|
||||
@if($isAuthenticated)
|
||||
<div class="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-500/40 flex items-center justify-center text-emerald-400">
|
||||
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="text-left pr-2">
|
||||
<div class="text-xs text-slate-400">MakerWorld Status</div>
|
||||
<div class="text-sm font-semibold text-emerald-300 flex items-center space-x-1.5">
|
||||
<span>Verbonden</span>
|
||||
@if(!empty($userProfile['name']) || !empty($userProfile['account']))
|
||||
<span class="text-xs text-slate-300 font-normal">({{ $userProfile['name'] ?? $userProfile['account'] }})</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<form action="{{ route('admin.makerworld.disconnect') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="px-3 py-1.5 text-xs font-medium text-rose-400 hover:text-rose-300 bg-rose-500/10 hover:bg-rose-500/20 rounded-lg border border-rose-500/30 transition-colors">
|
||||
Ontkoppelen
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<div class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/40 flex items-center justify-center text-amber-400">
|
||||
<i data-lucide="shield-alert" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="text-left pr-2">
|
||||
<div class="text-xs text-slate-400">MakerWorld Status</div>
|
||||
<div class="text-sm font-semibold text-amber-300">Niet ingelogd</div>
|
||||
</div>
|
||||
<button type="button" @click="showLoginModal = true" class="px-3.5 py-1.5 text-xs font-semibold text-white bg-indigo-600 hover:bg-indigo-500 rounded-lg shadow-sm transition-colors flex items-center space-x-1">
|
||||
<i data-lucide="log-in" class="w-3.5 h-3.5"></i>
|
||||
<span>Inloggen</span>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification Alerts -->
|
||||
@if(session('success'))
|
||||
<div class="mt-4 p-4 rounded-xl bg-emerald-950/60 border border-emerald-500/40 text-emerald-200 text-sm flex items-center space-x-3">
|
||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-400 shrink-0"></i>
|
||||
<div class="font-medium">{{ session('success') }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(session('warning'))
|
||||
<div class="mt-4 p-4 rounded-xl bg-amber-950/60 border border-amber-500/40 text-amber-200 text-sm flex items-center space-x-3">
|
||||
<i data-lucide="alert-triangle" class="w-5 h-5 text-amber-400 shrink-0"></i>
|
||||
<div class="font-medium">{{ session('warning') }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(session('error'))
|
||||
<div class="mt-4 p-4 rounded-xl bg-rose-950/60 border border-rose-500/40 text-rose-200 text-sm flex items-center space-x-3">
|
||||
<i data-lucide="x-circle" class="w-5 h-5 text-rose-400 shrink-0"></i>
|
||||
<div class="font-medium">{{ session('error') }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Quick Import Search & Paste URL Bar -->
|
||||
<div class="mt-8 bg-gradient-to-r from-slate-800 to-indigo-950/60 p-6 rounded-3xl border border-indigo-900/50 shadow-xl">
|
||||
<div class="max-w-3xl">
|
||||
<h2 class="text-lg font-bold text-white flex items-center space-x-2">
|
||||
<i data-lucide="zap" class="w-5 h-5 text-amber-400"></i>
|
||||
<span>Snel importeren via URL of Model-ID</span>
|
||||
</h2>
|
||||
<p class="text-xs text-slate-300 mt-1">
|
||||
Kopieer een link van een willekeurig model op MakerWorld (bijv. <code>https://makerworld.com/nl/models/55866</code>) of vul het ID in.
|
||||
</p>
|
||||
|
||||
<form @submit.prevent="fetchQuickPreview()" class="mt-4 flex flex-col sm:flex-row gap-3">
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
|
||||
<i data-lucide="link" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
x-model="quickInput"
|
||||
placeholder="https://makerworld.com/nl/models/55866 of 55866..."
|
||||
class="w-full pl-10 pr-4 py-3 bg-slate-900/90 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm font-mono"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isLoadingQuick"
|
||||
class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-semibold rounded-xl text-sm flex items-center justify-center space-x-2 shadow-md transition-all shrink-0"
|
||||
>
|
||||
<template x-if="isLoadingQuick">
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
|
||||
</svg>
|
||||
<span>Ophalen...</span>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!isLoadingQuick">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="download-cloud" class="w-4 h-4"></i>
|
||||
<span>Model Bekijken & Importeren</span>
|
||||
</div>
|
||||
</template>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="mt-8 border-b border-slate-800 flex items-center justify-between overflow-x-auto">
|
||||
<nav class="flex space-x-3 sm:space-x-4">
|
||||
@if($isAuthenticated)
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'favorites']) }}"
|
||||
class="pb-4 px-3 text-sm font-medium border-b-2 transition-colors flex items-center space-x-2 {{ $currentTab === 'favorites' ? 'border-indigo-500 text-indigo-400 font-bold' : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-700' }}">
|
||||
<i data-lucide="heart" class="w-4 h-4 text-rose-400"></i>
|
||||
<span>Mijn MakerWorld Favorieten</span>
|
||||
</a>
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'published']) }}"
|
||||
class="pb-4 px-3 text-sm font-medium border-b-2 transition-colors flex items-center space-x-2 {{ $currentTab === 'published' ? 'border-indigo-500 text-indigo-400 font-bold' : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-700' }}">
|
||||
<i data-lucide="folder" class="w-4 h-4 text-amber-400"></i>
|
||||
<span>Mijn Gepubliceerde Modellen</span>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'community']) }}"
|
||||
class="pb-4 px-3 text-sm font-medium border-b-2 transition-colors flex items-center space-x-2 {{ $currentTab === 'community' ? 'border-indigo-500 text-indigo-400 font-bold' : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-700' }}">
|
||||
<i data-lucide="sparkles" class="w-4 h-4 text-sky-400"></i>
|
||||
<span>Trending & Community Modellen</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'imported']) }}"
|
||||
class="pb-4 px-3 text-sm font-medium border-b-2 transition-colors flex items-center space-x-2 {{ $currentTab === 'imported' ? 'border-indigo-500 text-indigo-400 font-bold' : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-700' }}">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4 text-emerald-400"></i>
|
||||
<span>In Webshop Geïmporteerd ({{ count($importedIds) }})</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<a href="https://makerworld.com/nl/3d-models" target="_blank" class="hidden sm:flex items-center space-x-1.5 text-xs text-slate-400 hover:text-indigo-400 pb-3">
|
||||
<span>Open MakerWorld</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- TAB CONTENT: Models Grid (Favorites / Published / Community) -->
|
||||
@if($currentTab !== 'imported')
|
||||
<div class="mt-8">
|
||||
|
||||
@if(empty($models))
|
||||
<div class="text-center py-16 bg-slate-800/40 rounded-3xl border border-slate-800">
|
||||
<div class="w-16 h-16 rounded-2xl bg-slate-800 flex items-center justify-center text-slate-400 mx-auto mb-4">
|
||||
<i data-lucide="box" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white">Geen modellen gevonden in dit overzicht</h3>
|
||||
<p class="text-sm text-slate-400 max-w-md mx-auto mt-1">
|
||||
@if(!$isAuthenticated && in_array($currentTab, ['favorites', 'published']))
|
||||
Log eerst in met je MakerWorld account om je opgeslagen favorieten of ontwerpen te bekijken.
|
||||
@else
|
||||
Probeer de trending modellen te bekijken of plak direct een URL in het zoekveld hierboven.
|
||||
@endif
|
||||
</p>
|
||||
@if(!$isAuthenticated)
|
||||
<button type="button" @click="showLoginModal = true" class="mt-5 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-semibold transition-colors">
|
||||
Inloggen bij MakerWorld
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<!-- Batch selection controls header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
||||
<div class="text-sm text-slate-400">
|
||||
<span>Toont <strong class="text-white">{{ count($models) }}</strong> modellen van MakerWorld. Vink modellen aan om ze in één klik te importeren.</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<button type="button" @click="toggleSelectAll()" class="text-xs text-indigo-400 hover:text-indigo-300 font-medium">
|
||||
<span x-text="selectedIds.length === totalModels ? 'Deselecteer alles' : 'Selecteer alles op deze pagina'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
@foreach($models as $model)
|
||||
@php
|
||||
$mId = $model['id'] ?? 0;
|
||||
$isAlreadyImported = in_array($mId, $importedIds);
|
||||
$cover = $model['cover'] ?? $model['coverUrl'] ?? 'https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=600&q=80';
|
||||
$title = $model['title'] ?? 'MakerWorld Model #' . $mId;
|
||||
$author = $model['designCreator']['name'] ?? $model['designCreator']['handle'] ?? 'MakerWorld Maker';
|
||||
@endphp
|
||||
<div class="bg-slate-800/80 rounded-2xl border transition-all duration-200 overflow-hidden flex flex-col group {{ $isAlreadyImported ? 'border-emerald-500/40 shadow-sm' : 'border-slate-700/80 hover:border-indigo-500/50 hover:shadow-lg' }}">
|
||||
|
||||
<!-- Card Image -->
|
||||
<div class="relative aspect-4/3 overflow-hidden bg-slate-900">
|
||||
<img src="{{ $cover }}" alt="{{ $title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
|
||||
|
||||
<!-- Selection Checkbox -->
|
||||
<div class="absolute top-3 left-3 z-10">
|
||||
<label class="flex items-center justify-center w-7 h-7 rounded-lg bg-slate-900/80 backdrop-blur border border-white/20 cursor-pointer shadow-md hover:scale-105 transition-transform">
|
||||
<input type="checkbox" value="{{ $mId }}" x-model="selectedIds" class="w-4 h-4 text-indigo-600 rounded focus:ring-0">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Status Badges -->
|
||||
<div class="absolute top-3 right-3 flex flex-col gap-1.5 items-end">
|
||||
@if($isAlreadyImported)
|
||||
<span class="px-2 py-0.5 text-[11px] font-bold rounded-md bg-emerald-500 text-white shadow-md flex items-center space-x-1">
|
||||
<i data-lucide="check" class="w-3 h-3 stroke-[3]"></i>
|
||||
<span>In Webshop</span>
|
||||
</span>
|
||||
@endif
|
||||
@if(!empty($model['printCount']))
|
||||
<span class="px-2 py-0.5 text-[10px] font-medium rounded-md bg-slate-900/80 backdrop-blur text-slate-300 border border-white/10 flex items-center space-x-1">
|
||||
<i data-lucide="printer" class="w-3 h-3 text-sky-400"></i>
|
||||
<span>{{ number_format($model['printCount']) }} prints</span>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<a href="https://makerworld.com/nl/models/{{ $mId }}" target="_blank" class="absolute bottom-2 right-2 p-1.5 rounded-lg bg-slate-900/80 backdrop-blur text-slate-300 hover:text-white border border-white/10 transition-colors" title="Bekijk op MakerWorld">
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div class="p-4 flex flex-col flex-1">
|
||||
<div class="text-[11px] text-slate-400 mb-1 flex items-center justify-between">
|
||||
<span class="truncate">Door {{ $author }}</span>
|
||||
<span class="font-mono text-slate-500">#{{ $mId }}</span>
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-white line-clamp-2 leading-snug mb-3 flex-1" title="{{ $title }}">
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="pt-3 border-t border-slate-700/60 flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="openImportModal({{ $mId }})"
|
||||
class="w-full py-2 px-3 rounded-xl text-xs font-semibold flex items-center justify-center space-x-1.5 transition-colors {{ $isAlreadyImported ? 'bg-slate-700 hover:bg-slate-600 text-slate-200' : 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-md shadow-indigo-600/20' }}"
|
||||
>
|
||||
<i data-lucide="{{ $isAlreadyImported ? 'refresh-cw' : 'plus-circle' }}" class="w-3.5 h-3.5"></i>
|
||||
<span>{{ $isAlreadyImported ? 'Bewerken / Updaten' : 'Selecteer & Importeer' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- TAB CONTENT: Already Imported Products in Database -->
|
||||
@else
|
||||
<div class="mt-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-white">Geïmporteerde MakerWorld Producten in jouw Shop</h2>
|
||||
<p class="text-xs text-slate-400">Deze producten zijn actief of opgeslagen in jouw webshop database.</p>
|
||||
</div>
|
||||
<a href="{{ route('catalog') }}" target="_blank" class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold rounded-xl border border-slate-700 flex items-center space-x-1.5 transition-colors">
|
||||
<span>Bekijk publieke catalogus</span>
|
||||
<i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if($importedProducts->isEmpty())
|
||||
<div class="text-center py-16 bg-slate-800/40 rounded-3xl border border-slate-800">
|
||||
<div class="w-16 h-16 rounded-2xl bg-slate-800 flex items-center justify-center text-slate-400 mx-auto mb-4">
|
||||
<i data-lucide="package-open" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white">Nog geen MakerWorld modellen geïmporteerd</h3>
|
||||
<p class="text-sm text-slate-400 max-w-md mx-auto mt-1">
|
||||
Selecteer hierboven modellen via de tabs of plak direct een MakerWorld link om je eerste product toe te voegen.
|
||||
</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="bg-slate-800/80 rounded-2xl border border-slate-700 overflow-hidden shadow-xl">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left text-sm text-slate-300">
|
||||
<thead class="bg-slate-900/60 text-xs text-slate-400 uppercase font-semibold border-b border-slate-700">
|
||||
<tr>
|
||||
<th class="py-3 px-4">Product</th>
|
||||
<th class="py-3 px-4">MakerWorld Ref</th>
|
||||
<th class="py-3 px-4">Categorie</th>
|
||||
<th class="py-3 px-4">Verkoopprijs</th>
|
||||
<th class="py-3 px-4">Print Specs</th>
|
||||
<th class="py-3 px-4">Status</th>
|
||||
<th class="py-3 px-4 text-right">Acties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-700/60">
|
||||
@foreach($importedProducts as $product)
|
||||
<tr class="hover:bg-slate-750 transition-colors">
|
||||
<td class="py-3 px-4 flex items-center space-x-3">
|
||||
<img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-12 h-12 rounded-lg object-cover bg-slate-900 shrink-0">
|
||||
<div class="min-w-0">
|
||||
<a href="{{ route('product.show', $product->slug) }}" target="_blank" class="font-semibold text-white hover:text-indigo-400 line-clamp-1">
|
||||
{{ $product->name }}
|
||||
</a>
|
||||
<span class="text-xs text-slate-400">SKU: {{ $product->sku ?? 'MW-' . $product->makerworld_id }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-4">
|
||||
<a href="{{ $product->makerworld_url ?? 'https://makerworld.com/nl/models/' . $product->makerworld_id }}" target="_blank" class="text-xs text-indigo-400 hover:text-indigo-300 flex items-center space-x-1 font-mono">
|
||||
<span>#{{ $product->makerworld_id }}</span>
|
||||
<i data-lucide="external-link" class="w-3 h-3"></i>
|
||||
</a>
|
||||
<div class="text-[11px] text-slate-400">{{ $product->makerworld_author ?? 'MakerWorld' }}</div>
|
||||
</td>
|
||||
<td class="py-3 px-4">
|
||||
<span class="px-2.5 py-1 rounded-md text-xs font-medium bg-slate-700 text-slate-300">
|
||||
{{ $product->category->name ?? 'Ongecategoriseerd' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3 px-4 font-mono font-bold text-emerald-400">
|
||||
{{ $product->formatted_price }}
|
||||
</td>
|
||||
<td class="py-3 px-4 text-xs text-slate-400">
|
||||
@if($product->print_time_hours)
|
||||
<div>⏱️ {{ $product->print_time_hours }} uur printtijd</div>
|
||||
@endif
|
||||
@if($product->weight_grams)
|
||||
<div>⚖️ {{ $product->weight_grams }} gram filament</div>
|
||||
@endif
|
||||
</td>
|
||||
<td class="py-3 px-4">
|
||||
@if($product->is_active)
|
||||
<span class="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
|
||||
Actief in shop
|
||||
</span>
|
||||
@else
|
||||
<span class="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-slate-700 text-slate-400">
|
||||
Concept / Verborgen
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="py-3 px-4 text-right space-x-2">
|
||||
<a href="{{ route('product.show', $product->slug) }}" target="_blank" class="p-1.5 text-slate-400 hover:text-white inline-block" title="Bekijk in webshop">
|
||||
<i data-lucide="eye" class="w-4 h-4"></i>
|
||||
</a>
|
||||
<button type="button" @click="openImportModal({{ $product->makerworld_id }})" class="p-1.5 text-indigo-400 hover:text-indigo-300 inline-block" title="Bewerken / Opnieuw synchroniseren">
|
||||
<i data-lucide="edit" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@if($importedProducts->hasPages())
|
||||
<div class="p-4 border-t border-slate-700">
|
||||
{{ $importedProducts->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FLOATING BATCH IMPORT BAR (When items are checked) -->
|
||||
<div
|
||||
x-show="selectedIds.length > 0"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-8"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 translate-y-8"
|
||||
class="fixed bottom-6 inset-x-0 z-40 max-w-4xl mx-auto px-4 pointer-events-none"
|
||||
>
|
||||
<div class="bg-indigo-950/95 backdrop-blur-md border border-indigo-500/50 shadow-2xl rounded-2xl p-4 text-white flex flex-col sm:flex-row items-center justify-between gap-4 pointer-events-auto">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-indigo-500/20 border border-indigo-400/40 flex items-center justify-center font-bold text-indigo-300">
|
||||
<span x-text="selectedIds.length"></span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-white"><span x-text="selectedIds.length"></span> modellen geselecteerd</div>
|
||||
<div class="text-xs text-indigo-300">Klaar om direct te publiceren in je webshop</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.makerworld.batch-import') }}" method="POST" class="flex items-center space-x-3 w-full sm:w-auto">
|
||||
@csrf
|
||||
<template x-for="id in selectedIds" :key="id">
|
||||
<input type="hidden" name="ids[]" :value="id">
|
||||
</template>
|
||||
|
||||
<select name="category_id" class="bg-slate-900 border border-indigo-700 rounded-xl px-3 py-2 text-xs text-white focus:ring-2 focus:ring-indigo-400">
|
||||
<option value="">Kies standaard categorie...</option>
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
<button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 font-bold text-xs text-white rounded-xl shadow-lg transition-transform hover:scale-105 shrink-0 flex items-center space-x-1.5">
|
||||
<i data-lucide="download" class="w-4 h-4"></i>
|
||||
<span>Alles Nu Importeren</span>
|
||||
</button>
|
||||
|
||||
<button type="button" @click="selectedIds = []" class="p-2 text-indigo-300 hover:text-white" title="Annuleren">
|
||||
<i data-lucide="x" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: LOGIN / AUTHENTICATIE MET MAKERWORLD -->
|
||||
<div
|
||||
x-show="showLoginModal"
|
||||
x-cloak
|
||||
class="fixed inset-0 z-50 overflow-y-auto bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4"
|
||||
>
|
||||
<div
|
||||
@click.away="showLoginModal = false"
|
||||
class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 sm:p-8 shadow-2xl relative text-slate-100"
|
||||
>
|
||||
<button @click="showLoginModal = false" class="absolute top-5 right-5 text-slate-400 hover:text-white">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
|
||||
<div class="flex items-center space-x-3 mb-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center text-indigo-400">
|
||||
<i data-lucide="key-round" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-extrabold text-white">Inloggen bij MakerWorld</h3>
|
||||
<p class="text-xs text-slate-400">Koppel jouw MakerWorld / Bambu Lab account</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Login Method Tabs -->
|
||||
<div class="flex space-x-2 border-b border-slate-800 pb-3 mb-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="loginTab = 'credentials'"
|
||||
:class="loginTab === 'credentials' ? 'text-indigo-400 border-b-2 border-indigo-500 font-bold' : 'text-slate-400 hover:text-white'"
|
||||
class="pb-2 text-xs font-semibold px-2 transition-colors"
|
||||
>
|
||||
Account (E-mail & Wachtwoord)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="loginTab = 'token'"
|
||||
:class="loginTab === 'token' ? 'text-indigo-400 border-b-2 border-indigo-500 font-bold' : 'text-slate-400 hover:text-white'"
|
||||
class="pb-2 text-xs font-semibold px-2 transition-colors"
|
||||
>
|
||||
Direct Token / Sessie Plakken
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- METHOD 1: Credentials / 2FA -->
|
||||
<div x-show="loginTab === 'credentials'">
|
||||
@if(session('makerworld_2fa_account'))
|
||||
<!-- 2FA Verification Code Form -->
|
||||
<form action="{{ route('admin.makerworld.verify-code') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
<input type="hidden" name="account" value="{{ session('makerworld_2fa_account') }}">
|
||||
<div class="p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-200 text-xs">
|
||||
Voer de 6-cijferige verificatiecode in die Bambu Lab zojuist naar <strong>{{ session('makerworld_2fa_account') }}</strong> heeft gemaild.
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-300 mb-1.5">6-cijferige Beveiligingscode</label>
|
||||
<input type="text" name="code" maxlength="6" placeholder="123456" class="w-full text-center tracking-widest font-mono text-xl py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-indigo-500" required autofocus>
|
||||
</div>
|
||||
<button type="submit" class="w-full py-3 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl text-sm shadow-lg transition-colors">
|
||||
Verifiëren & Verbinden
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<!-- Account & Password Form -->
|
||||
<form action="{{ route('admin.makerworld.login') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-300 mb-1.5">MakerWorld / Bambu Lab E-mailadres</label>
|
||||
<input type="email" name="account" placeholder="jouw@email.nl" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 text-sm focus:ring-2 focus:ring-indigo-500" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-300 mb-1.5">Wachtwoord</label>
|
||||
<input type="password" name="password" placeholder="••••••••" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 text-sm focus:ring-2 focus:ring-indigo-500" required>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-400 leading-relaxed">
|
||||
💡 Heeft je Bambu Lab account 2-stapsverificatie? Dan ontvang je automatisch een code per e-mail die je in de volgende stap invult.
|
||||
</p>
|
||||
<button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl text-sm shadow-lg shadow-indigo-600/30 transition-colors">
|
||||
Inloggen bij MakerWorld
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- METHOD 2: Direct Token / Cookie -->
|
||||
<div x-show="loginTab === 'token'">
|
||||
<form action="{{ route('admin.makerworld.token') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-300 mb-1.5">Bambu Cloud / MakerWorld Access Token</label>
|
||||
<textarea name="token" rows="4" placeholder="Plak hier je Bearer accessToken (bijv. vanuit F12 browser inspect of Bambu Studio)..." class="w-full p-3 font-mono text-xs bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:ring-2 focus:ring-indigo-500" required></textarea>
|
||||
</div>
|
||||
<div class="text-[11px] text-slate-400 bg-slate-800/60 p-3 rounded-xl border border-slate-800">
|
||||
<strong>Hoe vind je dit token?</strong><br>
|
||||
Als je al bent ingelogd op <a href="https://makerworld.com" target="_blank" class="text-indigo-400 underline">makerworld.com</a> in je browser, druk op <code>F12</code> → tabblad <em>Toepassing/Application</em> → <em>Cookies</em> → kopieer de waarde van het <code>token</code> cookie.
|
||||
</div>
|
||||
<button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl text-sm shadow-lg shadow-indigo-600/30 transition-colors">
|
||||
Token Opslaan & Verbinden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: MODEL BEKIJKEN & IMPORTEREN -->
|
||||
<div
|
||||
x-show="showImportModal"
|
||||
x-cloak
|
||||
class="fixed inset-0 z-50 overflow-y-auto bg-slate-950/85 backdrop-blur-sm flex items-center justify-center p-4"
|
||||
>
|
||||
<div
|
||||
@click.away="showImportModal = false"
|
||||
class="bg-slate-900 border border-slate-800 rounded-3xl max-w-2xl w-full p-6 sm:p-8 shadow-2xl relative text-slate-100 max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<button @click="showImportModal = false" class="absolute top-5 right-5 text-slate-400 hover:text-white">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div x-show="isLoadingModal" class="py-16 text-center">
|
||||
<svg class="animate-spin h-8 w-8 text-indigo-500 mx-auto mb-3" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
|
||||
</svg>
|
||||
<div class="text-sm text-slate-300 font-semibold">Model gegevens ophalen van MakerWorld...</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Details Form -->
|
||||
<div x-show="!isLoadingModal && activeModel">
|
||||
<form action="{{ route('admin.makerworld.import') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="makerworld_id" :value="activeModel?.makerworld_id">
|
||||
|
||||
<!-- Header with Image & Title -->
|
||||
<div class="flex flex-col sm:flex-row gap-5 pb-6 border-b border-slate-800">
|
||||
<img :src="activeModel?.image_url" class="w-full sm:w-36 h-36 rounded-2xl object-cover bg-slate-950 shadow-md shrink-0">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-2 text-xs text-indigo-400 font-semibold mb-1">
|
||||
<span x-text="'MakerWorld #' + activeModel?.makerworld_id"></span>
|
||||
<span>•</span>
|
||||
<span x-text="'Door ' + activeModel?.makerworld_author"></span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white leading-tight" x-text="activeModel?.name"></h3>
|
||||
<p class="text-xs text-slate-400 line-clamp-3 mt-2" x-text="activeModel?.short_description"></p>
|
||||
|
||||
<!-- Specifications Pill -->
|
||||
<div class="flex flex-wrap gap-2 mt-3 text-[11px] text-slate-300">
|
||||
<span class="px-2.5 py-1 rounded-lg bg-slate-800 border border-slate-700 flex items-center space-x-1">
|
||||
<i data-lucide="clock" class="w-3 h-3 text-sky-400"></i>
|
||||
<span x-text="activeModel?.print_time_hours ? activeModel?.print_time_hours + ' uur' : 'Onbekend'"></span>
|
||||
</span>
|
||||
<span class="px-2.5 py-1 rounded-lg bg-slate-800 border border-slate-700 flex items-center space-x-1">
|
||||
<i data-lucide="scale" class="w-3 h-3 text-amber-400"></i>
|
||||
<span x-text="activeModel?.weight_grams ? activeModel?.weight_grams + ' gram' : 'Onbekend'"></span>
|
||||
</span>
|
||||
<span class="px-2.5 py-1 rounded-lg bg-slate-800 border border-slate-700 flex items-center space-x-1">
|
||||
<i data-lucide="shield" class="w-3 h-3 text-emerald-400"></i>
|
||||
<span x-text="activeModel?.makerworld_license ?? 'Standaard Licentie'"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Form Fields -->
|
||||
<div class="space-y-4 pt-6">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-300 mb-1">Producttitel in jouw Webshop</label>
|
||||
<input type="text" name="custom_name" x-model="activeModel.name" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white text-sm focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-300 mb-1">Koppel aan Categorie</label>
|
||||
<select name="category_id" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white text-sm focus:ring-2 focus:ring-indigo-500">
|
||||
<option value="">Geen categorie (standaard)</option>
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-300 mb-1">
|
||||
<span>Verkoopprijs (€)</span>
|
||||
<span class="text-slate-400 font-normal ml-1">(incl. marge & printkosten)</span>
|
||||
</label>
|
||||
<input type="number" step="0.01" min="1" name="custom_price" x-model="activeModel.base_price" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white text-sm font-mono focus:ring-2 focus:ring-indigo-500" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Switch -->
|
||||
<div class="flex items-center justify-between p-4 bg-slate-800/60 rounded-2xl border border-slate-700">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-white">Direct actief in de webshop</div>
|
||||
<div class="text-xs text-slate-400">Bezoekers kunnen dit product direct bekijken en bestellen</div>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" name="is_active" value="1" checked class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Action -->
|
||||
<div class="mt-8 flex items-center justify-end space-x-3 pt-6 border-t border-slate-800">
|
||||
<button type="button" @click="showImportModal = false" class="px-5 py-2.5 rounded-xl text-xs font-semibold text-slate-400 hover:text-white transition-colors">
|
||||
Annuleren
|
||||
</button>
|
||||
<button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-indigo-600 to-sky-500 hover:from-indigo-500 hover:to-sky-400 text-white font-bold text-sm rounded-xl shadow-lg shadow-indigo-500/25 transition-transform hover:scale-105 flex items-center space-x-2">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span>Toevoegen aan Webshop</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function makerWorldApp() {
|
||||
return {
|
||||
showLoginModal: {{ session('makerworld_2fa_account') ? 'true' : 'false' }},
|
||||
loginTab: 'credentials',
|
||||
showImportModal: false,
|
||||
isLoadingModal: false,
|
||||
isLoadingQuick: false,
|
||||
quickInput: '',
|
||||
activeModel: null,
|
||||
selectedIds: [],
|
||||
totalModels: {{ count($models) }},
|
||||
|
||||
toggleSelectAll() {
|
||||
if (this.selectedIds.length === this.totalModels) {
|
||||
this.selectedIds = [];
|
||||
} else {
|
||||
this.selectedIds = @json(array_column($models, 'id'));
|
||||
}
|
||||
},
|
||||
|
||||
async openImportModal(id) {
|
||||
this.showImportModal = true;
|
||||
this.isLoadingModal = true;
|
||||
this.activeModel = null;
|
||||
|
||||
try {
|
||||
const response = await fetch(`{{ route('admin.makerworld.preview') }}?query=${id}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.model) {
|
||||
this.activeModel = data.model;
|
||||
} else {
|
||||
alert(data.error || 'Kon model niet ophalen');
|
||||
this.showImportModal = false;
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Fout bij ophalen van model: ' + err.message);
|
||||
this.showImportModal = false;
|
||||
} finally {
|
||||
this.isLoadingModal = false;
|
||||
this.$nextTick(() => {
|
||||
if (window.lucide) {
|
||||
window.lucide.createIcons();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async fetchQuickPreview() {
|
||||
if (!this.quickInput.trim()) return;
|
||||
|
||||
this.isLoadingQuick = true;
|
||||
try {
|
||||
const response = await fetch(`{{ route('admin.makerworld.preview') }}?query=${encodeURIComponent(this.quickInput)}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.model) {
|
||||
this.activeModel = data.model;
|
||||
this.showImportModal = true;
|
||||
} else {
|
||||
alert(data.error || 'Kon model niet vinden op MakerWorld.');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Fout bij ophalen van model: ' + err.message);
|
||||
} finally {
|
||||
this.isLoadingQuick = false;
|
||||
this.$nextTick(() => {
|
||||
if (window.lucide) {
|
||||
window.lucide.createIcons();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user