@push('styles')
<style> 
    .card-header{ 
        padding: 0 !important;
    }

    .check-list{ 
        margin-left: 10px !important;
    }


    .border-right{ 
        border-right: 2px solid #ccc;
    }

    input{ 
        margin-top: 15px !important;
        margin-left: 10px !important;
        margin-bottom: 25px !important;
        margin-right: 10px !important;
    }

    .label-totales{ 
        margin-top: 35px !important;
    }

    h1{ 
        padding-top: 20px !important;
    }

    select{ 
        margin-left: 10px !important;
    }
   
   .child-check{ 
    text-align: start;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 5px;
    }

   label{ 
    text-transform: capitalize;
    color: #a1a1a1;
   }

   .label-div { 
    margin-top: 10px;
    padding-left: 0px !important;
    padding-right: 0 !important;
   }

   .check-div{ 
    padding-right: 0px !important;
    text-align: end;

   }

   .child-inner{ 
    text-align: start !important;
    margin-top: 10px;
   }

    .choices {
    position: relative;
    overflow: hidden;
    margin-bottom: 35;
    margin-top: 15px;
    font-size: 16px;
    }

    p{ 
        font-weight: 500;
        color: #a1a1a1;
        font-size: 0.8rem;
    }

    .nombre-perfil{ 
        padding-top: 50px;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .separador{ 
        margin-top: 20px;
        margin-bottom: 20px;
        width: 20px; /* Ancho del espacio */
        height: 20px; /* Altura del espacio */
    }

    .card-list {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-title-spacer-y: .5rem;
    --bs-card-title-color: var(--bs-heading-color);
    --bs-card-subtitle-color: ;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 1.1rem;
    --bs-card-cap-padding-x: 1.5rem;
    --bs-card-cap-bg: var(--bs-secondary-bg);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-secondary-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    margin: 20px;
    }

    h5 {
        font-size: 1.16rem !important;
        color: #ff5659 !important;
        padding: 0;
        margin-left: 10px;
        text-align: start;
    }

    .btn-color{ 
        background-color: #1fa8e0; 
        color: white;
    }

    .hidden{ 
        display: none;
    }

    .show{ 
        display: flex !important;
    }

    input:focus-visible {
        outline: none;
        border: 1px solid #e3c9a8 !important;
    }

    .square-switch{
        accent-color: #e3c9a8;
    }
</style>
@endpush

@section('title')
    Crear Perfil
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/choices.js/public/assets/styles/choices.min.css') }}" rel="stylesheet" type="text/css" />

@endsection
@section('page-title')
    Crear Perfil
@endsection



<div>
@can('crear perfiles')
        @if(session()->has('success'))
            <div class="alert alert-success" style="margin-top: 15px;">
                {{ session()->get('success') }}
            </div>
        @endif

    <h1 class="texto-cafe"> Crear Perfil </h1>

    <form wire:submit="crearPerfil">


        <input type="hidden" wire:model="autor"></input>

        <div class="row justify-content-center" >
            <div class="col-xl-10 col-md-10 col-sm-10 nombre-perfil ">
                <h5>Nombre del Perfil</h5>
                <input class="form-control"  type="text" wire:model="nombre" placeholder="Escribe el nombre que quieras asignarle al perfil" style="font-size: 12px;">
                @error('nombre') <span style="text-align: end;" class="text-danger mt-2">{{ $message }}</span> @enderror
            </div>
        </div>
     
        <div class="row justify-content-center check-list">

            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 check-list card-list">
                <div class="card-header">
                    <div class="row">
                            <div class="col-2 check-div">
                            <input class="square-switch" type="checkbox" wire:click="filtrosMulti()" >
                        </div>
                        <div class="col-10 label-div">
                            <h5> Dashboard </h5>
                        </div>
                    </div>
                </div>

                <div class="child-check row"> 
                    @foreach ($filtros as $filtro)
                    <div class="col-3 check-div" >
                        <input class="square-switch" type="checkbox" wire:model="filtros_act" value="{{ $filtro->name}}">
                    </div>
                    <div class="col-9 label-div" >
                        <label >
                            {{ $filtro->name }}
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 check-list card-list">
                <div class="card-header">
                    <div class="row">
                            <div class="col-2 check-div">
                            <input class="square-switch" type="checkbox" wire:click="perfilesMulti()" ></div>
                        <div class="col-10 label-div">
                            <h5>   Perfiles </h5>
                        </div>
                    </div>
                </div>

                <div class="child-check row"> 
                @foreach ($perfiles as $perfile)
                <div class="col-3 check-div" >
                <input class="square-switch" type="checkbox" wire:model="perfiles_act" value="{{ $perfile->name}}">
                </div>
                    <div class="col-9 label-div" >
                        <label >
                        {{ $perfile->name }}
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>




            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 check-list card-list">
                <div class="card-header">
                    <div class="row">
                            <div class="col-2 check-div">
                            <input class="square-switch" type="checkbox" wire:click="usuariosMulti()" >
                            </div>
                        <div class="col-10 label-div">
                            <h5> Usuarios </h5>
                        </div>
                    </div>
                </div>

                <div class="child-check row"> 
                @foreach ($usuarios as $usuario)
                <div class="col-3 check-div" >
                        <input class="square-switch" type="checkbox" wire:model="usuarios_act" value="{{ $usuario->name}}">
                    </div>
                    <div class="col-9 label-div" >
                        <label >
                        {{ $usuario->name }}
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="col-sm-3 col-xl-3 check-list card-list">
                <div class="card-header">
                    <div class="row">
                            <div class="col-2 check-div">
                            <input class="square-switch" type="checkbox" wire:click="clientesMulti()" >
                             </div>
                        <div class="col-10 label-div">
                        <h5> Clientes </h5>
                        </div>
                    </div>
                </div>

                <div class="child-check row"> 
                @foreach ($clientes as $cliente)
                <div class="col-3 check-div" >
                <input class="square-switch" type="checkbox" wire:model="clientes_act" value="{{ $cliente->name}}" >
                </div>
                    <div class="col-9 label-div" >
                        <label >
                        {{ $cliente->name }}
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>



            <div class="col-sm-3 col-xl-3 check-list card-list">
                <div class="card-header">
                    <div class="row">
                            <div class="col-2 check-div">
                            <input class="square-switch" type="checkbox" wire:click="masivasMulti()" >
                             </div>
                        <div class="col-10 label-div">
                        <h5> Carga de archivos </h5>
                        </div>
                    </div>
                </div>

                <div class="child-check row"> 
                @foreach ($masivas as $masiva)
                <div class="col-3 check-div" >
                <input class="square-switch" type="checkbox" wire:model="masivas_act" value="{{ $masiva->name}}" >
                </div>
                    <div class="col-9 label-div" >
                        <label >
                        {{ $masiva->name }}
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>
    
        </div>

         <div class="d-flex flex-wrap justify-content-end gap-2" style="margin-top: 40px; margin-right: 35px;">
            <button style="min-width: fit-content;" wire:click="cancelar()" type="button" class="btn btn-danger waves-effect waves-light"> 
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24" class="eva eva-close-outline icon nav-icon"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path></g></g></svg>    
            Cancelar </button>
            <button style="min-width: fit-content;" type="submit" class="btn button text-white waves-effect waves-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24" class="eva eva-plus-outline icon nav-icon"><g data-name="Layer 2"><g data-name="plus"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect><path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"></path></g></g></svg>

            Crear Perfil </button>
        </div>

    </form>

    @endcan
</div>


@section('scripts')

        <script src="{{ URL::asset('build/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>
        <!-- init js -->
        <script src="{{ URL::asset('build/js/pages/form-advanced.init.js') }}"></script>
        <!-- App js -->
        <script src="{{ URL::asset('build/js/app.js') }}"></script>

        </script>

        <script>
            function logout() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route('logout') }}';
        form.style.display = 'none';

        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;

        form.appendChild(csrfInput);

        document.body.appendChild(form);

        form.submit();
    }
        </script>


        <script>
            const body = document.body;

            document.addEventListener('readystatechange', function () {
                document.addEventListener('set-tema', function (data) {
                    body.setAttribute('data-bs-theme', data.detail.tema);
                    console.log(body);
                    });

            });


            document.addEventListener('cambiar-tema', function (data) {
                    console.log(data.detail);
                    body.setAttribute('data-bs-theme', data.detail.tema);
                    console.log( body);
                });
            
            document.addEventListener('cambiar-tamaño', function (data) {
                if (body.getAttribute('data-sidebar-size') =='sm') {
                    body.setAttribute('data-sidebar-size', '');
                    localStorage.setItem('size', '');

                } else {
                body.setAttribute('data-sidebar-size', 'sm');
                // localStorage.setItem('size', 'sm');

                }

            });
    

        </script>

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

<script>
        var primerMenu = 0;

    Livewire.on('mostrar-barra', function(){
        const barra = $('.vertical-menu');
        console.log(barra);
        if (primerMenu == 0) {
             barra.removeClass('hidden');
             barra.addClass('show');
            primerMenu++;

        }else{
            if (barra.hasClass('hidden')) {
                barra.removeClass('hidden');
                barra.addClass('show');
            } else {
                barra.addClass('hidden');
                barra.removeClass('show');
            }
        }
    });
</script>
 @endsection