{% extends 'lara_django_base/lara_base.html' %} 

{% block head_title %} LARA Dashboard {% endblock head_title %} 


{% partialdef project-create-card %}
{% include 'lara_django_projects/components/project_create_card.html' %}
{% endpartialdef project-create-card %} 


{% partialdef projects-overview-table %}
{% include 'lara_django_projects/components/projects_overview_table.html' %}
{% endpartialdef projects-overview-table %} 


{% partialdef project-experiment-card %}
{% include 'lara_django_projects/components/project_experiment_card.html' %}
{% endpartialdef project-experiment-card %} 

<!-- {#% partialdef lara-calendar %#} -->
<!-- {#% include 'lara_django_base/partials/calendar.html' %#} -->
<!-- {#% endpartialdef lara-calendar %#}  -->
{% block head %}
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'stream-blue': '#3b82f6',
                        'stream-green': '#10b981',
                        'stream-red': '#ef4444',
                        'stream-yellow': '#f59e0b',
                    }
                }
            }
        }
    </script>
{% endblock head %}

{% block content %}

<!-- row / column layout, top rows (4/6) for monitoring, lower (2/6) rows for projects and experiments bg-blue-gray-50/50" -->


<div class="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8 bg-gray-100 min-h-screen min-w-full">

    <div id="data-monitor" tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border z-0">
        <input type="checkbox" />
        <div class="collapse-title text-xl font-medium">data monitor</div>
        <div class="collapse-content">
            <div class="flex justify-end mb-4">
                
                <button class="btn btn-success rounded-b-full">
                <!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
                Add
                </button> -->
                <a href="{% url 'lara_django_base:data_monitor_create' %}" class="btn bg-green-500 text-white mt-3">Add</a>

            </div>
          <p>here new data can be monitored </p>
        </div>
      </div>

    <div id="device-action-monitor" tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border z-0">
        <input type="checkbox" />
        <div class="collapse-title text-xl font-medium">device action monitor</div>
        <div class="collapse-content">
            
          <div class="flex ">
             <iframe src="http://localhost:8085/" class="w-2/3 h-200" title="dev mon"></iframe>
          </div>
        </div>
      </div>

    <div class="carousel carousel-center rounded-box mt-3 gap-3">
        <div class="carousel-item ">
                {% partial project-create-card %}
        </div>
        {% for item in projects_latest %}
            <div class="carousel-item">
            {% with level=item.get_level %}
            {% with item_id=item.project_id %}
                {% with item_url='lara_django_projects:project-detail' %}
                    {% partial project-experiment-card %}
                {% endwith %}
            {% endwith %}
            {% endwith %}
            </div>
        {% endfor %}
    </div>

    <div class="justify-center"></div>

    <div class="flex justify-center mt-4 text-white">
        <a href="{% url 'lara_django_base:chat' %}">
            <button class="btn bg-gray-400 rounded-full h-16 w-48">LARA AI Chat</button>
        </a>
    </div>

    <div id="projects-planning" tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border m-3 z-0">
        <input type="checkbox" />
        <div class="collapse-title text-xl font-medium">projects planning</div>
        <div class="collapse-content">
         
            <div class="overflow-x-auto">
                {% with projects=projects %}
                {% with project_progress=33 %}
                {% partial projects-overview-table %}
                {% endwith %}
                {% endwith %}
        </div>

        </div>
      </div>

    <div class="mt-3">
      
    </div>


</div>

</div>
   


{% endblock content %}

