@extends('dashboard.body.main')

@section('container')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            @if (session()->has('success'))
                <div class="alert text-white bg-success" role="alert">
                    <div class="iq-alert-text">{{ session('success') }}</div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <i class="ri-close-line"></i>
                    </button>
                </div>
            @endif
            @if (session()->has('error'))
                <div class="alert text-white bg-danger" role="alert">
                    <div class="iq-alert-text">{{ session('error') }}</div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <i class="ri-close-line"></i>
                    </button>
                </div>
            @endif
            <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
                <div>
                    <h4 class="mb-3">Lista de productos</h4>
                </div>
                <div class="d-flex flex-wrap" style="gap: 8px;">
                    <a href="{{ route('products.importView') }}" class="btn btn-success add-list">Importar</a>
                    <a href="{{ route('products.exportData') }}" class="btn btn-warning add-list">Exportar</a>
                    <button type="button" class="btn add-list font-weight-bold" data-toggle="modal" data-target="#modalCategories"
                        style="background-color: #F1F5F9; color: #334155; border: 1px solid #CBD5E1;">
                        <i class="fas fa-tags mr-1"></i> Categorías
                        <span class="badge ml-1" style="background-color: #FF2B66; color:#fff; border-radius: 10px; font-size: 10px; padding: 2px 7px;">
                            {{ $categories->count() }}
                        </span>
                    </button>
                    <button type="button" class="btn add-list font-weight-bold" data-toggle="modal" data-target="#modalSuppliers"
                        style="background-color: #F1F5F9; color: #334155; border: 1px solid #CBD5E1;">
                        <i class="fas fa-truck mr-1"></i> Proveedores
                        <span id="suppliers-badge-count" class="badge ml-1" style="background-color: #FF2B66; color:#fff; border-radius: 10px; font-size: 10px; padding: 2px 7px;">
                            {{ $suppliers->count() }}
                        </span>
                    </button>
                    <a href="{{ route('products.create') }}" class="btn btn-primary add-list"><b>+ </b>producto</a>
                </div>
            </div>
        </div>

        <div class="col-lg-12 mb-3">
            <form action="{{ route('products.index') }}" method="get" id="filter-form">
                <div class="d-flex flex-wrap align-items-center justify-content-between" style="gap: 10px;">
                    {{-- Buscador --}}
                    <div class="flex-grow-1" style="max-width: 400px; min-width: 200px;">
                        <div class="input-group shadow-xs rounded-lg" style="border: 1px solid #E2E8F0; border-radius: 10px; overflow: hidden; background: #ffffff;">
                            <div class="input-group-prepend bg-white">
                                <span class="input-group-text bg-white border-0 text-muted pl-3">
                                    <i class="fas fa-search font-size-14"></i>
                                </span>
                            </div>
                            <input type="text" id="search" name="search" class="form-control form-control-lg bg-white text-dark border-0 pl-2"
                                placeholder="Nombre o código de barras..." value="{{ request('search') }}"
                                autofocus autocomplete="off" style="font-size: 13.5px; height: 42px;">
                        </div>
                    </div>

                    {{-- Filtro por Categoría --}}
                    <div style="min-width: 190px;">
                        <select name="category_id" class="form-control border" onchange="this.form.submit()"
                            style="border-radius: 8px; height: 42px; font-size: 13px; border-color: #E2E8F0;">
                            <option value="all" {{ request('category_id', 'all') === 'all' ? 'selected' : '' }}>
                                Todas las categorías
                            </option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Filas por página --}}
                    <div class="d-flex align-items-center">
                        <label class="mr-2 text-muted font-size-12 font-weight-bold mb-0">Filas:</label>
                        <select class="form-control form-control-sm border" name="row" onchange="this.form.submit()" style="border-radius: 8px;">
                            <option value="10" {{ request('row', '10') == '10' ? 'selected' : '' }}>10</option>
                            <option value="25" {{ request('row') == '25' ? 'selected' : '' }}>25</option>
                            <option value="50" {{ request('row') == '50' ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('row') == '100' ? 'selected' : '' }}>100</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-lg-12">
            <div class="table-responsive rounded mb-3">
                <table class="table mb-0">
                    <thead class="bg-white text-uppercase">
                        <tr class="ligth ligth-data">
                            <th>N°.</th>
                            <th>Foto</th>
                            <th>@sortablelink('product_name', 'Nombre')</th>
                            <th>@sortablelink('category.name', 'Categoria')</th>
                            <th>@sortablelink('supplier.name', 'Proveedor')</th>
                            <th>@sortablelink('buying_price', 'P. Costo')</th>
                            <th>@sortablelink('selling_price', 'P. Venta')</th>
                            <th>Estado</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                    <tbody class="ligth-body">
                        @forelse ($products as $product)
                        <tr class="product-table-row" data-search="{{ strtolower($product->product_name . ' ' . $product->product_code . ' ' . ($product->category->name ?? '') . ' ' . ($product->supplier->name ?? '')) }}">
                            @php
                                $largeImg = asset('assets/images/product/default.webp');
                                $thumbImg = asset('assets/images/product/default.webp');
                                
                                if ($product->product_image) {
                                    if (file_exists(public_path('upload/products/thumbnail/' . $product->product_image))) {
                                        $thumbImg = asset('upload/products/thumbnail/' . $product->product_image);
                                    } elseif (file_exists(storage_path('app/public/products/thumbnail/' . $product->product_image))) {
                                        $thumbImg = asset('storage/products/thumbnail/' . $product->product_image);
                                    } else {
                                        $thumbImg = file_exists(public_path('upload/products/' . $product->product_image)) 
                                            ? asset('upload/products/' . $product->product_image) 
                                            : asset('storage/products/' . $product->product_image);
                                    }

                                    $largeImg = file_exists(public_path('upload/products/' . $product->product_image)) 
                                        ? asset('upload/products/' . $product->product_image) 
                                        : asset('storage/products/' . $product->product_image);
                                }
                            @endphp
                            <td>{{ (($products->currentPage() * $products->perPage()) - $products->perPage()) + $loop->iteration }}</td>
                            <td>
                                @if ($product->product_image)
                                    <img class="avatar-60 rounded prod-img-thumb"
                                         src="{{ $thumbImg }}"
                                         data-fullsrc="{{ $largeImg }}"
                                         data-name="{{ $product->product_name }}"
                                         style="object-fit: cover; aspect-ratio: 1/1; cursor: zoom-in; transition: transform 0.15s, box-shadow 0.15s;"
                                         title="Ver imagen">
                                @else
                                    <span class="text-muted font-size-11">—</span>
                                @endif
                            </td>
                            <td>{{ $product->product_name }}</td>
                            <td>{{ $product->category->name ?? '—' }}</td>
                            <td>{{ $product->supplier->name ?? '—' }}</td>
                            <td>${{ number_format($product->buying_price, 0, ',', '.') }}</td>
                            <td>${{ number_format($product->selling_price, 0, ',', '.') }}</td>
                            <td>
                                <form action="{{ route('products.toggleStatus', $product->id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @if ($product->product_status)
                                        <button type="submit" class="badge rounded-pill bg-success border-0 text-white" style="cursor:pointer;">Activo</button>
                                    @else
                                        <button type="submit" class="badge rounded-pill bg-danger border-0 text-white" style="cursor:pointer;">Inactivo</button>
                                    @endif
                                </form>
                            </td>
                            <td>
                                <form action="{{ route('products.destroy', $product->id) }}" method="POST" style="margin-bottom: 5px">
                                    @method('delete')
                                    @csrf
                                    <div class="d-flex align-items-center list-action">
                                        <button type="button" class="btn btn-info mr-2 btn-show-large-image" 
                                                data-fullsrc="{{ $largeImg }}" 
                                                data-name="{{ $product->product_name }}"
                                                title="Ver imagen grande">
                                            <i class="ri-eye-line mr-0"></i>
                                        </button>
                                        <a class="btn btn-success mr-2" href="{{ route('products.edit', $product->id) }}"><i class="ri-pencil-line mr-0"></i></a>
                                        <button type="submit" class="btn btn-warning mr-2 border-none" onclick="return confirm('¿Eliminar este producto?')"><i class="ri-delete-bin-line mr-0"></i></button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="9" class="text-center py-4 text-muted">No se encontraron productos.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            {{ $products->links() }}
        </div>
    </div>
    <!-- Page end  -->
