<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta http-equiv="Content-Type" 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="/RTL/superAdmin/images/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="/RTL/superAdmin/images/favicon.png" type="image/x-icon">
    <title>آنسه تیم</title>
    <!-- Google font-->
    <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="/RTL/superAdmin/css/font-awesome.css">
    <!-- ico-font-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/icofont.css">
    <!-- Themify icon-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/themify.css">
    <!-- Flag icon-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/flag-icon.css">
    <!-- Feather icon-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/feather-icon.css">
    <!-- Plugins css start-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/scrollbar.css">
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/prism.css">
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/dropzone.css">
    <!-- Plugins css Ends-->
    <!-- Bootstrap css-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/bootstrap.css">
    <!-- App css-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/style.css">
    <link id="color" rel="stylesheet" href="/RTL/superAdmin/css/color-1.css" media="screen">
    <!-- Responsive css-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/responsive.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="loader no-display"></div>

    <div class="page-body">
        <div class="container-fluid">
            <div class="page-title">
                <div class="row">
                    <div class="col-6">
                        <h3>مدیریت فایل‌های آلبوم <%= album.Name %>
                        </h3>
                    </div>
                    <div class="col-6">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/<%= lan.ShortName %>/dashboard"><i data-feather="home"></i></a></li>
                            <li class="breadcrumb-item">آلبوم ها</li>
                            <li class="breadcrumb-item"> فایل‌های آلبوم ها</li>
                            <li class="breadcrumb-item active"><%= album.Name %></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-body">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col">
                                            <div class="mb-3 row">
                                                <form style="position: relative">
                                                    <input multiple class="form-control" id="imgUploader" name="imgUploader" type="file" required style="margin-bottom: 20px;">
                                                    <!--                                                    <div class="drag-area">-->
                                                    <!--                                                        <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>-->
                                                    <!--                                                        <header>Drag & Drop to Upload File</header>-->
                                                    <!--                                                        <span>OR</span>-->
                                                    <!--                                                        <button>Browse File</button>-->
                                                    <!--                                                        <input type="file" hidden>-->
                                                    <!--                                                    </div>-->
                                                </form>
                                                <a href="/<%= lan.ShortName %>/album/list" class="btn btn-secondary col-sm-3 ">بازگشت</a>
                                                <!--                                                <button class="btn btn-primary col-sm-3 " style="margin-bottom: 10px;" id="UploadShakhes" type="button">آپلود فایل‌ها دسته بندی آلبوم</button>-->
                                                <!--                                                <div class="col-sm-9">-->
                                                <!--                                                    <input multiple class="form-control" id="imgUploader" name="imgUploader" type="file" required style="padding-right: 20px;">-->
                                                <!--                                                </div>-->

                                                <!--                                                <a href="/album/admin/list" class="btn btn-secondary col-sm-3 ">بازگشت</a>-->

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

                        </div>
                        <div class="col-sm-10" style="margin:0 auto">

                            <div class="card">
                                <div class="card-body">

                                    <div class="card-body">

                                        <div class="row" id="uploading">

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

                            </div>
                        </div>
                        <div class="col-sm-10" style="margin:0 auto">

                            <div class="card">
                                <div class="card-body">

                                    <div class="card-body">
                                        <label>فایل‌ها دسته بندی آلبوم  </label>
                                        <div class="row">
                                            <table>
                                                <thead>
                                                <tr class="border-bottom-primary" style="text-align:center">
                                                    <td>#</td>
                                                    <td>تصویر</td>
                                                    <td>حذف</td>
                                                    <td>لینک</td>
                                                </tr>
                                                </thead>
                                                <tbody id="rowImg">
                                                <% for (var i = 0 ; i < files.length; i++) { %>
                                                    <tr class="border-bottom-info" style="text-align:center">
                                                        <td><%= i+1 %></td>
                                                        <td>
                                                            <% if(files[i].Type == 0) { %>
                                                                <input type="image" src="https://ansedownload.ir/amarify.com/panel.amarify.com/album/<%= files[i].Url %>/<%= files[i].Name %>" readonly style="width:200px;height:200px;margin:10px" />
                                                            <% } else if(files[i].Type == 1) { %>
                                                                <video controls src="https://ansedownload.ir/amarify.com/panel.amarify.com/album/<%= files[i].Url %>/<%= files[i].Name %>" style="width:200px;height:200px;margin:10px" ></video>
                                                            <% } %>
                                                        </td>
                                                        <td>
                                                            <a href="/<%= lan.ShortName %>/upload/remove/<%= files[i]._id %>" class="btn btn-danger btn-xs " style="margin:0 20px 0 20px;"><i class="fa fa-trash-o"></i></a>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-info img-tag" data-file-url="<%= files[i].Url %>" data-file-name="<%= files[i].Name %>" type="button" onclick="copyText(this)" name="button">کپی لینک</button>
                                                            <div style="margin-top: 20px;text-align: center">
                                                                <form action="/<%= lan.ShortName %>/upload/edit/<%= files[i]._id %>" method="post" >
                                                                    <input multiple name="Alt" id="Alt" value="<%= files[i].Alt %>"  type="text" class="m-2" style="padding-right: 20px; display:block; width:100%">
                                                                    <input multiple name="Caption" id="Caption" value="<%= files[i].Caption %>" class="m-2"  type="text" style="padding-right: 20px; display:block; width:100%">
                                                                    <button  style="margin-top: 10px;" class="btn btn-secondary"  type="submit">ثبت</button>
                                                                </form>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                <% } %>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

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

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

        <!-- Container-fluid Ends-->
    </div>
    <!-- footer start-->
    <%- include("../partials/footer") %>
