<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="{{ asset('favicons/favicon.ico') }}" />
    <!--********************************************-->
    <!--** CSRF TOKEN                             **-->
    <!--********************************************-->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!--********************************************-->
    <!--** TITULO DE PESTAÑA                     **-->
    <!--*******************************************-->
    <title>
        @yield('titulo')
    </title>

    <!--********************************************-->
    <!--** ESTILOS  CSS                           **-->
    <!--********************************************-->
    <link href="{{ asset('fontawesome/css/all.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('css/css.css') }}" rel="stylesheet" type="text/css">
    <!--********************************************-->
    <!--** JAVASCRIPT                             **-->
    <!--********************************************-->
    {{--     <script src="{{ asset('js/exrg.js') }}" defer></script> --}}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>



    <script src="{{ asset('js/popper.js') }}" defer></script>
    <script src="{{ asset('js/alpinejs.js') }}" defer></script>
    <script src="{{ asset('js/sweetalert2.js') }}" defer></script>
    <script src="{{ asset('fontawesome/js/all.js') }}" defer></script>
    <!--********************************************-->
    <!--** FONTS                                  **-->
    <!--********************************************-->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">


    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            width: 100%;
            flex-wrap: wrap;
        }

        footer {
            background-color: #1e3973;
            color: white;
            align-self: flex-end;
        }

        .azul-intenzo {
            color: #1e3973;
        }

        .text-azul-intenzo {
            color: #1e3973;
        }

        .bg-azul-intenzo {
            background: #1e3973;
        }

        .btn-azul-intenzo {
            background: #1e3973;
            opacity: 0.9;
        }

        .btn-azul-intenzo:hover {
            opacity: 1;
        }

        .verde-neon {
            color: #44f814;
        }

        .text-verde-neon {
            color: #44f814;
        }

        .text-gris-neon {
            color: #cfcfcf;
        }
    </style>
    @livewireStyles
</head>

<body class="container-fluid-md"  >
    <div id="app" class="w-100">
        <div align="center">
            <!--*******************************************-->
            <!--** IMG LOGO PARA MOVIL                    **-->
            <!--********************************************-->
            <div class="d-block  d-md-none">
                <a class="azul-intenzo  text-decoration-none  " href="{{ url('/') }}">
                    <img src="{{ asset('img/logo/sociproma.jpg') }}" class="img-fluid" class="img-fluid"
                        style="width:8rem; height:3rem;">
                </a>
            </div>
        </div>
        <!--********************************************-->
        <!--** TITULO LOGON y BIENVENIDAD  SM         **-->
        <!--********************************************-->
        <div class="bg-primary py-0 px-3 shadow d-block  d-lg-none">
            <div class="row">
                <div class="col-md-6 text-white">
                    <h5>@yield('titulo')</h5>
                </div>
                <div class="col-md-6">
                    <div class="d-flex">
                        <div>
                            <div>
                                <div>
                                    <small class="text-white  p-0">
                                        <small>Bienvenido: {{ Auth::user()->name }}</small>
                                    </small>
                                    <a class="btn btn-primary btn-sm mt-0 mb-1 p-0" href="{{ route('logout') }}"
                                        onclick="event.preventDefault();
                                        document.getElementById('logout-form').submit();">
                                        <small class="text-white"> &nbsp;{{ __('Logout') }}&nbsp;</small>
                                    </a>
                                </div>
                            </div>
                            <span>
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <nav class="navbar navbar-expand-lg navbar alert-primary p-0 ">
            <!--********************************************-->
            <!--** IMG LOGO                               **-->
            <!--********************************************-->
            <div class="d-none  d-lg-block">
                <a class="azul-intenzo  text-decoration-none  " href="{{ url('/') }}">
                    <img src="{{ asset('img/logo/sociproma.jpg') }}" class="img-fluid" class="img-fluid"
                        style="width:10rem; height:4rem;">
                </a>
            </div>
            <div class="container-fluid">
                <!--********************************************-->
                <!--** BTN MENU SM                             **-->
                <!--********************************************-->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="text-azul-intenzo navbar-toggler-icon "><i class="fa-solid fa-bars"></i></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
                    <!--********************************************-->
                    <!--** LINK                                   **-->
                    <!--********************************************-->
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a href="{{ route('/') }}"
                                class="btn btn-link text-decoration-none "><strong><small>Inicio</small></strong></a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('listado-registros') }}"
                                class="btn btn-link text-decoration-none "><strong><small>Lista de
                                        Registros</small></strong></a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('nuevo-registro') }}"
                                class="btn btn-link text-decoration-none "><strong><small>Nuevo
                                        Registro</small></strong></a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('panel-cirujano') }}"
                                class="btn btn-link text-decoration-none "><strong><small>Cirujanos</small></strong></a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('panel-anestesiologo') }}"
                                class="btn btn-link text-decoration-none "><strong><small>Anestesiologos</small></strong></a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('panel-clinica') }}"
                                class="btn btn-link text-decoration-none "><strong><small>Clinicas</small></strong></a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('panel-intervencion') }}"
                                class="btn btn-link text-decoration-none "><strong><small>Intervenciones</small></strong></a>
                        </li>
                        <li class="nav-item  d-block  d-lg-none">
                            <a href="{{ route('buscador-index') }}"
                                class="btn btn-link text-decoration-none  "><strong><small>Buscar&nbsp;<i
                                            class="fa-solid fa-magnifying-glass"></i></small></strong></a>
                        </li>
                        <li class="nav-item d-block  d-lg-none">
                            <a href="{{ route('exportar-index') }}"
                                class="btn btn-link text-decoration-none "><strong><small>Exportar&nbsp;<i
                                            class="fa-solid fa-file-excel"></i></small></strong></a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <div class="d-flex flex-row">
                            <div class="p-1 d-none  d-lg-block">
                                <x-btn.link-img-v2 ruta="buscador-index" img="img/smv2/buscador.png">
                                    Buscar</x-btn.link-img-v2>
                            </div>
                            <div class="p-1 d-none  d-lg-block">
                                <x-btn.link-img-v2 ruta="exportar-index"
                                    img="img/smv2/xls.png">Exportar</x-btn.link-img-v2>
                            </div>
                            <!--********************************************-->
                            <!--** TASAS                                  **-->
                            <!--********************************************-->
                            <div class="d-flex justify-content-end m-1">
                                @livewire('layout.paneltasa')
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <!--********************************************-->
        <!--** TITULO LOGON y BIENVENIDAD  LG         **-->
        <!--********************************************-->
        <div class="bg-primary py-0 px-3 shadow d-none d-lg-block ">
            <div class="row">
                <div class="col-md-6 text-white">
                    @yield('titulo')
                </div>
                <div class="col-md-6">
                    <div class="d-flex justify-content-end">
                        <div>
                            <div class="d-grid gap-2 te d-flex justify-content-end">
                                <div>
                                    <div>
                                        <small class="text-white  p-0">
                                            <small>Bienvenido: {{ Auth::user()->name }}</small>
                                        </small>
                                    </div>
                                </div>
                                <a class="btn btn-primary btn-sm mt-0 mb-1 p-0" href="{{ route('logout') }}"
                                    onclick="event.preventDefault();
                                        document.getElementById('logout-form').submit();">
                                    <small class="text-white"> &nbsp;{{ __('Logout') }}&nbsp;</small>
                                </a>
                            </div>
                            <div>
                                <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                    class="d-none">
                                    @csrf
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--********************************************-->
        <!--** SLOT CONTENT                           **-->
        <!--********************************************-->
        <main class="container-fluid-sm p-sm-2">
            {{ $slot }}
        </main>
    </div>
    <!--********************************************-->
    <!--** FOOTER                                 **-->
    <!--********************************************-->
    <footer class="shadow w-100" align=center>
        <small>Sociproma</small>
        <br>
        <small>Sistema medico v2</small>
        <br>
        <small>Developer: Jounnerth Torres 2021/2024</small>
    </footer>
    <!--********************************************-->
    <!--** MODAL CARGA                            **-->
    <!--********************************************-->
    <div class="modal" tabindex="-1" id="modalcarga">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="m-5 p-5">
                        <div align="center">
                            <img src="{{ asset('gif/loading.gif') }}" class="img-fluid" class="img-fluid">
                            <h4 class="text-primary">Cargando</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
