@extends('layouts.app')

@section('title', 'Detalles del Producto')

@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"><a href="{{ route('admin.inventory.products.index') }}">Inventario - Productos</a></li>
            <li class="breadcrumb-item active">{{ $product->name }}</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">
                <i class="fas fa-eye text-primary me-2"></i>Detalles del Producto
            </h1>
            <p class="text-muted mb-0">Información completa del producto {{ $product->name }}</p>
        </div>
        <div class="btn-group" role="group">
            <a href="{{ route('admin.inventory.products.edit', $product) }}" class="btn btn-primary">
                <i class="fas fa-edit me-2"></i>Editar Producto
            </a>
            <a href="{{ route('admin.inventory.products.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver al Listado
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Información Principal -->
        <div class="col-lg-8">
            <!-- Información Básica -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-primary text-white py-3">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-info-circle me-2"></i>Información Básica
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold text-muted">Código del Producto</label>
                                <p class="form-control-plaintext">{{ $product->code }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold text-muted">SKU</label>
                                <p class="form-control-plaintext">{{ $product->sku }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold text-muted">Nombre</label>
                                <p class="form-control-plaintext">{{ $product->name }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold text-muted">Descripción</label>
                                <p class="form-control-plaintext">{{ $product->description ?: 'Sin descripción' }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold text-muted">Categoría</label>
                                <p class="form-control-plaintext">
                                    <span class="badge" style="background-color: {{ $product->category->color }}; color: white;">
                                        <i class="fas fa-folder me-1"></i>{{ $product->category->name }}
                                    </span>
                                </p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold text-muted">Marca</label>
                                <p class="form-control-plaintext">
                                    <i class="fas fa-award text-muted me-1"></i>{{ $product->brand->name }}
                                </p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold text-muted">Código de Barras Principal</label>
                                <p class="form-control-plaintext">{{ $product->barcode ?: 'No asignado' }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold text-muted">Estado</label>
                                <p class="form-control-plaintext">
                                    <span class="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>
                                    @if($product->is_featured)
                                        <span class="badge bg-warning text-dark ms-2">
                                            <i class="fas fa-star me-1"></i>Destacado
                                        </span>
                                    @endif
                                    @if($product->requires_prescription)
                                        <span class="badge bg-info ms-2">
                                            <i class="fas fa-prescription me-1"></i>Requiere Receta
                                        </span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Medidas Físicas -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-info text-white py-3">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-ruler-combined me-2"></i>Medidas Físicas
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <div class="measurement-card">
                                    <i class="fas fa-weight text-primary fa-2x mb-2"></i>
                                    <h6 class="text-muted">Peso</h6>
                                    <h4 class="text-primary">{{ $product->weight }} kg</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <div class="measurement-card">
                                    <i class="fas fa-arrows-alt-h text-success fa-2x mb-2"></i>
                                    <h6 class="text-muted">Largo</h6>
                                    <h4 class="text-success">{{ $product->length }} cm</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <div class="measurement-card">
                                    <i class="fas fa-arrows-alt-v text-warning fa-2x mb-2"></i>
                                    <h6 class="text-muted">Ancho</h6>
                                    <h4 class="text-warning">{{ $product->width }} cm</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <div class="measurement-card">
                                    <i class="fas fa-arrows-alt text-info fa-2x mb-2"></i>
                                    <h6 class="text-muted">Alto</h6>
                                    <h4 class="text-info">{{ $product->height }} cm</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sistema de Precios Multi-Unidad -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-success text-white py-3">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-dollar-sign me-2"></i>Sistema de Precios Multi-Unidad
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="price-tab-card">
                                <div class="price-tab-header">
                                    <h6 class="mb-0">{{ $product->tab_name_1 }}</h6>
                                    <span class="badge bg-primary">{{ $product->unit_1_quantity }} {{ $product->unit_of_measure }}</span>
                                </div>
                                <div class="price-tab-content">
                                    <div class="price-level">
                                        <small class="text-muted">Básico</small>
                                        <div class="price-value">${{ number_format($product->unit_1_pvp_1, 2) }}</div>
                                    </div>
                                    <div class="price-level">
                                        <small class="text-muted">Intermedio</small>
                                        <div class="price-value">${{ number_format($product->unit_1_pvp_2, 2) }}</div>
                                    </div>
                                    <div class="price-level">
                                        <small class="text-muted">Premium</small>
                                        <div class="price-value">${{ number_format($product->unit_1_pvp_3, 2) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if($product->tab_enabled_2)
                        <div class="col-md-4">
                            <div class="price-tab-card">
                                <div class="price-tab-header">
                                    <h6 class="mb-0">{{ $product->tab_name_2 }}</h6>
                                    <span class="badge bg-success">{{ $product->unit_2_quantity }} {{ $product->unit_of_measure }}</span>
                                </div>
                                <div class="price-tab-content">
                                    <div class="price-level">
                                        <small class="text-muted">Básico</small>
                                        <div class="price-value">${{ number_format($product->unit_2_pvp_1, 2) }}</div>
                                    </div>
                                    <div class="price-level">
                                        <small class="text-muted">Intermedio</small>
                                        <div class="price-value">${{ number_format($product->unit_2_pvp_2, 2) }}</div>
                                    </div>
                                    <div class="price-level">
                                        <small class="text-muted">Premium</small>
                                        <div class="price-value">${{ number_format($product->unit_2_pvp_3, 2) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        @if($product->tab_enabled_3)
                        <div class="col-md-4">
                            <div class="price-tab-card">
                                <div class="price-tab-header">
                                    <h6 class="mb-0">{{ $product->tab_name_3 }}</h6>
                                    <span class="badge bg-warning">{{ $product->unit_3_quantity }} {{ $product->unit_of_measure }}</span>
                                </div>
                                <div class="price-tab-content">
                                    <div class="price-level">
                                        <small class="text-muted">Básico</small>
                                        <div class="price-value">${{ number_format($product->unit_3_pvp_1, 2) }}</div>
                                    </div>
                                    <div class="price-level">
                                        <small class="text-muted">Intermedio</small>
                                        <div class="price-value">${{ number_format($product->unit_3_pvp_2, 2) }}</div>
                                    </div>
                                    <div class="price-level">
                                        <small class="text-muted">Premium</small>
                                        <div class="price-value">${{ number_format($product->unit_3_pvp_3, 2) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Códigos de Barras Adicionales -->
            @if($product->barcodes->count() > 0)
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-warning text-dark py-3">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-barcode me-2"></i>Códigos de Barras Adicionales
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Código</th>
                                    <th>Tipo</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($product->barcodes as $barcode)
                                <tr>
                                    <td><code>{{ $barcode->barcode }}</code></td>
                                    <td>{{ $barcode->type }}</td>
                                    <td>
                                        <span class="badge bg-{{ $barcode->is_active ? 'success' : 'danger' }}">
                                            {{ $barcode->is_active ? 'Activo' : 'Inactivo' }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Imagen del Producto -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-secondary text-white py-3">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-image me-2"></i>Imagen del Producto
                    </h6>
                </div>
                <div class="card-body text-center">
                    @if($product->image_url)
                        <img src="{{ $product->image_url }}" alt="{{ $product->name }}" 
                             class="img-fluid rounded product-image-large">
                    @else
                        <div class="product-image-placeholder-large">
                            <i class="fas fa-image fa-4x text-muted"></i>
                            <p class="text-muted mt-2">Sin imagen</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Información de Stock -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-danger text-white py-3">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-warehouse me-2"></i>Información de Stock
                    </h6>
                </div>
                <div class="card-body">
                    <div class="stock-info-item">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Stock Actual</span>
                            <div class="d-flex align-items-center gap-2">
                                <span class="badge bg-{{ $product->stock_status_color }} fs-6">
                                    {{ $product->total_stock }} {{ $product->unit_of_measure }}
                                </span>
                                <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#inventoryModal">
                                    <i class="fas fa-info-circle"></i>
                                </button>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Stock Mínimo</span>
                            <span class="fw-bold">{{ $product->stock_min }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Stock Máximo</span>
                            <span class="fw-bold">{{ $product->stock_max }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Estado</span>
                            <span class="badge bg-{{ $product->stock_status_color }}">
                                {{ $product->stock_status_text }}
                            </span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted">Rastreo de Stock</span>
                            <span class="badge bg-{{ $product->track_stock ? 'success' : 'secondary' }}">
                                {{ $product->track_stock ? 'Habilitado' : 'Deshabilitado' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Información de Precios -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-success text-white py-3">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-dollar-sign me-2"></i>Información de Precios
                    </h6>
                </div>
                <div class="card-body">
                    <div class="price-info-item">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Precio Base</span>
                            <span class="fw-bold text-success">${{ number_format($product->base_cost_price, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Gasto 1</span>
                            <span class="fw-bold">${{ number_format($product->expense_1, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Gasto 2</span>
                            <span class="fw-bold">${{ number_format($product->expense_2, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted">Impuesto de Compra</span>
                            <span class="badge bg-{{ $product->purchase_tax_enabled ? 'success' : 'secondary' }}">
                                {{ $product->purchase_tax_enabled ? 'Habilitado' : 'Deshabilitado' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notas -->
            @if($product->notes)
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-info text-white py-3">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-sticky-note me-2"></i>Notas
                    </h6>
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ $product->notes }}</p>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

@push('styles')
<style>
    .measurement-card {
        padding: 20px;
        border: 2px solid #e3e6f0;
        border-radius: 10px;
        background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
        transition: all 0.3s ease;
    }
    
    .measurement-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }
    
    .price-tab-card {
        border: 2px solid #e3e6f0;
        border-radius: 10px;
        overflow: hidden;
        background: white;
        transition: all 0.3s ease;
    }
    
    .price-tab-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }
    
    .price-tab-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .price-tab-content {
        padding: 15px;
    }
    
    .price-level {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e3e6f0;
    }
    
    .price-level:last-child {
        border-bottom: none;
    }
    
    .price-value {
        font-weight: 600;
        color: #28a745;
    }
    
    .product-image-large {
        max-width: 100%;
        max-height: 300px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .product-image-placeholder-large {
        padding: 60px 20px;
        background: linear-gradient(135deg, #f8f9fc 0%, #e9ecef 100%);
        border-radius: 10px;
        border: 2px dashed #dee2e6;
    }
    
    .stock-info-item, .price-info-item {
        padding: 10px 0;
    }
    
    .gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .gradient-success {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    }
    
    .gradient-info {
        background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
    }
    
    .gradient-warning {
        background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    }
    
    .gradient-danger {
        background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
    }
    
    .gradient-secondary {
        background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    }
</style>
@endpush
@endsection

<!-- Modal de Información del Inventario -->
<div class="modal fade" id="inventoryModal" tabindex="-1" aria-labelledby="inventoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="inventoryModalLabel">
                    <i class="fas fa-warehouse"></i> Información Completa del Inventario
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-boxes"></i> Stock por Almacén
                        </h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>Almacén</th>
                                        <th>Cantidad</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Almacén Principal</td>
                                        <td><span class="badge bg-success">{{ $product->total_stock ?? 0 }}</span></td>
                                        <td>
                                            @if(($product->total_stock ?? 0) <= ($product->stock_min ?? 0))
                                                <span class="badge bg-danger">Bajo Stock</span>
                                            @elseif(($product->total_stock ?? 0) >= ($product->stock_max ?? 0))
                                                <span class="badge bg-warning">Stock Alto</span>
                                            @else
                                                <span class="badge bg-success">Normal</span>
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-chart-line"></i> Configuración de Stock
                        </h6>
                        <div class="row">
                            <div class="col-6">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">Stock Mínimo</h6>
                                        <h4 class="text-warning">{{ $product->stock_min ?? 0 }}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">Stock Máximo</h6>
                                        <h4 class="text-info">{{ $product->stock_max ?? 0 }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            <h6 class="text-primary mb-2">
                                <i class="fas fa-info-circle"></i> Estado Actual
                            </h6>
                            <p class="mb-0">
                                <span class="badge bg-{{ $product->stock_status_color }}">
                                    {{ $product->stock_status_text }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-4">
                    <div class="col-12">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-history"></i> Últimos Movimientos
                        </h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Tipo</th>
                                        <th>Cantidad</th>
                                        <th>Usuario</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">
                                            <i class="fas fa-info-circle"></i> 
                                            No hay movimientos registrados
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cerrar
                </button>
                <button type="button" class="btn btn-primary" onclick="window.open('{{ route('admin.inventory.reports') }}', '_blank')">
                    <i class="fas fa-chart-bar"></i> Ver Reportes
                </button>
            </div>
        </div>
    </div>
</div>