@extends('dashboard.body.main')

@section('specificpagestyles')
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('container')
<div class="container-fluid">
    {{-- Header --}}
    <div class="row align-items-center mb-4">
        <div class="col-md-7">
            <h3 class="font-weight-extrabold text-dark mb-1" style="font-weight: 800; font-size: 24px;">
                <i class="fa-solid fa-circle-info mr-2" style="color: var(--mh-pink);"></i> Ficha de Producto
            </h3>
            <p class="text-muted mb-0 font-size-13">Detalle completo, precios, stock y trazabilidad del producto.</p>
        </div>
        <div class="col-md-5 text-md-right mt-3 mt-md-0 d-flex justify-content-md-end" style="gap: 8px;">
            <a href="{{ route('products.index') }}" class="btn btn-dark font-weight-bold" style="border-radius: 10px; background-color: #0F172A;">
                <i class="ri-arrow-left-line mr-1"></i> Volver al Catálogo
            </a>
            <a href="{{ route('products.edit', $product->id) }}" class="btn btn-primary font-weight-bold" style="background-color: var(--mh-pink); border: none; border-radius: 10px;">
                <i class="ri-edit-line mr-1"></i> Editar Producto
            </a>
        </div>
    </div>

    <div class="row">
        {{-- Columna Izquierda: Foto y Código de barras --}}
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px; overflow: hidden;">
                <div class="card-body text-center p-4">
                    <div class="mb-3 position-relative d-inline-block">
                        <img class="crm-profile-pic rounded-circle shadow-sm" style="width: 140px; height: 140px; object-fit: cover; border: 4px solid var(--mh-pink); padding: 3px;" src="{{ $product->product_image ? asset('storage/products/'.$product->product_image) : asset('assets/images/product/default.webp') }}" alt="product-pic">
                    </div>
                    
                    <h4 class="font-weight-extrabold text-dark mb-1" style="font-weight: 800; font-size: 20px;">
                        {{ $product->product_name }}
                    </h4>
                    <div class="mt-2 py-1 w-100">
                        <small class="text-dark font-weight-bold text-uppercase d-block mb-1" style="font-size: 11px; letter-spacing: 0.5px; opacity: 0.85;">Precio de Venta Actual</small>
                        <h3 class="font-weight-extrabold text-dark mb-0" style="font-weight: 800; font-size: 32px; color: #000000 !important;">
                            ${{ number_format($product->selling_price, 0, ',', '.') }}
                        </h3>
                    </div>

                    <span class="badge badge-light border font-size-11 px-2.5 py-1.5 mb-3 d-inline-block" style="border-radius: 6px;">
                        <i class="fa-solid fa-barcode mr-1" style="color: var(--mh-pink);"></i> SKU: {{ $product->product_code ?? 'Auto-generado' }}
                    </span>

                    {{-- Mini gráfico de ventas por día --}}
                    <div class="mt-2 p-3 bg-white border text-left mb-3" style="border-radius: 14px; border-color: #E2E8F0 !important;">
                        <small class="text-dark font-weight-bold text-uppercase d-block mb-2" style="font-size: 10px; letter-spacing: 0.5px; opacity: 0.85;">
                            <i class="fa-solid fa-chart-line mr-1" style="color: var(--mh-pink);"></i> Ventas Diarias (Últimos 15 Días)
                        </small>
                        <div style="height: 90px; width: 100%;">
                            <canvas id="miniSalesChart"></canvas>
                        </div>
                    </div>

                    @if($product->product_code)
                        <div class="mt-4 p-3 bg-light rounded d-flex flex-column align-items-center justify-content-center" style="border-radius: 12px; border: 1px dashed #CBD5E1;">
                            <label class="font-weight-bold font-size-11 text-muted text-uppercase mb-2 d-block">Código de Barras EAN / UPC</label>
                            <div class="mb-1">{!! $barcode !!}</div>
                            <small class="text-muted font-size-11">{{ $product->product_code }}</small>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Columna Derecha: Detalles Estructurados --}}
        <div class="col-lg-8">
            
            {{-- Sección 1: Detalles Generales --}}
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px;">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="font-weight-bold text-dark mb-0"><i class="ri-information-line mr-2 text-primary"></i> Detalles del Artículo</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Categoría</label>
                            <span class="d-block font-weight-bold text-dark font-size-14">{{ $product->category->name ?? 'Sin categoría' }}</span>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Proveedor Asociado</label>
                            @if($product->supplier)
                                <a href="{{ route('suppliers.show', $product->supplier->id) }}" class="font-weight-bold" style="color: var(--mh-pink); text-decoration: none;" title="Ver ficha del proveedor">
                                    {{ $product->supplier->name }}
                                </a>
                            @else
                                <span class="d-block font-weight-bold text-muted font-size-14">Proveedor General</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sección 2: Inventario & Control de Stock --}}
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px;">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="font-weight-bold text-dark mb-0"><i class="ri-archive-line mr-2 text-warning"></i> Inventario & Fechas</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Stock Actual</label>
                            <span class="d-block font-weight-extrabold text-dark font-size-16">{{ number_format($product->product_store) }} unidades</span>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Fecha de Compra</label>
                            <span class="d-block font-weight-bold text-dark font-size-14">{{ $product->buying_date ? \Carbon\Carbon::parse($product->buying_date)->format('d-m-Y') : 'No registrada' }}</span>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Fecha de Vencimiento</label>
                            <span class="d-block font-weight-bold text-dark font-size-14">{{ $product->expire_date ? \Carbon\Carbon::parse($product->expire_date)->format('d-m-Y') : 'No vence' }}</span>
                        </div>
                        <div class="col-md-12">
                            <hr class="my-2">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Seguimiento de Inventario</label>
                            @if($product->track_stock)
                                <span class="badge badge-success font-size-12 px-2.5 py-1.5"><i class="ri-checkbox-circle-line mr-1"></i> Descontar del stock al vender</span>
                            @else
                                <span class="badge badge-light border text-muted font-size-12 px-2.5 py-1.5"><i class="ri-close-circle-line mr-1"></i> Stock ilimitado (No controla inventario)</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sección 3: Valores Económicos --}}
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px;">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="font-weight-bold text-dark mb-0"><i class="ri-money-dollar-circle-line mr-2 text-success"></i> Información Financiera</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Costo de Compra (Neto)</label>
                            <span class="d-block font-weight-extrabold text-dark font-size-18">${{ number_format($product->buying_price, 0, ',', '.') }}</span>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Margen de Ganancia</label>
                            @php
                                $costVal = (float)$product->buying_price;
                                $priceVal = (float)$product->selling_price;
                                $margin = $costVal > 0 ? round((($priceVal - $costVal) / $costVal) * 100, 1) : 0;
                            @endphp
                            <span class="d-block font-weight-bold text-success font-size-18">{{ $margin }}%</span>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold text-muted font-size-11 text-uppercase mb-1 d-block">Precio de Venta (Público)</label>
                            <span class="d-block font-weight-extrabold text-dark font-size-18">${{ number_format($product->selling_price, 0, ',', '.') }}</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $('#buying_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd'
    });
    $('#expire_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd'
    });

    document.addEventListener('DOMContentLoaded', function() {
        const productId = "{{ $product->id }}";
        fetch(`/stock/product-audit/${productId}`)
            .then(res => res.json())
            .then(data => {
                if (data && data.success) {
                    const rawSales = data.daily_sales || [];
                    
                    // Generar lista de los últimos 15 días (incluyendo hoy)
                    const last15DaysList = [];
                    for (let i = 14; i >= 0; i--) {
                        const d = new Date();
                        d.setDate(d.getDate() - i);
                        
                        const dd = String(d.getDate()).padStart(2, '0');
                        const mm = String(d.getMonth() + 1).padStart(2, '0');
                        const label = dd + '/' + mm; // Formato de visualización
                        const matchKey = dd + '-' + mm; // Formato de comparación (Carbon 'd-m')
                        
                        // Buscar coincidencia en la respuesta del servidor
                        const match = rawSales.find(item => item.date === matchKey);
                        
                        last15DaysList.push({
                            label: label,
                            quantity: match ? match.total_qty : 0
                        });
                    }
                    
                    const labels = last15DaysList.map(item => item.label);
                    const values = last15DaysList.map(item => item.quantity);

                    const ctx = document.getElementById('miniSalesChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [{
                                data: values,
                                borderColor: '#FF2B66',
                                backgroundColor: 'rgba(255, 43, 102, 0.05)',
                                borderWidth: 2.5,
                                pointBackgroundColor: '#FF2B66',
                                pointRadius: 1.5,
                                pointHoverRadius: 4,
                                fill: true,
                                tension: 0.3
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            return context.raw + ' uds';
                                        }
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    grid: { display: false },
                                    ticks: { font: { size: 8, weight: 'bold' }, maxRotation: 0 }
                                },
                                y: {
                                    beginAtZero: true,
                                    ticks: { font: { size: 8 }, stepSize: 1 }
                                }
                            }
                        }
                    });
                }
            })
            .catch(err => console.error('Error loading mini sales chart:', err));
    });
</script>

@include('components.preview-img-form')
@endsection