@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/soportes/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>
                                    <select name="gerencia" id="" class="form-control">
                                        <option >AUDITORIA INTERNA</option>
                                        <option >CONSULTORIA JURIDICA</option>
                                        <option >DESPACHO DE PRESIDENCIA</option>
                                        <option >GERENCIA COMERCIAL</option>
                                        <option >GERENCIA DE ADMINISTRACIÓN Y FINANZAS</option>
                                        <option >GERENCIA DE COMUNICACIÓN CORPORATIVA</option>
                                        <option >GERENCIA DE CONTRATACIONES</option>
                                        <option >GERENCIA DE FUENTES HIDRICAS</option>
                                        <option >GERENCIA DE GESTIÓN COMUNITARIA</option>
                                        <option >GERENCIA DE MANTENIMIENTO DE REDES DE AGUA IRIBARREN</option>
                                        <option >GERENCIA DE MANTENIMIENTO ELECTROMECANICO METROPOLITANA</option>
                                        <option >GERENCIA DE PLANIFICACIÓN ESTRATEGICA</option>
                                        <option >GERENCIA DE PLANIFICACIÓN Y PRESUPUESTO</option>
                                        <option >GERENCIA DE PREVENCIÓN, CONTROL Y PERDIDA</option>
                                        <option >GERENCIA DE SERVICIOS GENERALES</option>
                                        <option >GERENCIA DE TALENTO HUMANO</option>
                                        <option >GERENCIA DE TECNOLOGÍA, INFORMACIÓN Y COMUNICACIÓN</option>
                                        <option >GERENCIA OPERATIVA IRIBARREN</option>
                                        <option >GERENCIA OPERATIVA MUNICIPIOS FORANEOS</option>
                                        <option >GERENCIA OPERATIVA PALAVECINO</option>
                                        <option >GERENCIA TECNICA</option>
                                        <option >GERENTE DE OBRAS</option>
                                        <option >PRESIDENCIA</option>
                                        <option >VICE PRESIDENCIA ADMINISTRATIVA</option>
                                        <option >VICE PRESIDENCIA OPERATIVA</option>
                                       </select>
                                </div>
                                @error('gerencia')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Tipo de Falla</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-exclamation-circle"></i></span>
                                    </div>
                                    <select name="tipofalla" id="tipo" class="form-control">
                                        <option >Seleccione una opcion...</option>
                                        <option value="CCTV">CCTV</option>
                                        <option value="Impresoras">Impresoras</option>
                                        <option value="Otros">Otros</option>
                                        <option value="Radios">Radios</option>
                                        <option value="Recargas">Recargas</option>
                                        <option value="Soporte">Soporte</option>
                                        <option value="Telecomunicaciones">Telecomunicaciones</option>
                                    </select>
                                </div>
                                @error('tipofalla')
                                    <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="">Falla</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-exclamation-triangle"></i></span>
                                    </div>
                                    <select name="falla" id="soporte-descripcion" class="form-control"  style="display: none;" disabled>
                                        <option value="">Seleccione una opción</option>
<option>Apoyo</option>
<option>Configuración impresora compartida</option>
<option>Configuracion a la BIO</option>
<option>Configuracion carpeta compartida</option>
<option>Desinfeccion con Antivirus</option>
<option>Equipo no enciende</option>
<option>Equipo se apaga</option>
<option>Formateo de equipo</option>
<option>Guardia</option>
<option>Instalación de programas</option>
<option>Instalacion de equipo</option>
<option>Mantenimiento Laptop</option>
<option>Mantenimiento de PC</option>
<option>Mantenimiento de mouse</option>
<option>Monitor no enciende</option>
<option>Prestamos/Entrega de Bien</option>
<option>Reparacion de equipo</option>
<option>Regulador/UPS dañado</option>

<option>Videoconferencia</option>
                                    </select>
                                    <select name="falla" id="tele-descripcion" class="form-control"  style="display: none;" disabled>
                                        <option>Adic./Elim./Modif. Equipo en Router</option>
                                        <option>Cambio/Asignación de IP</option>
                                        <option>Chequeo de punto y cable de red</option>
                                        <option>Equipo sin internet</option>
                                        <option>Inspección de equipo telefónico</option>
                                        <option>Inspección de Velocidad</option>
                                        <option>Inst./Revisión de Router</option>
                                        <option>Ponchado de cable</option>
                                        <option>Revisión de BAM</option>
                                    </select>
                                    <select name="falla" id="re-descripcion" class="form-control"  style="display: none;" disabled>
                                        <option>Mantenimiento</option>