</div>
</div>
<!-- latest jquery-->
<script src="/RTL/superAdmin/js/jquery-3.5.1.min.js"></script>
<!-- Bootstrap js-->
<script src="/RTL/superAdmin/js/bootstrap/bootstrap.bundle.min.js"></script>
<!-- feather icon js-->
<script src="/RTL/superAdmin/js/icons/feather-icon/feather.min.js"></script>
<script src="/RTL/superAdmin/js/icons/feather-icon/feather-icon.js"></script>
<!-- scrollbar js-->
<script src="/RTL/superAdmin/js/scrollbar/simplebar.js"></script>
<script src="/RTL/superAdmin/js/scrollbar/custom.js"></script>
<script src="/RTL/superAdmin/js/dropzone/dropzone.js"></script>
<script src="/RTL/superAdmin/js/dropzone/dropzone-script.js"></script>
<!-- Sidebar jquery-->
<script src="/RTL/superAdmin/js/config.js"></script>
<!-- Plugins JS start-->
<script src="/RTL/superAdmin/js/sidebar-menu.js"></script>
<script src="/RTL/superAdmin/js/prism/prism.min.js"></script>
<script src="/RTL/superAdmin/js/clipboard/clipboard.min.js"></script>
<script src="/RTL/superAdmin/js/custom-card/custom-card.js"></script>
<script src="/RTL/superAdmin/js/tooltip-init.js"></script>
<!-- Plugins JS Ends-->
<!-- Theme js-->
<script src="/RTL/superAdmin/js/script.js"></script>
<!-- login js-->
<script src="/siofu/client.js"></script>
<script src="/socket.io/socket.io.js"></script>

<!-- Plugin used-->

<script>

    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 = "amarify.comhttps://ansedownload.ir/ansedownload.ir/album/"+ fileUrl +"/" + fileName;
        navigator.clipboard.writeText(url);
        alert("متن کپی شد!");
    }

    // }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>


