@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">
            <form method="post" action="{{ route('productocategoria.store') }}">
                @csrf
                <div class="row">
                    <div class="col-md-4">
                        <label for="">Categoria</label>
                        <input type="text" name="categoria" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <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-4" 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-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>

            @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 width="60">Atributos</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>
                                {{-- <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>
                                {{-- <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>
@endsection
@section('extrajs')
@endsection