@extends('adminlte::page')

@section('content_header')
<h1><b>Registro / Registro de una nueva actividad</b></h1>
<hr>
@stop

@section('content')
<div class="row">
    <div class="col-md-12"> <!-- Cambiado a col-md-12 para que ocupe todo el ancho -->
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Llene los datos del formulario</h3>
                <div class="card-tools">
                    <!-- Puedes agregar herramientas aquí si es necesario -->
                </div>
                <!-- /.card-tools -->
            </div>
            <div class="card-body">
                <form action="{{ url('admin/solicituds/create') }}" method="post">
                    @csrf

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Gerencia</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    </div>
                                    <input type="text" name="gerencia" id="otros-descripcion" class="form-control" placeholder="Escriba aquí.." >
                                </div>
                                @error('gerencia')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Tipo</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user-check"></i></span>
                                    </div>
                                    <select name="tipo" id="" class="form-control">
                                        <option>Administracion, control y balanceo del servicio de Internet</option>
                                        <option>Administración y control del parque tecnologico de telecomunicaciones</option>
                                        <option>Análisis neuralgicos de fallas de infraestructura, sistemas y hardware</option>
                                        <option>Atención a Foraneos y gerencias</option>
                                        <option>Atención y apoyo a otros entes gubernamentales Control y seguridad Informática</option>
                                        <option>Calculo y rehabilitación del sistema de radios</option>
                                        <option>Control de equipos asignados al personal y por asignar</option>
                                        <option>Control y seguridad Informática</option>
                                        <option>Gestiones con Operadoras</option>
                                        <option>Indicadores, Mejoras de SIG</option>
                                        <option>levantamiento de información</option>
                                        <option>OTROS: Reuniones, Proveedores, Gestión de capacitaciones</option>
                                        <option>Seguimiento y control de la pag. WEB. Sistemas de información gerencial</option>
                                        <option>Supervicion de conexiones foraneas</option>
                                    </select>
                                </div>
                                @error('tipo')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                    </div>


                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group" >
                                <label for="email">Acuerdo</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    </div>
                                    <input type="text" name="acuerdo" class="form-control" placeholder="Escriba aquí.."  >
                                </div>
                                @error('acuerdo')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Atendido por</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    </div>
                                    <input type="text" name="atendido" value="{{$usuario->name}}" class="form-control" placeholder="Escriba aquí.." >
                                 <!--   <select name="atendido" id="" class="form-control">
                                    <option >Jesús S</option>
                                    <option >Mileidy M</option>
                                    <option >Enrique T</option>
                                   </select>--->
                                </div>
                                @error('atendido')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="password_confirmation">Departamento</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-building"></i></span>
                                    </div>
                                    <input type="text" name="departamento" value="{{$usuario->departamento}}" class="form-control" placeholder="Escriba aquí.." >
                                </div>
                                @error('departamento')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="form-group" id="gerencia-input-group" style="display: none;">
                                <label for="gerencia_observacion">Observaciones para Gerencia</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-comments"></i></span>
                                    </div>
                                    <input type="text" name="observacion" class="form-control" placeholder="Escriba aquí para gerencia.." disabled>
                                </div>
                                @error('gerencia_observacion')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="password_confirmation">Fecha</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-calender"></i></span>
                                    </div>
                                    <input type="date" name="fecha" class="form-control" value="{{Carbon\Carbon::now()->format('Y-m-d')}}" placeholder="Escriba aquí.." >
                                </div>
                                @error('fecha')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <a href="{{ url('/admin/clientes') }}" class="btn btn-secondary">Cancelar</a>
                                <button type="submit" class="btn btn-primary">Registrar</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>
@stop

@section('css')
<!-- Aquí puedes agregar CSS adicional si es necesario -->
@stop

@section('js')
<script>
    $(document).ready(function() {
    $('#tipo').on('change', function() {
        var selectedValue = $(this).val();
        var selects = [
            '#sia-descripcion', '#zimbra-descripcion', '#Intranet-descripcion',
            '#servidores-descripcion', '#desarrollo-descripcion', '#web-descripcion',
            '#redes-descripcion', '#soporte-descripcion', '#tele-descripcion',
            '#re-descripcion', '#ra-descripcion', '#cc-descripcion',
            '#im-descripcion', '#fo-descripcion', '#gere-descripcion',
            '#otros-descripcion'
        ];

        // Ocultar y deshabilitar todos los select
        $(selects.join(',')).hide().prop('disabled', true);

        // Ocultar el grupo de observaciones y el grupo de gerencia
        $('#observaciones-group').show();
        $('#gerencia-input-group').hide().find('input').prop('disabled', true); // Deshabilitar el input de gerencia

        // Mostrar y habilitar el select correspondiente según la selección
        switch (selectedValue) {
            case 'SIA':
                $('#sia-descripcion').show().prop('disabled', false);
                break;
            case 'Zimbra':
                $('#zimbra-descripcion').show().prop('disabled', false);
                break;
            case 'Intranet':
                $('#Intranet-descripcion').show().prop('disabled', false);
                break;
            case 'Servidor':
                $('#servidores-descripcion').show().prop('disabled', false);
                break;
            case 'Desarrollos':
                $('#desarrollo-descripcion').show().prop('disabled', false);
                break;
            case 'Web':
                $('#web-descripcion').show().prop('disabled', false);
                break;
            case 'Redes':
                $('#redes-descripcion').show().prop('disabled', false);
                break;
            case 'Soporte':
                $('#soporte-descripcion').show().prop('disabled', false);
                break;
            case 'tele':
                $('#tele-descripcion').show().prop('disabled', false);
                break;
            case 'recargas':
                $('#re-descripcion').show().prop('disabled', false);
                break;
            case 'radios':
                $('#ra-descripcion').show().prop('disabled', false);
                break;
            case 'cctv':
                $('#cc-descripcion').show().prop('disabled', false);
                break;
            case 'impresoras':
                $('#im-descripcion').show().prop('disabled', false);
                break;
            case 'foraneos':
                $('#fo-descripcion').show().prop('disabled', false);
                break;
            case 'gerencia':
                $('#observaciones-group').hide(); // Ocultar el grupo de observaciones
                $('#gerencia-input-group').show(); // Mostrar el grupo de gerencia
                $('#gerencia-input-group').find('input').prop('disabled', false); // Habilitar el input de gerencia
                $('#gere-descripcion').show().prop('disabled', false); // Mostrar y habilitar el select de gerenci
                break;
            case 'otros':
                $('#otros-descripcion').show().prop('disabled', false);
                break;
        }
    });
});
    </script>
@stop