<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des plaintes</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="{{ asset('favicon.svg') }}" type="image/x-icon">
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/iconly/bold.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/perfect-scrollbar/perfect-scrollbar.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/bootstrap-icons-1.13.1/bootstrap-icons.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/iconly/bold.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
    
    <style>
        .sidebar-header{
            /* padding-top: 1rem; */
            /* height: 5.4rem; */
        }
        .sidebar-wrapper .sidebar-header{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sidebar-wrapper .sidebar-header img{
            height: 4.4rem!important;
            width: 100%!important;
            object-fit: contain;
        }
    </style>
    @stack('styles')
</head>

<body>
    <div id="app">
        @include('partials.sidebar')
        <div id="main"  class='layout-navbar'>
            @include('partials.header')
            <div id="main-content">
                @yield('heading')
                <div class="page-content">
                    @include('partials.alert')
                    @yield('content')
                </div>
                @include('partials.footer')
            </div>
        </div>

    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/apexcharts/apexcharts.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
    {{-- <script src="{{ asset('assets/js/pages/dashboard.js') }}"></script> --}}
    <script>
        $(document).ready(function() {
            
            document.getElementById('logout').addEventListener('click', function(event) {
                event.preventDefault();
                document.getElementById('logout-form').submit();
                alert('Déconnexion réussie!');
            });
        });
    </script>
    <script>
        const alerte = document.querySelector('.alert')
        if (alert) {
            setTimeout(() => alerte.remove(), 5000);
        }
    </script>
    @stack('scripts')
</body>

</html>