@extends('layouts.app')

@section('title', 'Kegiatan')

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet"
          href="{{ asset('library/summernote/dist/summernote-bs4.css') }}">
    <link rel="stylesheet"
          href="{{ asset('library/codemirror/lib/codemirror.css') }}">
    <link rel="stylesheet"
          href="{{ asset('library/codemirror/theme/duotone-dark.css') }}">
    <link rel="stylesheet"
          href="{{ asset('library/selectric/public/selectric.css') }}">
    <link rel="stylesheet"
          href="{{ asset('library/prismjs/themes/prism.min.css') }}">
    <style>
        .floating-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            font-size: 24px;
            cursor: pointer;
            z-index: 1000;
        }

        .mini-chat {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 300px;
            height: 400px;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 1000;
        }

        .mini-chat #mini-messages {
            height: 80%;
            overflow-y: auto;
            padding: 10px;
        }

        .mini-chat input, .mini-chat button {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
@endpush

@section('main')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Selamat datang di aplikasi Buanandari</h1>
            </div>

            <div class="section-body">
                <h2 class="section-title">Summary data anda</h2>
                <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>data 1</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="myChart4"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>data 2</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="myChart2"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Floating Button -->
    <button id="floating-button" class="floating-button">+</button>
    <!-- Mini Chat View -->
    <div id="mini-chat" class="mini-chat">
        <div id="mini-messages"></div>
        <input id="mini-message-input" type="text" placeholder="Type a message...">
        <button id="mini-send-button">Send</button>
    </div>
@endsection


@push('scripts')
    <!-- JS Libraies -->
    <script src="{{ asset('library/summernote/dist/summernote-bs4.js') }}"></script>
    <script src="{{ asset('library/codemirror/lib/codemirror.js') }}"></script>
    <script src="{{ asset('library/codemirror/mode/javascript/javascript.js') }}"></script>
    <script src="{{ asset('library/selectric/public/jquery.selectric.min.js') }}"></script>

    <!-- JS Libraies -->
    <script src="{{ asset('library/prismjs/prism.js') }}"></script>
    <script src="{{ asset('library/chart.js/dist/Chart.min.js') }}"></script>

    <!-- Page Specific JS File -->
    <script src="{{ asset('js/page/bootstrap-modal.js') }}"></script>

    <script src="http://localhost:3000/socket.io/socket.io.js"></script>

    <script>
        document.getElementById('floating-button').addEventListener('click', function() {
            const miniChat = document.getElementById('mini-chat');
            if (miniChat.style.display === 'none' || miniChat.style.display === '') {
                miniChat.style.display = 'block';
            } else {
                miniChat.style.display = 'none';
            }
        });

        // Initialize Socket.IO client
        const socket = io('http://localhost:3000');

        // Elements
        const miniMessages = document.getElementById('mini-messages');
        const miniMessageInput = document.getElementById('mini-message-input');
        const miniSendButton = document.getElementById('mini-send-button');

        // Listen for messages from the server
        socket.on('chat message', function(data) {
            const messageElement = document.createElement('div');
            messageElement.textContent = data;
            miniMessages.appendChild(messageElement);
        });

        // Send message to the server
        miniSendButton.addEventListener('click', function() {
            const message = miniMessageInput.value;
            console.log('sending message:', message); // Log message being sent
            socket.emit('chat message', message);
            miniMessageInput.value = '';
        });
    </script>
@endpush