@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-pen-to-square mr-2" style="color: var(--mh-pink);"></i> Editar Ficha de Producto
            </h3>
            <p class="text-muted mb-0 font-size-13">Actualiza los datos, stock y márgenes del producto en tiempo real.</p>
        </div>
        <div class="col-md-5 text-md-right mt-3 mt-md-0">
            <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>
        </div>
    </div>

    <form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('put')

        <div class="row">
            {{-- Columna Izquierda: Foto y Acciones Clave --}}
            <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">
                            <!-- Image -->
                            <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;" id="image-preview" src="{{ $product->product_image ? asset('storage/products/'.$product->product_image) : asset('assets/images/product/default.webp') }}" alt="profile-pic">
                            
                            <!-- Floating camera button (triggers hidden file input) -->
                            <label for="image" class="position-absolute d-flex align-items-center justify-content-center text-white" style="bottom: 5px; right: 5px; width: 36px; height: 36px; background-color: var(--mh-pink); border-radius: 50%; border: 3px solid #FFFFFF; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 0; transition: all 0.2s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1.0)'" title="Cambiar imagen">
                                <i class="fas fa-camera" style="font-size: 14px; color: #FFFFFF !important;"></i>
                            </label>
                            
                            <!-- Hidden file input -->
                            <input type="file" class="d-none" id="image" name="product_image" accept="image/*" onchange="previewImage();">
                        </div>
                        @error('product_image')
                        <div class="text-danger font-size-11 mb-2">
                            {{ $message }}
                        </div>
                        @enderror
                        
                        <h4 class="font-weight-extrabold text-dark mb-1" id="product-display-name" style="font-weight: 800; font-size: 20px;">
                            {{ old('product_name', $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" id="product-display-price" 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 mt-2 d-inline-block" style="border-radius: 6px;">
                            <i class="fa-solid fa-barcode mr-1" style="color: var(--mh-pink);"></i> SKU: <span id="product-display-sku">{{ $product->product_code ?? 'Auto-generado' }}</span>
                        </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 && isset($barcode))
                            <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" id="barcode-container">{!! $barcode !!}</div>
                                <small class="text-muted font-size-11" id="barcode-sku-label">{{ $product->product_code }}</small>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Columna Derecha: Formularios Estructurados --}}
            <div class="col-lg-8">
                
                {{-- Sección 1: Información Básica --}}
                <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> Información General</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="row">
                            <div class="form-group col-md-6 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="product_name">Nombre del Producto <span class="text-danger">*</span></label>
                                <input type="text" class="form-control font-weight-bold @error('product_name') is-invalid @enderror" id="product_name" name="product_name" value="{{ old('product_name', $product->product_name) }}" required style="border-radius: 8px;">
                                @error('product_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="product_code">Código de barras (Opcional)</label>
                                <input type="text" class="form-control @error('product_code') is-invalid @enderror" id="product_code" name="product_code" value="{{ old('product_code', $product->product_code) }}" placeholder="Ej: 78000000" style="border-radius: 8px;">
                                @error('product_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="category_id">Categoría <span class="text-danger">*</span></label>
                                <select class="form-control font-weight-bold" name="category_id" required style="border-radius: 8px;">
                                    <option selected="" disabled>-- Seleccionar Categoría --</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6 mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="font-weight-bold text-muted font-size-12 mb-0" for="supplier_id">Proveedor <span class="text-muted">(Opcional)</span></label>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-primary font-weight-bold" id="btn-toggle-quick-sup" style="text-decoration: none; font-size: 11px;">
                                        <i class="fas fa-plus mr-1"></i> + Nuevo
                                    </button>
                                </div>
                                <select class="form-control" name="supplier_id" style="border-radius: 8px;">
                                    <option value="">-- Proveedor General --</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" {{ old('supplier_id', $product->supplier_id) == $supplier->id ? 'selected' : '' }}>{{ $supplier->name }}</option>
                                    @endforeach
                                </select>

                                {{-- Quick supplier form inline --}}
                                <div id="quick-sup-container" class="mt-2 p-2 bg-light border rounded" style="display: none; border-radius: 8px;">
                                    <div class="input-group input-group-sm">
                                        <input type="text" id="quick-sup-name" class="form-control form-control-sm" placeholder="Nombre de nuevo proveedor" style="border-radius: 6px 0 0 6px;">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary btn-sm font-weight-bold" type="button" id="btn-submit-quick-supplier" style="border-radius: 0 6px 6px 0; background-color: var(--mh-pink); border-color: var(--mh-pink);">Añadir</button>
                                        </div>
                                    </div>
                                </div>

                                @error('supplier_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Sección 2: Inventario & 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> Control de Stock & Vencimiento</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="row">
                            <div class="form-group col-md-3 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="product_store">Stock Actual <span class="text-danger">*</span></label>
                                <input type="number" class="form-control font-weight-bold @error('product_store') is-invalid @enderror" id="product_store" name="product_store" value="{{ old('product_store', $product->product_store) }}" required style="border-radius: 8px;">
                                @error('product_store')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-3 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="min_stock">Stock Mínimo de Alerta</label>
                                <input type="number" class="form-control font-weight-bold @error('min_stock') is-invalid @enderror" id="min_stock" name="min_stock" value="{{ old('min_stock', $product->min_stock ?? 5) }}" min="0" style="border-radius: 8px;">
                                @error('min_stock')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-3 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="expire_date">Fecha de Vencimiento</label>
                                <input id="expire_date" class="form-control @error('expire_date') is-invalid @enderror" name="expire_date" value="{{ old('expire_date', $product->expire_date) }}" style="border-radius: 8px;" />
                                @error('expire_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-3 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1">Controlar Inventario</label>
                                <div class="custom-control custom-switch pt-2">
                                    <input type="checkbox" class="custom-control-input" id="track_stock" name="track_stock" value="1" {{ old('track_stock', $product->track_stock) ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold" for="track_stock" style="cursor: pointer;">Descontar al vender</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Sección 3: Costos, Precios y Margen --}}
                <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> Precios & Finanzas</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="row">
                            <div class="form-group col-md-4 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="buying_price">Costo de Compra (Neto) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text">$</span></div>
                                    <input type="text" class="form-control font-weight-bold @error('buying_price') is-invalid @enderror" id="buying_price" name="buying_price" value="{{ old('buying_price', intval($product->buying_price) == $product->buying_price ? intval($product->buying_price) : floatval($product->buying_price)) }}" required style="border-top-right-radius: 8px; border-bottom-right-radius: 8px;">
                                </div>
                                @error('buying_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-4 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="profit_percent">Margen de Utilidad Sugerido (%)</label>
                                <div class="input-group">
                                    @php
                                        $costVal = (float)$product->buying_price;
                                        $priceVal = (float)$product->selling_price;
                                        $initialMargin = $costVal > 0 ? round((($priceVal - $costVal) / $costVal) * 100, 1) : 40;
                                    @endphp
                                    <input type="number" class="form-control font-weight-bold" id="profit_percent" placeholder="40" min="0" value="{{ $initialMargin }}" step="any" style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-secondary btn-percent-shortcut px-2" data-value="30" style="font-size: 11px;">30%</button>
                                        <button type="button" class="btn btn-outline-secondary btn-percent-shortcut px-2" data-value="40" style="font-size: 11px;">40%</button>
                                        <button type="button" class="btn btn-outline-secondary btn-percent-shortcut px-2" data-value="50" style="font-size: 11px;">50%</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-4 mb-3">
                                <label class="font-weight-bold text-muted font-size-12 mb-1" for="selling_price">Precio de Venta (Público) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text">$</span></div>
                                    <input type="text" class="form-control font-weight-bold text-dark @error('selling_price') is-invalid @enderror" id="selling_price" name="selling_price" value="{{ old('selling_price', intval($product->selling_price) == $product->selling_price ? intval($product->selling_price) : floatval($product->selling_price)) }}" required style="border-top-right-radius: 8px; border-bottom-right-radius: 8px;">
                                </div>
                                @error('selling_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Botones de Acción --}}
                <div class="d-flex justify-content-end mb-5" style="gap: 10px;">
                    <a class="btn btn-light font-weight-bold px-4 py-2.5" href="{{ route('products.index') }}" style="border-radius: 10px;">Cancelar</a>
                    <button type="submit" class="btn btn-primary font-weight-bold px-5 py-2.5" style="background-color: var(--mh-pink); border: none; border-radius: 10px;">
                        <i class="ri-save-line mr-1"></i> Guardar Cambios
                    </button>
                </div>

            </div>
        </div>
    </form>
</div>

<script>
    $('#expire_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd'
    });

    document.addEventListener('DOMContentLoaded', function() {
        const buyingPriceInput = document.getElementById('buying_price');
        const profitPercentInput = document.getElementById('profit_percent');
        const sellingPriceInput = document.getElementById('selling_price');
        const percentButtons = document.querySelectorAll('.btn-percent-shortcut');
        const productNameInput = document.getElementById('product_name');
        const productCodeInput = document.getElementById('product_code');
        const displayName = document.getElementById('product-display-name');
        const displaySku = document.getElementById('product-display-sku');
        const displayPrice = document.getElementById('product-display-price');

        // Formateador de moneda en pesos chilenos
        function formatCurrency(val) {
            const cleanVal = String(val).replace(/[^0-9.-]/g, '');
            const num = parseFloat(cleanVal) || 0;
            return '$' + Math.round(num).toLocaleString('es-CL');
        }

        function updateDisplayPrice() {
            if (displayPrice) {
                displayPrice.textContent = formatCurrency(sellingPriceInput.value);
            }
        }

        // Actualizar título en tiempo real
        productNameInput.addEventListener('input', function() {
            displayName.textContent = this.value.trim() || 'Nombre del Producto';
        });

        productCodeInput.addEventListener('input', function() {
            displaySku.textContent = this.value.trim() || 'Auto-generado';
        });

        // Actualizar precio en vivo
        sellingPriceInput.addEventListener('input', updateDisplayPrice);

        function calculateSellingPrice() {
            const buyingPrice = parseFloat((buyingPriceInput.value || '').replace(',', '.')) || 0;
            const profitPercent = parseFloat((profitPercentInput.value || '').replace(',', '.')) || 0;
            
            if (buyingPrice > 0) {
                const sellingPrice = Math.round(buyingPrice * (1 + profitPercent / 100) * 100) / 100;
                sellingPriceInput.value = sellingPrice;
                updateDisplayPrice();
            }
        }

        function calculateProfitPercent() {
            const buyingPrice = parseFloat((buyingPriceInput.value || '').replace(',', '.')) || 0;
            const sellingPrice = parseFloat((sellingPriceInput.value || '').replace(',', '.')) || 0;

            if (buyingPrice > 0 && sellingPrice >= 0) {
                const profitPercent = ((sellingPrice - buyingPrice) / buyingPrice) * 100;
                profitPercentInput.value = (Math.round(profitPercent * 10) / 10).toFixed(1);
                updateDisplayPrice();
            }
        }

        buyingPriceInput.addEventListener('input', calculateSellingPrice);
        profitPercentInput.addEventListener('input', calculateSellingPrice);
        sellingPriceInput.addEventListener('input', calculateProfitPercent);

        percentButtons.forEach(button => {
            button.addEventListener('click', function() {
                profitPercentInput.value = this.getAttribute('data-value');
                calculateSellingPrice();
            });
        });

        // Gráfico de Ventas Diarias
        (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 || [];
                        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;
                            const matchKey = dd + '-' + mm;
                            
                            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));
        })();

        // Quick Supplier creation toggle & submit in products/edit
        const btnToggleQuickSup = document.getElementById('btn-toggle-quick-sup');
        const quickSupContainer = document.getElementById('quick-sup-container');
        if (btnToggleQuickSup && quickSupContainer) {
            btnToggleQuickSup.addEventListener('click', function(e) {
                e.preventDefault();
                if (quickSupContainer.style.display === 'none' || !quickSupContainer.style.display) {
                    quickSupContainer.style.display = 'block';
                    document.getElementById('quick-sup-name').focus();
                } else {
                    quickSupContainer.style.display = 'none';
                }
            });
        }

        const btnSubmitQuickSup = document.getElementById('btn-submit-quick-supplier');
        if (btnSubmitQuickSup) {
            btnSubmitQuickSup.addEventListener('click', function(e) {
                e.preventDefault();
                const nameVal = document.getElementById('quick-sup-name').value.trim();
                if (!nameVal) {
                    alert('Por favor, ingresa el nombre del proveedor.');
                    return;
                }

                btnSubmitQuickSup.disabled = true;
                btnSubmitQuickSup.textContent = '...';

                fetch('/suppliers', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ name: nameVal })
                })
                .then(res => res.json())
                .then(data => {
                    btnSubmitQuickSup.disabled = false;
                    btnSubmitQuickSup.textContent = 'Añadir';

                    if (data.success && data.supplier) {
                        const select = document.querySelector('select[name="supplier_id"]');
                        const opt = document.createElement('option');
                        opt.value = data.supplier.id;
                        opt.textContent = data.supplier.name;
                        opt.selected = true;
                        select.appendChild(opt);

                        quickSupContainer.style.display = 'none';
                        document.getElementById('quick-sup-name').value = '';
                    } else {
                        alert(data.message || 'Error al guardar el proveedor.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    btnSubmitQuickSup.disabled = false;
                    btnSubmitQuickSup.textContent = 'Añadir';
                    alert('Ocurrió un error al guardar el proveedor.');
                });
            });
        }
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

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