@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;">
    <a href="{{ route('admin.products.index') }}" style="color: var(--text-muted); display: inline-flex; align-items: center;">
        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    </a>
    <h2 style="font-size: 1.5rem; font-weight: 800;">Nuevo Producto</h2>
</div>

@if ($errors->any())
    <div class="alert alert-error" style="font-size: 0.85rem; padding: 0.75rem 1rem;">
        <div style="flex: 1;">
            @foreach ($errors->all() as $error)
                <span style="display:block;">{{ $error }}</span>
            @endforeach
        </div>
    </div>
@endif

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

    <div class="form-group">
        <label for="name" class="form-label">Nombre del Producto</label>
        <input type="text" id="name" name="name" value="{{ old('name') }}" required class="form-control" placeholder="Ej. Cabello Natural Ondulado">
    </div>

    <div class="form-group">
        <label for="description" class="form-label">Descripción</label>
        <textarea id="description" name="description" rows="4" class="form-control" placeholder="Describe los detalles del producto, medidas, origen, etc.">{{ old('description') }}</textarea>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
        <div class="form-group">
            <label for="price" class="form-label">Precio ($)</label>
            <input type="number" step="0.01" id="price" name="price" value="{{ old('price') }}" required class="form-control" placeholder="0.00">
        </div>
        
        <div class="form-group">
            <label for="stock" class="form-label">Stock Inicial</label>
            <input type="number" id="stock" name="stock" value="{{ old('stock', 0) }}" required class="form-control" placeholder="0">
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Imagen del Producto</label>
        <div class="file-upload-wrapper">
            <svg width="32" height="32" fill="none" stroke="var(--text-muted)" stroke-width="2" viewBox="0 0 24 24" style="margin: 0 auto 0.5rem auto; display: block;"><path stroke-linecap="round" stroke-linejoin="round" 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"/></svg>
            <span style="font-weight: 500; font-size: 0.9rem; color: var(--text-secondary);">Haz clic para seleccionar o arrastra una imagen aquí</span>
            <span style="font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">Formatos admitidos: JPG, PNG, WEBP. Tamaño máx: 2MB</span>
            <input type="file" name="image" class="file-upload-input" onchange="previewFile(this)">
        </div>
        <div id="image-preview-container" style="margin-top: 1rem; display: none; text-align: center;">
            <span class="form-label" style="font-size: 0.8rem;">Vista Previa:</span>
            <img id="image-preview" src="#" alt="Vista previa de imagen" style="max-height: 150px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); display: inline-block;">
        </div>
    </div>

    <div style="margin-top: 2rem; display: flex; gap: 1rem;">
        <button type="submit" class="btn btn-primary">Guardar Producto</button>
        <a href="{{ route('admin.products.index') }}" class="btn btn-outline">Cancelar</a>
    </div>
</form>

<script>
function previewFile(input) {
    var preview = document.getElementById('image-preview');
    var container = document.getElementById('image-preview-container');
    var file    = input.files[0];
    var reader  = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
        container.style.display = 'block';
    }

    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
        container.style.display = 'none';
    }
}
</script>
@endsection