@extends('layouts/contentNavbarLayout')

@section('title', 'Chat')

@section('content')

    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between py-3 border-bottom border-gray-200">
                <div class="d-flex align-items-center gap-3">
                    <div class="position-relative">
                        <!-- Online/Offline Indicator -->
                        <span id="online-user" class="position-absolute end-1.5" style="display: none;">
                        <span class="rounded-circle bg-success" style="height: 2px; width: 2px;"></span>
                    </span>
                        <span id="offline-user" class="position-absolute end-1.5" style="display: none;">
                        <span class="rounded-circle bg-secondary" style="height: 2px; width: 2px;"></span>
                    </span>
                        <!-- User Profile Photo -->
                        @if(!empty($user->image))
                            <img src="{{ $user->image }}" alt="{{ $user->name }}" class="img-fluid rounded-circle" style="width: 40px; height: 40px;">
                        @else
                            <!-- Placeholder for profile photo -->
                            <svg class="text-secondary" fill="currentColor" viewBox="0 0 24 24" style="width: 40px; height: 40px;">
                                <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"></path>
                            </svg>
                        @endif
                    </div>
                    <!-- User Information -->
                    <div>
                        <div class="text-lg">
                            <span class="text-dark mr-2">{{ $user->name }}</span>
                        </div>
                        <span class="text-muted">{{ $user->phone }}</span>
                        <span id="user-status" class="text-muted"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="d-flex flex-column gap-4 p-3 overflow-auto" id="messages" style="height: 300px;">
                <div class="d-flex justify-content-center" id="loading">
                    <!-- Loading animation -->
                    <!-- <svg class="animate-spin h-12 w-12 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg> -->
                </div>
                <div class="card-body" id="bodyContent"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="border-top border-gray-200 px-4 pt-4 mb-2" id="messageForm">
                <form action="#" method="post" id="message-form">
                    <div class="d-flex">
                        <input type="text" class="form-control me-2" placeholder="Write your message !" id="message" required>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('page-script')
    <script type="module">
        import {
            initializeApp
        } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
        import {
            getFirestore,
            collection,
            addDoc,
            getDocs,
            query,
            where,
            doc,
            onSnapshot,
            Timestamp,
            orderBy,
            updateDoc,
        } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-firestore.js";

        const firebaseConfig = {
            apiKey: "{{ env('FIREBASE_API_KEY') ? env('FIREBASE_API_KEY') : 'AIzaSyDTnwZV0v07NaQVRt_v9g7eZAx_wv9N7BA' }}",
            authDomain: "{{ env('FIREBASE_AUTH_DOMAIN') ? env('FIREBASE_AUTH_DOMAIN') : 'tawazon-5f8b6.firebaseapp.com' }}",
            projectId: "{{ env('FIREBASE_PROJECT_ID') ? env('FIREBASE_PROJECT_ID') : 'tawazon-5f8b6' }}",
            storageBucket: "{{ env('FIREBASE_STORAGE_BUCKET') ? env('FIREBASE_STORAGE_BUCKET') : 'tawazon-5f8b6.appspot.com' }}",
            messagingSenderId: "{{ env('FIREBASE_MESSAGING_SENDERID') ? env('FIREBASE_MESSAGING_SENDERID') : '758131532615' }}",
            appId: "{{ env('FIREBASE_APP_ID') ? env('FIREBASE_APP_ID') : '1:758131532615:web:a6725f89d80cb235816262' }}",
            measurementId: "{{ env('FIREBASE_MEASUREMENT_ID') ? env('FIREBASE_MEASUREMENT_ID') : 'G-6SPL2ZME4W' }}"
        };  // Initialize Firebase
        const app = initializeApp(firebaseConfig);

        // Initialize Cloud Firestore and get a reference to the service
        const db = getFirestore(app);

        var submit = document.getElementById('message-form');
        submit.addEventListener('submit', (e) => {
            e.preventDefault();
            //submit.addEventListener('click', (e) => {
            var message = document.getElementById('message').value.trim();
            if (message == '') {
                document.getElementById('message').focus();
                return true;
            }
            const docRef = addDoc(collection(db, "conversations/{{ $conversation->conversation_code }}/messages"), {
                id: