@extends('adminlte::page')

@section('title', 'INICIO')

@section('content_header')

<style>
    .error {
    color: red;
    font-size: 0.875em;
}
</style>

@stop

@section('content')

    <!-- <div id="framePBI">
        <iframe 
            title="dashboard cementerio local" 
            width="100%" 
            height="800px" 
            src="https://app.powerbi.com/view?r=eyJrIjoiMTA2YTc0OGMtNTE3YS00OTUwLTg3MTMtZTYzYjJmYTI1NDMwIiwidCI6IjE5MjdiNTkzLTJjOWItNGY3Zi05OTM3LWIyMjUzOWZkZTU3MiIsImMiOjR9" 
            frameborder="0" 
            allowFullScreen="true">
        </iframe>
    </div> -->
    {{-- @livewire('usuarios') --}}

    <!-- <button class="btn btn-success m-2 px-5 mt-3" style="font-size: 1.5rem; margin-left: 40%" id="btnVista" onclick="toggleDisplay()">VISTA DE NICHOS</button> -->
    
    <!-- SELECT PABELLON -->
    <div id="hiddenDiv"> <!-- style="display: none;" -->
        @livewire('pabellon.pabellones')

        <div class="col-md-12" style="text-align:center " >
            <div class="row">
                <div class="col-md-2">
                </div>
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-2">
                            <h4>
                                <span style="color: green">■</span> DISPONIBLE
                            </h4>
                        </div>
                        <div class="col-md-2">
                            <h4>
                                <span style="color: yellow">■</span> PENDIENTE
                            </h4>
                        </div>
                    <!-- </div>
                </div>
                <div class="col-md-4">
                    <div class="row"> -->
                        <div class="col-md-2">
                            <h4>
                                <span style="color: red">■</span> COMPRADO
                            </h4>
                        </div>
                        <div class="col-md-2">
                            <h4>
                                <span style="color: black">■</span> SEPULTADO
                            </h4>
                        </div>
                    <!-- </div>
                </div>
                <div class="col-md-4">
                    <div class="row"> -->
                        <div class="col-md-2">
                            <h4>
                                <span style="color: blue">■</span> TRASLADADOS
                            </h4>
                        </div>
                        <!-- <div class="col-md-12">
                            <h4>
                                <span style="color: blue">■</span> TRASLADADO EXTERNO
                            </h4>
                        </div> -->
                    </div>
                    <div class="col-md-1">
                    </div>
                </div>
            </div>
        </div>
    </div>


@stop

@section('footer')
    <div class="float-right">
        Version: {{ config('app.version', '2.0.0') }}
    </div>

    <strong>
        <a href="{{ config('app.company_url', '#') }}">
            {{ config('app.company_name', '©OGD - 2024') }}
        </a>
    </strong>
@stop

@section('css')

@stop
@section('js')

<script>
    window.addEventListener('file-reset', event => {
        document.getElementById('actaDefuncion').value = null;
    });

</script>

    <script>
        document.addEventListener('livewire:load', function () {
            Livewire.on('disponible', function (data) {
                // Llamada a la función del otro componente Livewire
                Livewire.emit('Tumbas:infoTumba0', data);
            });
        });

        Livewire.on('errormsg', function(message) {
        Swal.fire({
            position: 'center',
            icon: 'error',
            title: 'Error al registrar campos incompletos',
            })
        });

        Livewire.on('alert', function(message) {
        Swal.fire({
            position: 'center',
            icon: 'success',
            title: 'Registro guardado con éxito',
            })

            $('#Tumba3').modal('hide');
        });

        Livewire.on('traslado', function(message) {
        Swal.fire({
            position: 'center',
            icon: 'success',
            title: 'Traslado con éxito',
            })
            
            $('#Tumba3').modal('hide');

        });

        
        /* document.addEventListener('livewire:load', function () {
            Livewire.on('closeModal', () => {
                $('#Tumba3').modal('hide');
            });
        }); */
    </script>

<script>
    function toggleDisplay() {
        var element = document.getElementById("hiddenDiv");
        var element2 = document.getElementById("framePBI");
        var btnVista = document.getElementById("btnVista");
        if (element.style.display === "none") {
            element.style.display = "block";
            element2.style.display = "none";
            btnVista.innerText = "VOLVER A POWER BI";
        } else {
            element.style.display = "none";
            element2.style.display = "block";
            btnVista.innerText = "VISTA DE NICHO";
        }
    }
</script>
@stop