<?php  if (!defined('ABSPATH')) exit; ?>

<div class="h-100 w-100 pt-4 d-flex gap-4">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h1 class="h3"><i class="bi bi-chat-dots"></i> <?php esc_html_e('Content Creator', 'assistini'); ?></h1>
            <div class="d-flex gap-2">
                <div class="ass-chat-header-open-ai-status text-center ass-flex border rounded px-2 align-items-center" style="display:none;">
                    <div class="ass-chat-header-open-ai-status-item ass-flex align-items-center gap-1" data-status="2">
                        <span class="ass-size-13 ass-fw-600 ass-mr-5"><?php esc_html_e('AI Status', 'assistini'); ?>:</span>
                        <div class="bg-warning" style="height:10px;width:10px;border-radius:50%;"></div>
                        <span class="ass-size-13"><?php esc_html_e('Impaired', 'assistini'); ?></span>
                    </div>
                    <div class="ass-chat-header-open-ai-status-item ass-flex align-items-center gap-1" data-status="3">
                        <span class="ass-size-13 ass-fw-600 ass-mr-5"><?php esc_html_e('AI Status', 'assistini'); ?>:</span>
                        <div class="bg-danger" style="height:10px;width:10px;border-radius:50%;"></div>
                        <span class="ass-size-13"><?php esc_html_e('Disrupted', 'assistini'); ?></span>
                    </div>
                </div>
                <div class="ass-chat-header-add-count text-center border rounded px-2">
                    <span class="ass-size-13"><span class="ass-chat-header-add-count-open">0</span> <?php esc_html_e('remaining of', 'assistini'); ?> <span class="ass-chat-header-add-count-total"><?php echo (defined('ASSI_ACCOUNT_MAX_CHATS') ? (int) ASSI_ACCOUNT_MAX_CHATS : 0); ?></span></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="ass-chat-area rounded border ass-shadow">
                    <div class="ass-chat-area-blocked">
                        <div class="pb-3">
                            <i class="bi bi-exclamation-circle text-danger ass-size-20 pb-2"></i>
                            <span><?php esc_html_e('You need to Sign up with Assistini to use this Feature!', 'assistini'); ?></span>
                            <button class="btn btn-sm btn-primary mt-3 mb-0 ass-oauth-start-btn"><?php esc_html_e('Sign up for free', 'assistini') ?></button>
                        </div>
                    </div>
                    <!-- chatlist -->
                    <div class="ass-chat-list">
                        <div class="modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="ass-chat-header d-grid gap-2 mb-3">
                                    <div class="d-flex justify-content-between align-items-center px-1">
                                        <div class="ass-chat-sidebar-toggle w-100 me-2">
                                            <button type="button" class="ass-chat-header-add-btn ass-chat-sidebar-toggle btn btn-primary btn-sm w-100" style="display:none;"><i class="bi bi-plus"></i><?php esc_html_e('New Content', 'assistini'); ?></button>
                                        </div>
                                        <button class="btn ass-chat-header-close-btn ass-transparent-border ps-2 pe-0" style="display:none;">
                                            <i class="bi bi-chevron-double-left text-primary fs-6"></i>
                                        </button>
                                        <button class="btn ass-chat-header-open-btn ass-transparent-border ps-0 pe-2">
                                            <i class="bi bi-chevron-double-left text-primary fs-6"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="ass-custom-scrollbar modal-body">

                                    <div class="ass-chat-list-area">
                                        <div class="ass-chat-list-placeholder">
                                            <div class="ass-chat-list-item d-flex align-items-center placeholder-wave mb-3">
                                                <div class="flex-shrink-0 placeholder rounded bg-primary">
                                                    <i class="bi bi-chat ass-size-32 opacity-0"></i>
                                                </div>
                                                <div class="ass-chat-sidebar-toggle flex-grow-1 ms-3 placeholder rounded bg-primary" style="display:none;">
                                                    <h3 class="opacity-0">Chat Name</h3>
                                                    <p class="opacity-0">#chat_id</p>
                                                </div>
                                            </div>
                                            <!-- <hr> -->
                                            <div class="ass-chat-list-item d-flex align-items-center placeholder-wave mb-3">
                                                <div class="flex-shrink-0 placeholder rounded bg-primary">
                                                    <i class="bi bi-chat ass-size-32 opacity-0"></i>
                                                </div>
                                                <div class="ass-chat-sidebar-toggle flex-grow-1 ms-3 placeholder rounded bg-primary" style="display:none;">
                                                    <h3 class="opacity-0">Chat Name</h3>
                                                    <p class="opacity-0">#chat_id</p>
                                                </div>
                                            </div>
                                            <!-- <hr> -->
                                            <div class="ass-chat-list-item d-flex align-items-center placeholder-wave">
                                                <div class="flex-shrink-0 placeholder rounded bg-primary">
                                                    <i class="bi bi-chat ass-size-32 opacity-0"></i>
                                                </div>
                                                <div class="ass-chat-sidebar-toggle flex-grow-1 ms-3 placeholder rounded bg-primary" style="display:none;">
                                                    <h3 class="opacity-0">Chat Name</h3>
                                                    <p class="opacity-0">#chat_id</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ass-chat-list-items">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- chatlist -->

                    <!-- chatbox -->
                    <input id="ass-current-session-id" type="hidden" value="" />
                    <div class="ass-chat-box">
                        <div class="modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="ass-msg-head">
                                    <div class="row">
                                        <div class="col-8">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1 ms-3 w-100">
                                                    <div class="ass-chat-header-placeholder">
                                                        <div class="placeholder-wave">
                                                            <div class="placeholder col-4 rounded bg-primary"></div>
                                                        </div>
                                                        <div class="placeholder-wave">
                                                            <p class="placeholder col-1 rounded bg-primary"></p>
                                                        </div>
                                                    </div>
                                                    <div class="ass-chat-header" style="display:none;">
                                                        <div class="d-flex align-items-center gap-1">
                                                            <h3 class="ass-chat-header-name text-truncate"></h3>
                                                            <div class="ass-chat-header-edit py-0 px-1 rounded">
                                                                <i class="bi bi-pencil ass-size-16"></i>
                                                            </div>
                                                            <input style="display:none;" type="text" id="ass-chat-header-edit-input" class="ass-form-control w-100" />
                                                        </div>
                                                        <p class="ass-chat-header-id text-truncate" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="<?php esc_attr_e('Copy', 'assistini'); ?>"></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4 d-flex justify-content-end">
                                            <button class="btn btn-link text-danger ass-size-13 ass-chat-header-report" type="button"><?php esc_html_e('Report a Problem', 'assistini'); ?></button>
                                            <button class="ass-chat-header-delete rounded" type="button"><i class="bi bi-trash"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-body ass-chat-timeline ass-custom-scrollbar">
                                    <div class="ass-msg-body">
                                        <ul class="ass-chat-msg-list-placeholder">
                                            <li class="ass-chat-msg-sender-placeholder placeholder-wave mt-4">
                                                <div class="placeholder rounded">
                                                    <p class="opacity-0">Placeholder...Placeholder...Placeholder...Placeholder</p>
                                                </div>
                                            </li>
                                            <li class="ass-chat-msg-reply-placeholder placeholder-wave mt-4">
                                                <div class="placeholder bg-primary rounded">
                                                    <p class="opacity-0">Placeholder...Placeholder...Placeholder...Placeholder</p>
                                                </div>
                                            </li>
                                            <li class="ass-chat-msg-sender-placeholder placeholder-wave mt-4">
                                                <div class="placeholder rounded">
                                                    <p class="opacity-0">Placeholder...Placeholder...Placeholder...Placeholder</p>
                                                </div>
                                            </li>
                                            <li class="ass-chat-msg-reply-placeholder placeholder-wave mt-4">
                                                <div class="placeholder bg-primary rounded">
                                                    <p class="opacity-0">Placeholder...Placeholder...Placeholder...Placeholder</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="ass-chat-msg-list-container"></div>
                                        <ul class="ass-chat-msg-response-loader ps-3" style="display:none;">
                                            <li class="ass-chat-msg-sender mt-2 mb-4">
                                                <div>
                                                    <div class="ass-chat-msg-response-loader px-4">
                                                        <div class="dot-pulse bg-primary text-primary"></div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="ass-chat-send-box">
                                    <form action="">
                                        <div class="d-inline-block w-100 position-relative border input-wrapper">
                                            <textarea id="ass-chat-send-textarea" rows="4" placeholder="Type a message to AI" class="w-100 z-1 border-0 focus-off p-2 form-control"></textarea>
                                            <div class="position-absolute top-0 end-0 z-4 px-1">
                                                <button type="button" class="ass-chat-template-btn btn btn-outline-primary btn-sm ass-flex align-items-center mt-1 py-0">
                                                    <i class="bi bi-plus-circle-fill fs-4 ass-text-color-primary"></i><span class="text-sm-center"><?php esc_html_e('Template', 'assistini'); ?></span>
                                                </button>
                                            </div>
                                            <button type="submit" class="ass-chat-send-btn btn bg-transparent position-absolute end-0 z-3 ass-transparent-border">
                                                <i class="bi bi-arrow-up-circle-fill fs-4 ass-text-color-primary"></i>
                                            </button>
                                        </div>
                                    </form>

                                    <div class="ass-chat-control-btn-bottom">

                                        <div class="ass-chat-control-template-ctn form-floating me-1">
                                            <select class="ass-chat-control-template form-select ass-form-floating-select" id="ass-chat-control-template">
                                            </select>
                                            <label for="ass-chat-control-template"><?php esc_html_e('Template', 'assistini'); ?>:</label>
                                        </div>

                                        <div class="ass-chat-control-language-ctn form-floating me-1">
                                            <select class="ass-chat-control-language form-select ass-form-floating-select" id="ass-chat-control-language">
                                                <?php
                                                $assi_languages = ASSI_Tools::getAllLanguages();
                                                foreach ($assi_languages as $assi_val => $assi_name) {
                                                    if (isset($assi_name) && !empty($assi_name)) {
                                                        echo '<option value="' . esc_attr($assi_val) . '">' . esc_html($assi_name) . '</option>';
                                                    }
                                                }
                                                ?>
                                            </select>
                                            <label for="ass-chat-control-language"><?php esc_html_e('Language', 'assistini'); ?>:</label>
                                        </div>

                                        <div class="ass-chat-control-tone-ctn form-floating me-1">
                                            <select class="ass-chat-control-tone form-select ass-form-floating-select" id="ass-chat-control-tone">
                                                <?php
                                                $assi_tonalities = ASSI_Tools::getTonality();
                                                echo '<option value="" selected>' . esc_html__('Select Tone', 'assistini') . '</option>';
                                                foreach ($assi_tonalities as $assi_val => $assi_name) {
                                                    echo '<option value="' . esc_attr($assi_val) . '">' . esc_html($assi_name) . '</option>';
                                                }
                                                ?>
                                            </select>
                                            <label for="ass-chat-control-tone"><?php esc_html_e('Tone', 'assistini'); ?>:</label>
                                        </div>

                                        <div class="ass-chat-control-pov-ctn">
                                            <div class="d-flex form-floating me-1">
                                                <select class="ass-chat-control-pov form-select ass-form-floating-select" id="ass-chat-control-pov">
                                                    <?php
                                                    $assi_povs = ASSI_Tools::getPointOfView();
                                                    echo '<option value="" selected>' . esc_html__('Select Point of View', 'assistini') . '</option>';
                                                    foreach ($assi_povs as $assi_val => $assi_name) {
                                                        echo '<option value="' . esc_attr($assi_val) . '">' . esc_html($assi_name) . '</option>';
                                                    }
                                                    ?>
                                                </select>
                                                <label for="ass-chat-control-pov"><?php esc_html_e('Point of View', 'assistini'); ?>:</label>
                                                <i class="ass-option-pov-info ms-1 bi bi-question-circle-fill text-secondary"></i>
                                            </div>
                                        </div>

                                        <div class="ass-chat-control-length-ctn">
                                            <div class="d-flex form-floating">
                                                <select class="ass-chat-control-length form-select ass-form-floating-select" id="ass-chat-control-length">
                                                    <?php
                                                    $assi_lengths = ASSI_Tools::getContentLength();
                                                    echo '<option value="" selected>' . esc_html__('Select Content Length', 'assistini') . '</option>';
                                                    foreach ($assi_lengths as $assi_val => $assi_name) {
                                                        echo '<option value="' . esc_attr($assi_val) . '">' . esc_html($assi_name) . '</option>';
                                                    }
                                                    ?>
                                                </select>
                                                <label class="ps-1" for="ass-chat-control-length"><?php esc_html_e('Content Length', 'assistini'); ?>:</label>
                                                <i class="ass-option-length-info ms-1 bi bi-question-circle-fill text-secondary"></i>
                                            </div>
                                        </div>
                                        <button class="ass-chat-control-settings-save btn btn-sm btn-primary" style="display:none;"><?php esc_html_e('Save Settings as default','assistini'); ?></button>
                                        <div class="ass-chat-control-template-save input-group ms-2" style="max-width: 250px;display:none;">
                                            <input id="ass-chat-control-template-save-name" type="text" class="form-control" placeholder="Template name...">
                                            <button class="ass-chat-control-template-save-btn btn btn-sm btn-primary" type="button">
                                                <i class="ass-chat-control-template-save-icon bi bi-floppy m-0"></i>
                                                <div class="spinner-border spinner-border-sm text-light ass-chat-control-template-save-loader" role="status" style="display:none;"></div>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- chatbox -->
            </div>
        </div>
    </div>
</div>
</div>