@extends('layouts.app')

@section('content')
<section class="section">
    <!-- Encabezado -->
    <div class="section-header">
        <h3 class="page__heading text-primary font-weight-bold">📦 Gestión de Productos</h3>
    </div>
@can('administrador')

<div class="card shadow-sm mb-4">
    <div class="card-body d-flex align-items-center justify-content-between">
        <form action="{{ route('mercancia.actualizarTipoCambio') }}" method="POST" class="d-flex align-items-center">
            @csrf
            <label for="tipo_cambio" class="font-weight-bold mr-2">💱 Tipo de cambio (Bs.):</label>
            <input type="number" step="0.01" id="tipo_cambio" name="tipo_cambio" class="form-control form-control-sm mr-2" style="width: 100px;" value="{{ $tipoCambio }}" required>
            <button type="submit" class="btn btn-primary btn-sm">Aplicar</button>
        </form>

        @if($tipoCambio != 1)
            <form action="{{ route('mercancia.eliminarTipoCambio') }}" method="POST" class="d-inline-block">
                @csrf
                <button type="submit" class="btn btn-danger btn-sm">Reiniciar</button>
            </form>
        @endif
    </div>
</div>
    @endcan
    <div class="card shadow-sm mb-4">
        <div class="card-body d-flex justify-content-between align-items-center">
            <!-- Filtro de Ubicación -->
            <form action="{{ route('mercancia.index') }}" method="GET" class="form-inline">
                <label for="ubicacion_id" class="mr-2">📍 Filtrar por ubicación:</label>
                <select name="ubicacion_id" id="ubicacion_id" class="form-control mr-3">
                    <option value="">Todas</option>
                    @foreach($ubicaciones as $ubicacion)
                        <option value="{{ $ubicacion->id }}" {{ request('ubicacion_id') == $ubicacion->id ? 'selected' : '' }}>
                            {{ $ubicacion->nombre }}
                        </option>
                    @endforeach
                </select>
                <label for="searchInput" class="mr-2">🔍 Buscar:</label>
                <input type="text" name="q" id="searchInput" class="form-control mr-2" placeholder="Buscar..." value="{{ request('q') }}">
                <button type="submit" class="btn btn-primary">Aplicar</button>
                <a href="{{ route('mercancia.index') }}" class="btn btn-secondary ml-2">Reiniciar</a>
            </form>
        </div>
    </div>
    @can('administrador')
    <!-- Botones de Acción -->
    <div class="mb-3 d-flex justify-content-between">
        <a href="{{ route('mercancia.create') }}" class="btn btn-success btn-sm shadow">➕ Agregar Producto</a>
        <form action="{{ route('mercancia.importar') }}" method="POST" enctype="multipart/form-data" class="d-inline-block">
            @csrf
            <div class="custom-file d-inline-block">
                <input type="file" class="custom-file-input" id="file" name="file" required>
                <label class="custom-file-label" for="file">Seleccionar archivo</label>
            </div>
            <button type="submit" class="btn btn-success btn-sm shadow mt-2">📥 Importar</button>
        </form>
    </div>
