@extends('layouts.app')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css" />
@section('content')
    <form id="miFormulario" action="{{ route('fertilidad.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        {{-- Importar componente --}}
        @include('fertilidad.components.botones-menu')
        {{-- Fin de la importación --}}
        @if (session()->has('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert" id="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="closeAlert()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <script>
            // Función para cerrar la alerta
            function closeAlert() {
                const alert = document.getElementById('alert');
                if (alert) {
                    alert.classList.remove('show');
                    setTimeout(() => {
                        alert.remove(); // Elimina el elemento del DOM
                    }, 150); // Esperar un momento para la animación de desvanecimiento
                }
            }
        
            // Cerrar la alerta automáticamente después de 2 segundos
            setTimeout(() => {
                closeAlert();
            }, 2000);
        </script>
        @endif

        <div class="container-fluid">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="nk-block">
                        <div class="row g-gs">
                            <div class="col-xxl-12 col-sm-12">
                                <div class="card border shadow-sm rounded-5 p-2">
                                    <div class="nk-ecwg nk-ecwg6">
                                        <div class="card-inner">
                                            <div class="card-title-group">
                                                <div class="card-title">
                                                    <h6 class="titulo"><em class="icon ni ni-user-alt"></em><span>INFORME
                                                            FERTILIDAD</span></h6>
                                                </div>
                                            </div>
                                            <div class="container-fluid">
                                                <div class="">
                                                    @include('fertilidad.components.contenido')
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

@section('css')
    <link rel="stylesheet" href="{{ asset('css/fertilidad.css') }}">
@endsection
@section('js1')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    <script src="https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6.3.4/dist/tippy-bundle.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
    <script src="{{ asset('js/modulos/historialEstados.js') }}"></script>
    <script src="{{ asset('js/modulos/fertilidad.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.10.5/autoNumeric.min.js"></script>
@endsection
@endsection