https://www.drivable.app/build/assets/VehicleImageUpload-CzJjftyh.js

1import{X as B,r as o,j as e,S as L}from"./app-CGhF_fXx.js";/* empty css            */function z(){const{token:b,existingCount:w}=B().props,[r,x]=o.useState([]),[u,g]=o.useState([]),[d,m]=o.useState(!1),[v,y]=o.useState(!1),[f,N]=o.useState(0),[p,i]=o.useState(""),j=o.useRef(null),c=9-(w||0),k=s=>{const t=Array.from(s.target.files||[]);if(t.length===0)return;const l=t.slice(0,c-r.length);if(l.length===0){i("Maximale Bildanzahl erreicht.");return}const a=[];l.forEach(n=>{const h=new FileReader;h.onloadend=()=>{a.push(h.result),a.length===l.length&&g(F=>[...F,...a])},h.readAsDataURL(n)}),x(n=>[...n,...l]),i("")},S=s=>{x(t=>t.filter((l,a)=>a!==s)),g(t=>t.filter((l,a)=>a!==s))},C=async()=>{var t;if(r.length===0){i("Bitte wähle mindestens ein Bild aus.");return}m(!0),i("");const s=new FormData;r.forEach(l=>s.append("images[]",l));try{const l=((t=document.querySelector('meta[name="csrf-token"]'))==null?void 0:t.content)||"",n=await(await fetch(`/vehicle-images/upload/${b}`,{method:"POST",headers:{"X-CSRF-TOKEN":l},body:s})).json();n.success?(N(n.count),y(!0)):i(n.message||"Upload fehlgeschlagen.")}catch{i("Ein Fehler ist aufgetreten.")}finally{m(!1)}};return e.jsxs(e.Fragment,{children:[e.jsx(L,{children:e.jsx("title",{children:"Fahrzeugbilder hochladen | Drivable"})}),e.jsx("div",{className:"min-h-screen bg-gradient-to-b from-orange-50 to-white flex flex-col items-center justify-center p-4",children:e.jsxs("div",{className:"w-full max-w-md",children:[e.jsx("div",{className:"flex justify-center mb-6",children:e.jsx("img",{src:"/images/logo_drive_withoutText.png",alt:"Drivable",className:"w-16 h-16"})}),v?e.jsxs("div",{className:"bg-white rounded-2xl shadow-lg p-8 text-center space-y-4",children:[e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:"w-16 h-16 bg-green-100 rounded-full flex items-center justify-center",children:e.jsx("svg",{className:"w-10 h-10 text-green-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})})})}),e.jsxs("h2",{className:"text-xl font-bold text-gray-900",children:[f," Bild",f!==1?"er":""," hochgeladen!"]}),e.jsx("p",{className:"text-gray-600 text-sm",children:"Du kannst dieses Fenster jetzt schliessen und am Computer weiterarbeiten."})]}):e.jsxs("div",{className:"bg-white rounded-2xl shadow-lg p-5 space-y-5",children:[e.jsxs("div",{className:"text-center",children:[e.jsx("h1",{className:"text-xl font-bold text-gray-900 mb-1",children:"Fahrzeugbilder"}),e.jsxs("p",{className:"text-sm text-gray-600",children:["Wähle bis zu ",c," Bilder aus deiner Galerie."]})]}),u.length>0&&e.jsx("div",{className:"grid grid-cols-3 gap-2",children:u.map((s,t)=>e.jsxs("div",{className:"relative",children:[e.jsx("img",{src:s,alt:`Bild ${t+1}`,className:"w-full h-24 object-cover rounded-lg"}),e.jsx("button",{onClick:()=>S(t),className:"absolute -top-1.5 -right-1.5 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs",children:"✕"}),t===0&&e.jsx("span",{className:"absolute bottom-1 left-1 bg-orange-500 text-white text-[9px] font-bold px-1.5 py-0.5 rounded",children:"Hauptbild"})]},t))}),r.length<c&&e.jsxs("button",{onClick:()=>{var s;return(s=j.current)==null?void 0:s.click()},className:"w-full h-32 border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center hover:border-orange-500 transition-colors bg-gray-50",children:[e.jsx("svg",{className:"w-10 h-10 text-gray-400 mb-1",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"})}),e.jsx("span",{className:"text-gray-600 font-medium text-sm",children:"Bilder auswählen"}),e.jsxs("span",{className:"text-xs text-gray-400",children:[r.length,"/",c]})]}),e.jsx("input",{ref:j,type:"file",accept:"image/jpeg,image/png,image/webp",multiple:!0,onChange:k,className:"hidden"}),p&&e.jsx("div",{className:"p-3 bg-red-50 border border-red-200 rounded-lg",children:e.jsx("p",{className:"text-sm text-red-600",children:p})}),e.jsx("button",{onClick:C,disabled:r.length===0||d,className:`w-full py-4 rounded-xl font-medium transition-colors ${r.length>0&&!d?"bg-orange-600 text-white hover:bg-orange-700":"bg-gray-300 text-gray-500 cursor-not-allowed"}`,children:d?"Wird hochgeladen...":`${r.length} Bild${r.length!==1?"er":""} hochladen`})]})]})})]})}export{z as default};