@extends('layouts.app')

@section('title', 'Neuen Lack hinzufügen – NeoNail DB')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-7">

        <div class="page-hero mb-4">
            <h1><i class="fas fa-plus me-2" style="font-size:1.4rem;vertical-align:middle;opacity:.9;"></i>Neuen Lack hinzufügen</h1>
            <p>Der Lack wird zum Katalog hinzugefügt und automatisch in Ihre Sammlung aufgenommen.</p>
        </div>

        <div class="card">
            <div class="card-body p-4">

                @if($errors->any())
                    <div class="alert alert-danger mb-4">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <strong>Bitte korrigieren Sie folgende Fehler:</strong>
                        <ul class="mb-0 mt-2 ps-3">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form method="POST" action="{{ route('user-nail-polishes.store') }}" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3 mb-3">
                        <div class="col-md-7">
                            <label for="name" class="form-label">Name des Lackes *</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                   id="name" name="name" value="{{ old('name') }}"
                                   placeholder="z.B. Classic Red" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-5">
                            <label for="number" class="form-label">Nummer *</label>
                            <input type="text" class="form-control @error('number') is-invalid @enderror"
                                   id="number" name="number" value="{{ old('number') }}"
                                   placeholder="z.B. 001" required>
                            @error('number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label for="manufacturer_id" class="form-label">Hersteller auswählen</label>
                            <select class="form-select @error('manufacturer_id') is-invalid @enderror"
                                    id="manufacturer_id" name="manufacturer_id">
                                <option value="">— Hersteller wählen —</option>
                                @foreach(\App\Models\Manufacturer::orderBy('name')->get() as $m)
                                    <option value="{{ $m->id }}" {{ old('manufacturer_id') == $m->id ? 'selected' : '' }}>
                                        {{ $m->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('manufacturer_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label for="new_manufacturer" class="form-label">Oder neuen Hersteller anlegen</label>
                            <input type="text" class="form-control @error('new_manufacturer') is-invalid @enderror"
                                   id="new_manufacturer" name="new_manufacturer"
                                   value="{{ old('new_manufacturer') }}"
                                   placeholder="Name des neuen Herstellers">
                            @error('new_manufacturer')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <div class="form-text">Wird automatisch angelegt, falls noch nicht vorhanden.</div>
                        </div>
                    </div>

                    {{-- Image Upload --}}
                    <div class="mb-4">
                        <label class="form-label">Foto (optional)</label>

                        {{-- Tab-Umschalter --}}
                        <div class="d-flex gap-2 mb-3">
                            <button type="button" id="tab-file" onclick="switchTab('file')"
                                    style="padding:6px 16px; border-radius:50px; font-size:.82rem; font-weight:600; cursor:pointer; transition:.18s;
                                           background:#7c3aed; color:#fff; border:none;">
                                <i class="fas fa-upload me-1"></i>Datei
                            </button>
                            <button type="button" id="tab-url" onclick="switchTab('url')"
                                    style="padding:6px 16px; border-radius:50px; font-size:.82rem; font-weight:600; cursor:pointer; transition:.18s;
                                           background:#f3f4f6; color:#6b7280; border:none;">
                                <i class="fas fa-link me-1"></i>URL
                            </button>
                        </div>

                        {{-- Panel: Datei --}}
                        <div id="panel-file">
                            <div id="drop-zone"
                                 style="border: 2px dashed #e5e7eb; border-radius: 13px; padding: 28px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s;"
                                 onclick="document.getElementById('image').click()"
                                 ondragover="event.preventDefault(); this.style.borderColor='#7c3aed'; this.style.background='#f5f3ff';"
                                 ondragleave="this.style.borderColor='#e5e7eb'; this.style.background='';"
                                 ondrop="handleDrop(event)">
                                <div id="preview-wrap" class="d-none mb-3">
                                    <img id="preview-img" src="" alt="Vorschau"
                                         style="max-height:160px; border-radius:10px; object-fit:cover;">
                                </div>
                                <div id="drop-label">
                                    <i class="fas fa-camera fa-2x mb-2 d-block" style="color:#d1d5db;"></i>
                                    <span style="font-size:.88rem; font-weight:600; color:#6b7280;">Klicken oder Foto aufnehmen</span><br>
                                    <span style="font-size:.76rem; color:#9ca3af;">JPG, PNG, GIF · Max. 10 MB</span>
                                </div>
                            </div>
                            <input type="file" class="d-none @error('image') is-invalid @enderror"
                                   id="image" name="image" accept="image/*">
                            @error('image')<div class="invalid-feedback d-block mt-1">{{ $message }}</div>@enderror
                        </div>

                        {{-- Panel: URL --}}
                        <div id="panel-url" style="display:none;">
                            <input type="url" id="image_url" name="image_url"
                                   class="form-control @error('image_url') is-invalid @enderror"
                                   placeholder="https://example.com/bild.jpg"
                                   value="{{ old('image_url') }}"
                                   oninput="previewUrl(this.value)">
                            @error('image_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <div class="form-text mb-2">Das Bild wird vom Server heruntergeladen und lokal gespeichert.</div>
                            <div id="url-preview-wrap" style="display:none; margin-top:10px;">
                                <img id="url-preview-img" src="" alt="Vorschau"
                                     style="max-height:160px; border-radius:10px; object-fit:cover; border:2px solid #e5e7eb;"
                                     onerror="this.parentElement.style.display='none'">
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-fill">
                            <i class="fas fa-plus me-2"></i>Lack erstellen & hinzufügen
                        </button>
                        <a href="{{ route('user-nail-polishes.index') }}" class="btn btn-outline-secondary">
                            Abbrechen
                        </a>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const mSel = document.getElementById('manufacturer_id');
    const mNew = document.getElementById('new_manufacturer');
    const img  = document.getElementById('image');
    const prev = document.getElementById('preview-img');
    const wrap = document.getElementById('preview-wrap');
    const lbl  = document.getElementById('drop-label');
    const zone = document.getElementById('drop-zone');

    // Hersteller-Toggle
    mSel.addEventListener('change', () => {
        if (mSel.value) { mNew.value = ''; mNew.disabled = true; }
        else mNew.disabled = false;
    });
    mNew.addEventListener('input', () => {
        if (mNew.value.trim()) { mSel.value = ''; mSel.disabled = true; }
        else mSel.disabled = false;
    });
    if (mNew.value.trim()) mSel.disabled = true;
    if (mSel.value) mNew.disabled = true;

    // Datei-Vorschau
    function showFilePreview(file) {
        const reader = new FileReader();
        reader.onload = e => {
            prev.src = e.target.result;
            wrap.classList.remove('d-none');
            lbl.style.display = 'none';
            zone.style.borderColor = '#7c3aed';
            zone.style.background = '#f5f3ff';
        };
        reader.readAsDataURL(file);
    }
    img.addEventListener('change', function () {
        if (this.files && this.files[0]) showFilePreview(this.files[0]);
    });
    window.handleDrop = function (e) {
        e.preventDefault();
        zone.style.borderColor = '#e5e7eb';
        zone.style.background = '';
        if (e.dataTransfer.files.length) {
            const dt = new DataTransfer();
            dt.items.add(e.dataTransfer.files[0]);
            img.files = dt.files;
            showFilePreview(e.dataTransfer.files[0]);
        }
    };

    // Tab-Umschalter
    window.switchTab = function (tab) {
        const isFile = tab === 'file';
        document.getElementById('panel-file').style.display = isFile ? '' : 'none';
        document.getElementById('panel-url').style.display  = isFile ? 'none' : '';
        document.getElementById('tab-file').style.background = isFile ? '#7c3aed' : '#f3f4f6';
        document.getElementById('tab-file').style.color      = isFile ? '#fff' : '#6b7280';
        document.getElementById('tab-url').style.background  = isFile ? '#f3f4f6' : '#7c3aed';
        document.getElementById('tab-url').style.color       = isFile ? '#6b7280' : '#fff';
        // Felder des inaktiven Tabs leeren
        if (isFile) { document.getElementById('image_url').value = ''; document.getElementById('url-preview-wrap').style.display = 'none'; }
        else        { img.value = ''; wrap.classList.add('d-none'); lbl.style.display = ''; zone.style.borderColor = '#e5e7eb'; zone.style.background = ''; }
    };

    // URL-Vorschau
    let urlTimer;
    window.previewUrl = function (val) {
        clearTimeout(urlTimer);
        const pw = document.getElementById('url-preview-wrap');
        const pi = document.getElementById('url-preview-img');
        if (!val.trim()) { pw.style.display = 'none'; return; }
        urlTimer = setTimeout(() => {
            pi.src = val;
            pw.style.display = '';
        }, 600);
    };

    // Ggf. URL-Tab vorauswählen bei Validation-Fehler
    @if(old('image_url'))
        switchTab('url');
        previewUrl('{{ old('image_url') }}');
    @endif
});
</script>
@endsection