@extends('header_nuevo_generico')
@section('main')

<h1 class="text-center text-fidelitas mt-5 pt-5">Productos</h1>
<div class="container">
    <div class="row justify-content-end">
        <div class="col-xl-3 text-end">
            <button type="button" class="btn btn-fidelitas mb-2"  data-bs-toggle="modal" data-bs-target="#modal_nuevo_servicio"><i class="bi bi-plus-square-fill"></i> Crear</button>
        </div>
    </div>
    <div class="row">
        <div class="d-flex justify-content-center mb-2">
            <label for="filtroEstado" class="form-label me-2">Filtrar por estado:</label>
            <select id="filtroEstado" class="form-select" style="width: auto; display: inline-block;">
                <option value="" selected>Todos</option>
                <option value="A" >Activos</option>
                <option value="N">Inactivos</option>
            </select>
        </div>
        <table id="tabla-servicios" class="table">
        <thead>
            <tr class="bg-fidelitas">
                <th>Nombre del Producto</th>
                <th>Estado</th>
                <th>Grupo Informe</th>
                <th>Siglas</th>
                <th>URL</th>
                <th class="text-nowrap">URL Method</th>
                <th>Icono</th>
                <th>Acciones</th>
            </tr>
        </thead>
            <tbody>
            @if(empty($servicios))
                <tr>No se encuentran productos</tr>
            @else    
                @foreach($servicios as $servicio)
                    <tr data-estado="{{$servicio->estado_producto}}">
                        <td>{{$servicio->nombre_producto}}</td>
                        <td>{{$servicio->estado_producto}}</td>
                        <td>{{$servicio->grupo_informes}}</td>
                        <td>{{$servicio->sigla}}</td>
                        <td>{{$servicio->url}}</td>
                        <td>{{$servicio->url_method}}</td>
                        <td>{{$servicio->icono}}</td>
                        <td>
                            <div class="d-flex gap-2">
                                <button id="boton_editar" type="button" class="btn btn-fidelitas p-2 rounded-0" title="Editar" style="width: 40px; height: 40px;" data-bs-toggle="modal" data-bs-target="#modal_editar_servicio"
                                    data-id="{{$servicio->producto}}" 
                                    data-nombre="{{$servicio->nombre_producto}}" 
                                    data-grupo_informes="{{$servicio->grupo_informes}}"
                                    data-sigla="{{$servicio->sigla}}"
                                    data-url="{{$servicio->url}}"
                                    data-url-method="{{$servicio->url_method}}"
                                    data-icono="{{$servicio->icono}}">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                                <button id="cambio_estado" type="button" title="Activar/Desactivar"  class="btn @if($servicio->estado_producto=='A') btn-danger @else btn-primary @endif p-2 rounded-0" style="width: 40px; height: 40px;" data-bs-toggle="modal" data-bs-target="#modalConfirmar"
                                    data-id="{{$servicio->producto}}"
                                    data-estado="{{ $servicio->estado_producto }}">
                                    @if($servicio->estado_producto=="A") 
                                        <i class="bi bi-trash-fill"></i> 
                                    @else 
                                        <i class="bi bi-plus-circle-fill"></i> 
                                    @endif
                                </button>
                            </div>
                        </td>                  
                    </tr>
                @endforeach
            @endif
            </tbody>
        </table>
    </div>
</div>

@include('servicios.modales_servicios')

@endsection

@section('funcionesJS')
<script src="/js/servicios/panel_servicios.js?v={{rand()}}"></script>

@endsection