<?php
include_once WPAISAAS_PLUGIN_DIR_PATH . 'templates/partials/head.php';
?>

    <body class="g-sidenav-show  bg-gray-100">
<?php include_once WPAISAAS_PLUGIN_DIR_PATH . 'templates/partials/sidebar-left.php'; ?>
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
        <!-- Navbar -->
        <?php include_once WPAISAAS_PLUGIN_DIR_PATH . 'templates/partials/navbar-top.php'; ?>
        <!-- End Navbar -->
        <div class="container-fluid py-4">
            <section class="main-container-dashboard">
                <div class="m-0 h-100 row">
                    <div class="col-lg-4">
                        <div class="imgGenraterForm">
                            <ul class="m-0  mb-3 border-0 img-gen-tabs nav nav-tabs nav-justified" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button type="button" id="justify-tab-example-tab-text" role="tab"
                                            data-bs-toggle="tab" data-bs-target="#justify-tab-example-tabpane-text"
                                            aria-controls="justify-tab-example-tabpane-text"
                                            aria-selected="true" class="nav-link active">
                                        <div class="d-flex align-items-center justify-content-center"><img width="16"
                                                                                                           src="<?php echo esc_url(WPAISAAS_PLUGIN_DIR_URL . 'assets/img/icons/text.svg'); ?>"
                                                                                                           alt="Tab Icon"
                                                                                                           class="tab-image d-inline me-2"><span>From Text</span>
                                        </div>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button type="button" id="justify-tab-example-tab-image" role="tab"
                                            data-bs-toggle="tab" data-bs-target="#justify-tab-example-tabpane-image"
                                            aria-controls="justify-tab-example-tabpane-image" aria-selected="false"
                                            tabindex="-1" class="nav-link">
                                        <div class="d-flex align-items-center justify-content-center"><img width="16"
                                                                                                           src="<?php echo esc_url(WPAISAAS_PLUGIN_DIR_URL . 'assets/img/icons/image.svg'); ?>"
                                                                                                           alt="Tab Icon"
                                                                                                           class="tab-image d-inline me-2"><span>From Image</span>
                                        </div>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button type="button" id="justify-tab-example-tab-upscale" role="tab"
                                            data-bs-toggle="tab" data-bs-target="#justify-tab-example-tabpane-upscale"
                                            aria-controls="justify-tab-example-tabpane-upscale" aria-selected="false"
                                            tabindex="-1" class="nav-link">
                                        <div class="d-flex align-items-center justify-content-center"><img width="16"
                                                                                                           src="<?php echo esc_url(WPAISAAS_PLUGIN_DIR_URL . 'assets/img/icons/upscale.svg'); ?>"
                                                                                                           alt="Tab Icon"
                                                                                                           class="tab-image d-inline me-2"><span>Upscale</span>
                                        </div>
                                    </button>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div role="tabpanel" id="justify-tab-example-tabpane-text"
                                     aria-labelledby="justify-tab-example-tab-text" class="fade tab-pane active show">

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label class="require form-label">Image Prompt</label>
                                                <textarea required="" rows="3"
                                                          placeholder="Briefly explain the image you want to generate for you..."
                                                          class="form-control" id="imageText"></textarea></div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3"><label class="form-label">Number of
                                                    Images</label><select aria-label="Default select example"
                                                                          class="form-select" id="textImageNumber">
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                </select></div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3"><label class="form-label">Image Style</label><select
                                                        aria-label="Default select example" class="form-select" id="textImageStyle">
                                                    <option value=""> None</option>
                                                    <option value="analog-film"> Analog-film</option>
                                                    <option value="anime"> Anime</option>
                                                    <option value="cinematic"> Cinematic</option>
                                                    <option value="comic-book"> Comic-book</option>
                                                    <option value="digital-art"> Digital-art</option>
                                                    <option value="enhance"> enhance</option>
                                                    <option value="fantasy-art"> Fantasy-art</option>
                                                    <option value="isometric"> Isometric</option>
                                                    <option value="line-art"> Line-art</option>
                                                    <option value="low-poly"> Low-poly</option>
                                                    <option value="modeling-compound"> Modeling-compound</option>
                                                    <option value="neon-punk"> Neon-punk</option>
                                                    <option value="origami"> Origami</option>
                                                    <option value="photographic"> Photographic</option>
                                                    <option value="pixel-art"> Pixel-art</option>
                                                    <option value="3d-model"> 3d-model</option>
                                                    <option value="tile-texture"> Tile-texture</option>
                                                </select></div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-3"><label class="form-label">Orientation</label>
                                                <div class="NumImages">
                                                    <div class="NumImagesInner"><input name="resolution"
                                                                                       type="radio" id="radio2"
                                                                                       value="1024x1024" checked=""
                                                                                       style="width: 0px; height: 0px; opacity: 0;"><label
                                                                for="radio2" class="btn btn-secondary"><span
                                                                    class="s-box"></span> Square</label><span>1024 x 1024</span>
                                                    </div>
                                                    <div class="NumImagesInner"><input name="resolution"
                                                                                       type="radio" id="radio"
                                                                                       value="1344x768"
                                                                                       style="width: 0px; height: 0px; opacity: 0;"><label
                                                                for="radio" class="btn btn-secondary"><span
                                                                    class="h-box"></span> Horizontal</label><span>1344 x 768</span>
                                                    </div>
                                                    <div class="NumImagesInner"><input name="resolution"
                                                                                       type="radio" id="radio1"
                                                                                       value="832x1216"
                                                                                       style="width: 0px; height: 0px; opacity: 0;"><label
                                                                for="radio1" class="btn btn-secondary"><span
                                                                    class="v-box"></span> Vertical</label><span>832 x 1216</span>
                                                    </div>
                                                    <div class="NumImagesInner"><input name="resolution"
                                                                                       type="radio" id="radio3"
                                                                                       value="1536x640"
                                                                                       style="width: 0px; height: 0px; opacity: 0;"><label
                                                                for="radio3" class="btn btn-secondary"><span
                                                                    class="p-box"></span> Panoramic</label><span>1536 x 640</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="type" value="text" id="type_text">
                                    </div>
                                    <button type="button" id="submitBtn" class="theme-btn btn btn-none">
                                        Generate
                                    </button>
                                </div>
                                <div role="tabpanel" id="justify-tab-example-tabpane-image"
                                     aria-labelledby="justify-tab-example-tab-image" class="fade tab-pane">
                                    <div class="mb-3">
                                        <label class="require form-label">Image</label>
                                        <div id="imagePreview" class="p-4 w-full h-48 rounded bg-gray-100 border border-gray-200 d-flex align-items-center justify-content-center overflow-hidden">
                                            <div id="imagePlaceholder" class="text-gray-300 d-flex flex-col align-items-center">
                                                <svg width="80px" height="80px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="opacity: 0.3;">
                                                    <path d="M20.5152 7C18.9718 7 17.5496 7.83679 16.8 9.18602L15.5145 11.5H11.75C8.57436 11.5 6 14.0744 6 17.25V34.25C6 37.4256 8.57436 40 11.75 40H22.9963C22.6642 39.2037 22.4091 38.3672 22.2402 37.5H11.75C9.95507 37.5 8.5 36.0449 8.5 34.25V17.25C8.5 15.4551 9.95507 14 11.75 14H16.9855L18.9854 10.4001C19.2941 9.84456 19.8797 9.5 20.5152 9.5H27.4848C28.1203 9.5 28.7059 9.84456 29.0146 10.4001L31.0145 14H36.25C38.0449 14 39.5 15.4551 39.5 17.25V22.7999C40.3823 23.1255 41.2196 23.544 42 24.0436V17.25C42 14.0744 39.4256 11.5 36.25 11.5H32.4855L31.2 9.18602C30.4504 7.83679 29.0282 7 27.4848 7H20.5152Z" fill="#212121"></path>
                                                    <path d="M24 17C27.5278 17 30.5222 19.2834 31.586 22.4529C30.7711 22.6741 29.988 22.9726 29.2451 23.34C28.5411 21.1138 26.459 19.5 24 19.5C20.9624 19.5 18.5 21.9624 18.5 25C18.5 27.6415 20.3622 29.8481 22.8454 30.3786C22.5516 31.151 22.3292 31.9587 22.1865 32.7936C18.6418 31.972 16 28.7945 16 25C16 20.5817 19.5817 17 24 17Z" fill="#212121"></path>
                                                    <path d="M46 35C46 41.0751 41.0751 46 35 46C28.9249 46 24 41.0751 24 35C24 28.9249 28.9249 24 35 24C41.0751 24 46 28.9249 46 35ZM36 29C36 28.4477 35.5523 28 35 28C34.4477 28 34 28.4477 34 29V34H29C28.4477 34 28 34.4477 28 35C28 35.5523 28.4477 36 29 36H34V41C34 41.5523 34.4477 42 35 42C35.5523 42 36 41.5523 36 41V36H41C41.5523 36 42 35.5523 42 35C42 34.4477 41.5523 34 41 34H36V29Z" fill="#212121"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <input type="file" name="logo" id="imageToImage" class="d-none">
                                    </div>


                                    <div class="mb-3"><label class="require form-label">Image
                                            Prompt</label><textarea required="" rows="3"
                                                                    placeholder="Briefly explain the image you want to generate for you..."
                                                                    class="form-control" id="imagePrompt"></textarea></div>
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="mb-3"><label class="form-label">Number of
                                                    Images</label><select aria-label="Default select example"
                                                                          class="form-select" id="imageNumber">
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                </select></div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="mb-3"><label class="form-label">Image Style</label><select
                                                        aria-label="Default select example" class="form-select" id="imageStyle">
                                                    <option value=""> None</option>
                                                    <option value="analog-film"> Analog-film</option>
                                                    <option value="anime"> Anime</option>
                                                    <option value="cinematic"> Cinematic</option>
                                                    <option value="comic-book"> Comic-book</option>
                                                    <option value="digital-art"> Digital-art</option>
                                                    <option value="enhance"> enhance</option>
                                                    <option value="fantasy-art"> Fantasy-art</option>
                                                    <option value="isometric"> Isometric</option>
                                                    <option value="line-art"> Line-art</option>
                                                    <option value="low-poly"> Low-poly</option>
                                                    <option value="modeling-compound"> Modeling-compound</option>
                                                    <option value="neon-punk"> Neon-punk</option>
                                                    <option value="origami"> Origami</option>
                                                    <option value="photographic"> Photographic</option>
                                                    <option value="pixel-art"> Pixel-art</option>
                                                    <option value="3d-model"> 3d-model</option>
                                                    <option value="tile-texture"> Tile-texture</option>
                                                </select></div>
                                        </div>
                                    </div>
                                    <button id="submitBtnImage" type="button" class="theme-btn btn btn-none">
                                        Generate
                                    </button>

                                </div>
                                <div role="tabpanel" id="justify-tab-example-tabpane-upscale"
                                     aria-labelledby="justify-tab-example-tab-upscale" class="fade tab-pane">

                                    <div class="mb-3"><label class="require form-label">Image : Increase the size of
                                            your images by 2x</label><label for="logo" class="d-block">
                                            <div class="p-4 w-full h-48 rounded bg-gray-100 border border-gray-200 d-flex align-items-center justify-content-center overflow-hidden">
                                                <div class="text-gray-300 d-flex flex-col align-items-center">
                                                    <svg width="80px" height="80px" viewBox="0 0 48 48" fill="none"
                                                         xmlns="http://www.w3.org/2000/svg" style="opacity: 0.3;">
                                                        <path d="M20.5152 7C18.9718 7 17.5496 7.83679 16.8 9.18602L15.5145 11.5H11.75C8.57436 11.5 6 14.0744 6 17.25V34.25C6 37.4256 8.57436 40 11.75 40H22.9963C22.6642 39.2037 22.4091 38.3672 22.2402 37.5H11.75C9.95507 37.5 8.5 36.0449 8.5 34.25V17.25C8.5 15.4551 9.95507 14 11.75 14H16.9855L18.9854 10.4001C19.2941 9.84456 19.8797 9.5 20.5152 9.5H27.4848C28.1203 9.5 28.7059 9.84456 29.0146 10.4001L31.0145 14H36.25C38.0449 14 39.5 15.4551 39.5 17.25V22.7999C40.3823 23.1255 41.2196 23.544 42 24.0436V17.25C42 14.0744 39.4256 11.5 36.25 11.5H32.4855L31.2 9.18602C30.4504 7.83679 29.0282 7 27.4848 7H20.5152Z"
                                                              fill="#212121"></path>
                                                        <path d="M24 17C27.5278 17 30.5222 19.2834 31.586 22.4529C30.7711 22.6741 29.988 22.9726 29.2451 23.34C28.5411 21.1138 26.459 19.5 24 19.5C20.9624 19.5 18.5 21.9624 18.5 25C18.5 27.6415 20.3622 29.8481 22.8454 30.3786C22.5516 31.151 22.3292 31.9587 22.1865 32.7936C18.6418 31.972 16 28.7945 16 25C16 20.5817 19.5817 17 24 17Z"
                                                              fill="#212121"></path>
                                                        <path d="M46 35C46 41.0751 41.0751 46 35 46C28.9249 46 24 41.0751 24 35C24 28.9249 28.9249 24 35 24C41.0751 24 46 28.9249 46 35ZM36 29C36 28.4477 35.5523 28 35 28C34.4477 28 34 28.4477 34 29V34H29C28.4477 34 28 34.4477 28 35C28 35.5523 28.4477 36 29 36H34V41C34 41.5523 34.4477 42 35 42C35.5523 42 36 41.5523 36 41V36H41C41.5523 36 42 35.5523 42 35C42 34.4477 41.5523 34 41 34H36V29Z"
                                                              fill="#212121"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        </label>
                                        <div class="d-none"><input type="file" name="logo" id="scaleImage"
                                                                   class="w-full cursor-pointer"></div>
                                    </div>
                                    <button type="button" id="submitBtnScale" class="theme-btn btn btn-none">
                                        Generate
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="genaretedImages"><h2>Generated Images</h2>
                            <div class="">
                                <div class="mt-3 row">
                                    <div class="mb-4 col-md-6">
                                        <div class="genrated-images">
                                            <div class="overlay"><a></a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </main>

<?php include_once WPAISAAS_PLUGIN_DIR_PATH . 'templates/partials/footer.php'; ?>