@section('title', __('radio.menu_item_2_sub_1'))
@section('head')
    <link href="/assets/css/file-manager.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/css/player/player-style.css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <style>
        .uploadImgDiv .changeImg {
            position: absolute; top: 0;
            width: 100%; height: 100%;
            text-align: center;
            background: transparent;
            color: transparent;
            padding: 28%;
            font-weight: bold;
            cursor: pointer;
        }

        .uploadImgDiv:hover .changeImg {
            background: #239e76b5; color: white;
        }

        .uploadImgDiv .changeImg span {
            position: absolute;
            top: calc(50% - 10px);
            width: 100%; left: 0;
        }
    </style>
@endsection
@include('includes/header')
@include('includes/topRadio')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.menu_item_2_sub_1') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('radio.menu_item_2') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.menu_item_2_sub_1') }}</li>
                    </ol>
                </nav>
            </div>

        </div>
    </div>


    <div class="row">
        <div class="col-md-4">
            @if(Config::get('constants.IS_APP'))
            <button class="btnSendFiles mb-3" style=" border: none; background: #289e78; color: #fff; font-size: 21px; padding: 5px 15px; border-radius: 3px; width: 100%; ">{{ __('radio.fm_send_files') }}</button>
            @endif
            <div class="block block-rounded p-0 @if(Config::get('constants.IS_APP')) blockSend d-none @endif">
                <input type="hidden" class="curDirLoc" value=""/>
                <input type="hidden" class="cLocation" value=""/>
                <div class="block-content d-flex flex-column attachment p-0">

                    <form action="" class="dropzone files-container text-center dz-clickable">
                        <div class="dz-default dz-message">
                            <i class="uploader-icon fa fa-file-audio mb-3"></i>
                            <h6 class="mb-1">{{ __('radio.fm_dropzone_title') }}</h6>
                            <small>{{ __('radio.fm_dropzone_max_size') }}</small>
                        </div>
                    </form>

                    <div class="msgFolder t-overflow text-center d-none mb-1 mt-2 w-100">{{ __('radio.fm_uploading_to_folder') }} <b id="showCur">Músicas</b></div>

                    <div class="preview-container dz-preview uploaded-files">
                        <div id="previews">
                            <div id="preview" class="p-1">
                                <div class="dropzone-info">

                                    <div class="d-flex align-items-center flex-wrap details overflow-hidden">
                                       <div class="d-flex overflow-hidden align-items-center w-100">
                                        <div class="flex-shrink-0 thumb-container">
                                            <i class="fa fa-file-audio" style="font-size:30px"></i>
                                        </div>
                                        <span data-dz-name class="nam flex-grow-1"></span> <span data-dz-size class="siz flex-grow-2 me-2"></span>
                                           <div class="flex-shrink-3"><a href="#!" data-dz-remove=""><i class="fa fa-times"></i></a></div>
                                       </div>
                                        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                                        <div class="dz-error-message"><span data-dz-errormessage></span></div>
                                    </div>


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



                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="block block-rounded listSongs">


                <ul class="nav nav-tabs nav-tabs-block align-items-center" role="tablist">
                    <li class="nav-item navBlock01">
                        <button class="nav-link typeBtn text-md-start btnType-1 active" onclick="nav('');" id="">
                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                <div class="mb-0 text-center">
                                    <i class="fa fa-folder-open mus-color fa-2x pb-1"></i>
                                    <dt class="fs-6 fw-semibold h1-info-block01">{{ __('radio.fm_tab_musics') }}</dt>
                                </div>
                            </div>
                        </button>
                    </li>
                    <li class="nav-item navBlock01">
                        <button class="nav-link typeBtn text-md-start btnType-2" onclick="nav('Comerciais');" id="Comerciais">
                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                <div class="mb-0 text-center">
                                    <i class="fa fa-folder ann-color fa-2x pb-1"></i>
                                    <dt class="fs-6 fw-semibold h1-info-block01">{{ __('radio.fm_tab_ads') }}</dt>
                                </div>
                            </div>
                        </button>
                    </li>
                    <li class="nav-item navBlock01">
                        <button class="nav-link typeBtn text-md-start btnType-3" onclick="nav('Vinhetas');" id="Vinhetas">
                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                <div class="mb-0 text-center">
                                    <i class="fa fa-folder vin-color fa-2x pb-1"></i>
                                    <dt class="fs-6 fw-semibold h1-info-block01">{{ __('radio.library_tab_vinhetas') }}</dt>
                                </div>
                            </div>
                        </button>
                    </li>
					<li class="nav-item navBlock01">
                        <button class="nav-link typeBtn text-md-start btnType-4" onclick="nav('Podcasts');" id="Podcasts">
                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                <div class="mb-0 text-center">
                                    <i class="fa fa-folder pod-color fa-2x pb-1"></i>
                                    <dt class="fs-6 fw-semibold h1-info-block01">{{ __('radio.app_mod_podcasts') }}</dt>
                                </div>
                            </div>
                        </button>
                    </li>
                </ul>





                <div class="block-content p-0">
                    <div class="p-2 mb-0">
                        <div class="input-group">
                            <input type="text" class="form-control" id="search" placeholder="{{ __('radio.fm_search_placeholder') }}" autocomplete="off">
                        </div>
                    </div>
                    <div class="d-flex align-items-center pt-2 pb-2 topborder">
                        <div class="flex-shrink-0 ms-2 me-1">
                            <input type="checkbox" class="form-check-input checkAll">
                        </div>
                        <div class="flex-shrink-1 ms-2">
                            <i class="fa fa-folder-open me-2"></i>
                        </div>
                        <div class="flex-shrink-2 curLoc t-overflow">
                            <b class="fw-semibold text-black">Músicas</b>
                        </div>
                        <div class="ml-auto me-0 actionsPrimary">
                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#mod-newFolder">
                                <span class="mb-0 del-items">{{ __('radio.fm_new_folder') }}</span>
                            </button>
                            <button type="button" onclick="removeM()" class="btn btn-sm btn-danger btnRemoveAll disabled">
                                <span class="mb-0 del-items">{{ __('site.btn_remselect') }}</span>
                            </button>
                        </div>
                    </div>

                    <div class="fl-manager"></div>

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


