@extends('layouts.app')

@section('title', 'Gestión de Productos')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('configuracion.index') }}">Configuración</a></li>
            <li class="breadcrumb-item active">Inventario - Productos</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800 text-gradient-primary"><i class="fas fa-boxes text-primary me-2"></i>Gestión de Productos
            </h1>
            <p class="text-muted mb-0">Sistema completo de inventario con precios multi-unidad</p>
        </div>
        <div class="btn-group" role="group">
            <x-professional-button variant="primary" href="{{ route('admin.inventory.products.create') }}" icon="fas fa-plus" class="">Nuevo Producto
            </x-professional-button>
            <button type="button" class="btn btn-outline-secondary" onclick="exportarProductos()">
                <i class="fas fa-file-export me-2"></i>Exportar
            </button>
            <button type="button" class="btn btn-outline-info" onclick="mostrarEstadisticas()">
                <i class="fas fa-chart-bar me-2"></i>Estadísticas
            </button>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filtros y Búsqueda</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.inventory.products.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="search" class="form-label">Buscar</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request('search') }}" placeholder="Nombre, código, SKU...">
                </div>
                <div class="col-md-3">
                    <label for="category_id" class="form-label">Categoría</label>
                    <select class="form-select" id="category_id" name="category_id">
                        <option value="">Todas las categorías</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="brand_id" class="form-label">Marca</label>
                    <select class="form-select" id="brand_id" name="brand_id">
                        <option value="">Todas las marcas</option>
                        @foreach($brands as $brand)
                            <option value="{{ $brand->id }}" {{ request('brand_id') == $brand->id ? 'selected' : '' }}>
                                {{ $brand->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="status" class="form-label">Estado</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">Todos los estados</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Activos</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactivos</option>
                        <option value="featured" {{ request('status') == 'featured' ? 'selected' : '' }}>Destacados</option>
                        <option value="low_stock" {{ request('status') == 'low_stock' ? 'selected' : '' }}>Stock Bajo</option>
                        <option value="out_of_stock" {{ request('status') == 'out_of_stock' ? 'selected' : '' }}>Sin Stock</option>
                    </select>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary" class="text-white"
                        <i class="fas fa-search me-2"></i>Filtrar
                    </button>
                    @if(request()->hasAny(['search', 'category_id', 'brand_id', 'status']))
                        <a href="{{ route('admin.inventory.products.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>Limpiar Filtros
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    <!-- Tabla de Productos -->
    <div class="card shadow mb-4">
        <div class="card-header bg-gradient-primary text-white py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold">
                    <i class="fas fa-boxes me-2"></i>Listado de Productos ({{ $products->total() }} productos)
                </h6>
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-light" onclick="generarCodigos()">
                        <i class="fas fa-barcode me-1"></i>Generar Códigos
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="productsTable">
                    <thead class="table-light">
                        <tr>
                            <th class="border-0 text-center" style="width: 80px;">
                                <i class="fas fa-image text-muted"></i>
                            </th>
                            <th class="border-0">
                                <i class="fas fa-barcode text-muted me-1"></i>Código
                            </th>
                            <th class="border-0">
                                <i class="fas fa-tag text-muted me-1"></i>Nombre
                            </th>
                            <th class="border-0">
                                <i class="fas fa-folder text-muted me-1"></i>Categoría
                            </th>
                            <th class="border-0">
                                <i class="fas fa-award text-muted me-1"></i>Marca
                            </th>
                            <th class="border-0 text-center">
                                <i class="fas fa-warehouse text-muted me-1"></i>Stock
                            </th>
                            <th class="border-0 text-end">
                                <i class="fas fa-dollar-sign text-muted me-1"></i>Precio Base
                            </th>
                            <th class="border-0 text-center">
                                <i class="fas fa-toggle-on text-muted me-1"></i>Estado
                            </th>
                            <th class="border-0 text-center" style="width: 120px;">
                                <i class="fas fa-cogs text-muted me-1"></i>Acciones
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $product)
                            <tr class="product-row">
                                <td class="text-center align-middle">
                                    <div class="product-image-container">
                                        @if($product->image)
                                            <img src="{{ $product->image_url }}" alt="{{ $product->name }}" 
                                                 class="product-image">
                                        @else
                                            <div class="product-image-placeholder">
                                                <i class="fas fa-image"></i>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="product-code">
                                        <div class="fw-bold text-primary">{{ $product->code }}</div>
                                        <small class="text-muted">{{ $product->sku }}</small>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="product-name">
                                        <div class="fw-bold">{{ $product->name }}</div>
                                        <div class="product-badges">
                                            @if($product->is_featured)
                                                <span class="badge bg-warning text-dark">
                                                    <i class="fas fa-star me-1"></i>Destacado
                                                </span>
                                            @endif
                                            @if($product->requires_prescription)
                                                <span class="badge bg-info text-white">
                                                    <i class="fas fa-prescription me-1"></i>Receta
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <span class="category-badge" style="background-color: {{ $product->category->color }}; color: white;">
                                        <i class="fas fa-folder me-1"></i>{{ $product->category->name }}
                                    </span>
                                </td>
                                <td class="align-middle">
                                    <div class="brand-info">
                                        <i class="fas fa-award text-muted me-1"></i>{{ $product->brand->name }}
                                    </div>
                                </td>
                                <td class="text-center align-middle">
                                    @if($product->track_stock)
                                        <div class="stock-info">
                                            <span class="stock-badge bg-{{ $product->stock_status_color }}">
                                                {{ $product->total_stock }} {{ $product->unit_of_measure }}
                                            </span>
                                            <div class="stock-status">
                                                <small class="text-{{ $product->stock_status_color }}">
                                                    <i class="fas fa-circle me-1"></i>{{ $product->stock_status_text }}
                                                </small>
                                            </div>
                                        </div>
                                    @else
                                        <span class="badge bg-secondary text-white">
                                            <i class="fas fa-ban me-1"></i>No rastreado
                                        </span>
                                    @endif
                                </td>
                                <td class="text-end align-middle">
                                    <div class="price-info">
                                        <div class="fw-bold text-success">${{ number_format($product->base_cost_price, 2) }}</div>
                                        @if($product->unit_1_pvp_1 > 0)
                                            <small class="text-muted">PVP: ${{ number_format($product->unit_1_pvp_1, 2) }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td class="text-center align-middle">
                                    <span class="status-badge bg-{{ $product->is_active ? 'success' : 'danger' }}">
                                        <i class="fas fa-{{ $product->is_active ? 'check' : 'times' }} me-1"></i>
                                        {{ $product->is_active ? 'Activo' : 'Inactivo' }}
                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    <x-action-buttons
                                        :view-route="route('admin.inventory.products.show', $product)"
                                        :edit-route="route('admin.inventory.products.edit', $product)"
                                        :delete-route="route('admin.inventory.products.destroy', $product)"
                                        :is-active="$product->is_active"
                                        :show-toggle="false"
                                        view-title="Ver detalles del producto"
                                        edit-title="Editar producto"
                                        delete-title="Eliminar producto"
                                        :delete-confirm="'¿Está seguro de eliminar este producto? Esta acción no se puede deshacer.'"
                                    />
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="fas fa-box fa-4x text-muted mb-3"></i>
                                        <h5 class="text-muted">No hay productos disponibles</h5>
                                        <p class="text-muted">Comience creando su primer producto.</p>
                                        <x-professional-button variant="primary" href="{{ route('admin.inventory.products.create') }}" icon="fas fa-plus" class="">Crear Primer Producto
                                        </x-professional-button>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Paginación -->
            @if($products->hasPages())
                <div class="card-footer bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="text-muted">
                            Mostrando {{ $products->firstItem() }} a {{ $products->lastItem() }} de {{ $products->total() }} productos
                        </div>
                        <div>
                            {{ $products->links() }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal de Estadísticas -->
<div class="modal fade" id="estadisticasModal" tabindex="-1" aria-labelledby="estadisticasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white" class="text-white"
                <h5 class="modal-title" id="estadisticasModalLabel">
                    <i class="fas fa-chart-bar me-2"></i>Estadísticas de Productos
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="estadisticasContent">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Cargando...</span>
                        </div>
                        <p class="mt-2">Cargando estadísticas...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function exportarProductos() {
        window.location.href = "{{ route('admin.inventory.products.export') }}";
    }

    function mostrarEstadisticas() {
        $('#estadisticasModal').modal('show');
        
        // Cargar estadísticas via AJAX
        fetch("{{ route('admin.inventory.products.statistics') }}")
            .then(response => response.json())
            .then(data => {
                const content = `
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="card border-primary">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-primary">Total Productos</h5>
                                    <h2 class="text-primary">${data.total_products}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="card border-success">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-success">Productos Activos</h5>
                                    <h2 class="text-success">${data.active_products}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="card border-warning">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-warning">Stock Bajo</h5>
                                    <h2 class="text-warning">${data.low_stock_products}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="card border-danger">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-danger">Sin Stock</h5>
                                    <h2 class="text-danger">${data.out_of_stock_products}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="card border-info">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-info">Categorías</h5>
                                    <h2 class="text-info">${data.categories_count}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="card border-secondary">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-secondary">Marcas</h5>
                                    <h2 class="text-secondary">${data.brands_count}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                document.getElementById('estadisticasContent').innerHTML = content;
            })
            .catch(error => {
                document.getElementById('estadisticasContent').innerHTML = `
                    <div class="alert alert-danger" class="text-white"
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Error al cargar las estadísticas: ${error.message}
                    </div>
                `;
            });
    }

    function generarCodigos() {
        if (confirm('¿Generar códigos únicos para productos sin código de barras?')) {
            // Implementar generación de códigos
            alert('Función de generación de códigos en desarrollo');
        }
    }

    // Inicializar DataTable si hay productos
    @if($products->count() > 0)
        $(document).ready(function() {
            $('#productsTable').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                "pageLength": 25,
                "order": [[2, "asc"]], // Ordenar por nombre
                "columnDefs": [
                    { "orderable": false, "targets": [0, 8] } // No ordenar imagen y acciones
                ]
            });
        });
    @endif
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">
<style>
    /* Estilos personalizados para la tabla de productos */
    .product-row {
        transition: all 0.3s ease;
        border-bottom: 1px solid #e3e6f0;
    }
    
    .product-row:hover {
        background-color: #f8f9fc;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .product-image-container {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .product-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .product-image:hover {
        transform: scale(1.05);
    }
    
    .product-image-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
    }
    
    .product-code {
        min-width: 120px;
    }
    
    .product-name {
        min-width: 200px;
    }
    
    .product-badges {
        margin-top: 4px;
    }
    
    .product-badges .badge {
        font-size: 0.7rem;
        margin-right: 4px;
    }
    
    .category-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
        display: inline-block;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .brand-info {
        font-weight: 500;
        color: #5a5c69;
    }
    
    .stock-info {
        text-align: center;
    }
    
    .stock-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 4px;
    }
    
    .stock-status small {
        font-size: 0.7rem;
    }
    
    .price-info {
        text-align: right;
    }
    

    
    .action-buttons {
        display: flex;
        gap: 4px;
        justify-content: center;
    }
    
    .action-buttons .btn {
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    
    .action-buttons .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .empty-state {
        padding: 40px 20px;
    }
    
    .empty-state i {
        opacity: 0.5;
    }
    
    /* Header de la tabla mejorado */
    .table thead th {
        background-color: #f8f9fc;
        border-bottom: 2px solid #e3e6f0;
        font-weight: 600;
        color: #5a5c69;
        padding: 15px 12px;
        font-size: 0.9rem;
    }
    
    /* Gradiente en el header de la card */
    .bg-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    /* Mejoras en la paginación */
    .card-footer {
        background-color: #f8f9fc !important;
        border-top: 1px solid #e3e6f0;
    }
    
    /* Responsive mejoras */
    @media (max-width: 768px) {
        .product-image-container {
            width: 40px;
            height: 40px;
        }
        
        .action-buttons {
            flex-direction: column;
            gap: 2px;
        }
        
        .action-buttons .btn {
            width: 28px;
            height: 28px;
        }
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
@endpush
@endsection