@extends('layouts.base')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/daterangepicker.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/slick.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/slick-theme.css') }}">
@endsection

@section('content')
    <div class="clearfix pt-30 pt-sm-40 pb-10 pb-sm-30">
        <div class="container">
            <div class="section-title text-center mb-12 aos-init aos-animate" data-aos="fade-up">
                <h2 class="title">Asistan Mesajlaşma Sistemi</h2>
                <hr>
            </div>
            <div class="row mb-10">
                @include('profile.assistant.widget.top')
            </div>
        </div>
        <div class="container-fluid">
            <div class="tile tile-alt" id="messages-main">
                @include('profile.assistant.left')

                @include('profile.assistant.body')

                @include('profile.assistant.right')
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/slick.js') }}"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
@endsection

@section('script')
    <script>
        $('[data-type="canned-answer"]').on('click', function(){
            $('[name="chat[answer]"]').val($(this).data('content'));
        });

        $(function(){
            if ($('#ms-menu-trigger')[0]) {
                $('body').on('click', '#ms-menu-trigger', function() {
                    $('.ms-menu').toggleClass('toggled');
                });
            }
        });

        $(function(){
            if ($('#ms-right-menu-trigger')[0]) {
                $('body').on('click', '#ms-right-menu-trigger', function() {
                    $('.ms-right-menu').toggleClass('toggled');
                });
            }
        });

        $(document).on('ready', function() {
            $(".variable").slick({
                dots: false,
                infinite: false,
                variableWidth: true
            });
        });

        document.querySelectorAll("#picture_popup .modal-footer button").forEach(el => {
            $(el).on('click', function(){
                document.getElementById("ms-right-menu").classList.add("show");
            });
        });
        $("#picture_popup .modal-header button").on("click", event => {
            document.getElementById("ms-right-menu").classList.remove("show");
        });

        document.querySelectorAll(".closingTab").forEach(el => {
            $(el).on('click', function(){
                [...document.getElementsByClassName("active")].map(n => n && n.remove());
                [...document.getElementsByClassName("nav-link")].map((n, index) => {
                    if (index == 0) {
                        return n.classList.add("active");
                    }
                });
                [...document.getElementsByClassName("tab-pane fade")].map((n, index) => {
                    if (index == 0) {
                        n.classList.add("show")
                        n.classList.add("active");
                    }
                });
                $('#areYouSure').modal('hide'); //Hide Warning Modal
            });
        });
    </script>
@endsection