</div>

</div>

</main>




<div class="modal fade" id="mod-newFolder" tabindex="-1" role="dialog" aria-labelledby="modal-block-fadein" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="block block-rounded block-transparent mb-0">
                <div class="block-header block-header-default">
                    <h3 class="block-title">{{ __('radio.fm_modal_new_folder_title') }}</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content fs-sm">

                    <div class="form-floating mb-4">
                        <input type="text" class="form-control" id="newFolderName" onkeyup="this.value = this.value.replace(/[^A-Za-z0-9\ ]/g, '')" autocomplete="off">
                        <label for="newFolderName">{{ __('radio.fm_folder_name') }}</label>
                        <div id="val-error" class="invalid-feedback invalidFol animated fadeIn"></div>
                    </div>

                </div>
                <div class="block-content block-content-full text-end bg-body">
                    <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">{{ __('site.btn_cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-primary" onclick="newFolder()">{{ __('radio.fm_btn_create') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="mod-renameFolder" tabindex="-1" role="dialog" aria-labelledby="modal-block-fadein" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="block block-rounded block-transparent mb-0">
                <div class="block-header block-header-default">
                    <h3 class="block-title">{{ __('radio.fm_modal_rename_title') }}</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content fs-sm">

                    <div class="form-floating mb-4">
                        <input type="hidden" id="locRen" value="" />
                        <input type="hidden" id="isFold" value="" />
                        <input type="text" class="form-control" id="renameFolder" onkeyup="this.value = this.value.replace(/[^A-Za-z0-9\u00C0-\u00FF\ \-()+]/g, '')" autocomplete="off">
                        <label for="newFolderName" id="newFolderName">{{ __('general.table_name') }}</label>
                        <div id="val-error" class="invalid-feedback invalidFolR animated fadeIn"></div>
                    </div>
                    <span style="text-align:center; display:block;" class="text-danger mb-2">
                      {{ __('radio.fm_rename_warning') }}
                    </span>

                </div>
                <div class="block-content block-content-full text-end bg-body">
                    <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">{{ __('site.btn_cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-primary" onclick="renameCmd()">{{ __('radio.fm_btn_rename') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="fl-player"></div>

<form action="" id="form-file">
    <input type="hidden" name="port" value="{{ $streamData->port }}"/>
    <input type="hidden" name="music_name" id="music_name"/>
    <input type='file' id='inputUploadImg' name="music_cover" style='display:none'>
</form>

@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="/assets/js/pages/hash.js"></script>
<script src="/assets/js/pages/bootbox.all.min.js"></script>
<script>
    var LNG_DROPHERE = '{{ __('site.page_post_vars_upload') }}</br><small>({{ __('site.page_post_vars_upload_2') }})</small>';
    var LNG_CANCELUP = '{{ __('site.page_post_vars_cancel') }}';
    var LNG_CANCELEDUP = '{{ __('site.page_post_vars_canceled') }}';
    var LNG_REMOVE = '{{ __('site.btn_remove') }}';
    var STORAGE_URL = 'public-contents.brascast.com';
</script>
<script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
<script src="/assets/js/pages/plugin-file-validate-type.js?t=2"></script>
<script src="/assets/js/pages/plugin-file-validate-size.js?t=2"></script>
<script>var file_srv = "{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL') }}"; var file_hash = "{{ EncryptBras($streamData->port) }}"; var PORT = '{{ $streamData->port }}';</script>
<script>
window.LNG = Object.assign(window.LNG || {}, {
    fm_readonly_tab: @json(__('radio.fm_readonly_tab')),
    fm_readonly_upload: @json(__('radio.fm_readonly_upload')),
    fm_empty_folder: @json(__('radio.fm_empty_folder')),
    fm_empty_folder_question: @json(__('radio.fm_empty_folder_question')),
    fm_empty_create_folder: @json(__('radio.fm_empty_create_folder')),
    fm_empty_help: @json(__('radio.fm_empty_help')),
    fm_no_audio_found: @json(__('radio.fm_no_audio_found')),
    fm_send_files: @json(__('radio.fm_send_files')),
    app_ads_tips_link: @json(__('radio.app_ads_tips_link')),
    playlists_action_play_autodj: @json(__('radio.playlists_action_play_autodj')),
    library_download: @json(__('radio.library_download')),
    fm_change_cover: @json(__('radio.fm_change_cover')),
    fm_generate_player: @json(__('radio.fm_generate_player')),
    fm_folder_name_required: @json(__('radio.fm_folder_name_required')),
    fm_confirm_remove_folder: @json(__('radio.fm_confirm_remove_folder')),
    fm_confirm_remove_folder_warning: @json(__('radio.fm_confirm_remove_folder_warning')),
    fm_confirm_remove_file: @json(__('radio.fm_confirm_remove_file')),
    fm_confirm_remove_file_warning: @json(__('radio.fm_confirm_remove_file_warning')),
    fm_confirm_remove_files: @json(__('radio.fm_confirm_remove_files')),
    fm_confirm_remove_files_warning: @json(__('radio.fm_confirm_remove_files_warning')),
    fm_running_action: @json(__('radio.fm_running_action')),
    fm_inject_success: @json(__('radio.fm_inject_success')),
    fm_cover_title: @json(__('radio.fm_cover_title')),
    fm_cover_specs: @json(__('radio.fm_cover_specs')),
    fm_cover_default_note: @json(__('radio.fm_cover_default_note')),
    fm_cover_error_title: @json(__('radio.fm_cover_error_title')),
    fm_cover_error_text: @json(__('radio.fm_cover_error_text')),
    fm_cover_upload_success: @json(__('radio.fm_cover_upload_success')),
    fm_search_empty: @json(__('radio.fm_search_empty')),
    fm_search_cancel: @json(__('radio.fm_search_cancel')),
    btn_remove: @json(__('site.btn_remove')),
    btn_cancel: @json(__('site.btn_cancel')),
    action_save: @json(__('site.action_save')),
});
</script>
<script src="/assets/js/pages/file-manager.js?v=1.0.129"></script>

<script>
Dropzone.autoDiscover = false;
    var previewNode = document.querySelector("#preview");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var brasDrop = $(".dropzone").dropzone({
        url: 'https://'+file_srv+'.brascast.com:8080/files/uploadFiles.php?z=pt&p='+encodeURIComponent(file_hash)+'&l='+$('.cLocation').val(),
        maxFiles: 999,
        maxFilesize: 5000,
        parallelUploads: 3,
        acceptedFiles: ".mp3",
        uploadMultiple: true,
        previewTemplate: previewTemplate,
        previewsContainer: "#previews",
        clickable: true,
        autoProcessQueue: true,
        createImageThumbnails: false,
        dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
		dictResponseError: "O limite do plano foi excedido.",
        dictCancelUploadConfirmation: 'Deseja realmente remover este arquivo da fila?',
        dictInvalidFileType: "O arquivo possui uma extensão incorreta",
        dictRemoveFileConfirmation: null,
        dictMaxFilesExceeded: "O arquivo excede o limite de 500MB",
        dictFileSizeUnits: {tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b"},
        init: function() {
            this.on("maxfilesexceeded", function(file) {
                file.previewElement.remove();
            });
            this.on("processing", function(file) {
                window.uploading = true;
                $('.listSongs').addClass('block-mode-loading-hourglass block-mode-loading');
                $('.uploader-icon').addClass('d-none');
                $('.dropzone').css({ "min-height": "60px" });
                $('.dz-message').css({ "margin": "1rem 0" });
                $('.preview-container').css({ "min-height": "405px" });

                $('.msgFolder').removeClass('d-none').addClass('d-block');
                $('#showCur').text($('.curDirLoc').val());

                this.options.url = 'https://'+file_srv+'/files/uploadFiles.php?z=pt-br&p='+encodeURIComponent(file_hash)+'&l='+$('.cLocation').val();
            });
			
			this.on('error', function(file, response) {
				Swal.fire({
				  allowEscapeKey: false,
				  allowOutsideClick:false,
				  confirmButtonText: "Entendi",
				  icon: "error",
				  title: "Oops...",
				  text: response
				});
			});
			
            this.on("complete", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    $('#previews').empty();
                    $('.preview-container').css({ "min-height": "0px" });
                    $('.msgFolder').removeClass('d-block').addClass('d-none');
                    $('.dropzone').css({ "min-height": "533px" });
                    $('.dz-message').css({ "margin": "10rem 0" });
                    $('.uploader-icon').removeClass('d-none');
                    setTimeout(() => {
                    var ret = $('.cLocation').val().split("/");
                    nav(($('.cLocation').val() == '/' ? '' : $('.cLocation').val().slice(1)),(ret.length >= 3 ? '1' : ''));
                    }, 10);
                    window.uploading = false;
                    $('.listSongs').removeClass('block-mode-loading-hourglass block-mode-loading');
                }
            });
        },
        success: function (file, resp) {
            if(!resp.error){
                this.removeFile(file);
            }else{
                var node, _i, _len, _ref, _results;
                var message = resp.info;
                file.previewElement.classList.add("dz-error");
                _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
                _results = [];
                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                    node = _ref[_i];
                    _results.push(node.textContent = message);
                }
                return _results;
            }
        }
    });

    window.onbeforeunload = function () {
        if (window.uploading) {
            return 'Você pode perder o envio dos áudios, deseja continuar?';
        }
    };

    brasDrop.on("addedfile", function(file) {
        $('.preview-container').css('visibility', 'visible');

        file.previewElement.classList.add('type-' + base.fileType(file.name)); // Add type class for this element's preview
    });

    Dropzone.prototype.cancelUpload = function (file) {
        var groupedFile, groupedFiles, _i, _j, _len, _len1, _ref;
        if (file.status === Dropzone.UPLOADING) {
            this.emit("canceled", file);
        } else if ((_ref = file.status) === Dropzone.ADDED || _ref === Dropzone.QUEUED) {
            file.status = Dropzone.CANCELED;
            this.emit("canceled", file);
            if (this.options.uploadMultiple) {
                this.emit("canceledmultiple", [file]);
            }
        }
        if (this.options.autoProcessQueue) {
            return this.processQueue();
        }
    };

    brasDrop.on("totaluploadprogress", function (progress) {

        var progr = document.querySelector(".progress .determinate");

        if (progr === undefined || progr === null) return;

        progr.style.width = progress + "%";
    });

    brasDrop.on('dragenter', function () {
        //$(target).addClass("hover");
    });

    brasDrop.on('dragleave', function () {
        //$(target).removeClass("hover");
    });

    brasDrop.on('drop', function () {
        //$(target).removeClass("hover");
    });

    brasDrop.on('addedfile', function () {

        // Remove no files notice
        $(".no-files-uploaded").slideUp("easeInExpo");

    });

    brasDrop.on('removedfile', function (file) {

        $.ajax({
            type: "POST",
            url: ($(target).attr("action")) ? $(target).attr("action") : "../../file-upload.php",
            data: {
                target_file: file.upload_ticket,
                delete_file: 1
            }
        });

        // Show no files notice
        if ( base.dropzoneCount() == 0 ) {
            $(".no-files-uploaded").slideDown("easeInExpo");
            $(".uploaded-files-count").html(base.dropzoneCount());
        }

    });

    brasDrop.on("success", function(file, response) {
        let parsedResponse = JSON.parse(response);
        file.upload_ticket = parsedResponse.file_link;


        // Make it wait a little bit to take the new element
        setTimeout(function(){
            $(".uploaded-files-count").html(base.dropzoneCount());
            console.log('Files count: ' + base.dropzoneCount());
        }, 350);


    });




var iconeInput = document.getElementById('inputUploadImg');
function iconeUploadChange(e) {
    var file = e.target.files[0]; var fr = new FileReader();
    fr.onload = onFileReaderLoadIcone; fr.readAsDataURL(file);
}
function onFileReaderLoadIcone(e) {
    var image = new Image(); image.src = e.target.result;
    image.onload = function() { var icone = e.target.result;
        $(".uploadImgDiv img").attr('src', icone);
    };
};
iconeInput.addEventListener('change',iconeUploadChange,false);

$("body").on( "click", ".uploadImgDiv", function() {
$("#inputUploadImg").trigger( "click" );
});


@if(Config::get('constants.IS_APP'))
$("body").on( "click", ".btnSendFiles", function() {
    if($('.blockSend').hasClass('d-none')){
        $('.blockSend').removeClass('d-none').addClass('d-flex');
    }else{
        $('.blockSend').removeClass('d-flex').addClass('d-none');
    }
});
@endif
</script>
</body>
</html>