<option>Nuevo</option>
<option>Recarga</option>
<option>Sustitución de piezas</option>
                                    </select>
                                    <select name="falla" id="ra-descripcion" class="form-control"  style="display: none;" disabled>
                                        <option>Asignación de portátil</option>
<option>Configuración de radios</option>
<option>Inspección de Radiocomunicaciones</option>
<option>Instalación de antenas</option>
<option>Instalación de radios</option>
<option>Mantenimiento de antenas</option>
<option>Mantenimiento de radios</option>
<option>Revisión/Mtto base cargador</option>
                                    </select>
                                    <select name="falla" id="cc-descripcion" class="form-control"  style="display: none;" disabled>
<option>Instalación de cámaras</option>
<option>Mantenimiento de cámaras</option>
<option>Sustitución de cámara</option>
<option>Sustitución de cableado</option>
<option>Sustitución de chip</option>
<option>Sustitución de componentes</option>
                                    </select>
                                    <select name="falla" id="im-descripcion" class="form-control"  style="display: none;" disabled>
                                        <option>Acompañamiento técnico</option>
                                        <option>Atasco de papel en impresora</option>
                                        <option>Limpieza de componentes</option>
                                        <option>Mantenimiento a impresora</option>
                                        <option>Pieza suelta</option>
                                    </select>
                                    <select name="falla" id="fo-descripcion" class="form-control"  style="display: none;" disabled>
                                        <option>Adic./Elim./Modif. Equipo en Router</option>
                                        <option>Apoyo</option>
                                        <option>Atasco de papel en impresora</option>
                                        <option>Atención remota</option>
                                        <option>Configuración impresora compartida</option>
                                        <option>Configuracion a la BIO</option>
                                        <option>Configuracion carpeta compartida</option>
                                        <option>Desinfeccion con Antivirus</option>
                                        <option>Equipo sin internet</option>
                                        <option>Formateo de equipo</option>
                                        <option>Inspección de Velocidad</option>
                                        <option>Instalacion de equipo</option>
                                        <option>Instalación de programas</option>
                                        <option>Mantenimiento Laptop</option>
                                        <option>Mantenimiento de PC</option>
                                        <option>Mantenimiento de mouse</option>
                                        <option>Ponchado de cable</option>
                                        <option>Prestamos/Entrega de Bien</option>
                                        <option>Reparacion de equipo</option>
                                        <option>Regulador/UPS dañado</option>
                                    </select>
                                    <select name="falla" id="otros-descripcion" class="form-control" style="display: none;" disabled>
                                        <option value="">Seleccione una opción</option>
                                        <option>Reunión</option>
                                         <option>Tramites Administrativos</option>
                                         <option>Tramites de Bienes</option>
                                         <option>Planificación de personal</option>
                                    </select>
                                </div>
                                @error('falla')
                                    <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í.." >
                                </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" id="observaciones-group">
                                <label for="password_confirmation">Observaciones</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-eye"></i></span>
                                    </div>
                                    <input type="text" name="observacion" class="form-control" placeholder="Escriba aquí.." >
                                </div>
                                @error('observacion')
                                    <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-calendar"></i></span>
                                    </div>
                                    <input type="date" name="fecha" class="form-control" 
                                           value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" 
                                           max="{{ Carbon\Carbon::now()->format('Y-m-d') }}"
                                           placeholder="Escriba aquí..">
                                </div>
                                @error('fecha')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <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="" name="departamento" value="{{$usuario->departamento}}" class="form-control" placeholder="Escriba aquí.." >
                                </div>
                                @error('departamento')
                                    <small style="color: red">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="hora">Hora</label>
                                <div class="input-group mb-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                    </div>
                                    <input type="time" name="hora" class="form-control" 
                                           value="{{ old('hora', now()->format('H:i')) }}" required>
                                </div>
                                @error('hora')
                                    <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/soportes') }}" 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 = [
            '#soporte-descripcion', '#tele-descripcion', '#re-descripcion', 
            '#ra-descripcion', '#cc-descripcion', '#im-descripcion', 
            '#fo-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);

        // Mostrar y habilitar el select correspondiente según la selección
        switch (selectedValue) {
            case 'Soporte':
                $('#soporte-descripcion').show().prop('disabled', false);
                break;
            case 'Telecomunicaciones':
                $('#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 'Otros':
                $('#otros-descripcion').show().prop('disabled', false);
                break;
        }
    });
});
</script>
@stop