<script>
    document.addEventListener(
        "DOMContentLoaded", function (){
            var i = 0
            var socket = io.connect();
            var siofu = new SocketIOFileUpload(socket);

            siofu.listenOnInput(document.getElementById("imgUploader"));

            siofu.addEventListener('start', function (event){
                console.log("firs file")
                console.log(event)
                console.log(event.file.name)
                $('#uploading').append('<div id="'+ event.file.lastModified +'" class="col-lg-4 col-md-6 col-12"><span class="file-name">'+ event.file.name +'</span><div class="upload-data"><div class="download-percent"></div></div></div>')
            })

            siofu.addEventListener('progress', function (event){
                var percent = (event.bytesLoaded / event.file.size) * 100;
                console.log("file is ", percent.toFixed(2), " percent loaded");
                selector = '#' + event.file.lastModified + ' > div > .download-percent '
                $(selector).css("width", percent.toFixed(2) + '%')
            })

            siofu.addEventListener("complete", function (event){
                console.log("finish")
                console.log(event)
                id = '#' + event.file.lastModified
                $('#uploading').children(id).remove()

                axios
                    .get('/<%= lan.ShortName %>/upload/addFile/<%= album._id %>/' + event.file.name )
                    .then((res) => {
                        console.log("data res");
                        console.log(res.data)
                        console.log(res.data.file)
                        if(res.data.file.Type == 0) {
                            $("#rowImg").append('<tr class="border-bottom-info" style="text-align:center"><td> # </td><td><input type="image" src="https://ansedownload.ir/amarify.com/panel.amarify.com/album/'+ res.data.file.Url +'/'+ res.data.file.Name +'" readonly style="width:200px;height:200px;margin:10px"/></td><td><a href="/<%= lan.ShortName %>/upload/remove/' + res.data.file._id + '" class="btn btn-danger btn-xs" style="margin:0 20px 0 20px;"><i class="fa fa-trash-o"></i></a></td><td><button class="btn btn-info img-tag" data-file-url="'+ res.data.file.Url +'" data-file-name="'+ res.data.file.Name +'" type="button" onclick="copyText(this)" name="button">کپی لینک</button><div style="margin-top: 20px"><form action="/<%= lan.ShortName %>/upload/edit/'+ res.data.file._id +'" method="post" ><input multiple name="Alt" id="Alt" placeholder="متن جایگزین تصویر" value="'+ res.data.file.Alt +'" type="text" class="m-2" style="padding-right: 20px; display:block; width:100%"><input placeholder="توضیحات تصویر" multiple name="Caption" id="Caption" value="'+ res.data.file.Caption +'"  type="text" class="m-2" style="padding-right: 20px; display:block; width:100%"><button style="margin-top: 10px;" class="btn btn-secondary" type="submit">ثبت</button></form></div></td></tr>')
                        } else if(res.data.file.Type == 1) {
                            $("#rowImg").append('<tr class="border-bottom-info" style="text-align:center"><td> # </td><td><video src="https://ansedownload.ir/amarify.com/panel.amarify.com/album/'+ res.data.file.Url +'/'+ res.data.file.Name +'" readonly style="width:200px;height:200px;margin:10px"></video></td><td><a href="/<%= lan.ShortName %>/upload/remove/' + res.data.file._id + '" class="btn btn-danger btn-xs" style="margin:0 20px 0 20px;"><i class="fa fa-trash-o"></i></a></td><td><button class="btn btn-info img-tag" data-file-url="'+ res.data.file.Url +'" data-file-name="'+ res.data.file.Name +'" type="button" onclick="copyText(this)" name="button">کپی لینک</button><div style="margin-top: 20px"><form action="/<%= lan.ShortName %>/upload/edit/'+ res.data.file._id +'" method="post" ><input multiple name="Alt" id="Alt" placeholder="متن جایگزین تصویر" value="'+ res.data.file.Alt +'" type="text" class="m-2" style="padding-right: 20px; display:block; width:100%"><input placeholder="توضیحات تصویر" multiple name="Caption" id="Caption" value="'+ res.data.file.Caption +'"  type="text" class="m-2" style="padding-right: 20px; display:block; width:100%"><button style="margin-top: 10px;" class="btn btn-secondary" type="submit">ثبت</button></form></div></td></tr>')
                        }
                    })
            })

        }
    )

</script>
<script>
    $("#UploadShakhes").on("click", function(){
        $(".loader").removeClass("no-display");
        $(".loader").addClass("display");
        $(".page-body").addClass("no-display");
    })
</script>
</body>
</html>