</div>

{{-- ============================================================
     Modal: Gestión de Categorías (CRUD en Línea)
============================================================ --}}
<div class="modal fade" id="modalCategories" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 18px; overflow: hidden;">
            <div class="modal-header text-white" style="background-color: #FF2B66;">
                <h5 class="modal-title font-weight-bold mb-0">
                    <i class="fa-solid fa-tags mr-2"></i> Gestión de Categorías
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body p-4">
                {{-- Crear nueva categoría --}}
                <div class="mb-4 p-3 rounded" style="background-color: #FFF9FB; border: 1px dashed #FFD0DE;">
                    <h6 class="font-weight-bold text-dark mb-2"><i class="fas fa-plus-circle mr-1" style="color:#FF2B66;"></i> Crear nueva categoría</h6>
                    <div class="d-flex" style="gap: 8px;">
                        <input type="text" id="new-cat-input" class="form-control" placeholder="Nombre de la categoría..." style="border-radius: 8px;">
                        <button type="button" id="btn-create-cat" class="btn font-weight-bold text-white" style="background-color: #FF2B66; border-radius: 8px; white-space: nowrap; min-width: 100px;">
                            <i class="fas fa-plus mr-1"></i> Crear
                        </button>
                    </div>
                    <div id="create-cat-msg" class="mt-2 font-size-12" style="display:none;"></div>
                </div>
                {{-- Lista de categorías --}}
                <div id="categories-list-container">
                    <div class="text-center py-3"><i class="fas fa-spinner fa-spin text-muted"></i> Cargando...</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     Modal: Gestión de Proveedores (CRUD en Línea)
