@extends('layouts.default')
@section('content')
            <div class="page-title">
                    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li><h1>Settings</h1></li>
            <li class="breadcrumb-item">
                <a href="{{ url('index') }}">
                    <svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Home
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Settings</li>
        </ol>
    </nav>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="alert alert-card-warning alert-alt alert-dismissible fade show">
                            This is a demo of AIKit plugin made for you to test the experience of using the plugin.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        
                        <ul class="nav nav-tabs-standard pt-4 mb-3 nav-scroll nav-scroll-auto-xl">                            
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/auto-write') }}">Auto Writer</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/scheduled') }}">Scheduler</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/repurpose') }}">Repurpose</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/rss') }}">RSS</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/chatbot') }}">Chatbot</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/fine-tune-models') }}">Fine-tune Models</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/prompt') }}">AI Menu Prompts</a></li>
                            <li class="nav-item"><a class="nav-link active" aria-current="true" href="{{ url('aikit/setting') }}">Settings</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/import') }}">Export/Import Settings</a></li>
                        </ul>
                        <div class="card h-auto">
                            <div class="card-header d-block border-0 pb-0">
                                <h4 class="card-title mb-0">OpenAI Settings</h4>
                                <p class="mb-0">Adjust the plugin to your needs by editing the settings here.</p>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-xl-6 col-sm-6 mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">OpenAI Key</label>
                                        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="this-is-a-secret-key">
                                        <div id="emailHelp" class="form-text">
                                            For instructions on how to get an OpenAI key, please visit 
                                            <a href="javascript:void(0);" class="text-primary">https://example.com</a>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-sm-6 mb-3">
                                        <label for="exampleFormControlInput2" class="form-label">Rapid API Key</label>
                                        <input type="email" class="form-control" id="exampleFormControlInput2" placeholder="this-is-rapid-api-key">
                                        <div id="emailHelp-1" class="form-text">
                                            Enter your RapidAPI key for Subtitles for YouTube here. This API is used to read YouTube video subtitles to allow you to fetch.
                                            <a href="javascript:void(0);" class="text-primary">Read More</a>
                                            <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label class="form-label">Post category</label>
                                        <select class="selectpicker form-select">
                                            <option data-content="<img src='{{ asset('images/svg/england.svg') }}' alt=''> England">England</option>
                                            <option data-content="<img src='{{ asset('images/svg/india.svg') }}' alt=''> India">India</option>
                                            <option data-content="<img src='{{ asset('images/svg/uae.svg') }}' alt=''> UAE">UAE</option>
                                        </select>
                                        <div id="emailHelp-2" class="form-text">
                                            The language of the text you want to generate.
                                            <a href="javascript:void(0);" class="text-primary">Read More</a>
                                            <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label class="form-label">OpenAI Preferred Model</label>
                                        <select class="selectpicker form-select">
                                            <option selected>GPT-3.5-turbo</option>
                                            <option value="1">GPT-4.5-turbo</option>
                                        </select>
                                        <div id="emailHelp-3" class="form-text">
                                            The language of the text you want to generate.
                                            <a href="javascript:void(0);" class="text-primary">Read More</a>
                                            <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label for="exampleFormControlInput10" class="form-label">Prompt Stop Sequence</label>
                                        <input type="text" class="form-control" id="exampleFormControlInput10">
                                        <div id="emailHelp-4" class="form-text">
                                            The language of the text you want to generate.
                                            <a href="javascript:void(0);" class="text-primary">Read More</a>
                                            <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label for="exampleFormControlInput11" class="form-label">Completion Stop Sequence</label>
                                        <input type="text" class="form-control" id="exampleFormControlInput11">
                                        <div id="emailHelp-5" class="form-text">
                                            The language of the text you want to generate.  
                                            <a href="javascript:void(0);" class="text-primary">Read More</a>
                                            <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 mb-3">
                                        <label for="exampleFormMultiplier" class="form-label">Multiplier</label>
                                        <p class="text-end mb-2">2.7x</p>
                                        <div id="multiplierSlider" class="mb-4"></div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">Autocompleted Text Background Color</label>
                                        <div class="d-flex flex-wrap gap-2">
                                            <div class="form-check form-check-palette">
                                                <input class="form-check-input bg-light" type="radio" name="flexRadioDefault" id="flexRadioDefault0">
                                                <label class="form-check-label border" for="flexRadioDefault0"></label>
                                                <svg class="position-absolute top-50 start-50 translate-middle" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M13.5 6.5L6.5 13.5" stroke="var(--bs-danger)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    <path d="M6.5 6.5L13.5 13.5" stroke="var(--bs-danger)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                </svg>
                                            </div>
                                            <div class="form-check form-check-palette">
                                                <input class="form-check-input bg-primary" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                                                <label class="form-check-label border-primary" for="flexRadioDefault1"></label>
                                            </div>
                                            <div class="form-check form-check-palette">
                                                <input class="form-check-input bg-success" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                                                <label class="form-check-label border-success" for="flexRadioDefault2"></label>
                                            </div>
                                            <div class="form-check form-check-palette">
                                                <input class="form-check-input bg-info" type="radio" name="flexRadioDefault" id="flexRadioDefault3">
                                                <label class="form-check-label border-info" for="flexRadioDefault3"></label>
                                            </div>
                                            <div class="form-check form-check-palette">
                                                <input class="form-check-input bg-secondary" type="radio" name="flexRadioDefault" id="flexRadioDefault4">
                                                <label class="form-check-label border-secondary" for="flexRadioDefault4"></label>
                                            </div>
                                            <div class="form-check form-check-palette">
                                                <input class="form-check-input bg-warning" type="radio" name="flexRadioDefault" id="flexRadioDefault5">
                                                <label class="form-check-label border-warning" for="flexRadioDefault5"></label>
                                            </div>
                                        </div>
                                        <div id="emailHelp-6" class="form-text mb-2">
                                            AIKit's builtin prompts are already.
                                            <a href="javascript:void(0);" class="text-primary">Read More</a>
                                            <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">Default view</label>
                                        <div class="border form-control position-relative">
                                            <div class="form-check mb-0">
                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                <label class="form-check-label mb-0 stretched-link" for="flexCheckDefault">Elementor supported?</label>
                                            </div>
                                        </div>
                                        <div id="emailHelp-7" class="form-text mb-2">
                                            The language of the text you want to generate.  
                                            <a href="javascript:void(0);" class="text-primary">Read More</a>
                                            <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-xl-9">
                                        <label for="exampleFormControlInput1" class="form-label">Default view</label>
                                        <div class="row">
                                            <div class="col-xl-4 col-lg-4 col-sm-6 mb-3">
                                                <div class="bg-success form-control position-relative">
                                                    <div class="form-check mb-0">
                                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault-1">
                                                        <label class="form-check-label mb-0 stretched-link text-white" for="flexCheckDefault-1">Small (256x256)</label>
                                                    </div>
                                                </div>
                                                <div id="emailHelp-8" class="form-text mb-2">
                                                    When enabled, you will be able to use AIKit right.
                                                    <a href="javascript:void(0);" class="text-primary">Read More</a>
                                                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                                </div>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-sm-6 mb-3">
                                                <div class="bg-success form-control position-relative">
                                                    <div class="form-check mb-0">
                                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault-2">
                                                        <label class="form-check-label mb-0 stretched-link text-white" for="flexCheckDefault-2">Medium (512x512)</label>
                                                    </div>
                                                </div>
                                                <div id="emailHelp-9" class="form-text mb-2">
                                                    When enabled, you will be able to use AIKit right.
                                                    <a href="javascript:void(0);" class="text-primary">Read More</a>
                                                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                                </div>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-sm-6 mb-3">
                                                <div class="border form-control position-relative">
                                                    <div class="form-check mb-0">
                                                        <input class="form-check-input" type="checkbox" id="flexCheckDefault-3">
                                                        <label class="form-check-label mb-0 stretched-link" for="flexCheckDefault-3">Large (1024x1204)</label>
                                                    </div>
                                                </div>
                                                <div id="emailHelp-10" class="form-text mb-2">
                                                    When enabled, you will be able to use AIKit right.
                                                    <a href="javascript:void(0);" class="text-primary">Read More</a>
                                                    <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here."><i class="fa-solid fa-circle-info"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Image counts for each size</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                    </div>
                                    <div class="col-xl-6 mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Image generation styles</label>
                                        <input type="text" class="form-control basic-tagify" value="Watercolor, Vector Art, Portrait, Pencil Drawing, Digital Painting, Abstract, Oil Painting, Cartoon, Black And White">
                                        <div id="emailHelp-11" class="form-text mb-2">System message help set the behaviour of the model. You can use it to ask the model to mimic a certain style or take a certain perspective for all text generations. For example, if you set this to "Shakespeare' style", the mode will follow the style of Shakespeare in all text generations when possible. System message should work ONLY with GPT-4 and to a lesser extent with gpt-3.5-turbo models.</div>
                                    </div>
                                    <div class="col-xl-6 mb-3">
                                        <label class="form-label" for="floatingTextarea">OpenAI System Message</label>
                                        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
                                        <div id="emailHelp-12" class="form-text mb-2">
                                            System message help set the behaviour of the model. You can use it to ask the model to mimic a certain style or take a certain perspective for all text generations. For example, if you set this to "Shakespeare' style", the mode will follow the style of Shakespeare in all text generations when possible. System message should work ONLY with GPT-4 and to a lesser extent with gpt-3.5-turbo models.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
@endsection