@extends('voyager::master')

@section('page_title', 'Listado de Familias')

@section('head')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        function toggleProducts(categoriaId) {
            var productosList = document.getElementById('productos-' + categoriaId);
            if (productosList.style.display === "none" || productosList.style.display === "") {
                productosList.style.display = "block"; // Muestra los productos
            } else {
                productosList.style.display = "none"; // Oculta los productos
            }
        }
    </script>
@endsection

@section('page_header')
    <div class="d-flex header-title">
        <img src="../../assets/img/iconos/caja.webp" alt="">
        <h1 class="page-title">
            Listado de Familias
        </h1>
    </div>
    <a href="/admin/familias/create" class="btn btn-success">
        <i class="voyager-plus"></i> Crear Nueva Familia
    </a>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @elseif(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <div class="row">
            <div class="col-md-12">
                <div id="familias-container">
                    @foreach ($familias as $familia)
                        <div class="panel panel-bordered" data-id="{{ $familia->id }}">
                            <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;">
                                <h3 class="panel-title" style="font-size: 16px;">
                                    <a data-toggle="collapse" href="#familia-{{ $familia->id }}" role="button"
                                       aria-expanded="false" aria-controls="familia-{{ $familia->id }}">
                                        {{ $familia->nombre }}
                                    </a>
                                </h3>
                                <div>
                                                                        <h2>{{ $publicado }}</h2>
                                </div>
                                <div>
                                    <form action="/admin/familias/{{ $familia->id }}" method="POST" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm"
                                            onclick="return confirm('¿Estás seguro de que deseas eliminar esta familia?')">
                                            <i class="voyager-trash"></i> Eliminar
                                        </button>
                                    </form>
                                    <a href="/admin/familias/edit/{{ $familia->id }}" class="btn btn-warning btn-sm">
                                        <i class="voyager-edit"></i> Editar
                                    </a>
                                    <a href="/admin/categories/create/{{ $familia->id }}" class="btn btn-primary btn-sm">
                                        <i class="voyager-plus"></i> Crear Nueva Categoría
                                    </a>
                                </div>
                            </div>
                            <div id="familia-{{ $familia->id }}" class="panel-collapse collapse">
                                <div class="panel-body">
                                    @if ($familia->categorias->isEmpty())
                                        <p>No hay categorías para esta familia.</p>
                                    @else
                                        <ul class="categorias-container" data-familia-id="{{ $familia->id }}">
                                            @foreach ($familia->categorias as $categoria)
                                                <li style="width: 50%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4eaec; padding: 5px 0px;" data-id="{{ $categoria->id }}">
                                                    <a href="javascript:void(0);" onclick="toggleProducts({{ $categoria->id }})">
                                                        {{ $categoria->name }} 
                                                    </a>
                                                    <strong>{{ $categoria->deshabilitada == 1 ? 'No Publicado' : 'Publicado' }}</strong>
                                                    <div>
                                                        <form action="/admin/categories/{{ $categoria->id }}" method="POST" style="display:inline;">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('¿Estás seguro de que deseas eliminar esta categoría?')">
                                                                <i class="voyager-trash"></i> Eliminar
                                                            </button>
                                                        </form>
                                                        <a href="/admin/categories/edit/{{ $categoria->id }}" class="btn btn-warning btn-sm">
                                                            <i class="voyager-edit"></i> Editar
                                                        </a>
                                                        <a href="/admin/categories/edit-familia/{{ $categoria->id }}" class="btn btn-info btn-sm">
                                                            <i class="voyager-edit"></i> Cambiar de familia
                                                        </a>
                                                    </div>
                                                </li>
                                                <ul id="productos-{{ $categoria->id }}" style="display: none;" class="productos-container" data-categoria-id="{{ $categoria->id }}">
                                                    @foreach ($categoria->productos as $producto)
                                                        <li data-id="{{ $producto->id }}" 
                                                            style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e4eaec; padding: 5px 0px;
                                                            {{ $producto->isAdditional ? 'background-color: #f0f8ff;' : '' }}">
                                                                {{ $producto->codigo }} - {{ $producto->desc_fiscal }}
                                                                <strong>{{ $producto->publicado == 1 ? 'Publicado' : 'No publicado' }}</strong>
                                                            <div>
                                                            <form action="{{ route('producto.destroy', $producto->id) }}" method="POST" style="display:inline;">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('¿Estás seguro de que deseas eliminar este producto?')">
                                                                        <i class="voyager-trash"></i> Eliminar
                                                                    </button>
                                                                </form>
                                                                <a href="/admin/product/{{ $producto->id }}/edit" class="btn btn-warning btn-sm">
                                                                    <i class="voyager-edit"></i> Editar
                                                                </a>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @endforeach
                                        </ul>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @stop

    @section('javascript')
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var familiasContainer = document.getElementById('familias-container');

                // Habilitar ordenamiento de familias
                new Sortable(familiasContainer, {
                    handle: '.panel-heading',
                    animation: 150,
                    onEnd: function(evt) {
                        var order = [];
                        familiasContainer.querySelectorAll('.panel').forEach(function(panel, index) {
                            order.push({
                                id: panel.getAttribute('data-id'),
                                order: index + 1
                            });
                        });

                        fetch('/admin/familias/order', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                order: order
                            })
                        });
                    }
                });

                // Habilitar ordenamiento de categorías
                document.querySelectorAll('.categorias-container').forEach(function(categoriasContainer) {
                    new Sortable(categoriasContainer, {
                        animation: 150,
                        onEnd: function(evt) {
                            var familiaId = categoriasContainer.getAttribute('data-familia-id');
                            var orden = [];
                            categoriasContainer.querySelectorAll('li').forEach(function(item, index) {
                                orden.push({
                                    id: item.getAttribute('data-id'),
                                    orden: index + 1
                                });
                            });

                            fetch('/admin/categories/orden', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    familia_id: familiaId,
                                    orden: orden
                                })
                            });
                        }
                    });
                });

                // Habilitar ordenamiento de productos
                document.querySelectorAll('.productos-container').forEach(function(productosContainer) {
                    new Sortable(productosContainer, {
                        animation: 150,
                        onEnd: function(evt) {
                            var categoriaId = productosContainer.getAttribute('data-categoria-id');
                            var orden = [];
                            productosContainer.querySelectorAll('li').forEach(function(item, index) {
                                orden.push({
                                    id: item.getAttribute('data-id'),
                                    orden: index + 1
                                });
                            });

                            fetch('/admin/products/orden', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    categoria: categoriaId,
                                    orden: orden
                                })
                            });
                        }
                    });
                });
            });
        </script>
    @stop