@extends('voyager::master')

@section('page_title', 'Editar Producto')


@section('head')

    <style>
        .app-container {
            min-height: 130%;
        }
    </style>

@endsection

@section('page_header')
    <div class="d-flex justify-between items-center" style="margin: 0px 20px;">
        <div class="d-flex header-title">
            <img src="{{voyager_asset('images/iconos/caja_editar.webp')}}" alt="">
            <h1 class="page-title">
                Edición de articulo: [{{ $product->codigo }}] - {{ $product->articulo }}
            </h1>
        </div>
        <div class="btn-group"
            style="display: flex; justify-content: center; gap: 5px; align-items: center; margin-right: 30px;">
            <a href="/admin/product/{{ $product->id }}" class="btn btn-warning btn-add-new">
                <i class="voyager-double-left"></i>
                <span>Volver atras</span>
            </a>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <form action="/admin/product/{{ $product->id }}/update" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav nav-tabs" id="productTabs" role="tablist">
                        <li class="nav-item active">
                            <a class="nav-link active" id="general-tab" data-toggle="tab" href="#general" role="tab"
                                aria-controls="general" aria-selected="true">General</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="empaque-tab" data-toggle="tab" href="#empaque" role="tab"
                                aria-controls="empaque" aria-selected="false">Lista de precios</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="inventario-tab" data-toggle="tab" href="#inventario" role="tab"
                                aria-controls="inventario" aria-selected="false">Inventario</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="tienda-tab" data-toggle="tab" href="#tienda" role="tab"
                                aria-controls="tienda" aria-selected="false">Tienda</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="productTabsContent">
                        <div class="tab-pane fade active in" id="general" role="tabpanel"
                            aria-labelledby="general-tab" style="position: relative;">
                            <!-- Contenido de la pestaña General -->
                            <div class="card mt-3" style="width: 70%;">
                                <div class="card-body">
                                    <h5 class="card-title" style="border-bottom: 1px solid #ccc;">General</h5>
                                    <div style="margin-left: 50px;">
                                        <div class="form-group">
                                            <label for="familia">Familia</label>
                                            <select id="familia" name="familia" class="form-control">
                                                @foreach ($familias as $familia)
                                                    <option value="{{ $familia->id }}"
                                                        {{ $product->familia == $familia->id ? 'selected' : '' }}>
                                                        {{ $familia->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="categoria">Categoría Principal</label>
                                            <select id="categoria" name="categoria" class="form-control">
                                                @foreach ($categorias as $categoria)
                                                    @if ($categoria->familia_id == $product->familia)
                                                        <option value="{{ $categoria->id }}"
                                                            {{ $product->categoria == $categoria->id ? 'selected' : '' }}>
                                                            {{ $categoria->name }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <label for="categories">Categorías Adicionales</label>
<div class="accordion" id="categoryAccordion">
    <div class="card" style="border: 1px solid #ccc; border-radius: 8px;">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0" style="margin: 0px !important">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Selecciona Categorías
                </button>
            </h2>
        </div>

                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#categoryAccordion">
                        <div class="card-body">
                            <!-- Campo de búsqueda -->
                            <input type="text" id="categorySearch" class="form-control mb-3" placeholder="Buscar por nombre o ID...">
                            
                            <!-- Contenedor de categorías adicionales -->
                            <div id="categoria2">
                                @foreach ($categorias as $category)
                                    @if ($category->id != $product->categoria) <!-- Sin importar familia -->
                                        <div class="form-check category-item" data-name="{{ $category->name }}" data-id="{{ $category->id }}">
                                            <input class="form-check-input" type="checkbox" name="categories[]"
                                                id="category{{ $category->id }}" value="{{ $category->id }}"
                                                @if($product->variasCategorias->contains($category->id)) checked @endif>
                                            <label class="form-check-label" for="category{{ $category->id }}">
                                                {{ $category->name }} (ID: {{ $category->id }})
                                            </label>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>





                                <div class="form-group">
                                    <label for="marca">Marca</label>
                                    <select id="marca" name="marca" class="form-control">
                                        @foreach ($marcas as $marca)
                                            <option value="{{ $marca->nombre }}"
                                                {{ $product->marca == $marca->nombre ? 'selected' : '' }}>
                                                {{ $marca->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                        <div class="form-group" style="margin-top: 15px;">
                                            <label for="codigo">Código</label>
                                            <input type="text" class="form-control" id="codigo" name="codigo"
                                                value="{{ $product->codigo }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="desc_fiscal">Descripción</label>
                                            <textarea class="form-control" id="desc_fiscal" name="desc_fiscal">{{ $product->desc_fiscal }}</textarea>
                                        </div>

                                        <div class="form-group">
                                            <label for="articulo">Artículo</label>
                                            <input type="text" class="form-control" id="articulo" name="articulo" value="{{ $product->articulo }}"/>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: end; padding: 0px 20px 20px 0px;">
                                    <div class="btn-group" style="margin-left: 2px !important;">
                                        <button type="submit" class="btn btn-primary">Guardar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="empaque" role="tabpanel" aria-labelledby="empaque-tab">
                            <!-- Contenido de la pestaña Empaque -->
                            <div class="card mt-3" style="width: 70%;">
                                <div class="card-body">
                                    <h5 class="card-title">Listas de precios</h5>
                                    <div class="table-responsive">
                                        <table id="dataTable" class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Lista</th>
                                                    <th>Precio Neto</th>
                                                    <th>Markup</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Lista 1</td>
                                                    <td><input type="text" class="form-control" name="lista_precios_1"
                                                            value="{{ $product->lista_precios_1 }}"></td>
                                                    <td><input type="text" class="form-control" name="markup_1"
                                                            value="{{ $product->markup_1 }}"></td>
                                                </tr>
                                                <tr>
                                                    <td>Lista 2</td>
                                                    <td><input type="text" class="form-control" name="lista_precios_2"
                                                            value="{{ $product->lista_precios_2 }}"></td>
                                                    <td><input type="text" class="form-control" name="markup_2"
                                                            value="{{ $product->markup_2 }}"></td>
                                                </tr>
                                                <tr>
                                                    <td>Lista 3</td>
                                                    <td><input type="text" class="form-control" name="lista_precios_3"
                                                            value="{{ $product->lista_precios_3 }}"></td>
                                                    <td><input type="text" class="form-control" name="markup_3"
                                                            value="{{ $product->markup_3 }}"></td>
                                                </tr>
                                                <tr>
                                                    <td>Lista 4</td>
                                                    <td><input type="text" class="form-control" name="lista_precios_4"
                                                            value="{{ $product->lista_precios_4 }}"></td>
                                                    <td><input type="text" class="form-control" name="markup_4"
                                                            value="{{ $product->markup_4 }}"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: end; padding: 0px 20px 20px 0px;">
                                    <div class="btn-group" style="margin-left: 2px !important;">
                                        <button type="submit" class="btn btn-primary">Guardar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="inventario" role="tabpanel" aria-labelledby="inventario-tab">
                            <!-- Contenido de la pestaña Inventario -->
                            <div class="card mt-3" style="width: 70%;">
                                <div class="card-body">
                                    <h5 class="card-title">Inventario</h5>
                                    <div class="d-flex items-center" style="gap: 10px;">
                                        <p>Stock: <span>{{ $product->stock_actual }}</span></p>
                                        <a href="/admin/products/{{ $product->id }}/edit-stock"
                                            class="btn btn-sm btn-primary pull-right edit">
                                            Editar
                                        </a>
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: end; padding: 0px 20px 20px 0px;">
                                    <div class="btn-group" style="margin-left: 2px !important;">
                                        <button type="submit" class="btn btn-primary">Guardar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tienda" role="tabpanel" aria-labelledby="tienda-tab">
                            <!-- Contenido de la pestaña Tienda -->
                            <div class="card mt-3" style="width: 70%;">
                                <div class="card-body">
                                    <h5 class="card-title">Tienda</h5>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="publicado" name="publicado"
                                            {{ $product->publicado ? 'checked' : '' }}>
                                        <label class="form-check-label" for="publicado">Publicado</label>
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: end; padding: 0px 20px 20px 0px;">
                                    <div class="btn-group" style="margin-left: 2px !important;">
                                        <button type="submit" class="btn btn-primary">Guardar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop


@section('javascript')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const categorySearch = document.getElementById('categorySearch');
    const categoryContainer = document.getElementById('categoria2');
    const categoryItems = document.querySelectorAll('.category-item');

    // Mostrar las categorías seleccionadas desde el principio
    let hasCheckedCategories = false;

    categoryItems.forEach(item => {
        const checkbox = item.querySelector('.form-check-input');
        if (checkbox.checked) {
            item.style.display = 'block'; // Mostrar categorías seleccionadas
            hasCheckedCategories = true;
        } else {
            item.style.display = 'none'; // Ocultar categorías no seleccionadas
        }
    });

    // Mostrar contenedor solo si hay categorías seleccionadas
    if (hasCheckedCategories) {
        categoryContainer.style.display = 'block';
    } else {
        categoryContainer.style.display = 'none'; // Ocultar si no hay categorías seleccionadas
    }

    // Filtrar categorías adicionales en tiempo real
    categorySearch.addEventListener('input', function() {
        const searchValue = categorySearch.value.toLowerCase();
        let hasVisibleItems = false; // Controlar si hay elementos visibles

        // Mostrar contenedor si hay texto en el campo de búsqueda
        if (searchValue) {
            categoryContainer.style.display = 'block';
        } else {
            // Solo mostrar el contenedor si hay categorías seleccionadas
            categoryContainer.style.display = hasCheckedCategories ? 'block' : 'none';
        }

        // Filtrar las categorías por nombre o ID
        categoryItems.forEach(item => {
            const name = item.getAttribute('data-name').toLowerCase();
            const id = item.getAttribute('data-id').toLowerCase();
            const checkbox = item.querySelector('.form-check-input');

            // Mostrar elementos que coincidan con la búsqueda o estén seleccionados
            if (name.includes(searchValue) || id.includes(searchValue) || checkbox.checked) {
                item.style.display = 'block';
                hasVisibleItems = true; // Al menos un elemento es visible
            } else {
                item.style.display = 'none';
            }
        });

        // Si no hay elementos visibles, ocultar el contenedor
        if (!hasVisibleItems) {
            categoryContainer.style.display = 'none';
        }
    });
});
</script>

<script>
        document.getElementById('familia').addEventListener('change', function() {
            const familiaId = this.value;
            
            // Hacer la solicitud AJAX para obtener las categorías
            fetch(`/admin/familias/${familiaId}/categorias`)
                .then(response => response.json())
                .then(data => {
                    const categoriaSelect = document.getElementById('categoria');
                    categoriaSelect.innerHTML = ''; // Limpiar opciones previas

                    data.categorias.forEach(categoria => {
                        const option = document.createElement('option');
                        option.value = categoria.id;
                        option.textContent = categoria.name;
                        categoriaSelect.appendChild(option);
                    });

                    // Mantener seleccionada la categoría actual
                    const selectedCategoria = "{{ $product->categoria }}";
                    if (selectedCategoria) {
                        categoriaSelect.value = selectedCategoria;
                    }
                })
                .catch(error => console.error('Error:', error));
        });
</script>

@stop