@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Registrar nuevo perfil</h4>
                            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                                <ol class="breadcrumb">
                                    <a href="{{ url('perfiles') }}" class="btn btn-rounded btn-dark back-fixed"
                                        aria-label="Regresar">
                                        <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                                        Regresar
                                    </a>
                                </ol>
                            </div>
                            <div class="row align-items-end">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- se creo el perfil exitosamente -->
                @if (session('success'))
                    <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                        <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                            stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="9 11 12 14 22 4"></polyline>
                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                        </svg>
                        <strong id="alert-confirmacion"> {{ session('success') }}</strong>
                    </div>
                @endif
                <div class="col-xl-12 col-xxl-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Datos del Perfil</h5>
                        </div>

                        <form action="{{ route('perfilStore') }}" method="post" id="addPerfilForm">
                            @csrf
                            <div class="card-body">
                                <div class="row">
                                    <!-- nombre del perfil -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="nombre">Nombre del Perfil</label>
                                            <input type="text" class="form-control" id="nombre" name="nombre" required>
                                        </div>
                                    </div>
                                    <!-- descripcion del perfil -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="descripcion">Descripción del Perfil</label>
                                            <input type="text" class="form-control" id="descripcion" name="descripcion" required>
                                        </div>
                                    </div>
                                    <!-- boton para guardar -->
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>&nbsp;</label>
                                            <button type="submit" class="btn btn-primary w-100">Guardar Perfil</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <!-- clase card -->
                                        <div class="card">
                                            <div class="card-header">
                                                <h5 class="card-title   ">Permisos del Perfil</h5>
                                            </div>
                                            <div class="card-body">


                                                @php $contador = 1; @endphp
                                                @foreach($modulos as $nombreModulo => $acciones)
                                                    <div class="mb-3">
                                                        <strong>{{ $contador++ }}. {{ $nombreModulo }}</strong>
                                                        <ul class="list-unstyled ms-3">
                                                            @foreach($acciones as $accion)
                                                                <li>
                                                                    <label>
                                                                        <input type="checkbox" name="permisos[]" value="{{ $accion->modu_accion }}"> {{ $accion->modu_descripcion }}
                                                                    </label>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                @endforeach


                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <style>
        .btn-floating-save {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            display: none;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            padding: 12px 24px;
            font-size: 16px;
        }
        .btn-floating-save:hover {
            box-shadow: 0 6px 12px rgba(0,0,0,0.4);
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }
    </style>
    <script>
        function convertToUpperCase(selector) {
            document.querySelectorAll(selector).forEach(input => {
                input.addEventListener('input', function(event) {
                    const cursorPos = this.selectionStart; // Guarda la posición del cursor
                    this.value = this.value.toUpperCase(); // Convierte el texto a mayúsculas
                    this.setSelectionRange(cursorPos, cursorPos); // Restaura la posición del cursor
                });
            });
        }

        $(document).ready(function() {
            convertToUpperCase('#nombre, #descripcion');
            
            // Crear botón flotante
            var floatingBtn = $('<button type="button" class="btn btn-primary btn-floating-save"><i class="fa fa-save me-2"></i>Guardar Perfil</button>');
            $('body').append(floatingBtn);
            
            // Mostrar/ocultar botón flotante según el scroll
            $(window).scroll(function() {
                var submitBtn = $('#addPerfilForm button[type="submit"]');
                if (submitBtn.length) {
                    var btnOffset = submitBtn.offset().top;
                    var scrollTop = $(window).scrollTop();
                    var windowHeight = $(window).height();
                    
                    // Mostrar botón flotante si el botón original no está visible
                    if (scrollTop + windowHeight < btnOffset || scrollTop > btnOffset + submitBtn.outerHeight()) {
                        floatingBtn.fadeIn();
                    } else {
                        floatingBtn.fadeOut();
                    }
                }
            });
            
            // Al hacer clic en el botón flotante, enviar el formulario
            floatingBtn.on('click', function() {
                $('#addPerfilForm').submit();
            });
        });
    </script>
@endpush