@livewireScripts
{{-- <script src="{{ asset('js/sweetalert2.js') }}" defer></script> --}}
<script>
    /***********************/
    /*  MODAL CARGA  JS    */
    /***********************/
    var modalCarga = new bootstrap.Modal(document.getElementById('modalcarga'), {
        keyboard: false
    })
    /***********************/
    /*  CARGANDO           */
    /***********************/
    window.addEventListener("DOMContentLoaded", () => {
        // alert("cargando");
        modalCarga.show()
    });
    /***********************/
    /*  FINAL DE LA CARGA  */
    /***********************/
    window.onload = function() {
        //alert("ya cargo esta verga");
        setTimeout(function() {
            modalCarga.hide()
        }, 500);
    };
    livewire.on('ev_msj_guardado', function(_mensaje) {
        Swal.fire({
            position: 'center',
            icon: 'success',
            html: '<small>' + _mensaje + '</small>',
            showConfirmButton: false,
            timer: 5000,
            padding: '0px',
            width: '400px',
        })
    });
    livewire.on('ev_msj_error', function(_mensaje) {
        Swal.fire({
            position: 'center',
            icon: 'error',
            html: '<small>' + _mensaje + '</small>',
            showConfirmButton: false,
            timer: 5000,
            padding: '0px',
            width: '400px',
        })
    });
    livewire.on('ev_msj_info', function(_mensaje) {
        Swal.fire({
            position: 'center',
            icon: 'info',
            html: '<small>' + _mensaje + '</small>',
            showConfirmButton: false,
            timer: 5000,
            padding: '0px',
            width: '400px',
        })
    });
    livewire.on('ev_modal_test', function() {
        location.reload();
    });
    //cerrar modal
    livewire.on('ev_cerrar_modal', function(parametro) {
        //alert('test bandera ' + parametro);
        // $('#' + parametro).modal('hide');
        // $('#' + parametro).hide()
        var myModalEl = document.getElementById(parametro);
        var modal = bootstrap.Modal.getInstance(myModalEl)
        modal.hide();
    });
</script>

@yield('script')

</html>
