<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Cuba admin is super flexible, powerful, clean &amp; modern responsive bootstrap 5 admin template with unlimited possibilities.">
    <meta name="keywords" content="admin template, Cuba admin template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="pixelstrap">
    <link rel="icon" href="/adminassets/images/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="/adminassets/images/favicon.png" type="image/x-icon">
    <title>آنسه تیم</title>
    <!-- Google font-->

    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,700,700i&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/adminassets/css/font-awesome.css">
    <!-- ico-font-->
    <link rel="stylesheet" type="text/css" href="/adminassets/css/vendors/icofont.css">
    <!-- Themify icon-->
    <link rel="stylesheet" type="text/css" href="/adminassets/css/vendors/themify.css">
    <!-- Flag icon-->
    <link rel="stylesheet" type="text/css" href="/adminassets/css/vendors/flag-icon.css">
    <!-- Feather icon-->
    <link rel="stylesheet" type="text/css" href="/adminassets/css/vendors/feather-icon.css">
    <!-- Plugins css start-->
    <link rel="stylesheet" type="text/css" href="/adminassets/css/vendors/scrollbar.css">
    <link rel="stylesheet" type="text/css" href="/adminassets/css/vendors/prism.css">
    <!-- Plugins css Ends-->
    <!-- Bootstrap css-->
    <link rel="stylesheet" type="text/css" href="/adminassets/css/vendors/bootstrap.css">
    <!-- App css-->
    <link rel="stylesheet" type="text/css" href="/adminassets/css/style.css">
    <link id="color" rel="stylesheet" href="/adminassets/css/color-1.css" media="screen">
    <!-- Responsive css-->
    <link rel="stylesheet" type="text/css" href="/adminassets/css/responsive.css">
    <link rel="stylesheet" type="text/css" href="/adminassets/css/vendors/select2.css">
  </head>
  <body class="rtl">
    <!-- tap on top starts-->
    <div class="tap-top"><i data-feather="chevrons-up"></i></div>
    <!-- tap on tap ends-->
    <!-- page-wrapper Start-->
    <div class="page-wrapper compact-wrapper" id="pageWrapper">
      <!-- Page Header Start-->

        <%- include('../../partials/header') %>

        <!-- Page Sidebar Ends-->
        <div class="page-body">
          <div class="container-fluid">
            <div class="page-title">
              <div class="row">
                <div class="col-6">
                  <h3>مدیریت آموزش ها

                    </h3>
                </div>
                <div class="col-6">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html"><i data-feather="home"></i></a></li>
                    <li class="breadcrumb-item">آموزش ها</li>
                    <li class="breadcrumb-item active">  آموزش ها</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
          <!-- Container-fluid starts-->
          <!-- Container-fluid starts-->
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-12 col-xl-12">
                <div class="row">
                  <div class="col-sm-10" style="margin:0 auto">

                    <div class="card">
                      <div class="card-header">
                        <h5>ثبت آموزش  در سامانه آنسه تیم</h5><span>برای مشاهده لیست ویژگی های آموزش ها میتوانید از  <a href="../../guideProperty/admin/list">اینجا </a> کلیک کنید</span>
                      </div>

                      <div class="card-body">
                       <form class="form-space theme-form row" action="/guide/admin/add" method="post">

                         <div class="mb-3">
                            <label class="form-label" for="">Redirect 410</label>
                            <select  name="Redirect410" id="Redirect410" class="form-select form-control-lg">
                              <option value="0" >خیر</option>
                              <option value="1" >بله</option>
                            </select>
                          </div>

                          <div class="col-sm-6">
                                <label class="form-label"> عنوان آموزش  </label>
                            <input class="form-control" name="Title" id="Title" type="text" placeholder="عنوان آموزش " maxlength="80" required oninvalid="invalidChecker(this)" oninput="invalidChecker(this)">
                          </div>

                        <div class="col-sm-6">
                          <div class="col-form-label">نوع آموزش </div>
                          <select name="GuideTypes" id="GuideTypes" class="js-example-rtl col-sm-12" multiple="multiple" required>
                            <% for (var i = 0; i < guideTypes.length; i++) { %>
                              <option value="<%= guideTypes[i]._id %>" ><%= guideTypes[i].Name %></option>
                            <%  } %>
                          </select>
                        </div>

                        <div class="col-sm-6">
                          <div class="col-form-label">خدمات مرتبط</div>
                          <select name="Services" id="Services" class="js-example-rtl col-sm-12" multiple="multiple" required>
                            <% for (var i = 0; i < services.length; i++) { %>
                              <option value="<%= services[i]._id %>" ><%= services[i].Title %></option>
                            <%  } %>
                          </select>
                        </div>

                        <div class="col-sm-6">
                              <label class="form-label">منتشرکننده</label>
                          <input class="form-control" name="MontasherKonande" id="MontasherKonande" type="text" placeholder="منتشرکننده" required oninvalid="invalidChecker(this)" oninput="invalidChecker(this)">
                        </div>

                        <div class="col-sm-6">
                           <label class="form-label" for="Rate">رتبه دهی</label>
                           <input type="text" class="form-control" id="Rate" name="Rate" placeholder="رتبه دهی" ></input>
                         </div>

                          <div class="col-sm-6">
                             <label class="form-label" for="">URL</label>
                             <input type="text" class="form-control" id="Url" name="Url" placeholder="URL" ></input>
                           </div>

                           <div class="col-sm-6">
                              <label class="form-label" for="">Redirect 301</label>
                              <input type="text" class="form-control" id="Redirect301" name="Redirect301" placeholder="New Address" ></input>
                            </div>

                           <div class="col-sm-6">
                              <label class="form-label" for="">کلمه کلیدی</label>
                              <input type="text" class="form-control" id="Keyword" name="Keyword" placeholder="کلمه کلیدی" ></input>
                            </div>

                            <div class="mb-3">
                               <label class="form-label" for="">MetaTitle</label>
                               <input type="text" class="form-control" id="MetaTitle" name="MetaTitle" placeholder="MetaTitle" ></input>
                             </div>


                          <div class="mb-3">
                             <label class="form-label" for="">MetaDescription</label>
                             <textarea class="form-control" id="MetaDescription" name="MetaDescription" placeholder="MetaDescription" required></textarea>
                           </div>

                        <div class="mb-3">
                           <label class="form-label" for="SmallCaption">توضیحات کوتاه</label>
                           <textarea class="form-control" id="SmallCaption" name="SmallCaption" placeholder="توضیحات کوتاه این آموزش  را وارد کنید" required maxlength="200"></textarea>
                         </div>
                         <div class="mb-3">
                            <label class="form-label" for="Caption">توضیحات آموزش </label>
                            <textarea class="form-control" id="Caption" name="Caption" placeholder="توضیحات این آموزش  را وارد کنید" ></textarea>
                          </div>

                           <div class="col-sm-12 m-4">
                                <a href="#" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#printModal">انتخاب تصاویر</a>
                           </div>
                           <div id="AlbumFiles">

                           </div>


                   <div class="mb-3">
                     <label class="form-label" for="content">متن آموزش </label>
                      <textarea name="content" id="editor" required>
               &lt;p&gt;This is some sample content.&lt;/p&gt;
           </textarea>
                    </div>

                   <div class="col-sm-12">
                     <button id="addTags" class="btn btn-outline-primary" type="button">جهت افزودن تگ به آموزش  کلیک کنید</button>
                   </div>

                   <!-- Tags -->
                   <div class="row rowTags" id="rowTags">
                   </div>



                   <div class="card-footer text-end">
                        <button class="btn btn-primary" type="submit">ثبت</button>
                        <a href="#" class="btn btn-secondary">بازگشت</a>
                        <a href="../../guideType/admin/list" class="btn btn-success">مشاهده دسته بندی آموزش ها</a>
                      </div>
                        </form>

                      </div>

                    </div>
                  </div>
                </div>
              </div>
                 <div class="col-sm-12">
                <div class="card">
                  <div class="card-header">
                    <h5>مشاهده لیست آموزش ها آنسه تیم </h5>
                  </div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr class="border-bottom-primary" style="text-align:center">
                          <th scope="col"></th>
                          <th scope="col"> عنوان آموزش </th>
                          <th scope="col"> دسته بندی آموزش  </th>
                          <th scope="col">توضیحات کوتاه</th>
                          <th scope="col">امتیاز</th>
                          <th scope="col">تصاویر</th>
                          <th scope="col">ویدئوها</th>
                          <th scope="col">ویرایش</th>
                          <th scope="col">تایید جهت نمایش</th>
                          <th scope="col">حذف</th>
                        </tr>
                      </thead>
                      <tbody>

                      <% for (var i = 0; i < guides.length; i++) { %>
                        <tr class="border-bottom-info" style="text-align:center">
                          <th scope="row"><%= i+1 %></th>
                          <td><%= guides[i].Title %></td>
                          <td><%= guides[i].GuideTypes[0].Name %></td>
                          <td><%= guides[i].SmallCaption.slice(0,25) %></td>
                          <td><%= guides[i].Rate %></td>
                          <td><a href="/guide/admin/uploadimage/<%= guides[i]._id %>" class="btn btn-square btn-primary-gradien"><i class="fa-regular fa-image"></i></a></td>
                          <td><a href="/guide/admin/uploadmedia/<%= guides[i]._id %>" class="btn btn-square btn-primary-gradien"><i class="fa-solid fa-film"></i></a></td>
                       <td><a href="/guide/admin/edit/<%= guides[i]._id %>" class="btn btn-square btn-primary-gradien"><i class="fa fa-edit"></i></a></td>
                       <% if(guides[i].Show == true) { %>
                         <td><a href="/guide/admin/verify/false/<%= guides[i]._id %>" class="btn btn-square btn-success-gradien"><i class="fa-solid fa-check"></i></a></td>
                       <% } else { %>
                         <td><a href="/guide/admin/verify/true/<%= guides[i]._id %>" class="btn btn-square btn-warning-gradien"><i class="fa-solid fa-xmark"></i></a></td>
                       <% } %>
                         <td><a href="/guide/admin/remove/<%= guides[i]._id %>" class="btn btn-square btn-success-gradien"><i class="fa fa-trash-o"></i></a></td>
                             <% } %>

                        </tr>

                      </tbody>
                    </table>

                    <nav aria-label="...">
                      <ul class="pagination pagination-primary m-3">
                        <li class="page-item"><a class="page-link" href="javascript:void(0)">بعدی</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                        <li class="page-item "><a class="page-link" href="javascript:void(0)">2 <span class="sr-only">(current)</span></a></li>
                        <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li>
                        <li class="page-item disabled"><a class="page-link" href="javascript:void(0)" tabindex="-1">قبلی</a></li>
                      </ul>
                    </nav>
                    </div>
                </div>
              </div>

          </div>

          </div>
          <!-- Container-fluid Ends-->

          <!-- Container-fluid Ends-->
        </div>
        <!-- popup -->
        <div class="modal fade modal-bookmark" id="printModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">انتخاب عکس</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body list-persons" id="showAlbums">
                        <% for(var i=0; i < albums.length; i++) { %>
                            <div class="profile-mail pt-0" id="DivIdToPrint" style="width: 15%; display: inline-block;">
                                <div class="media">
                                    <div onclick="showSubAlbums(this)" data-id="<%= albums[i]._id %>" data-parent="<%= albums[i].Parent %>">
                                        <img class="img-fluid" src="/assets/img/image/video-file.png" alt="">
                                    </div>

                                    <div class="media-body mt-0 text-center">
                                        <p class="m-0"><%= albums[i].Name %></p>
                                    </div>
                                </div>

                            </div>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
        <!-- popup-->

        <%- include("../../partials/footer") %>
      </div>
    </div>
    <!-- latest jquery-->
    <script src="/adminassets/js/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap js-->
    <script src="/adminassets/js/bootstrap/bootstrap.bundle.min.js"></script>
    <!-- feather icon js-->
    <script src="/adminassets/js/icons/feather-icon/feather.min.js"></script>
    <script src="/adminassets/js/icons/feather-icon/feather-icon.js"></script>
    <!-- scrollbar js-->
    <script src="/adminassets/js/scrollbar/simplebar.js"></script>
    <script src="/adminassets/js/scrollbar/custom.js"></script>
    <!-- Sidebar jquery-->
    <script src="/adminassets/js/config.js"></script>
    <!-- Plugins JS start-->
    <script src="/adminassets/js/sidebar-menu.js"></script>
    <script src="/adminassets/js/prism/prism.min.js"></script>
    <script src="/adminassets/js/clipboard/clipboard.min.js"></script>
    <script src="/adminassets/js/custom-card/custom-card.js"></script>
    <script src="/adminassets/js/tooltip-init.js"></script>
    <!-- Plugins JS Ends-->
    <!-- Theme js-->
    <script src="/adminassets/js/script.js"></script>
    <!-- login js-->
    <!--error message for inputs-->
    <script src="/adminassets/js/input-error.js"></script>
    <script src="/adminassets/js/tiny/tinymce.min.js"></script>
    <!-- Plugin used-->
    <script src="/adminassets/js/select2/select2.full.min.js"></script>
    <script src="/adminassets/js/select2/select2-custom.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<!-- script pop up -->
    <script>

        var albumFilesData = []
        function showSubAlbums(albums) {
            console.log(albums)
            console.log(albums.getAttribute("data-id"))

            var album = albums.getAttribute("data-id")
            var albumParent = albums.getAttribute("data-parent")

            axios
                .get('/album/admin/getsubalbums/' + album)
                .then((res) => {
                    console.log(res.data)
                    albumFilesData = res.data.files
                    console.log("albumFilesData")
                    console.log(albumFilesData)
                    $("#showAlbums").empty()
                    for(var i=0; i < res.data.albums.length; i++) {
                        console.log("hi")
                        console.log(res.data.albums[i])
                        $('#showAlbums').append('<div class="profile-mail pt-0" id="DivIdToPrint" style="width: 15%; display: inline-block;"><div class="media"><div onclick="showSubAlbums(this)" data-id="'+ res.data.albums[i]._id +'"><img class="img-fluid" src="/assets/img/image/video-file.png" alt=""></div><div class="media-body mt-0 text-center"> <p class="m-0">'+ res.data.albums[i].Name +'</p></div></div></div>')
                    }
                    for(var i=0; i < res.data.files.length; i++) {
                        if(res.data.files[i].Type == 0) {
                            $('#showAlbums').append('<div onclick="selectFile(this)" data-id="'+ i +'" class="profile-mail m-2 p-0 fileslist" style="width: 15%; max-height: 75px; display: inline-block;"><img style="width: 100%; " src="/assets/file/album/'+ res.data.files[i].Url +'/'+ res.data.files[i].Name +'"></div>')
                        } else if(res.data.files[i].Type == 1) {
                            $('#showAlbums').append('<div onclick="selectFile(this)" data-id="'+ i +'" class="profile-mail m-2 p-0 fileslist" style="width: 15%; max-height: 75px; display: inline-block;"><video style="width: 100%; " src="/assets/file/album/'+ res.data.files[i].Url +'/'+ res.data.files[i].Name +'"></video></div>')
                        }
                    }
                    // $('#showAlbums').append('<button class="btn btn-primary d-block" onclick="returnfunction('+ albumParent +')" type="button" data-bs-dismiss="modal">بازگشت</button>')
                })
        }

        // $(".fileslist").click(function () {
        //     console.log("helloooooo")
        //     if($(this).hasClass(active)){
        //         console.log("hello")
        //     } else {
        //         $(this).addClass('active')
        //         var file = files.getAttribute("data-id")
        //
        //         $('#AlbumFiles').append('<input type="text" class="d-none" value="'+ file +'" />')
        //     }
        // })

        function selectFile(files){
            console.log(files)
            console.log(files.classList.contains("activefile"))
            var index = files.getAttribute("data-id")

            if(files.classList.contains("activefile")) {
                console.log("have class")
                files.classList.remove("activefile")
                $("#" + albumFilesData[index]._id).remove()
            } else {
                files.classList.add("activefile")

                if(albumFilesData[index].Type == 0) {
                    $('#AlbumFiles').append('<div id="'+ albumFilesData[index]._id +'" class="profile-mail m-2 p-0" style="width: 15%; max-height: 75px; display: inline-block;"><input type="text" name="Files" id="Files" class="d-none" value="'+ albumFilesData[index]._id +'" /><img style="width: 100%; " src="/assets/file/album/'+ albumFilesData[index].Url +'/'+ albumFilesData[index].Name +'"><button class="btn btn-info img-tag m-2" data-file-url="'+ albumFilesData[index].Url +'" data-file-name="'+ albumFilesData[index].Name +'" type="button" onclick="copyText(this)" name="button">کپی لینک</button></div>')
                } else if(albumFilesData[index].Type == 1){
                    $('#AlbumFiles').append('<div id="'+ albumFilesData[index]._id +'" class="profile-mail m-2 p-0" style="width: 15%; max-height: 75px; display: inline-block;"><input type="text" name="Files" id="Files" class="d-none" value="'+ albumFilesData[index]._id +'" /><video style="width: 100%; " src="/assets/file/album/'+ albumFilesData[index].Url +'/'+ albumFilesData[index].Name +'"></video><button class="btn btn-info img-tag m-2" data-file-url="'+ albumFilesData[index].Url +'" data-file-name="'+ albumFilesData[index].Name +'" type="button" onclick="copyText(this)" name="button">کپی لینک</button></div>')
                }
            }

        }

        function copyText(copybtn){
            console.log("copybtn")
            console.log(copybtn);

            var fileUrl = copybtn.getAttribute("data-file-url");
            var fileName = copybtn.getAttribute("data-file-name");

            console.log("fileUrl")
            console.log(fileUrl)

            console.log("fileName")
            console.log(fileName)

            var url = "/assets/file/album/"+ fileUrl +"/" + fileName;
            navigator.clipboard.writeText(url);
            alert("متن کپی شد!");
        }

        // function returnfunction(album) {
        //     axios
        //         .get('/album/admin/getsubalbums/' + album)
        //         .then((res) => {
        //             console.log(res.data)
        //             $("#showAlbums").empty()
        //             for(var i=0; i < res.data.albums.length; i++) {
        //                 console.log("hi")
        //                 console.log(res.data.albums[i])
        //                 $('#showAlbums').append('<div class="profile-mail pt-0" id="DivIdToPrint" style="width: 15%; display: inline-block;"><div class="media"><div onclick="showSubAlbums(this)" data-id="'+ res.data.albums[i]._id +'"><img class="img-fluid" src="/assets/img/image/video-file.png" alt=""></div><div class="media-body mt-0 text-center"> <p class="m-0">'+ res.data.albums[i].Name +'</p></div></div></div>')
        //             }
        //             for(var i=0; i < res.data.files.length; i++) {
        //                 if(res.data.files[i].Type == 0) {
        //                     $('#showAlbums').append('<div class="profile-mail pt-0" id="DivIdToPrint" style="width: 15%; display: inline-block;"><img style="width: 100%; " src="/assets/file/album/'+ res.data.files[i].Url +'/'+ res.data.files[i].Name +'"></div>')
        //                 } else if(res.data.files[i].Type == 1) {
        //                     $('#showAlbums').append('<div class="profile-mail pt-0" id="DivIdToPrint" style="width: 15%; display: inline-block;"><video src="/assets/file/album/'+ res.data.files[i].Url +'/'+ res.data.files[i].Name +'"></video></div>')
        //                 }
        //             }
        //             $('#showAlbums').append('<button class="btn btn-primary d-block" onclick="returnfunction('+ albumParent, album +')" type="button" data-bs-dismiss="modal">بازگشت</button>')
        //         })
        // }

    </script>

    <script>
    $(document).ready(function() {
	$('#addTags').click(function() {
		//        $("#propertyField").clone().appendTo("#rowProperties");
		$('#rowTags').append(
			"<div class='col-sm-6'><a class='removeTag'><i class='fa fa-trash-o'></i></a><input class='form-control' name='Tags' id='Tags' type='text' placeholder='متن تگ را وارد کنید '></div>"
		);
	});
	//$(".removeproperty").click(function(e) {
	//    alert('salam')
	////    e.preventDefault();
	//    $(this).parent().parent().remove();
	//});

	$('#rowTags').on('click', 'div a.removeTag', function() {
		$(this).parent().remove();
	});

        // $('#').on('click', function() {
        //
        //     console.log("hiiiii")
        // });
});
</script>

<script>
    tinymce.init({ selector: '#editor',
      plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
      toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    });
  </script>

  </body>
</html>