{% block scripts %}
<script>
        const video = document.getElementById('video');
        const startButton = document.getElementById('startButton');
        const stopButton = document.getElementById('stopButton');
        const statusDiv = document.getElementById('status');
        
        let pc = null;
        
        function updateStatus(message, className) {
            statusDiv.innerHTML = '';
            
            // Create status indicator with appropriate styling
            const statusContent = document.createElement('div');
            statusContent.className = 'flex items-center';
            
            let dotColor, bgColor, textColor, borderColor;
            
            switch(className) {
                case 'connected':
                    dotColor = 'bg-green-500';
                    bgColor = 'bg-green-50';
                    textColor = 'text-green-800';
                    borderColor = 'border-green-200';
                    break;
                case 'connecting':
                    dotColor = 'bg-yellow-500 animate-pulse';
                    bgColor = 'bg-yellow-50';
                    textColor = 'text-yellow-800';
                    borderColor = 'border-yellow-200';
                    break;
                case 'disconnected':
                default:
                    dotColor = 'bg-red-500 animate-pulse';
                    bgColor = 'bg-red-50';
                    textColor = 'text-red-800';
                    borderColor = 'border-red-200';
                    break;
            }
            
            statusDiv.className = `flex items-center justify-center py-3 px-4 rounded-lg font-medium transition-all duration-300 ${bgColor} ${textColor} border ${borderColor}`;
            
            statusContent.innerHTML = `
                <div class="w-2 h-2 ${dotColor} rounded-full mr-2"></div>
                ${message}
            `;
            
            statusDiv.appendChild(statusContent);
        }
        
        async function startStream() {
            try {
                updateStatus('Connecting...', 'connecting');
                startButton.disabled = true;
                startButton.classList.add('opacity-50', 'cursor-not-allowed');
                
                // Create RTCPeerConnection
                pc = new RTCPeerConnection({
                    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
                });
                
                // Handle incoming stream
                pc.ontrack = (event) => {
                    console.log('Received track:', event.track.kind);
                    if (event.track.kind === 'video') {
                        video.srcObject = event.streams[0];
                        updateStatus('Connected - Receiving video stream', 'connected');
                        stopButton.disabled = false;
                        stopButton.classList.remove('opacity-50', 'cursor-not-allowed');
                    }
                };
                
                // Handle connection state changes
                pc.onconnectionstatechange = () => {
                    console.log('Connection state:', pc.connectionState);
                    if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
                        updateStatus('Connection failed', 'disconnected');
                        stopStream();
                    }
                };
                
                // Handle ICE connection state changes
                pc.oniceconnectionstatechange = () => {
                    console.log('ICE connection state:', pc.iceConnectionState);
                    if (pc.iceConnectionState === 'connected') {
                        updateStatus('WebRTC connection established', 'connected');
                    }
                };
                
                // Add a transceiver to receive video
                pc.addTransceiver('video', { direction: 'recvonly' });
                
                // Create offer
                const offer = await pc.createOffer();
                await pc.setLocalDescription(offer);
                
                // Send offer to server
                const response = await fetch('/offer', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        sdp: offer.sdp,
                        type: offer.type,
                    }),
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const answer = await response.json();
                await pc.setRemoteDescription(new RTCSessionDescription(answer));
                
            } catch (error) {
                console.error('Error starting stream:', error);
                updateStatus('Error starting stream: ' + error.message, 'disconnected');
                startButton.disabled = false;
                startButton.classList.remove('opacity-50', 'cursor-not-allowed');
            }
        }
        
        function stopStream() {
            if (pc) {
                pc.close();
                pc = null;
            }
            
            video.srcObject = null;
            updateStatus('Disconnected', 'disconnected');
            startButton.disabled = false;
            startButton.classList.remove('opacity-50', 'cursor-not-allowed');
            stopButton.disabled = true;
            stopButton.classList.add('opacity-50', 'cursor-not-allowed');
        }
        
        startButton.addEventListener('click', startStream);
        stopButton.addEventListener('click', stopStream);
        
        // Cleanup on page unload
        window.addEventListener('beforeunload', stopStream);
        
        // Auto-reconnect functionality (optional)
        let reconnectAttempts = 0;
        const maxReconnectAttempts = 3;
        
        function attemptReconnect() {
            if (reconnectAttempts < maxReconnectAttempts) {
                reconnectAttempts++;
                updateStatus(`Reconnecting... (attempt ${reconnectAttempts}/${maxReconnectAttempts})`, 'connecting');
                setTimeout(startStream, 2000);
            } else {
                updateStatus('Maximum reconnection attempts reached', 'disconnected');
                reconnectAttempts = 0;
            }
        }
        
        // Initialize status
        updateStatus('Ready to connect', 'disconnected');
    </script>
{% endblock  %}