<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Bluhealth</title>

<link href="{{ asset('mental_health/img/favicon.ico') }}" rel="icon">

<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto:wght@500;700&display=swap" rel="stylesheet"> 


<link rel="stylesheet" href="{{ asset('admin/assets/vendors/datatables.net-bs4/dataTables.bootstrap4.css') }}">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">

<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

<!-- Libraries Stylesheet -->
<link href="{{ asset('mental_health/lib/owlcarousel/assets/owl.carousel.min.css') }}" rel="stylesheet">
<link href="{{ asset('mental_health/lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css') }}" rel="stylesheet" />

<!-- Customized Bootstrap Stylesheet -->
<link href="{{ asset('mental_health/css/bootstrap.min.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<!-- SweetAlert2 JS -->

<!-- Template Stylesheet -->
<link href="{{ asset('mental_health/css/style.css') }}" rel="stylesheet">
</head>
<style>
.content {
    background: #ffffff;

}
.h5, .h2 {
    color: #6e7292;
}
.container-fluid h2 {
    color: #6e7292;
}

h4.card-title {
    color: #081616;
}

.mic-container {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 31px;
    height: 31px;
    background-color: #ff4d4d;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .mic-icon {
        font-size: 22px;
        color: white;
    }

    /* Sound Waves Effect */
    .listening::before,
    .listening::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 77, 77, 0.4);
        border-radius: 50%;
        animation: soundWave 1.5s infinite ease-out;
    }

    .listening::after {
        animation-delay: 0.5s;
    }

    @keyframes soundWave {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(2.5);
            opacity: 0;
        }
    }
    </style>
<body> 
<script>
        window.Laravel = {
            success: @json(session('success'))
        }; 
    </script>

@extends('mental.js.master') 
<div class="container-fluid position-relative d-flex p-0">
<div id="spinner" class="show bg-dark position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <x-mental.sidebar />  

        <div class="content">
       <x-mental.header />  
       <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
       <div class="container-fluid pt-4 px-4">   
  @yield('content')
    </div>
</div>

  
       </div>
 
       <x-mental.footer /> 
        

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ asset('mental_health/lib/chart/chart.min.js')}}"></script>
    <script src="{{ asset('mental_health/lib/easing/easing.min.js')}}"></script>
    <script src="{{ asset('mental_health/lib/waypoints/waypoints.min.js')}}"></script>
    <script src="{{ asset('mental_health/lib/owlcarousel/owl.carousel.min.js')}}"></script>
    <script src="{{ asset('mental_health/lib/tempusdominus/js/moment.min.js')}}"></script>
    <script src="{{ asset('mental_health/lib/tempusdominus/js/moment-timezone.min.js')}}"></script>
    <script src="{{ asset('mental_health/lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js')}}"></script>




    <script src="{{ asset('admin/assets/vendors/datatables.net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('admin/assets/vendors/datatables.net-bs4/dataTables.bootstrap4.js') }}"></script>


 <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

    <!-- DataTables Buttons Extension -->
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>

    <!-- Template Javascript -->
    <script src="{{ asset('mental_health/js/main.js')}}"></script>

    
</body> 

</html>
