@extends('metronic.base')
@section('extracss')
@endsection
@section('extrajs')
@endsection

@section('titulo')
Categoria para productos
@endsection

@section('content')


{{-- <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Dashboard</a></li>

        <li class="breadcrumb-item active" aria-current="page">Categorias y sub categoria para producto</li>
    </ol>
</nav> --}}



@include('sessions')
{{-- <h3 class="mt-5 mb-5" style="text-align: center">Categorias y sub categorias para productos</h3> --}}
<div class="card shadow-sm">
    <div class="card-header">
        <h3 class="card-title">Categorías y sub categorías para productos</h3>
    </div>
    <div class="card-body">
        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#categoriaModal">
            Agregar Categoría
        </button>

        <!-- The Modal -->
        <div class="modal fade modal-lg" id="categoriaModal" tabindex="-1" aria-labelledby="categoriaModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="categoriaModalLabel">Agregar Nueva Categoría</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- Modal Body -->
                    <div class="modal-body">
                        <form method="post" action="{{ route('productocategoria.store') }}" id="formCategoria">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="">Categoria</label>
                                    <input type="text" name="categoria" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <Label>Tipo</Label>
                                    <select name="tipo" id="tipoSelect" class="form-select">
                                        <option value="categoria">Categoria</option>
                                        <option value="sub">Sub Categoria</option>
                                    </select>
                                </div>
                                {{-- Select para subcategoria --}}
                                <div class="col-md-6" id="categoriaContainer" style="display: none;">
                                    <Label>Categoría a la que pertenece</Label>
                                    <select name="pro_categoria_id" id="categoriaSelect" class="form-select" disabled>
                                        @foreach ($categorias as $categoria)
                                        <option value="{{ $categoria->id }}">{{ $categoria->categoria }}</option>
                                        @endforeach
                                    </select>
                                </div>


                                <div class="col-md-6">
                                    <Label>Cuenta de venta</Label>
                                    <select name="cuenta_de_venta_id" id="cuenta_de_venta_id"
                                        data-dropdown-parent="#categoriaModal" data-control="select2"
                                        class="form-select">
                                        <option value="">Elegir</option>
                                        @foreach ($cuentas as $c)
                                        <option value="{{ $c->id }}">{{ $c->nombre_cuenta }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <Label>Cuenta de gasto</Label>
                                    <select name="cuenta_de_gasto_id" id="cuenta_de_gasto_id"
                                        data-dropdown-parent="#categoriaModal" data-control="select2"
                                        class="form-select">
                                        <option value="">Elegir</option>
                                        @foreach ($cuentas as $c)
                                        <option value="{{ $c->id }}">{{ $c->nombre_cuenta }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <Label>Cuenta de inventario</Label>
                                    <select name="cuenta_de_inventario_id" id="cuenta_de_inventario_id"
                                        data-dropdown-parent="#categoriaModal" data-control="select2"
                                        class="form-select">
                                        <option value="">Elegir</option>
                                        @foreach ($cuentas as $c)
                                        <option value="{{ $c->id }}">{{ $c->nombre_cuenta }}</option>
                                        @endforeach
                                    </select>
                                </div>


                                <div class="col-md-12 mt-1 mt-2 mb-3">
                                    <button type="submit" class="btn btn-primary"><i
                                            class='ki-outline ki-check-circle fs-2'></i>
                                        Guardar</button>
                                </div>
                                <div class="col-md-12 mt-2 mb-3 text-right" style="text-align: right;">
                                    <a href="{{ route('producto.importarCategoriasExcel') }}" class="btn btn-success"><i
                                            class="fa-regular fa-file-excel fs-2"></i> Importar categorías vía Excel</a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>

                </div>
            </div>
        </div>
        @if (count($data) > 0)
        <table class="table table-bordered table-hover">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Categoria</th>
                    <th>Sub categoría</th>
                    <th scope="col">Cuenta venta</th>
                    <th scope="col">Cuenta gasto</th>
                    <th scope="col">Cuenta inventario</th>
                    <th width="60">Atributos</th>
                    <th width="60">Editar</th>
                    <th width="60">Eliminar</th>
                </tr>

            </thead>
            <tbody>
                @foreach ($data as $key => $item)
                <td> {{ $key + 1 }} </td>
                <td>{{ $item->categoria }}</td>
                <td>
                    @if ($item->sub)
                    <span class="badge bg-primary text-light"> Sub categoria </span>
                    <span class="badge bg-secondary text-light">Pertenece a:
                        {{ $item->categoriaPadre->categoria ?? '' }}</span>
                    @else
                    @endif
                </td>
                <td>{{ $item?->cuentasventa?->nombre_cuenta }}</td>
                <td>{{ $item?->cuentasgasto?->nombre_cuenta }}</td>
                <td>{{ $item?->cuentasinventario?->nombre_cuenta }}</td>
                <td>
                    {{-- <button type="button" data-toggle="modal" data-target="#atributosModal" class="btn border"
                        data-id="{{ $item->id }}" data-name="{{ $item->categoria }}" value="{{ $item->id }}"><i
                            class="ki-outline ki-plus fs-2x text-primary"></i></button> --}}
                    <a href="{{ route('gestionAtributosCategoria', ['categoriaId' => $item->id]) }}" class="btn"
                        title="agregar atributo"><i class="ki-outline ki-plus fs-2x text-primary"></i></a>
                </td>


                <td>
                    <a href="{{ route('producto.editarCategoria', $item->id) }}" class="btn"
                        title="Editar"><i class="ki-outline ki-pencil fs-2x text-dark"></i></a>
                </td>


                <td>
                    {{-- <form method="post" action="{{ route('productocategoria.destroy', $item->id) }}">
                        @method('delete')
                        @csrf
                        <button type="submit" class="btn btn-danger"><i class="ki-outline ki-trash fs-2x"></i></button>
                    </form> --}}
                    @include('producto.categoria.modalDelete')
                    <button type="button" title="Eliminar" data-bs-toggle="modal" data-bs-target="#deleteModal"
                        class="btn" onclick="fun_destroy('{{ $item->id }}')" title="Eliminar categoria"><i
                            class="ki-outline ki-trash fs-2x text-danger"></i></button>
                </td>

                </tr>
                @endforeach
            </tbody>
        </table>
        @else
        <div class="alert alert-danger">
            <strong>¡Opps! Parece que no tienes ninguna categoria registrada.</strong>
        </div>
        @endif
    </div>
</div>

{{-- MODAL DE ADVERTENCIA --}}
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body align-self-center">
                <form action="{{ route('producto.destroyCategoria') }}" method="POST">
                    @csrf
                    {{ method_field('DELETE') }}
                    <div style="text-align: center">
                        <br>
                        <i class='ki-outline ki-information text-danger' style='font-size:80px;'></i>
                        <br>
                        <br>
                        <strong>
                            <h3>¿Estás seguro que deseas eliminar la categoría?</h3>
                        </strong>
                        <strong>Recuerde que al eliminar esta categoría ya no se podrá revertir la acción</strong>
                        <input type="hidden" id="delete_idC" name="delete_idC">
                    </div>
                    <div class="modal-footer d-flex justify-content-center">
                        <button type="submit" class="btn btn-primary">
                            <i class='ki-outline ki-trash fs-2'></i>
                            Eliminar
                        </button>
                        <a href="" class="btn btn-secondary" data-dismiss="modal">
                            <i class='ki-outline ki-cross-circle fs-2'></i>
                            Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    // Obtener referencia a los elementos select y el contenedor
        var tipoSelect = document.getElementById('tipoSelect');
        var categoriaSelect = document.getElementById('categoriaSelect');
        var categoriaContainer = document.getElementById('categoriaContainer');

        // Agregar evento change al select de tipo
        tipoSelect.addEventListener('change', function() {
            if (tipoSelect.value === 'sub') {
                categoriaContainer.style.display = 'block'; // Mostrar el contenedor
                categoriaSelect.disabled = false; // Habilitar select de categoría
            } else {
                categoriaContainer.style.display = 'none'; // Ocultar el contenedor
                categoriaSelect.disabled = true; // Deshabilitar select de categoría
                categoriaSelect.value = ''; // Vaciar el contenido del select
            }
        });

        function fun_destroy(id) {
            $("#delete_idC").val(id);
        }

        $(document).ready(function() {
            //SCRIPT DE MODAL ATRIBUTOS
            $('#atributosModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var recipient = button.data('id') // Extract info from data-* attributes
                var name = button.data('name')
                var modal = $(this)
                //modal.find('.modal-title-salud').text('Validar exámenes de salud de: ' + name)
                //var id = $('#btnValidarPagoSalud').val();
                //console.log(id);
                $('#categoria').val(name)
                $('#categoriaId').val(recipient)
            });
        });
</script>
<script>
    $(document).ready(function() {
    // Mostrar el modal al hacer clic en el botón de agregar categoría
    $("#categoriaModal").on('show.bs.modal', function() {
        // Aquí podrías hacer alguna lógica al mostrar el modal si es necesario
    });

    // Manejar el envío del formulario
    $("#formCategoria").on('submit', function(e) {
        e.preventDefault();
        
        let url = $(this).attr('action'); // Obtén la URL del atributo action del formulario

        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN' : $('input[name="_token"]').val(),
            },
            success: function(response) {
                Swal.fire({
                    title: 'Genial',
                    text: 'Agregaste una nueva categoría',
                    icon: 'success',
                });
                setTimeout(() => {
                    location.reload();
                }, 1000);
            },
            error: function(e) {
                console.log(e);
                Swal.fire({
                    title: 'Error',
                    text: 'Hubo un problema al agregar la categoría',
                    icon: 'error',
                });
            }
        });
    });
});

</script>
@endsection
@section('extrajs')
@endsection