632 lines
41 KiB
PHP
632 lines
41 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'MakerWorld Collecties & Auto-Sync | Jouwdriedee.nl Beheer')
|
|
|
|
@section('content')
|
|
<div class="py-8 bg-slate-950 text-slate-100 min-h-screen" x-data="makerWorldSyncApp()">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
|
|
|
|
<!-- Header & Status 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-amber-400 font-bold uppercase tracking-wider mb-1">
|
|
<span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
|
|
<span>MakerWorld Integratie</span>
|
|
<span>•</span>
|
|
<span>Collecties & 10-Minuten Auto-Sync</span>
|
|
</div>
|
|
<h1 class="text-2xl sm:text-3xl font-black text-white flex items-center space-x-3">
|
|
<span class="p-2 bg-gradient-to-tr from-amber-400 to-orange-500 rounded-2xl text-slate-950 shadow-lg shadow-amber-400/20">
|
|
<i data-lucide="refresh-cw" class="w-6 h-6"></i>
|
|
</span>
|
|
<span>MakerWorld Product Importer & Collecties Sync</span>
|
|
</h1>
|
|
<p class="mt-1 text-sm text-slate-400">
|
|
Koppel je MakerWorld collecties (zoals <code class="text-amber-400 font-mono">@user_1718037659</code>). Het systeem controleert elke 10 minuten automatisch op nieuwe modellen!
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Quick Stats & Staging Link -->
|
|
<div class="flex items-center space-x-3">
|
|
<a href="{{ route('admin.makerworld.staging') }}" class="px-4 py-2.5 bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-500 hover:to-amber-600 text-slate-950 font-black text-xs rounded-xl shadow-md transition flex items-center space-x-2">
|
|
<i data-lucide="layers" class="w-4 h-4"></i>
|
|
<span>Artikel Beheer</span>
|
|
@if($stagedCount > 0)
|
|
<span class="px-2 py-0.5 rounded-full bg-slate-950 text-amber-300 text-[11px] font-black">
|
|
{{ $stagedCount }} concepten
|
|
</span>
|
|
@endif
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Alerts -->
|
|
@if(session('success'))
|
|
<div class="p-4 rounded-2xl 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-bold">{{ session('success') }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('warning'))
|
|
<div class="p-4 rounded-2xl 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-bold">{{ session('warning') }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="p-4 rounded-2xl 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-bold">{{ session('error') }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- 2FA Verificatiecode Invoerscherm (Bambu Lab) -->
|
|
@if(session('makerworld_2fa_account'))
|
|
<div class="bg-gradient-to-r from-slate-900 to-amber-950/80 p-6 sm:p-8 rounded-3xl border-2 border-amber-400 shadow-2xl">
|
|
<div class="max-w-xl mx-auto text-center space-y-4">
|
|
<div class="w-16 h-16 rounded-2xl bg-amber-400/20 text-amber-400 flex items-center justify-center mx-auto shadow-inner">
|
|
<i data-lucide="shield-check" class="w-8 h-8"></i>
|
|
</div>
|
|
<div>
|
|
<span class="px-3 py-1 rounded-full text-xs font-black uppercase tracking-wider bg-amber-400 text-slate-950">
|
|
Stap 2: Twee-staps Verificatie (2FA)
|
|
</span>
|
|
<h2 class="text-2xl font-black text-white mt-2">Bambu Lab Verificatiecode</h2>
|
|
<p class="text-xs text-slate-300 mt-1">
|
|
Vul de 6-cijferige verificatiecode in die Bambu Lab zojuist heeft verzonden naar <strong class="text-amber-300 font-mono">{{ session('makerworld_2fa_account') }}</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.makerworld.verify-code') }}" method="POST" class="mt-4 space-y-4">
|
|
@csrf
|
|
<input type="hidden" name="account" value="{{ session('makerworld_2fa_account') }}">
|
|
|
|
<div class="flex justify-center">
|
|
<input
|
|
type="text"
|
|
name="code"
|
|
maxlength="6"
|
|
placeholder="123456"
|
|
autofocus
|
|
required
|
|
class="w-56 text-center text-3xl font-mono font-black tracking-widest px-4 py-3 bg-slate-950 border-2 border-amber-400 rounded-2xl text-amber-300 focus:outline-none focus:ring-4 focus:ring-amber-400/30 placeholder-slate-700"
|
|
>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center space-x-3 pt-2">
|
|
<button type="submit" class="px-8 py-3 bg-amber-400 hover:bg-amber-300 text-slate-950 font-black rounded-2xl text-xs uppercase tracking-wider shadow-lg shadow-amber-400/20 transition flex items-center space-x-2">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
<span>Verifieer Code & Inloggen</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="pt-3 border-t border-slate-800/80 flex items-center justify-center space-x-6 text-xs text-slate-400">
|
|
<form action="{{ route('admin.makerworld.resend-code') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="account" value="{{ session('makerworld_2fa_account') }}">
|
|
<button type="submit" class="hover:text-amber-400 underline font-bold transition">
|
|
Geen code ontvangen? Verstuur opnieuw
|
|
</button>
|
|
</form>
|
|
<span>•</span>
|
|
<a href="{{ route('admin.makerworld.index', ['tab' => 'auth']) }}" class="hover:text-slate-300 underline font-bold transition">
|
|
Ander account proberen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- TAB Bar -->
|
|
<div class="flex items-center space-x-2 border-b border-slate-800 pb-2 overflow-x-auto text-sm font-bold">
|
|
<a href="{{ route('admin.makerworld.index', ['tab' => 'collections']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'collections' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
|
|
<i data-lucide="folder-sync" class="w-4 h-4"></i>
|
|
<span>Gekoppelde Collecties</span>
|
|
<span class="px-2 py-0.5 rounded-md text-xs {{ $currentTab === 'collections' ? 'bg-slate-950 text-amber-400' : 'bg-slate-800 text-slate-400' }}">
|
|
{{ $trackedCollections->count() }}
|
|
</span>
|
|
</a>
|
|
|
|
<a href="{{ route('admin.makerworld.staging') }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 text-slate-400 hover:text-white hover:bg-slate-900">
|
|
<i data-lucide="layers" class="w-4 h-4"></i>
|
|
<span>Artikel Beheer (Staging)</span>
|
|
@if($stagedCount > 0)
|
|
<span class="px-2 py-0.5 rounded-md text-xs bg-amber-400 text-slate-950 font-black">
|
|
{{ $stagedCount }} nieuw
|
|
</span>
|
|
@endif
|
|
</a>
|
|
|
|
<a href="{{ route('admin.makerworld.index', ['tab' => 'quick']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'quick' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
|
|
<i data-lucide="zap" class="w-4 h-4"></i>
|
|
<span>Los Model Importeren</span>
|
|
</a>
|
|
|
|
<a href="{{ route('admin.makerworld.index', ['tab' => 'auth']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'auth' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
|
|
<i data-lucide="key" class="w-4 h-4"></i>
|
|
<span>MakerWorld Login & Token</span>
|
|
@if($isAuthenticated)
|
|
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
|
@endif
|
|
</a>
|
|
</div>
|
|
|
|
<!-- TAB 1: COLLECTIONS & AUTO-SYNC -->
|
|
@if($currentTab === 'collections')
|
|
<div class="space-y-8">
|
|
|
|
<!-- Add Collection Form -->
|
|
<div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl">
|
|
<div class="max-w-3xl">
|
|
<div class="flex items-center space-x-2 text-xs font-bold uppercase tracking-wider text-amber-400 mb-1">
|
|
<i data-lucide="plus-circle" class="w-4 h-4"></i>
|
|
<span>Nieuwe Collectie Toevoegen</span>
|
|
</div>
|
|
<h2 class="text-xl font-black text-white">MakerWorld Collectie Koppelen aan Auto-Sync</h2>
|
|
<p class="text-xs text-slate-400 mt-1">
|
|
Voer de link in van een collectie (bijv. <code class="text-amber-300 font-mono">https://makerworld.com/nl/collections/9205051</code>) of je gebruikersprofiel <code class="text-amber-300 font-mono">https://makerworld.com/nl/@user_1718037659/collections</code>.
|
|
</p>
|
|
|
|
<form action="{{ route('admin.makerworld.collections.add') }}" method="POST" class="mt-6 space-y-4">
|
|
@csrf
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-300 uppercase tracking-wider mb-2">
|
|
Collectie URL, Model Collectie-ID of Gebruikersprofiel
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-500">
|
|
<i data-lucide="link" class="w-5 h-5"></i>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
name="collection_input"
|
|
value="{{ old('collection_input', 'https://makerworld.com/nl/@user_1718037659/collections') }}"
|
|
placeholder="bijv. https://makerworld.com/nl/@user_1718037659/collections of 9205051..."
|
|
class="w-full pl-11 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-2xl text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-amber-400 text-sm font-mono"
|
|
required
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-2">
|
|
<div class="flex items-center space-x-6 text-xs text-slate-300">
|
|
<label class="flex items-center space-x-2 cursor-pointer">
|
|
<input type="checkbox" name="is_active_sync" value="1" checked class="w-4 h-4 rounded text-amber-500 bg-slate-950 border-slate-700 focus:ring-amber-400">
|
|
<span class="font-bold">Iedere 10 minuten automatisch controleren</span>
|
|
</label>
|
|
|
|
<label class="flex items-center space-x-2 cursor-pointer">
|
|
<input type="checkbox" name="sync_now" value="1" checked class="w-4 h-4 rounded text-amber-500 bg-slate-950 border-slate-700 focus:ring-amber-400">
|
|
<span class="font-bold">Direct eerste import uitvoeren</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="px-6 py-3 bg-amber-400 hover:bg-amber-300 text-slate-950 font-black rounded-2xl text-xs uppercase tracking-wider shadow-lg shadow-amber-400/20 transition flex items-center justify-center space-x-2 shrink-0">
|
|
<i data-lucide="download-cloud" class="w-4 h-4"></i>
|
|
<span>Collectie Koppelen</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tracked Collections List -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-black text-white flex items-center space-x-2">
|
|
<i data-lucide="check-check" class="w-5 h-5 text-emerald-400"></i>
|
|
<span>Actief Gevolgde Collecties (Auto-Sync)</span>
|
|
</h2>
|
|
<p class="text-xs text-slate-400">
|
|
Modellen uit deze collecties worden binnengehaald als concepten in <a href="{{ route('admin.makerworld.staging') }}" class="text-amber-400 underline font-bold">Artikel Beheer</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
@if($trackedCollections->isEmpty())
|
|
<div class="text-center py-12 bg-slate-900/60 rounded-3xl border border-slate-800 p-8">
|
|
<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="folder-x" class="w-8 h-8"></i>
|
|
</div>
|
|
<h3 class="text-base font-bold text-white">Nog geen collecties gekoppeld</h3>
|
|
<p class="text-xs text-slate-400 max-w-md mx-auto mt-1">
|
|
Voeg hierboven een collectie toe of gebruik je gebruikersnaam <code class="text-amber-400 font-mono">@user_1718037659</code> om automatische 10-minuten import te starten.
|
|
</p>
|
|
</div>
|
|
@else
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach($trackedCollections as $collection)
|
|
<div class="bg-slate-900 rounded-3xl border border-slate-800 overflow-hidden flex flex-col justify-between shadow-lg hover:border-slate-700 transition">
|
|
<div>
|
|
<!-- Collection Header & Cover -->
|
|
<div class="relative h-40 bg-slate-950 overflow-hidden">
|
|
@if($collection->cover_url)
|
|
<img src="{{ $collection->cover_url }}" alt="{{ $collection->name }}" class="w-full h-full object-cover">
|
|
@else
|
|
<div class="w-full h-full flex items-center justify-center bg-gradient-to-tr from-slate-900 to-slate-800 text-slate-600">
|
|
<i data-lucide="image" class="w-12 h-12"></i>
|
|
</div>
|
|
@endif
|
|
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent"></div>
|
|
|
|
<!-- Auto-sync badge -->
|
|
<div class="absolute top-3 right-3">
|
|
@if($collection->is_active_sync)
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-500/90 text-white backdrop-blur flex items-center space-x-1 shadow-md">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
|
|
<span>Auto-Sync 10m</span>
|
|
</span>
|
|
@else
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-slate-800 text-slate-400 backdrop-blur border border-slate-700">
|
|
Gepauzeerd
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="absolute bottom-3 left-3 right-3">
|
|
<div class="text-[10px] font-bold text-amber-400 uppercase tracking-wider">
|
|
ID: #{{ $collection->makerworld_collection_id }} • {{ $collection->user_handle ?? 'MakerWorld' }}
|
|
</div>
|
|
<h3 class="text-base font-black text-white truncate" title="{{ $collection->name }}">
|
|
{{ $collection->name }}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body Stats -->
|
|
<div class="p-5 space-y-3">
|
|
@if($collection->description)
|
|
<p class="text-xs text-slate-400 line-clamp-2">
|
|
{{ $collection->description }}
|
|
</p>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-3 gap-2 py-2 px-3 bg-slate-950 rounded-2xl border border-slate-800 text-center">
|
|
<div>
|
|
<div class="text-[10px] font-bold text-slate-500 uppercase">Totaal</div>
|
|
<div class="text-sm font-black text-white">{{ $collection->items_count }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] font-bold text-amber-400 uppercase">Concept</div>
|
|
<div class="text-sm font-black text-amber-400">{{ $collection->draft_products_count }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] font-bold text-emerald-400 uppercase">Live</div>
|
|
<div class="text-sm font-black text-emerald-400">{{ $collection->published_products_count }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-[11px] text-slate-400 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<span>Laatste controle:</span>
|
|
<span class="font-mono text-slate-300">
|
|
{{ $collection->last_synced_at ? $collection->last_synced_at->diffForHumans() : 'Nog niet' }}
|
|
</span>
|
|
</div>
|
|
@if($collection->last_sync_message)
|
|
<div class="text-[10px] text-slate-500 truncate" title="{{ $collection->last_sync_message }}">
|
|
Status: {{ $collection->last_sync_message }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="p-4 bg-slate-950/60 border-t border-slate-800 flex items-center justify-between gap-2">
|
|
<div class="flex items-center space-x-2">
|
|
<!-- Manual Sync Now -->
|
|
<form action="{{ route('admin.makerworld.collections.sync', $collection) }}" method="POST">
|
|
@csrf
|
|
<button type="submit" title="Nu direct synchroniseren" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold transition flex items-center space-x-1 border border-slate-700">
|
|
<i data-lucide="refresh-cw" class="w-3.5 h-3.5 text-amber-400"></i>
|
|
<span>Nu Syncen</span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Toggle Active Auto-sync -->
|
|
<form action="{{ route('admin.makerworld.collections.toggle', $collection) }}" method="POST">
|
|
@csrf
|
|
<button type="submit" title="{{ $collection->is_active_sync ? 'Auto-sync pauzeren' : 'Auto-sync aanzetten' }}" class="px-2.5 py-1.5 rounded-xl text-xs font-bold transition border {{ $collection->is_active_sync ? 'bg-amber-400/10 text-amber-400 border-amber-400/30 hover:bg-amber-400/20' : 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/20' }}">
|
|
{{ $collection->is_active_sync ? 'Pauzeren' : 'Inschakelen' }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Delete Collection -->
|
|
<form action="{{ route('admin.makerworld.collections.delete', $collection) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je deze collectie wilt ontkoppelen?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" title="Collectie verwijderen" class="p-2 rounded-xl text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
@endif
|
|
|
|
<!-- TAB: COMMUNITY / FAVORITES SHOWCASE -->
|
|
@if(in_array($currentTab, ['community', 'favorites']))
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h2 class="text-xl font-black text-white flex items-center space-x-2">
|
|
<i data-lucide="compass" class="w-5 h-5 text-amber-400"></i>
|
|
<span>MakerWorld Modellen Showcase</span>
|
|
</h2>
|
|
<p class="text-xs text-slate-400 mt-1">
|
|
Selecteer modellen om direct toe te voegen aan je webshop catalogus.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
@forelse($models as $model)
|
|
@php
|
|
$mId = $model['id'] ?? 0;
|
|
$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-900 rounded-3xl border border-slate-800 overflow-hidden flex flex-col justify-between shadow-lg">
|
|
<div class="relative aspect-4/3 overflow-hidden bg-slate-950">
|
|
<img src="{{ $cover }}" alt="{{ $title }}" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="p-4 flex flex-col flex-1">
|
|
<div class="text-[10px] text-slate-500 mb-1 flex items-center justify-between">
|
|
<span class="truncate">Door {{ $author }}</span>
|
|
<span class="font-mono">#{{ $mId }}</span>
|
|
</div>
|
|
<h3 class="text-sm font-bold text-white line-clamp-2 leading-snug mb-3 flex-1">
|
|
{{ $title }}
|
|
</h3>
|
|
<form action="{{ route('admin.makerworld.import') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="makerworld_id" value="{{ $mId }}">
|
|
<button type="submit" class="w-full py-2 px-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs uppercase tracking-wider transition">
|
|
Importeer Model
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-span-full py-12 text-center text-slate-400 text-xs">
|
|
Geen modellen gevonden in deze weergave.
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- TAB 2: QUICK SINGLE MODEL IMPORT -->
|
|
@if($currentTab === 'quick')
|
|
<div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-6">
|
|
<div>
|
|
<h2 class="text-xl font-black text-white flex items-center space-x-2">
|
|
<i data-lucide="zap" class="w-5 h-5 text-amber-400"></i>
|
|
<span>Los Model Importeren via MakerWorld URL of ID</span>
|
|
</h2>
|
|
<p class="text-xs text-slate-400 mt-1">
|
|
Plak de URL van een specifiek model op MakerWorld (bijv. <code class="text-amber-300 font-mono">https://makerworld.com/nl/models/55866</code>) om het direct op te halen met alle foto's en printgegevens.
|
|
</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="fetchQuickPreview()" class="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-500">
|
|
<i data-lucide="link" class="w-5 h-5"></i>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
x-model="quickInput"
|
|
placeholder="https://makerworld.com/nl/models/55866 of 55866..."
|
|
class="w-full pl-11 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-2xl text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-amber-400 text-sm font-mono"
|
|
required
|
|
>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
:disabled="isLoadingQuick"
|
|
class="px-6 py-3 bg-amber-400 hover:bg-amber-300 disabled:opacity-50 text-slate-950 font-black rounded-2xl text-xs uppercase tracking-wider flex items-center justify-center space-x-2 shadow-lg shadow-amber-400/20 transition shrink-0"
|
|
>
|
|
<template x-if="isLoadingQuick">
|
|
<div class="flex items-center space-x-2">
|
|
<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
|
|
<span>Ophalen...</span>
|
|
</div>
|
|
</template>
|
|
<template x-if="!isLoadingQuick">
|
|
<div class="flex items-center space-x-2">
|
|
<i data-lucide="search" class="w-4 h-4"></i>
|
|
<span>Gegevens Bekijken</span>
|
|
</div>
|
|
</template>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Preview Area -->
|
|
<div x-show="quickPreview" x-cloak class="mt-6 p-6 rounded-3xl bg-slate-950 border border-slate-800">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div>
|
|
<img :src="quickPreview?.model?.image_url" alt="" class="w-full aspect-square object-cover rounded-2xl bg-slate-900 border border-slate-800">
|
|
<div class="mt-2 flex gap-2 overflow-x-auto py-1">
|
|
<template x-for="(pic, idx) in quickPreview?.model?.gallery_images" :key="idx">
|
|
<img :src="pic" alt="" class="w-12 h-12 object-cover rounded-lg border border-slate-800 shrink-0">
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-2 space-y-4">
|
|
<div>
|
|
<div class="text-xs text-amber-400 font-bold uppercase tracking-wider" x-text="'MakerWorld #' + quickPreview?.model?.makerworld_id"></div>
|
|
<h3 class="text-xl font-black text-white" x-text="quickPreview?.model?.name"></h3>
|
|
<p class="text-xs text-slate-400 mt-1" x-text="'Maker: ' + quickPreview?.model?.makerworld_author"></p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 p-3 rounded-2xl bg-slate-900 border border-slate-800 text-xs">
|
|
<div>
|
|
<span class="text-slate-500 block">Printtijd</span>
|
|
<span class="font-bold text-white" x-text="(quickPreview?.model?.print_time_hours || '?') + ' uur'"></span>
|
|
</div>
|
|
<div>
|
|
<span class="text-slate-500 block">Gewicht</span>
|
|
<span class="font-bold text-white" x-text="(quickPreview?.model?.weight_grams || '?') + ' gram'"></span>
|
|
</div>
|
|
<div>
|
|
<span class="text-slate-500 block">Adviesprijs</span>
|
|
<span class="font-black text-amber-400" x-text="'€ ' + quickPreview?.model?.base_price"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import form -->
|
|
<form action="{{ route('admin.makerworld.import') }}" method="POST" class="pt-4 border-t border-slate-800 flex flex-wrap gap-4 items-end">
|
|
@csrf
|
|
<input type="hidden" name="makerworld_id" :value="quickPreview?.model?.makerworld_id">
|
|
|
|
<div class="w-48">
|
|
<label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Categorie</label>
|
|
<select name="category_id" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-xl text-white text-xs font-bold focus:ring-amber-400">
|
|
@foreach($categories as $cat)
|
|
<option value="{{ $cat->id }}">{{ $cat->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="w-32">
|
|
<label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Verkoopprijs (€)</label>
|
|
<input type="number" step="0.01" name="custom_price" :value="quickPreview?.model?.base_price" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-xl text-white text-xs font-bold focus:ring-amber-400">
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-3">
|
|
<button type="submit" name="status" value="published" class="px-5 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-white font-black rounded-xl text-xs uppercase tracking-wider transition">
|
|
✓ Direct Publiceren
|
|
</button>
|
|
<button type="submit" name="status" value="draft" class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-amber-300 font-bold rounded-xl text-xs uppercase tracking-wider transition border border-slate-700">
|
|
Naar Concepten
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- TAB 3: AUTH & CREDENTIALS -->
|
|
@if($currentTab === 'auth')
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- Login with MakerWorld Credentials -->
|
|
<div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-4">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-2xl bg-amber-400/10 text-amber-400 flex items-center justify-center font-bold">
|
|
<i data-lucide="shield-check" class="w-5 h-5"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-black text-white">Inloggen met MakerWorld</h2>
|
|
<p class="text-xs text-slate-400">Bambu Lab / MakerWorld inloggegevens</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.makerworld.login') }}" method="POST" class="space-y-4 pt-2">
|
|
@csrf
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-300 uppercase mb-1">E-mailadres MakerWorld</label>
|
|
<input type="text" name="account" value="{{ old('account', 'info@jouwdriedee.nl') }}" class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-sm" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-300 uppercase mb-1">Wachtwoord</label>
|
|
<input type="password" name="password" class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-sm" required>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full py-3 bg-amber-400 hover:bg-amber-300 text-slate-950 font-black rounded-xl text-xs uppercase tracking-wider transition">
|
|
Inloggen bij MakerWorld
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Or Paste Token Directly -->
|
|
<div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-4">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-2xl bg-sky-500/10 text-sky-400 flex items-center justify-center font-bold">
|
|
<i data-lucide="key" class="w-5 h-5"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-black text-white">MakerWorld Bearer Token</h2>
|
|
<p class="text-xs text-slate-400">Plak direct je MakerWorld JWT token</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.makerworld.token') }}" method="POST" class="space-y-4 pt-2">
|
|
@csrf
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-300 uppercase mb-1">Access Token</label>
|
|
<textarea name="token" rows="4" placeholder="eyJhbGciOi..." class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-xs font-mono" required></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full py-3 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs uppercase tracking-wider transition border border-slate-700">
|
|
Token Opslaan
|
|
</button>
|
|
</form>
|
|
|
|
@if($isAuthenticated)
|
|
<div class="pt-4 border-t border-slate-800 flex items-center justify-between">
|
|
<span class="text-xs text-emerald-400 font-bold flex items-center space-x-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
|
<span>Momenteel actief gekoppeld</span>
|
|
</span>
|
|
<form action="{{ route('admin.makerworld.disconnect') }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="text-xs text-rose-400 hover:underline font-bold">
|
|
Ontkoppelen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function makerWorldSyncApp() {
|
|
return {
|
|
quickInput: '',
|
|
isLoadingQuick: false,
|
|
quickPreview: null,
|
|
|
|
async fetchQuickPreview() {
|
|
if (!this.quickInput.trim()) return;
|
|
this.isLoadingQuick = true;
|
|
this.quickPreview = null;
|
|
|
|
try {
|
|
const res = await fetch(`{{ route('admin.makerworld.preview') }}?query=${encodeURIComponent(this.quickInput.trim())}`);
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
this.quickPreview = data;
|
|
} else {
|
|
alert(data.error || 'Kon model niet ophalen.');
|
|
}
|
|
} catch (err) {
|
|
alert('Fout bij ophalen van model: ' + err.message);
|
|
} finally {
|
|
this.isLoadingQuick = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|