============================================================ --}}
<div class="modal fade" id="modalSuppliers" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 18px; overflow: hidden;">
            <div class="modal-header text-white" style="background-color: #FF2B66;">
                <h5 class="modal-title font-weight-bold mb-0">
                    <i class="fas fa-truck mr-2"></i> Gestión de Proveedores
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body p-4">
                {{-- Crear/Editar proveedor --}}
                <div class="mb-4 p-3 rounded" style="background-color: #FFF9FB; border: 1px dashed #FFD0DE;">
                    <h6 class="font-weight-bold text-dark mb-2" id="sup-form-title">
                        <i class="fas fa-plus-circle mr-1" style="color:#FF2B66;"></i> Crear nuevo proveedor
                    </h6>
                    <form id="form-manage-supplier" class="mt-2">
                        <input type="hidden" id="edit-sup-id" value="">
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <label class="font-weight-bold font-size-11 mb-1 text-muted">Nombre / Razón Social <span class="text-danger">*</span></label>
                                <input type="text" id="new-sup-name" class="form-control form-control-sm font-weight-bold" placeholder="Ej: Distribuidora CCU" required style="border-radius: 8px;">
                            </div>
                            <div class="col-md-4 mb-2">
                                <label class="font-weight-bold font-size-11 mb-1 text-muted">Teléfono de Contacto</label>
                                <input type="text" id="new-sup-phone" class="form-control form-control-sm" placeholder="Ej: +56912345678" style="border-radius: 8px;">
                            </div>
                            <div class="col-md-4 mb-2">
                                <label class="font-weight-bold font-size-11 mb-1 text-muted">Correo Electrónico (Email)</label>
                                <input type="email" id="new-sup-email" class="form-control form-control-sm" placeholder="Ej: ventas@proveedor.cl" style="border-radius: 8px;">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-2" style="gap: 8px;">
                            <button type="button" id="btn-cancel-edit-sup" class="btn btn-sm btn-light font-weight-bold px-3" style="display:none; border-radius: 8px;">Cancelar Edición</button>
                            <button type="submit" id="btn-save-sup" class="btn btn-sm font-weight-bold text-white px-4" style="background-color: #FF2B66; border: none; border-radius: 8px;">
                                <i class="fas fa-check mr-1"></i> Guardar
                            </button>
                        </div>
                    </form>
                    <div id="manage-sup-msg" class="mt-2 font-size-12" style="display:none;"></div>
                </div>

                {{-- Lista de proveedores --}}
                <div id="suppliers-list-container">
                    <div class="text-center py-3"><i class="fas fa-spinner fa-spin text-muted"></i> Cargando proveedores...</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Popup Consulta y Modificación por Escáner -->
