@extends('layouts.app')
@section('title', $project->name.' · Nexus Livery Studio')
@section('content')
<style>
  .nexus-editor{height:calc(100vh - 72px);min-height:680px;display:grid;grid-template-columns:248px minmax(0,1fr) 304px;background:#eef4fa;overflow:hidden}.nexus-rail,.nexus-inspector{background:rgba(255,255,255,.92);overflow:auto}.nexus-rail{border-right:1px solid #d7e2ee}.nexus-inspector{border-left:1px solid #d7e2ee}.nexus-viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(circle at 50% 38%,#dcecff 0,#c5daf0 42%,#a9c1da 100%)}#studio-canvas{display:block;width:100%;height:100%;touch-action:none}.editor-brand{letter-spacing:.2em;font-size:10px;font-weight:900;text-transform:uppercase;color:#2563c7}.editor-section{padding:18px 14px 4px;color:#7086a1;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.editor-tool{width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid transparent;border-radius:9px;color:#405672;font-size:12px;font-weight:750;text-align:left;transition:.15s}.editor-tool:hover,.editor-tool.active{background:#e9f2ff;border-color:#9fc8f3;color:#123f78}.editor-tool .tool-icon{width:20px;color:#1976d2;text-align:center;font-size:14px}.surface-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:9px;border:1px solid #d7e2ee;background:#f8fbff;font-size:11px;color:#2f4867}.surface-chip:hover{border-color:#78afe4}.surface-dot{width:7px;height:7px;border-radius:50%;background:#168de2;box-shadow:0 0 12px rgba(22,141,226,.35)}.viewport-card{border:1px solid rgba(92,132,177,.28);background:rgba(255,255,255,.78);box-shadow:0 14px 40px rgba(34,75,120,.14);backdrop-filter:blur(16px)}.viewport-pill{border:1px solid rgba(92,132,177,.3);background:rgba(255,255,255,.78);border-radius:999px;padding:7px 11px;font-size:10px;color:#385878}.inspector-block{border:1px solid #d7e2ee;border-radius:10px;background:#f8fbff;padding:12px}.divider{height:1px;background:#dbe5ef;margin:14px 0}.layer-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d7e2ee;border-radius:8px;padding:9px;background:#fff;font-size:11px}.layer-dot{width:8px;height:8px;border-radius:50%;background:#168de2}.tiny{font-size:10px;line-height:1.45}@media(max-width:1100px){.nexus-editor{grid-template-columns:210px minmax(0,1fr)}.nexus-inspector{display:none}}@media(max-width:700px){.nexus-editor{grid-template-columns:1fr}.nexus-rail{display:none}}
</style>
<div data-nexus-studio-editor data-project-id="{{ $project->id }}" data-save-url="{{ route('projects.editor.save',$project) }}" data-project-state='@json($project->editor_state ?? [])' data-profile='@json($profile->profile_data ?? [])' data-registration='@json($project->registration)' data-airline='@json($project->airline_name)' data-profile-slug="{{ $profile->slug }}" class="nexus-editor">
  <aside class="nexus-rail p-3"><div class="mb-5 px-2 pt-1"><div class="editor-brand">VA Nexus · Studio</div><div class="mt-2 truncate text-base font-black text-white">{{ $project->name }}</div><div class="mt-1 truncate text-[11px] text-slate-500">{{ $profile->name }}</div></div><div class="viewport-card rounded-xl px-3 py-2 text-[10px] leading-4 text-sky-100/80">3D paint workspace<br><span class="text-slate-500">Orbit, select a surface, then paint directly on the aircraft.</span></div><div class="editor-section">Workspace</div><div class="mt-2 space-y-1"><button class="editor-tool active" data-tool="orbit"><span class="tool-icon">◉</span>Orbit / Inspect</button><button class="editor-tool" data-tool="brush"><span class="tool-icon">✎</span>Paint Brush</button><button class="editor-tool" data-tool="eraser"><span class="tool-icon">⌫</span>Eraser</button><button class="editor-tool" data-tool="text"><span class="tool-icon">T</span>Text Marking</button><label class="editor-tool cursor-pointer"><span class="tool-icon">▣</span>Add Logo<input id="logo-input" type="file" accept="image/png,image/jpeg,image/webp" class="hidden"></label></div><div class="editor-section">Paint Surfaces</div><div id="surface-list" class="mt-2 space-y-1"></div><div class="divider"></div><button id="reset-aircraft" class="editor-tool"><span class="tool-icon">⌖</span>Reset View</button><button id="clear-surface" class="editor-tool text-rose-200"><span class="tool-icon">↺</span>Clear Surface</button></aside>
  <main class="nexus-viewport"><canvas id="studio-canvas"></canvas><div class="pointer-events-none absolute left-5 top-5 viewport-card rounded-xl px-4 py-3"><div class="text-[11px] font-black text-white">NEXUS LIVERY WORKSPACE</div><div class="mt-1 text-[10px] text-sky-300">{{ strtoupper($profile->name) }} · 3D PAINT PREVIEW</div></div><div class="pointer-events-none absolute right-5 top-5 flex gap-2"><span class="viewport-pill">LIVE PREVIEW</span><span class="viewport-pill">MSFS 2020 · SCAFFOLD</span></div><div class="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 viewport-pill"><span id="mode-help">Drag to orbit · Scroll to zoom · Click a surface to select</span></div><div id="editor-toast" class="absolute right-5 top-20 viewport-card rounded-lg px-3 py-2 text-xs text-sky-100 opacity-0">Saved</div></main>
  <aside class="nexus-inspector p-4"><div class="editor-brand">Inspector</div><div id="selected-surface" class="mt-2 text-lg font-black text-white">Fuselage</div><div class="tiny mt-1 text-slate-500">Selected paint surface · UV texture</div><div class="divider"></div><div class="inspector-block"><label class="label">Base Finish</label><input id="base-color" type="color" value="#f4f7fb" class="h-10 w-full cursor-pointer rounded-lg border border-slate-700 bg-slate-900 p-1"><div class="mt-3"><label class="label">Brush Color</label><input id="brush-color" type="color" value="#0ea5e9" class="h-10 w-full cursor-pointer rounded-lg border border-slate-700 bg-slate-900 p-1"></div><div class="mt-3"><label class="label">Brush Size <span id="brush-size-label" class="float-right text-sky-300">28</span></label><input id="brush-size" type="range" min="2" max="300" value="28" class="w-full"></div></div><div class="editor-section px-0">Decal Tools</div><div class="inspector-block"><label class="label">Text</label><input id="stamp-text" class="input" value="NEXUS" maxlength="64"><div class="mt-3"><label class="label">Scale <span id="stamp-scale-label" class="float-right text-sky-300">1.0×</span></label><input id="stamp-scale" type="range" min="20" max="400" value="100" class="w-full"></div></div><div class="editor-section px-0">Layers</div><div class="space-y-2"><div class="layer-row"><span class="flex items-center gap-2"><span class="layer-dot"></span>Your Artwork</span><span class="chip">EDIT</span></div><div class="layer-row opacity-60"><span class="flex items-center gap-2"><span class="layer-dot" style="background:#64748b"></span>Aircraft Base</span><span class="chip">LOCKED</span></div></div><div class="divider"></div><button id="save-project" class="btn-primary w-full">Save Project</button><button id="download-texture" class="btn-muted mt-2 w-full">Download Surface PNG</button>@if($profile->slug === 'fbw-a32nx')<a href="{{ route('projects.fbw.paint_export', $project) }}" class="btn-muted mt-2 block w-full text-center">Export Paint Source</a>@endif<div id="save-status" class="mt-3 text-center text-[11px] text-slate-500">Ready</div></aside>
</div>
@endsection