@endcan
    <!-- Mensajes -->
    @if(session('success'))
        <div class="alert alert-success mt-3 shadow-sm">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger mt-3 shadow-sm">
            {{ session('error') }}
        </div>
    @endif

    <!-- Búsqueda -->
    <form action="{{ route('mercancia.index') }}" method="GET">
        <div class="input-group mb-3 shadow-sm">
            <input type="text" id="searchInput" name="q" class="form-control" value="{{ request('q') }}" placeholder="🔍 Buscar productos por nombre, código, descripción...">
            <div class="input-group-append">
                <button class="btn btn-primary" type="submit">Buscar</button>
            </div>
        </div>
    </form>

    <!-- Tabla de Productos -->
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-bordered text-center">
                    <thead class="thead-dark">
                        <tr>
                            <th>Nombre</th>
                            <th>Código 1</th>
                            <th>Código 2</th>
                            <th>Descripción</th>
                            @can('administrador')
                            <th>Precio Compra</th>
                            @endcan
                            <th>Precio Venta</th>
                            <th>Precio Oferta</th>
                            <th>Marca</th>
                            <th>Ubicación</th>
                            <th>Cantidad</th>
                            <th>Estado</th>
                            <th>Foto</th>
                            @if(auth()->user()->hasRole('Administrador'))
                                <th>Acciones</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($productos as $producto)
                            <tr>
                                <td>{{ $producto->nombre }}</td>
                                <td>{{ $producto->codigo1 }}</td>
                                <td>{{ $producto->codigo2 }}</td>
                                <td>{{ $producto->descripcion }}</td>
                                @can('administrador')
                                <td>
                                    @if($tipoCambio)
                                        {{ number_format($producto->precio1 * $tipoCambio, 2) }} Bs.
                                    @else
                                        {{ number_format($producto->precio1, 2) }} $
                                    @endif
                                </td>
                                @endcan
                                <td>
                                    @if($tipoCambio)
                                        {{ number_format($producto->precio2 * $tipoCambio, 2) }} Bs.
                                    @else
                                        {{ number_format($producto->precio2, 2) }} $
                                    @endif
                                </td>
                                <td>
                                    @if($tipoCambio)
                                        {{ number_format($producto->precio3 * $tipoCambio, 2) }} Bs.
                                    @else
                                        {{ number_format($producto->precio3, 2) }} $
                                    @endif
                                </td>
                                <td>{{ $producto->marca }}</td>
                                <td>{{ $producto->ubicacion->nombre ?? 'Sin ubicación' }}</td>
                                <td>{{ $producto->cantidad }} Unidades</td>
                                <td>
                                    <span class="badge {{ $producto->estado === 'activo' ? 'badge-success' : 'badge-secondary' }}">
                                        {{ ucfirst($producto->estado) }}
                                    </span>
                                </td>
                                <td>
                                    @if($producto->foto)
                                        <img src="{{ asset($producto->foto) }}" 
                                             alt="Foto del producto" 
                                             class="img-thumbnail img-preview" 
                                             style="max-width: 80px; cursor: pointer;" 
                                             data-toggle="modal" 
                                             data-target="#imageModal" 
                                             data-src="{{ asset($producto->foto) }}">
                                    @else
                                        <span class="text-muted">No disponible</span>
                                    @endif
                                </td>
                                @if(auth()->user()->hasRole('Administrador'))
                                    <td>
                                        <a href="{{ route('mercancia.edit', $producto) }}" class="btn btn-warning btn-sm">✏️ Editar</a>
                                        <form action="{{ route('mercancia.cambiarEstado', $producto) }}" method="POST" style="display:inline;">
                                            @csrf
                                            <button type="submit" class="btn btn-success btn-sm">🔄 Cambiar estado</button>
                                        </form>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="d-flex justify-content-center">
                    {{ $productos->links() }}
                </div>
                
            </div>
        </div>
    </div>
</section>

<!-- Modal para mostrar la imagen ampliada -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">Vista previa de la imagen</h5>
            
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" class="img-fluid" alt="Imagen del producto" style="max-height: 500px;">
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    // Evento al hacer clic en la imagen
    $('.img-preview').on('click', function() {
        var imageUrl = $(this).data('src'); // Obtener la URL de la imagen
        $('#modalImage').attr('src', imageUrl); // Asignar la imagen al modal
        $('#imageModal').modal('show'); // Mostrar el modal
    });

    // Al cerrar el modal, limpiar la imagen para evitar problemas
    $('#imageModal').on('hidden.bs.modal', function () {
        $('#modalImage').attr('src', ''); // Limpiar la URL de la imagen
    });
});

</script>
<style>
 .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
}

</style>
@endsection