@extends('layouts.app')

@section('title', 'Detalles del Ajuste de Precios')

@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</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.inventory.price-adjustments.index') }}">Ajustes de Precios</a></li>
            <li class="breadcrumb-item active">{{ $priceAdjustment->adjustment_code }}</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-calculator text-primary me-2"></i>Detalles del Ajuste de Precios
            </h1>
            <p class="text-muted mb-0">Código: <strong>{{ $priceAdjustment->adjustment_code }}</strong></p>
        </div>
        <div class="btn-group" role="group">
            <a href="{{ route('admin.inventory.price-adjustments.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver al Listado
            </a>
            <a href="{{ route('admin.inventory.price-adjustments.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>Nuevo Ajuste
            </a>
        </div>
    </div>

    <!-- Información General -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info-circle me-2"></i>Información del Ajuste
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Código:</strong></td>
                                    <td><span class="badge bg-secondary">{{ $priceAdjustment->adjustment_code }}</span></td>
                                </tr>
                                <tr>
                                    <td><strong>Descripción:</strong></td>
                                    <td>{{ $priceAdjustment->description }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Tipo de Ajuste:</strong></td>
                                    <td><span class="badge bg-info">{{ $priceAdjustment->adjustment_type_formatted }}</span></td>
                                </tr>
                                <tr>
                                    <td><strong>Dirección:</strong></td>
                                    <td>
                                        <span class="badge bg-{{ $priceAdjustment->adjustment_direction === 'increase' ? 'success' : 'danger' }}">
                                            {{ $priceAdjustment->adjustment_direction_formatted }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Valor:</strong></td>
                                    <td>
                                        <span class="badge bg-{{ $priceAdjustment->adjustment_direction === 'increase' ? 'success' : 'danger' }}">
                                            {{ $priceAdjustment->adjustment_direction === 'increase' ? '+' : '-' }}{{ $priceAdjustment->adjustment_value_formatted }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Estado:</strong></td>
                                    <td>
                                        <span class="badge bg-{{ $priceAdjustment->status === 'applied' ? 'success' : ($priceAdjustment->status === 'pending' ? 'warning' : 'danger') }}">
                                            {{ $priceAdjustment->status_formatted }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Fecha:</strong></td>
                                    <td>{{ $priceAdjustment->adjustment_date_formatted }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Usuario:</strong></td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2">
                                                {{ substr($priceAdjustment->user_name, 0, 1) }}
                                            </div>
                                            <div>
                                                <div class="fw-bold">{{ $priceAdjustment->user_name }}</div>
                                                <small class="text-muted">{{ $priceAdjustment->user_email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Productos:</strong></td>
                                    <td><span class="badge bg-primary">{{ $priceAdjustment->total_products }}</span></td>
                                </tr>
                                <tr>
                                    <td><strong>Verificación:</strong></td>
                                    <td>
                                        @if($priceAdjustment->math_verified)
                                            <span class="badge bg-success">
                                                <i class="fas fa-check me-1"></i>Verificado
                                            </span>
                                        @else
                                            <span class="badge bg-danger">
                                                <i class="fas fa-times me-1"></i>No Verificado
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    @if($priceAdjustment->notes)
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <h6>Notas:</h6>
                                <div class="alert alert-light">
                                    {{ $priceAdjustment->notes }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-bar me-2"></i>Estadísticas
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h5 class="card-title text-primary">{{ $priceAdjustment->total_products }}</h5>
                                    <p class="card-text small">Productos</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h5 class="card-title text-info">{{ $priceAdjustment->total_price_changes }}</h5>
                                    <p class="card-text small">Cambios</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <h6>Información de Seguridad:</h6>
                        <div class="small text-muted">
                            <div><strong>IP:</strong> {{ $priceAdjustment->ip_address ?? 'N/A' }}</div>
                            <div><strong>Pregunta:</strong> {{ $priceAdjustment->math_question ?? 'N/A' }}</div>
                            <div><strong>Respuesta:</strong> {{ $priceAdjustment->math_user_answer ?? 'N/A' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Detalles por Producto -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-boxes me-2"></i>Detalles por Producto
            </h6>
        </div>
        <div class="card-body">
            @if($priceAdjustment->details->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered" id="detailsTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Producto</th>
                                <th>Precios Antes</th>
                                <th>Precios Después</th>
                                <th>Cambios</th>
                                <th>Resumen</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($priceAdjustment->details as $detail)
                                <tr>
                                    <td>
                                        <div>
                                            <strong>{{ $detail->product_name }}</strong><br>
                                            <small class="text-muted">{{ $detail->product_code }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="small">
                                            @foreach($detail->prices_before as $key => $price)
                                                @if($price > 0)
                                                    <div><strong>{{ ucfirst(str_replace('_', ' ', $key)) }}:</strong> ${{ number_format($price, 2) }}</div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </td>
                                    <td>
                                        <div class="small">
                                            @foreach($detail->prices_after as $key => $price)
                                                @if($price > 0)
                                                    <div><strong>{{ ucfirst(str_replace('_', ' ', $key)) }}:</strong> ${{ number_format($price, 2) }}</div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </td>
                                    <td>
                                        <div class="small">
                                            @foreach($detail->price_changes as $key => $change)
                                                <div class="price-change {{ $change['difference'] > 0 ? 'price-increase' : 'price-decrease' }}">
                                                    {{ ucfirst(str_replace('_', ' ', $key)) }}: 
                                                    {{ $change['difference'] > 0 ? '+' : '' }}${{ number_format($change['difference'], 2) }}
                                                    ({{ $change['difference'] > 0 ? '+' : '' }}{{ number_format($change['percentage'], 1) }}%)
                                                </div>
                                            @endforeach
                                        </div>
                                    </td>
                                    <td>
                                        <div class="small">
                                            <div><strong>Total Cambios:</strong> {{ $detail->total_changes }}</div>
                                            <div><strong>Cambio Promedio:</strong> ${{ number_format($detail->average_change, 2) }}</div>
                                            <div><strong>% Promedio:</strong> {{ number_format($detail->average_percentage_change, 1) }}%</div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-exclamation-triangle fa-2x text-muted mb-3"></i>
                    <p class="text-muted">No hay detalles disponibles para este ajuste</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Auditoría -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-history me-2"></i>Información de Auditoría
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6>Información del Sistema:</h6>
                    <table class="table table-borderless table-sm">
                        <tr>
                            <td><strong>Creado:</strong></td>
                            <td>{{ $priceAdjustment->created_at->format('d/m/Y H:i:s') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Actualizado:</strong></td>
                            <td>{{ $priceAdjustment->updated_at->format('d/m/Y H:i:s') }}</td>
                        </tr>
                        <tr>
                            <td><strong>ID:</strong></td>
                            <td>{{ $priceAdjustment->id }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <h6>Información de Red:</h6>
                    <table class="table table-borderless table-sm">
                        <tr>
                            <td><strong>IP Address:</strong></td>
                            <td>{{ $priceAdjustment->ip_address ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td><strong>User Agent:</strong></td>
                            <td>
                                <div class="text-truncate" style="max-width: 200px;" title="{{ $priceAdjustment->user_agent }}">
                                    {{ $priceAdjustment->user_agent ?? 'N/A' }}
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .avatar-sm {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .price-change {
        font-weight: bold;
    }
    
    .price-increase {
        color: #28a745;
    }
    
    .price-decrease {
        color: #dc3545;
    }
    
    .text-truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    $('#detailsTable').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
        },
        "pageLength": 25,
        "order": [[0, "asc"]],
        "columnDefs": [
            { "orderable": false, "targets": [4] } // Deshabilitar ordenamiento en columna de resumen
        ]
    });
});
</script>
@endpush