<?php require_once ('model.php');
$url = isset($_GET['url']) ? $_GET['url'] : '';
$segments = explode('/', $url);
$id = get_id($segments[3]);
$post = post($id);
$featuresData = json_decode($post['features'], true);
?>
<div class="row">
    <div class="col-xxl-12">
        <div class="alert alert-primary alert-border-left alert-dismissible fade show lang_alert" role="alert" >
            <i class="ri-error-warning-line me-3 align-middle fs-16"></i>
            <?=lang('form_editing_lang')?> <?=lang_name($post['lang'])?>
        </div>
    </div>
</div>
<form action="<?=ADMIN_URL?>/update" class="needs-validation" novalidate method="POST" id="features_form">
    <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']['value']; ?>">
    <input type="hidden" name="model" value="<?=$model?>">
    <input type="hidden" name="id" value="<?=$id?>">
    <input type="hidden" name="lang_ref_id" value="<?=$post['lang_ref_id']?>">
    <input type="hidden" name="lang" value="<?=$post['lang']?>">
    <div class="row">
        <div class="col-xxl-10">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1 text-muted"><?=lang('form_detail')?></h4>
                </div><!-- end card header -->
                <div class="card-body">
                    <div class="live-preview">
                        <div class="row">


                            <div class="col-md-12">
                                <div class="mb-3 input-group-v ">
                                    <label for="title" class="form-label"><?=lang('form_input_title')?></label>
                                    <input type="text" name="title"  class="form-control input-group-flat" value="<?=$post['title']?>" placeholder="<?=lang('form_input_title_placeholder')?>" id="title" required>
                                    <div class="invalid-feedback">
                                        <?=lang('form_vali_title')?>
                                    </div>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="sef" class="form-label"><?=lang('form_input_sef')?></label>
                                    <div class="input-group sef">
                                        <span class="input-group-text border-end-0 " style="background: none" id="sef"><?=DOMAIN?>/</span>
                                        <input type="text" name="sef" class="form-control  input-group-flat border-start-0" id="slug"  value="<?=$post['sef']?>" required>
                                        <div class="invalid-feedback">
                                            <?=lang('form_vali_sef')?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3 input-group-v ">
                                    <label for="description" class="form-label"><?=lang('table_description')?></label>
                                    <textarea class="form-control input-group-flat " name="description" maxlength="400" placeholder="<?=lang('table_description')?>" id="description" ><?=$post['description']?></textarea>
                                    <p class="character_count">Kalan Karakter: <small id="description_Remaining">400</small></p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1"><?=lang('social_media_title')?> & <?=lang('personal_information_title')?></h4>
                </div><!-- end card header -->
                <div class="card-body">

                    <div class="live-preview">
                    </div>
                    <div class=" code-view">
                        <hr>
                        <div class="row" id="featuresInputs">
                            <div class="col-md-12">
                                <div class="mb-3 input-group-v">
                                    <label for="job" class="form-label"><?=lang('form_input_job')?></label>
                                    <input type="text" name="job"  class="form-control input-group-flat" id="job"  value="<?=$featuresData['job']?>"  placeholder="<?=lang('form_input_job_placeholder')?>" required>
                                </div>
                                <div class="mb-3 input-group-v">
                                    <label for="facebook" class="form-label">Facebook</label>
                                    <input type="text" name="facebook"  class="form-control input-group-flat" placeholder="https://facebook.com/@username" value="<?=$featuresData['facebook']?>">
                                </div>
                                <div class="mb-3 input-group-v">
                                    <label for="twitter" class="form-label">Twitter</label>
                                    <input type="text" name="twitter"  class="form-control input-group-flat" placeholder="https://twitter.com/@username" value="<?=$featuresData['twitter']?>">
                                </div>
                                <div class="mb-3 input-group-v">
                                    <label for="instagram" class="form-label">Instagram</label>
                                    <input type="text" name="instagram"  class="form-control input-group-flat" placeholder="https://instagram.com/@username" value="<?=$featuresData['instagram']?>">
                                </div>
                                <div class="mb-3 input-group-v">
                                    <label for="pinterest" class="form-label">Pinterest</label>
                                    <input type="text" name="pinterest"  class="form-control input-group-flat" placeholder="https://pinterest.com/@username" value="<?=$featuresData['pinterest']?>">
                                </div>

                            </div>

                        </div>
                        <input type="hidden" name="featuresData" id="featuresData">

                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1"><?=lang('page_preview')?></h4>
                </div><!-- end card header -->
                <div class="card-body">

                    <div class="live-preview">
                        <div class="card style-1">
                            <div class="card-body ">
                                <div class="row p-0">
                                    <div class="col-md-12">
                                        <div class="preview_frame_wrapper loading left">

                                            <div class="preview_frame_container preview-in-self" style=" overflow: auto; w">
                                                <iframe id="preview" src="<?=ADMIN_URL?>/<?=$model?>/preview/<?=$post['id']?>" class="preview_frame" tabindex="-1" allowfullscreen></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1"><?=lang('seo_title')?></h4>
                    <div class="flex-shrink-0">
                        <div class="form-check form-switch form-switch-right form-switch-md">
                            <label for="vertical-form-showcode" class="form-label text-muted show-seo"><?=lang('show_seo')?></label>
                            <input class="form-check-input code-switcher" type="checkbox"  <?php if ($post['seo_title'] or $post['seo_description'] or $post['seo_keywords']){echo  'checked';} ?>
                                   id="vertical-form-showcode">
                        </div>
                    </div>
                </div><!-- end card header -->
                <div class="card-body">
                    <div class="seo-preview">
                        <p class="default-seo-description hidden">
                            <?=lang('seo_desc')?>
                        </p>
                        <div class="existed-seo-meta ">
                            <span class="page-title-seo" id="seo_title_preview"><?php echo $post['seo_title'] ? $post['seo_title'] : $post['title'] ; ?></span>
                            <div class="page-url-seo ws-nm">
                                <p><?=DOMAIN?>/<span id="seo_link_preview"><?=$post['sef']?></span></p>
                            </div>
                            <div>
                                <span style="color: #70757a;"><?=m_date_tr($db->now())?> - </span>
                                <span id="seo-description-preview"><?php echo $post['seo_description'] ? $post['seo_description'] : mb_substr($post['description'],0,160, 'UTF-8') ; ?></span>
                            </div>
                        </div>
                    </div>
                    <div class="live-preview">
                    </div>
                    <div class="  <?php if (!$post['seo_title'] and !$post['seo_description'] and !$post['seo_keywords']) {?> d-none <?php } ?> code-view">
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3 input-group-v ">
                                    <label for="seo_title" class="form-label"><?=lang('form_input_seo_title')?></label>
                                    <input type="text" name="seo_title"  class="form-control input-group-flat" maxlength="60" value="<?=$post['seo_title']?>"  placeholder="<?=lang('form_input_seo_title_placeholder')?>" id="seo_title" >
                                    <p class="character_count">Kalan Karakter: <small id="seo_title_Remaining"><?= 60-mb_strlen($post['seo_title'], 'UTF-8') ?></small></p>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="mb-3 input-group-v ">
                                    <label for="seo_description" class="form-label"><?=lang('form_input_seo_description')?></label>
                                    <textarea class="form-control input-group-flat " name="seo_description" maxlength="160"   placeholder="<?=lang('form_input_seo_description_placeholder')?>" id="seo_description"><?=$post['seo_description']?></textarea>
                                    <p class="character_count">Kalan Karakter: <small id="seo_description_Remaining"><?= 160-mb_strlen($post['seo_description'], 'UTF-8') ?></small></p>

                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3 input-group-v ">
                                    <label for="seo_keywords" class="form-label"><?=lang('form_input_seo_keywords')?></label>
                                    <input class="form-control input-group-flat" id="seo_keywords" data-choices="" data-choices-limit="3" data-choices-removeitem="" type="text" value="<?=$post['seo_keywords']?>">

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- end col -->

        <div class="col-xxl-2">
            <div class="card card-body">
                <h4 class="card-title  flex-grow-1 text-muted"><?=lang('published')?></h4>
                <hr>
                <div class="saved">
                    <a class="btn btn-success" href="<?=ADMIN_URL?>/editor/<?=$post['id']?>" target="_blank">
                        <span class="icon-tabler-wrapper icon-left">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="currentColor" d="M21 13.1c-.1 0-.3.1-.4.2l-1 1l2.1 2.1l1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8l-6.1 6V23h2.1l6.1-6.1zM21 3h-8v6h8zm-2 4h-4V5h4zm-6 11.06V11h8v.1c-.76 0-1.43.4-1.81.79L18.07 13H15v3.07zM11 3H3v10h8zm-2 8H5V5h4zm2 9.06V15H3v6h8zM9 19H5v-2h4z"/>
                            </svg>
                        </span>
                        <?=lang('editor.window_title')?>
                    </a>
                </div>
                <div class="saved">
                    <button class="btn btn-primary" type="submit" value="save_and_edit" name="save_and_edit">
                <span class="icon-tabler-wrapper icon-left">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
                      <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
                      <path d="M14 4l0 4l-6 0l0 -4"></path>
                    </svg>
                </span>
                        <?=lang('save_and_edit')?>
                    </button>
                    <button class="btn btn-light" type="submit" name="save" value="save">
                <span class="icon-tabler-wrapper icon-left">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-transfer-in" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M4 18v3h16v-14l-8 -4l-8 4v3"></path>
                      <path d="M4 14h9"></path>
                      <path d="M10 11l3 3l-3 3"></path>
                    </svg>
                </span>
                        <?=lang('save')?>
                    </button>
                </div>
            </div>

            <div class="card card-body">
                <h4 class="card-title  flex-grow-1 text-muted"><?=lang('status')?></h4>
                <hr>
                <select class="form-select mb-3" name="status">
                    <option <?php echo ($post['status'] == 1) ? 'selected="selected"' : ''; ?> value="1"><?=lang('status_option_published')?> </option>
                    <option <?php echo ($post['status'] == 2) ? 'selected="selected"' : ''; ?> value="2"><?=lang('status_option_draft')?> </option>
                    <option <?php echo ($post['status'] == 0) ? 'selected="selected"' : ''; ?> value="0"><?=lang('status_option_unpublished')?> </option>
                </select>
            </div>
            <div class="card card-body">
                <h4 class="card-title  flex-grow-1 text-muted"><?=lang('page_title_languages')?></h4>
                <hr>
                <div class="list-others-language">
                    <?php foreach (posts_langs($post['lang_ref_id'], lang_is_default('lang_code')) as $posts_lang){
                        if ($posts_lang['lang'] != $post['lang']) {
                            ?>
                            <a class="gap-2 d-flex align-items-center text-decoration-none" href="<?=$posts_lang['id']?>" target="_blank">
                                <img src="<?=ADMIN_FOLDER?>/model/languages/flags/<?=$posts_lang['lang']?>.svg" title="<?=lang_name($posts_lang['lang'])?>" class="flag" style="height: 16px" alt="<?=lang_name($posts_lang['lang'])?> Bayrak">
                                <span><?=lang_name($posts_lang['lang'])?> <span class="icon-tabler-wrapper"><i class="bx bx-edit"></i></span></span>
                            </a>
                        <?php }} ?>
                </div>
            </div>
            <div class="card card-body">
                <h4 class="card-title  flex-grow-1 text-muted"><?=lang('page_title_project_categories') ?></h4>
                <hr>
                <div id="categoryContainer" class="form-select mb-3">
                    <div class="selected-option"><?=lang('form_input_category_select')?> </div>
                    <div class="options-list">
                        <?php
                        function display_category_options($categories, $parent_id = 0, $level = 0) {
                            foreach ($categories as $category) {
                                if ($category['parent_id'] == $parent_id) {
                                    $indent = str_repeat('&nbsp;', $level * 1);
                                    ?>
                                    <div class="option" data-value="<?= $category['id'] ?>" data-level="<?= $level ?>">
                                        <?= $indent . $category['title'] ?>
                                    </div>
                                    <?php
                                    display_category_options($categories, $category['id'], $level + 1);
                                }
                            }
                        }
                        $categories = posts('data', 'team_categories', $post['lang']);
                        display_category_options($categories);
                        ?>
                    </div>
                    <input type="hidden" name="category_id" id="selectedCategory" value="<?=$post['category_id']?>">
                </div>
            </div>
            <div class="card card-body">
                <div class="mb-3">
                    <label for="title" class="form-label"><?=lang('table_image')?></label>
                    <?php
                        if ($post['image']){
                    ?>
                            <input type="hidden"  data-v-image name="image" id="featured-image-input" value="<?=$post['image']?>">
                            <img data-v-image src="<?=DOMAIN?>/media<?=$post['image']?>" alt="" id="featured-image-thumb"  data-media-gallery data-target-input="#featured-image-input" data-target-thumb="#featured-image-thumb" data-type="single" class="img-thumbnail border-0 p-0 bg-light-subtle">
                    <?php
                        }else{
                            ?>
                            <input type="hidden"  data-v-image name="image" id="featured-image-input" value="">
                            <img data-v-image src="<?=ADMIN_THEME_URL?>/assets/images/placeholder.svg" alt="" id="featured-image-thumb"  data-media-gallery data-target-input="#featured-image-input" data-target-thumb="#featured-image-thumb" data-type="single" class="img-thumbnail border-0 p-0 bg-light-subtle">
                            <?php
                        }
                    ?>
                    <div class="py-3 text-center">
                        <div class="btn-group w-100">
                            <button type="button" class="btn btn-primary btn-icon btn-sm w-100" data-media-gallery data-target-input="#featured-image-input" data-target-thumb="#featured-image-thumb" data-type="single">
                                <i class="la la-image la-lg"></i> <?=lang('set_media')?>
                            </button>

                            <button type="button" class="btn btn-outline-secondary btn-icon btn-sm" onclick="clearFeaturedMedia()">
                                <i class="la la-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- end col -->
    </div>


</form>