@extends('layouts.app')

@section('title', 'Eigen 3D Model Printen (STL / STEP Upload) | Jouwdriedee.nl')

@section('content')
<div class="bg-gradient-to-b from-slate-900 to-indigo-950 text-white py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-3">
        <span class="px-3 py-1 rounded-full bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 text-xs font-bold inline-flex items-center space-x-1.5">
            <i data-lucide="layers" class="w-3.5 h-3.5"></i>
            <span>3D Print op Aanvraag</span>
        </span>
        <h1 class="text-3xl sm:text-4xl font-black tracking-tight">Upload Jouw Eigen 3D-Bestand</h1>
        <p class="text-xs sm:text-sm text-slate-300 max-w-xl mx-auto leading-relaxed">
            Heb je een STL, STEP of OBJ bestand van Thingiverse, Printables of je eigen CAD-ontwerp? Upload het hieronder en ontvang binnen 24 uur een vrijblijvende prijsopgave.
        </p>
    </div>
</div>

<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="p-8 rounded-3xl bg-white border border-slate-200 shadow-md space-y-6">
        
        <form action="{{ route('custom.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- Contactgegevens -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Naam *</label>
                    <input type="text" name="name" required value="{{ old('name') }}" placeholder="Bijv. Jan de Vries" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">E-mailadres *</label>
                    <input type="email" name="email" required value="{{ old('email') }}" placeholder="jouw@email.nl" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Telefoonnummer (optioneel)</label>
                <input type="text" name="phone" value="{{ old('phone') }}" placeholder="06-12345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
            </div>

            <!-- Bestand Uploaden -->
            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">3D Model Bestand (.stl, .step, .obj, .zip)</label>
                <div class="p-6 border-2 border-dashed border-slate-300 hover:border-indigo-500 rounded-2xl bg-slate-50/50 text-center transition cursor-pointer">
                    <input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-indigo-600 file:text-white hover:file:bg-indigo-500 cursor-pointer">
                    <p class="text-[11px] text-slate-400 mt-2">Ondersteunde formaten: STL, STEP, OBJ, 3MF of ZIP (max 50 MB)</p>
                </div>
            </div>

            <!-- Voorkeuren -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Gewenst Materiaal</label>
                    <select name="preferred_material" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        <option value="Weet ik niet (Adviseer mij)">Weet ik niet (Adviseer mij)</option>
                        @foreach($materials as $mat)
                            <option value="{{ $mat->name }}">{{ $mat->name }} ({{ strtoupper($mat->code) }})</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Voorkeurskleur</label>
                    <select name="preferred_color" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        <option value="Geen voorkeur">Geen voorkeur / In overleg</option>
                        @foreach($colors as $color)
                            <option value="{{ $color->name }}">{{ $color->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Beschrijving & Wensen -->
            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Toelichting, Afmetingen & Aantal *</label>
                <textarea name="description" rows="4" required placeholder="Vermeld eventuele gewenste afmetingen (bv. 10cm hoog), gewenst aantal en toepassing (binnen, buiten, waterdicht, mechanisch belast)..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"></textarea>
            </div>

            <button type="submit" class="w-full py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs uppercase tracking-wider transition shadow-lg shadow-indigo-600/25 flex items-center justify-center space-x-2 cursor-pointer">
                <i data-lucide="send" class="w-4 h-4"></i>
                <span>Aanvraag Vrijblijvend Verzenden</span>
            </button>

            <p class="text-center text-[11px] text-slate-400">
                🔒 Jouw bestanden en gegevens worden uitsluitend gebruikt voor de offerteberekening en niet gedeeld met derden.
            </p>
        </form>

    </div>
</div>
@endsection