@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;">Editar Producto #{{ $product->id }}</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.update', $product) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="form-group">
        <label for="name" class="form-label">Nombre del Producto</label>
        <input type="text" id="name" name="name" value="{{ old('name', $product->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...">{{ old('description', $product->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', $product->price) }}" required class="form-control" placeholder="0.00">
        </div>
        
        <div class="form-group">
            <label for="stock" class="form-label">Stock Disponible</label>
            <input type="number" id="stock" name="stock" value="{{ old('stock', $product->stock) }}" required class="form-control" placeholder="0">
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Imagen del Producto</label>
        
        <div style="display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap;">
            @if($product->image_path)
                <div>
                    <span class="form-label" style="font-size: 0.8rem; margin-bottom: 0.25rem;">Imagen Actual:</span>
                    <img src="{{ $product->image_url }}" alt="{{ $product->name }}" style="height: 100px; width: 100px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #f1f5f9; display: block;">
                </div>
            @endif
            <div style="flex: 1; min-width: 200px;">
                <div class="file-upload-wrapper" style="padding: 1.5rem;">
                    <svg width="24" height="24" fill="none" stroke="var(--text-muted)" stroke-width="2" viewBox="0 0 24 24" style="margin: 0 auto 0.25rem 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.85rem; color: var(--text-secondary);">Subir nueva imagen para reemplazar</span>
                    <input type="file" name="image" class="file-upload-input" onchange="previewFile(this)">
                </div>
            </div>
        </div>

        <div id="image-preview-container" style="margin-top: 1rem; display: none; text-align: center;">
            <span class="form-label" style="font-size: 0.8rem;">Nueva Vista Previa:</span>
            <img id="image-preview" src="#" alt="Nueva vista previa" style="max-height: 120px; 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">Actualizar 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