<div class="modal fade" id="scanProductModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
            <div class="modal-header text-white" style="background-color: var(--mh-pink, #FF2B66);">
                <h5 class="modal-title font-weight-bold text-white mb-0">
                    <i class="fa-solid fa-barcode mr-2"></i> Resultado de Búsqueda de Producto
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4 bg-white">
                <div id="scan-loading" class="text-center py-4">
                    <i class="fas fa-spinner fa-spin text-primary font-size-32"></i>
                    <p class="mt-2 text-muted font-weight-bold">Buscando datos del producto...</p>
                </div>

                <div id="scan-content" style="display:none;">
                    <div class="row align-items-center mb-4">
                        <div class="col-md-4 text-center mb-3 mb-md-0">
                            <div class="bg-white p-2 rounded-xl shadow-sm border d-inline-block">
                                <img id="scan-img" src="" alt="Foto" class="rounded" style="width: 140px; height: 140px; object-fit: cover;">
                            </div>
                            <span id="scan-stock-badge" class="badge badge-success d-block mt-2 py-1 px-2 font-size-12 font-weight-bold" style="border-radius: 10px;">
                                Existencia: <span id="scan-stock-val">0</span> uds
                            </span>
                        </div>
                        <div class="col-md-8">
                            <h4 id="scan-title" class="font-weight-extrabold text-dark mb-1">---</h4>
                            <div class="mb-3 text-muted font-size-13">
                                <span><i class="fas fa-barcode mr-1"></i>Código: <strong id="scan-code-str" class="text-dark">---</strong></span>
                                <span class="mx-2">•</span>
                                <span><i class="fas fa-tags mr-1"></i>Categoría: <strong id="scan-cat-str" class="text-dark">---</strong></span>
                            </div>
                            <div class="row text-center">
                                <div class="col-4 pr-1">
                                    <div class="p-2 bg-white rounded-lg border">
                                        <span class="text-muted font-size-11 d-block font-weight-bold">P. Compra (Costo)</span>
                                        <span id="scan-cost-display" class="font-weight-extrabold text-dark font-size-16">$0</span>
                                    </div>
                                </div>
                                <div class="col-4 px-1">
                                    <div class="p-2 bg-white rounded-lg border">
                                        <span class="text-muted font-size-11 d-block font-weight-bold">P. Venta Público</span>
                                        <span id="scan-price-display" class="font-weight-extrabold font-size-16" style="color: var(--mh-pink, #FF2B66);">$0</span>
                                    </div>
                                </div>
                                <div class="col-4 pl-1">
                                    <div class="p-2 rounded-lg border" style="background-color: #ECFDF5; border-color: #A7F3D0 !important;">
                                        <span class="text-success font-size-11 d-block font-weight-bold">Margen / Ganancia</span>
                                        <span id="scan-margin-display" class="font-weight-extrabold text-success font-size-16">0% ($0)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="border-top pt-3 text-center">
                        <p class="font-weight-bold text-dark mb-2 font-size-14">¿Desea modificar los valores de este producto?</p>
                        <div class="d-flex justify-content-center" style="gap: 10px;">
                            <button type="button" id="btn-toggle-edit" class="btn btn-primary font-weight-bold px-4" style="border-radius: 10px;">
                                <i class="fas fa-edit mr-1"></i> Sí, Modificar Valores
                            </button>
                            <button type="button" class="btn btn-secondary font-weight-bold px-4" data-dismiss="modal" style="border-radius: 10px;">
                                No, Cerrar
                            </button>
                        </div>
                    </div>
                    <div id="quick-edit-section" class="mt-3 p-3 bg-white border rounded-xl" style="display:none; border-radius: 14px;">
                        <h6 class="font-weight-bold text-primary mb-3"><i class="fas fa-cog mr-2"></i> Modificación Rápida de Valores</h6>
                        <form id="form-quick-update">
                            <input type="hidden" id="quick-prod-id">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label class="font-weight-bold font-size-12">Precio de Compra (Costo)</label>
                                    <input type="number" id="quick-cost-input" class="form-control font-weight-bold" min="0" step="1" required>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label class="font-weight-bold font-size-12">Precio de Venta</label>
                                    <input type="number" id="quick-price-input" class="form-control font-weight-bold text-primary" min="0" step="1" required>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label class="font-weight-bold font-size-12">Existencia (Stock)</label>
                                    <input type="number" id="quick-stock-input" class="form-control font-weight-bold" min="0" step="1" required>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <a id="btn-full-edit" href="#" class="btn btn-link btn-sm text-muted p-0">
                                    <i class="fas fa-external-link-alt mr-1"></i> Ir a Edición Completa
                                </a>
                                <button type="submit" id="btn-save-quick-edit" class="btn btn-success font-weight-bold px-4" style="border-radius: 8px;">
                                    <i class="fas fa-save mr-1"></i> Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search');
    const scanModal = $('#scanProductModal');
    const loadingDiv = document.getElementById('scan-loading');
    const contentDiv = document.getElementById('scan-content');
    const quickEditSec = document.getElementById('quick-edit-section');
    const btnToggleEdit = document.getElementById('btn-toggle-edit');
    let currentProduct = null;

    // Buscador en tiempo real (filtrado local)
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const query = this.value.toLowerCase().trim();
            const rows = document.querySelectorAll('.product-table-row');
            rows.forEach(row => {
                const text = row.getAttribute('data-search') || row.textContent.toLowerCase();
                row.style.display = (!query || text.includes(query)) ? '' : 'none';
            });
        });

        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const code = searchInput.value.trim();
                if (code) performScanSearch(code);
            }
        });
    }

    function performScanSearch(code) {
        loadingDiv.style.display = 'block';
        contentDiv.style.display = 'none';
        quickEditSec.style.display = 'none';
        scanModal.modal('show');

        fetch("{{ route('products.scanSearch') }}?code=" + encodeURIComponent(code), {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            loadingDiv.style.display = 'none';
            if (data.success && data.product) {
                currentProduct = data.product;
                populateModal(data.product);
                contentDiv.style.display = 'block';
            } else {
                alert('No se encontró ningún producto con el código o nombre: "' + code + '"');
                scanModal.modal('hide');
            }
        })
        .catch(err => {
            console.error(err);
            loadingDiv.style.display = 'none';
            alert('Error de conexión al consultar el producto.');
            scanModal.modal('hide');
        });
    }

    function populateModal(p) {
        document.getElementById('scan-img').src = p.image_url;
        document.getElementById('scan-title').textContent = p.name;
        document.getElementById('scan-code-str').textContent = p.code || 'Sin código';
        document.getElementById('scan-cat-str').textContent = p.category_name;
        document.getElementById('scan-stock-val').textContent = p.stock;
        document.getElementById('scan-cost-display').textContent = '$' + Math.round(p.buying_price).toLocaleString('es-CL');
        document.getElementById('scan-price-display').textContent = '$' + Math.round(p.selling_price).toLocaleString('es-CL');
        document.getElementById('scan-margin-display').textContent = p.margin_percent + '% ($' + Math.round(p.profit).toLocaleString('es-CL') + ')';
        document.getElementById('quick-prod-id').value = p.id;
        document.getElementById('quick-cost-input').value = Math.round(p.buying_price);
        document.getElementById('quick-price-input').value = Math.round(p.selling_price);
        document.getElementById('quick-stock-input').value = p.stock;
        document.getElementById('btn-full-edit').href = p.edit_url;
    }

    if (btnToggleEdit) {
        btnToggleEdit.addEventListener('click', function() {
            if (quickEditSec.style.display === 'none') {
                quickEditSec.style.display = 'block';
                btnToggleEdit.innerHTML = '<i class="fas fa-eye-slash mr-1"></i> Ocultar Modificación';
            } else {
                quickEditSec.style.display = 'none';
                btnToggleEdit.innerHTML = '<i class="fas fa-edit mr-1"></i> Sí, Modificar Valores';
            }
        });
    }

    const formQuick = document.getElementById('form-quick-update');
    if (formQuick) {
        formQuick.addEventListener('submit', function(e) {
            e.preventDefault();
            const prodId = document.getElementById('quick-prod-id').value;
            const btnSave = document.getElementById('btn-save-quick-edit');
            btnSave.disabled = true;
            btnSave.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Guardando...';

            fetch('/products/' + prodId + '/quick-update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    buying_price:  document.getElementById('quick-cost-input').value,
                    selling_price: document.getElementById('quick-price-input').value,
                    product_store: document.getElementById('quick-stock-input').value
                })
            })
            .then(res => res.json())
            .then(data => {
                btnSave.disabled = false;
                btnSave.innerHTML = '<i class="fas fa-save mr-1"></i> Guardar Cambios';
                if (data.success && data.product) {
                    alert('¡Valores del producto actualizados correctamente!');
                    document.getElementById('scan-cost-display').textContent  = '$' + Math.round(data.product.buying_price).toLocaleString('es-CL');
                    document.getElementById('scan-price-display').textContent = '$' + Math.round(data.product.selling_price).toLocaleString('es-CL');
                    document.getElementById('scan-stock-val').textContent     = data.product.stock;
                    document.getElementById('scan-margin-display').textContent = data.product.margin_percent + '% ($' + Math.round(data.product.profit).toLocaleString('es-CL') + ')';
                    quickEditSec.style.display = 'none';
                    btnToggleEdit.innerHTML = '<i class="fas fa-edit mr-1"></i> Sí, Modificar Valores';
                } else {
                    alert('No se pudo actualizar el producto.');
                }
            })
            .catch(() => {
                btnSave.disabled = false;
                btnSave.innerHTML = '<i class="fas fa-save mr-1"></i> Guardar Cambios';
                alert('Error al actualizar el producto.');
            });
        });
    }

    // ============================================================
    // CRUD de Categorías en el Modal (todo por AJAX - sin condicionales if en JS)
    // ============================================================
    function buildCatRow(cat) {
        return '<div class="d-flex align-items-center justify-content-between py-2 px-3 mb-1 rounded" '
             + 'style="background:#F8FAFC; border:1px solid #E2E8F0;" id="cat-row-' + cat.id + '">'
             +   '<div class="flex-grow-1 mr-2">'
             +     '<span class="font-weight-bold text-dark font-size-13" id="cat-name-' + cat.id + '">' + cat.name + '</span>'
             +     '<small class="text-muted d-block font-size-10">' + (cat.products_count || 0) + ' productos</small>'
             +     '<div id="cat-edit-' + cat.id + '" style="display:none;" class="mt-1">'
             +       '<input type="text" class="form-control form-control-sm" value="' + cat.name + '" '
             +              'id="cat-edit-input-' + cat.id + '" style="border-radius:6px; max-width:250px;">'
             +     '</div>'
             +   '</div>'
             +   '<div class="d-flex" style="gap:6px;">'
             +     '<button type="button" class="btn btn-sm btn-light border cat-btn-edit" data-id="' + cat.id + '" style="border-radius:6px;">'
             +       '<i class="fas fa-pen"></i>'
             +     '</button>'
             +     '<button type="button" class="btn btn-sm btn-success cat-btn-save" data-id="' + cat.id + '" style="border-radius:6px; display:none;">'
             +       '<i class="fas fa-check"></i>'
             +     '</button>'
             +     '<button type="button" class="btn btn-sm btn-danger cat-btn-delete" data-id="' + cat.id + '" data-name="' + cat.name + '" data-count="' + (cat.products_count || 0) + '" style="border-radius:6px; background-color: #FF2B66; border-color: #FF2B66;">'
             +       '<i class="fas fa-trash-alt"></i>'
             +     '</button>'
             +   '</div>'
             + '</div>';
    }

    function loadCategoriesList() {
        fetch('/categories?_format=json', {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            const container = document.getElementById('categories-list-container');
            if (!data.categories || data.categories.length === 0) {
                container.innerHTML = '<p class="text-muted text-center py-3">No hay categorías aún.</p>';
                return;
            }
            let html = '<div style="max-height:350px; overflow-y:auto;">';
            data.categories.forEach(function(cat) { html += buildCatRow(cat); });
            html += '</div>';
            container.innerHTML = html;
        })
        .catch(function() {
            document.getElementById('categories-list-container').innerHTML =
                '<p class="text-danger text-center">Error al cargar categorías.</p>';
        });
    }

    $('#modalCategories').on('show.bs.modal', function() { loadCategoriesList(); });

    document.getElementById('btn-create-cat').addEventListener('click', function() {
        const input  = document.getElementById('new-cat-input');
        const msgDiv = document.getElementById('create-cat-msg');
        const name   = input.value.trim();
        if (!name) {
            msgDiv.innerHTML = '<span class="text-danger">Ingresa un nombre.</span>';
            msgDiv.style.display = 'block';
            return;
        }
        const btn = this;
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

        fetch('{{ route("ventor.storeCategory") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ name: name })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-plus mr-1"></i> Crear';
            if (data.success) {
                input.value = '';
                msgDiv.innerHTML = '<span class="text-success"><i class="fas fa-check mr-1"></i>Creada exitosamente.</span>';
                msgDiv.style.display = 'block';
                loadCategoriesList();
                setTimeout(function() { msgDiv.style.display = 'none'; }, 3000);
            } else {
                msgDiv.innerHTML = '<span class="text-danger">' + (data.message || 'Error al crear.') + '</span>';
                msgDiv.style.display = 'block';
            }
        })
        .catch(function() {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-plus mr-1"></i> Crear';
            msgDiv.innerHTML = '<span class="text-danger">Error de conexión.</span>';
            msgDiv.style.display = 'block';
        });
    });

    document.getElementById('categories-list-container').addEventListener('click', function(e) {
        var editBtn = e.target.closest('.cat-btn-edit');
        if (editBtn) {
            var id = editBtn.dataset.id;
            document.getElementById('cat-edit-' + id).style.display = 'block';
            document.getElementById('cat-name-' + id).style.display = 'none';
            editBtn.style.display = 'none';
            document.querySelector('.cat-btn-save[data-id="' + id + '"]').style.display = 'inline-block';
            return;
        }
        var saveBtn = e.target.closest('.cat-btn-save');
        if (saveBtn) {
            var id = saveBtn.dataset.id;
            var newName = document.getElementById('cat-edit-input-' + id).value.trim();
            if (!newName) return;
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            var slug = newName.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
            fetch('/categories/' + id, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: JSON.stringify({ name: newName, slug: slug })
            })
            .then(function() { loadCategoriesList(); })
            .catch(function() { loadCategoriesList(); });
            return;
        }
        var delBtn = e.target.closest('.cat-btn-delete');
        if (delBtn) {
            var id = delBtn.dataset.id;
            var catName = delBtn.dataset.name;
            var count = parseInt(delBtn.dataset.count) || 0;

            if (count > 0) {
                alert('No se puede eliminar la categoría "' + catName + '" porque tiene ' + count + ' productos asociados. Debes reasignar o eliminar esos productos primero.');
                return;
            }

            if (!confirm('¿Eliminar la categoría "' + catName + '"?')) return;
            delBtn.disabled = true;
            delBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            fetch('/categories/' + id, {
                method: 'DELETE',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            })
            .then(function(r) {
                if (!r.ok) {
                    return r.json().then(function(err) {
                        alert(err.message || 'No se pudo eliminar la categoría.');
                    });
                }
                loadCategoriesList();
            })
            .catch(function() { loadCategoriesList(); });
    });

    // ==========================================
    // CRUD de Proveedores vía AJAX
    // ==========================================
    var currentEditingSupId = null;

    function loadSuppliersList() {
        var container = document.getElementById('suppliers-list-container');
        container.innerHTML = '<div class="text-center py-3"><i class="fas fa-spinner fa-spin text-muted"></i> Cargando proveedores...</div>';
        
        fetch('/suppliers?_format=json')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var badge = document.getElementById('suppliers-badge-count');
            if (badge) {
                badge.innerText = data.length;
            }

            if (data.length === 0) {
                container.innerHTML = '<p class="text-center text-muted">No hay proveedores registrados.</p>';
                return;
            }

            var html = '<div class="row">';
            data.forEach(function(sup) {
                var phoneStr = sup.phone ? String(sup.phone) : '';
                var nameStr = sup.name ? String(sup.name) : '';
                var emailStr = sup.email ? String(sup.email) : '';

                var phoneVal = (!phoneStr || phoneStr === '000000000' || phoneStr.indexOf('10000') === 0) ? 'No ingresado' : phoneStr;
                var emailVal = (emailStr && emailStr.indexOf('proveedor.com') !== -1 && emailStr.indexOf(nameStr.toLowerCase().replace(/[^a-z0-9]/g, '')) !== -1) ? 'No ingresado' : (emailStr || 'No ingresado');
                var prodCount = sup.products_count || 0;
                
                // Generar inicial del nombre
                var initial = nameStr.charAt(0).toUpperCase() || 'P';

                html += '<div class="col-md-6 mb-3">' +
                    '<div class="card border shadow-xs h-100 mb-0" style="border-radius: 12px; overflow: hidden; background-color: #fff; border-color: #E2E8F0 !important;">' +
                        '<div class="card-body p-3">' +
                            '<div class="d-flex align-items-center mb-2">' +
                                '<div class="rounded-circle d-flex align-items-center justify-content-center text-white font-weight-bold" style="width: 40px; height: 40px; background-color: #FFF0F5; color: #FF2B66 !important; font-size: 16px; border: 1px solid #FFD0DE; flex-shrink: 0;">' +
                                    initial +
                                '</div>' +
                                '<div class="ml-3 flex-grow-1 text-truncate" style="min-width: 0;">' +
                                    '<h6 class="mb-0 text-dark font-weight-extrabold text-truncate" style="font-size: 14px; font-weight: 700;">' +
                                        '<a href="/suppliers/' + sup.id + '" target="_blank" title="Ver ficha completa" style="color: #0F172A; text-decoration: underline;">' + nameStr + '</a>' +
                                    '</h6>' +
                                    '<span class="badge badge-light border font-size-10 px-2 py-0.5" style="border-radius: 4px; background-color: #F8FAFC;">' +
                                        '<i class="fas fa-boxes mr-1" style="color: #FF2B66;"></i> ' + prodCount + ' productos' +
                                    '</span>' +
                                '</div>' +
                            '</div>' +
                            
                            '<div class="font-size-12 mt-2 pt-2 border-top" style="border-top-color: #F1F5F9 !important;">' +
                                '<div class="mb-1 text-muted text-truncate"><i class="fas fa-phone mr-2 font-size-11" style="color: #94A3B8;"></i> <strong>Tel:</strong> ' + phoneVal + '</div>' +
                                '<div class="text-muted text-truncate"><i class="fas fa-envelope mr-2 font-size-11" style="color: #94A3B8;"></i> <strong>Email:</strong> ' + emailVal + '</div>' +
                            '</div>' +

                            '<div class="d-flex justify-content-end mt-3 pt-2 border-top" style="gap: 5px; border-top-color: #F1F5F9 !important;">' +
                                '<button type="button" class="btn btn-sm btn-outline-dark btn-edit-sup py-1 px-2.5" data-id="' + sup.id + '" data-name="' + nameStr + '" data-phone="' + phoneStr + '" data-email="' + emailStr + '" style="border-radius: 6px; font-size: 11px; font-weight: bold;">' +
                                    '<i class="fas fa-edit mr-1"></i> Editar' +
                                '</button>';
                                
                if (nameStr !== 'Proveedor General') {
                    html += '<button type="button" class="btn btn-sm btn-outline-danger btn-delete-sup py-1 px-2.5" data-id="' + sup.id + '" data-name="' + nameStr + '" data-count="' + prodCount + '" style="border-radius: 6px; font-size: 11px; font-weight: bold;">' +
                        '<i class="fas fa-trash-alt mr-1"></i> Eliminar' +
                    '</button>';
                } else {
                    html += '<span class="text-muted font-size-11 pt-1 align-self-center">Fijo (Sistema)</span>';
                }

                html += '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>';
            });
            html += '</div>';
            container.innerHTML = html;
        })
        .catch(function(err) {
            console.error(err);
            container.innerHTML = '<p class="text-danger text-center">Error al cargar proveedores.</p>';
        });
    }

    $('#modalSuppliers').on('show.bs.modal', function() {
        resetSupForm();
        loadSuppliersList();
    });

    function resetSupForm() {
        currentEditingSupId = null;
        document.getElementById('edit-sup-id').value = '';
        document.getElementById('new-sup-name').value = '';
        document.getElementById('new-sup-phone').value = '';
        document.getElementById('new-sup-email').value = '';
        document.getElementById('sup-form-title').innerHTML = '<i class="fas fa-plus-circle mr-1" style="color:#FF2B66;"></i> Crear nuevo proveedor';
        document.getElementById('btn-cancel-edit-sup').style.display = 'none';
        document.getElementById('manage-sup-msg').style.display = 'none';
    }

    document.getElementById('btn-cancel-edit-sup').addEventListener('click', function() {
        resetSupForm();
    });

    document.getElementById('form-manage-supplier').addEventListener('submit', function(e) {
        e.preventDefault();
        var id = document.getElementById('edit-sup-id').value;
        var name = document.getElementById('new-sup-name').value.trim();
        var phone = document.getElementById('new-sup-phone').value.trim();
        var email = document.getElementById('new-sup-email').value.trim();
        var msgDiv = document.getElementById('manage-sup-msg');

        var url = '/suppliers';
        var method = 'POST';

        if (id) {
            url = '/suppliers/' + id;
            method = 'PUT';
        }

        var saveBtn = document.getElementById('btn-save-sup');
        saveBtn.disabled = true;
        var origHtml = saveBtn.innerHTML;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';

        fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ name: name, phone: phone, email: email })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            saveBtn.disabled = false;
            saveBtn.innerHTML = origHtml;
            if (data.success) {
                resetSupForm();
                msgDiv.innerHTML = '<span class="text-success"><i class="fas fa-check mr-1"></i>Guardado exitosamente.</span>';
                msgDiv.style.display = 'block';
                loadSuppliersList();
                setTimeout(function() { msgDiv.style.display = 'none'; }, 3000);
            } else {
                msgDiv.innerHTML = '<span class="text-danger">' + (data.message || 'Error al guardar.') + '</span>';
                msgDiv.style.display = 'block';
            }
        })
        .catch(function(err) {
            saveBtn.disabled = false;
            saveBtn.innerHTML = origHtml;
            msgDiv.innerHTML = '<span class="text-danger">Error de conexión con el servidor.</span>';
            msgDiv.style.display = 'block';
        });
    });

    document.getElementById('suppliers-list-container').addEventListener('click', function(e) {
        var editBtn = e.target.closest('.btn-edit-sup');
        if (editBtn) {
            var id = editBtn.dataset.id;
            var name = editBtn.dataset.name;
            var phone = editBtn.dataset.phone;
            var email = editBtn.dataset.email;

            currentEditingSupId = id;
            document.getElementById('edit-sup-id').value = id;
            document.getElementById('new-sup-name').value = name;
            document.getElementById('new-sup-phone').value = (phone === '000000000' || phone.indexOf('10000') === 0) ? '' : phone;
            document.getElementById('new-sup-email').value = (email.indexOf('proveedor.com') !== -1) ? '' : email;
            
            document.getElementById('sup-form-title').innerHTML = '<i class="fas fa-edit mr-1" style="color:#FF2B66;"></i> Editar proveedor: ' + name;
            document.getElementById('btn-cancel-edit-sup').style.display = 'inline-block';
            
            document.getElementById('sup-form-title').scrollIntoView({ behavior: 'smooth' });
            return;
        }

        var delBtn = e.target.closest('.btn-delete-sup');
        if (delBtn) {
            var id = delBtn.dataset.id;
            var name = delBtn.dataset.name;
            var count = parseInt(delBtn.dataset.count) || 0;

            if (count > 0) {
                alert('No se puede eliminar el proveedor "' + name + '" porque tiene ' + count + ' productos asociados. Debes borrar o cambiar de proveedor a esos productos primero.');
                return;
            }

            if (!confirm('¿Eliminar el proveedor "' + name + '"?')) return;
            
            delBtn.disabled = true;
            delBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

            fetch('/suppliers/' + id, {
                method: 'DELETE',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            })
            .then(function(r) {
                if (!r.ok) {
                    return r.json().then(function(err) {
                        alert(err.message || 'No se pudo eliminar el proveedor.');
                    });
                }
                loadSuppliersList();
            })
            .catch(function() {
                loadSuppliersList();
            });
        }
    });


