<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet"a
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>

    <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=Lato:wght@400;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{!! asset('assets/css/style.css') !!}"/>

    <style>
        .hide {
            display: none !important;
        }
    </style>

    <script >
        var r = document.querySelector(':root');
        r.style.setProperty('--first-color', '{{ $couleur }}');
        r.style.setProperty('--second-color', '{{ $couleur3 }}');
        r.style.setProperty('--header-color', '{{ $couleur2 }}');
    </script>
    <script type="text/javascript">
        (function(d, m){
            var kommunicateSettings = {
                "appId":"7e31307d24d1eef9ac9bc33e1025485b",
                "askUserDetails": ["name", "email", "phone"],
                "onInit": function (){
                    setTimeout(function() { Kommunicate.logout();}, 7200000 )
                },
                "labels": {
                    'closed.conversation.message': 'Conversation marquée résolue',
                    'start.new': 'Nouvelle conversation',
                    'online': 'En ligne',
                    'offline': 'Hors ligne',
                    'lead.collection': {
                        'email':'Email',
                        'name':'Entrer votre nom ici',
                        'phone':'Entrer votre contact ',
                        'heading':'Avant de commencer, nous avons juste besoin de quelques détails pour que nous puissions mieux vous servir',
                        'submit':'Lancer une conversation',
                    },
                    'filter.conversation.list': {
                        'ALL_CONVERSATIONS': 'All conversations',
                        'ACTIVE_CONVERSATIONS': ' ',
                        'HIDE_RESOLVED': ' Cacher les conversations résolues ',
                        'SHOW_RESOLVED': ' Montrer les conversations résolues '
                    },
                    'csat.rating': {
                        'CONVERSATION_RATED': ' Vous avez noté cette discussion',
                        'RATE_CONVERSATION': ' Notez cette discussion',
                        'RESTART_CONVERSATION': ' ',
                        'OTHER_QUERIES': ' Délai de réponse épuisé. La conversation a été marquée résolue',
                        'SUBMIT_RATING' : 'Soumettre'
                    }
                }
            };
            /----------------- Kommunicate settings end ------------------/
            var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
            s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
            var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
            window.kommunicate = m; m._globals = kommunicateSettings;
        })(document, window.kommunicate || {});
        /* NOTE : Use web server to view HTML files as real-time update will not work if you directly open the HTML file in the browser. */
    </script>

    <title> @yield('title') </title>
</head>

<body>

    <!-- Start: Header Section
    ==================================================-->
    @include('partials.headerst')
    <!-- End: header navigation
    ==================================================-->

    <main>
        <!-- Start: Header Section
        ==================================================-->
        @include('partials.sidebarst')
        <!-- End: header navigation
        ==================================================-->

        @yield('content')
    </main>

    <footer>
    </footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
    </script>
    <script src="{!! asset('assets/js/script.js') !!}"></script>
    <script>
        $(function(){
            $('#search').bind('focus change input', function(){
                // $('#myContent .app-card').parent().css('display','block').css('visibility','visible')
                $('#myContent .col-lg-4').removeClass('hide');
                var current_input = $('#search').val().toLocaleLowerCase();
                $('#myContent .app-card').each(function(){
                    var text =  $(this).text().toLocaleLowerCase();
                    if (  text.indexOf(current_input) === -1 ){
                        $(this).parent().addClass('hide');
                    }
                })
            })
        });

        window.setTimeout(function() {
            $(".alert").fadeTo(500, 0).slideUp(500, function(){
                $(this).remove();
            });
        }, 4000);
    </script>
</body>
</html>
