@extends('layouts.app')

@section('content')
<section class="section">
    <div class="section-header">
        <h3 class="page__heading"><em>Editar Producto</em></h3>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <form action="{{ route('mercancia.update', $producto) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <!-- Nombre -->
                <div class="form-group">
                    <label for="nombre">Nombre del producto:</label>
                    <input type="text" name="nombre" class="form-control" value="{{ $producto->nombre }}" required>
                </div>

                <!-- Códigos -->
                <div class="form-group">
                    <label for="codigo1">Código 1:</label>
                    <input type="text" name="codigo1" class="form-control" value="{{ $producto->codigo1 }}" required>
                </div>

                <div class="form-group">
                    <label for="codigo2">Código 2:</label>
                    <input type="text" name="codigo2" class="form-control" value="{{ $producto->codigo2 }}">
                </div>

                <!-- Descripción -->
                <div class="form-group">
                    <label for="descripcion">Descripción:</label>
                    <textarea name="descripcion" class="form-control" rows="3" required>{{ $producto->descripcion }}</textarea>
                </div>

                <!-- Precios -->
                <div class="form-group">
                    <label for="precio1">Precio Regular:</label>
                    <input type="number" name="precio1" step="0.01" class="form-control" value="{{ $producto->precio1 }}" required>
                </div>
                <div class="form-group">
                    <label for="precio2">Precio en Oferta:</label>
                    <input type="number" name="precio2" step="0.01" class="form-control" value="{{ $producto->precio2 }}">
                </div>

                <!-- Marca -->
                <div class="form-group">
                    <label for="marca">Marca:</label>
                    <input type="text" name="marca" class="form-control" value="{{ $producto->marca }}" required>
                </div>

                <!-- Foto -->
                <div class="form-group">
                    <label for="foto">Foto:</label>
                    <input type="file" name="foto" class="form-control-file">
                    @if($producto->foto)
                        <img src="{{ asset($producto->foto) }}" alt="Foto actual" class="img-thumbnail mt-2" style="max-width: 150px;">
                    @endif
                </div>

                <!-- Ubicación -->
                <div class="form-group">
                    <label for="ubicacion">Ubicación:</label>
                    <select name="ubicacion_id" class="form-control select2" required>
                        @foreach($ubicaciones as $ubicacion)
                            <option value="{{ $ubicacion->id }}" 
                                {{ $producto->ubicacion_id == $ubicacion->id ? 'selected' : '' }}>
                                {{ $ubicacion->nombre }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Cantidad -->
                <div class="form-group">
                    <label for="cantidad">Cantidad:</label>
                    <input type="number" name="cantidad" class="form-control" value="{{ $producto->cantidad }}" required>
                </div>
                <div class="form-group">
                    <label for="estado">Estado:</label>
                    <select name="estado" class="form-control" required>
                        <option value="activo" {{ $producto->estado === 'activo' ? 'selected' : '' }}>Activo</option>
                        <option value="inactivo" {{ $producto->estado === 'inactivo' ? 'selected' : '' }}>Inactivo</option>
                    </select>
                </div>
                
                <!-- Botón de Actualizar -->
                <button type="submit" class="btn btn-primary">Actualizar Producto</button>
            </form>
        </div>
    </div>
</section>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/css/select2.min.css" rel="stylesheet" />
<script>
    $(document).ready(function() {
        $('.select2').select2();
    });
</script>
@endsection