// ===== Lightbox: clic en foto de producto =====
document.addEventListener('DOMContentLoaded', function() {
    var lb = document.createElement('div');
    lb.setAttribute('id', 'prod-lightbox');
    lb.style.display        = 'none';
    lb.style.position       = 'fixed';
    lb.style.inset          = '0';
    lb.style.zIndex         = '99999';
    lb.style.background     = 'rgba(15,23,42,0.82)';
    lb.style.backdropFilter = 'blur(10px)';
    lb.style.webkitBackdropFilter = 'blur(10px)';
    lb.style.alignItems     = 'center';
    lb.style.justifyContent = 'center';

    var style = document.createElement('style');
    style.textContent = [
        '@keyframes lbFade{from{opacity:0}to{opacity:1}}',
        '@keyframes lbPop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}',
        '#prod-lb-box{position:relative;background:#fff;border-radius:22px;',
            'box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;',
            'max-width:500px;width:calc(100vw - 40px);',
            'animation:lbPop .25s cubic-bezier(.34,1.56,.64,1);}',
        '#prod-lb-img{width:100%;max-height:440px;object-fit:contain;display:block;background:#f1f5f9;}',
        '#prod-lb-footer{padding:14px 18px;border-top:1px solid #F1F5F9;font-weight:700;font-size:14px;color:#0F172A;}',
        '#prod-lb-close{position:absolute;top:10px;right:10px;width:36px;height:36px;',
            'border-radius:50%;background:rgba(15,23,42,.55);border:none;color:#fff;',
            'font-size:22px;font-weight:700;line-height:1;cursor:pointer;',
            'display:flex;align-items:center;justify-content:center;transition:background .15s;}',
        '#prod-lb-close:hover{background:rgba(255,43,102,.88);}',
        '.prod-img-thumb{cursor:zoom-in!important;transition:transform .15s,box-shadow .15s!important;}',
        '.prod-img-thumb:hover{transform:scale(1.08)!important;box-shadow:0 4px 16px rgba(255,43,102,.25)!important;}'
    ].join('');
    document.head.appendChild(style);

    var box    = document.createElement('div');   box.id = 'prod-lb-box';
    var closeB = document.createElement('button'); closeB.id = 'prod-lb-close'; closeB.title = 'Cerrar'; closeB.innerHTML = '&times;';
    var img    = document.createElement('img');   img.id = 'prod-lb-img'; img.alt = 'Foto del producto';
    var footer = document.createElement('div');   footer.id = 'prod-lb-footer';

    box.appendChild(closeB);
    box.appendChild(img);
    box.appendChild(footer);
    lb.appendChild(box);
    document.body.appendChild(lb);

    function openLb(src, name) {
        img.src = src;
        footer.textContent = name || '';
        lb.style.display = 'flex';
        lb.style.animation = 'lbFade .2s ease';
        document.body.style.overflow = 'hidden';
    }
    function closeLb() {
        lb.style.display = 'none';
        document.body.style.overflow = '';
        setTimeout(function(){ img.src = ''; }, 250);
    }

    // Click en la miniatura o en el botón de la lupa
    document.addEventListener('click', function(e) {
        var trigger = e.target.closest('.prod-img-thumb, .btn-show-large-image');
        if (trigger) {
            e.preventDefault();
            e.stopPropagation();
            openLb(
                trigger.getAttribute('data-fullsrc') || trigger.src,
                trigger.getAttribute('data-name')    || ''
            );
        }
    });

    closeB.addEventListener('click', closeLb);
    lb.addEventListener('click', function(e) { if (!box.contains(e.target)) closeLb(); });
    document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && lb.style.display === 'flex') closeLb(); });
});
</script>
@endsection