@extends('layouts.app')

@section('content')

@include('hd247.partials.styles')

<div id="main-content">
    <div class="container-fluid">
        <div class="row">
            <div id="region-main" class="content-col col-md-12">
                <div class="chat-container">
                    <!-- Chat History Sidebar -->
                    <div class="chat-sidebar">
                        <button id="new-chat-btn" class="new-chat-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                            New Chat
                        </button>
                        
                        <ul id="chat-history-list" class="chat-history-list">
                            <!-- Chat history items will be added here dynamically -->
                        </ul>
                    </div>
                    
                    <!-- Main Chat Area -->
                    <div class="chat-main">
                        <!-- Messages Container -->
                        <div id="messages-container" class="messages-container">
                            <!-- Empty state shown when no chat is selected -->
                            <div id="empty-state" class="empty-state">
                                <h2>AI Chat Assistant</h2>
                                <p>Start a new conversation or select a previous chat from the sidebar.</p>
                                <p>Ask questions, get information, or just have a conversation!</p>
                            </div>
                            
                            <!-- Messages will be added here dynamically -->
                        </div>
                        
                        <!-- Input Area -->
                        <div class="input-container">
                            <!-- File Selector -->
                            <div class="file-selector-container">
                                <label for="template-selector" class="file-selector-label">Select template:</label>
                                <!-- <select id="file-selector" class="file-selector">
                                    <option value="">Select a JSON file</option>
                                </select> -->
                                <select id="template-selector" class="file-selector">
                                    <option value="">Select a template</option>
                                </select>
                            </div>
                            
                            <div class="message-input-wrapper">
                                <textarea 
                                    id="message-input" 
                                    class="message-input" 
                                    placeholder="Type a message..." 
                                    rows="1"
                                ></textarea>
                                <div class="input-actions">
                                    <!-- <button id="video-upload-button" class="video-upload-button" title="Upload Video">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polygon points="23 7 16 12 23 17 23 7"></polygon>
                                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                                        </svg>
                                    </button> -->
                                    <button id="send-button" class="send-button" title="Send Message">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <line x1="22" y1="2" x2="11" y2="13"></line>
                                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Video Upload Modal -->
                <div id="video-modal" class="video-modal">
                    <div class="video-modal-content">
                        <div class="video-modal-header">
                            <div class="video-modal-title">Upload Video for AI Analysis</div>
                            <button id="video-modal-close" class="video-modal-close">&times;</button>
                        </div>
                        
                        <video id="video-preview" controls class="video-preview"></video>
                        
                        <div id="video-upload-area" class="video-upload-area">
                            <div class="video-upload-icon">
                                <svg style="margin: 0 auto;" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="17 8 12 3 7 8"></polyline>
                                    <line x1="12" y1="3" x2="12" y2="15"></line>
                                </svg>
                            </div>
                            <div id="video-upload-text" class="video-upload-text">Click to select or drop an MP4 video file</div>
                            <input type="file" id="video-upload" accept="video/mp4" style="display: none;">
                        </div>
                        
                        <div id="upload-progress" class="upload-progress">
                            <div id="upload-progress-bar" class="upload-progress-bar"></div>
                        </div>
                        
                        <div id="video-upload-status" class="video-upload-status"></div>
                        
                        <!-- JSON File Selector in Modal -->
                        <div class="json-file-selector">
                            <label for="json-file-select" class="json-file-label">Select Existing JSON File:</label>
                            <select id="json-file-select" class="json-file-select">
                                <option value="">Select a JSON file</option>
                                <!-- Options will be populated dynamically -->
                            </select>
                        </div>
                        
                        <button id="video-upload-btn" class="video-upload-btn" disabled>Upload Video</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="notification" class="notification"></div>


@include('hd247.partials.scripts')
@endsection