@extends('layouts.app')

@section('page-title')
    <div class="bg-title d-flex flex-wrap align-items-center justify-content-between">
        <h4 class="page-title">
            <i class="{{ $pageIcon }}"></i> @lang($pageTitle)
        </h4>
    </div>
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/dropzone-master/dist/dropzone.css') }}">
    <style>
        .file-bg {
            height: 150px;
            overflow: hidden;
            position: relative;
        }
        .file-bg .overlay-file-box {
            opacity: .9;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            text-align: center;
        }
    </style>
@endpush

@section('content')
    <div class="dash_panel">
        <div class="customCard">
            <h4>@include('sections.module_setting_menu')
            <h4>@lang("app.menu.customModule")</h4>
            
            <a href="{{ route('custom-modules.index') }}" class="themeBtn yellowBtn">
                <i class="fa fa-arrow-left"></i> @lang('app.back')
            </a>
            
            <div class="alert alert-danger m-t-20">
                @lang("messages.loginAgain")
            </div>
            
            <div class="panel-group m-t-20">
                <div class="panel panel-default">
                    <div class="panel-heading">Step 1</div>
                    <div class="panel-body">
                        <form action="{{ route('update-settings.store') }}" class="dropzone" id="file-upload-dropzone">
                            {{ csrf_field() }}
                            <div class="fallback">
                                <input name="file" type="file" multiple />
                            </div>
                        </form>
                    </div>
                </div>
                
                <div id="install-process" class="m-t-20"></div>
                
                <div class="panel panel-default m-t-20">
                    <div class="panel-heading">Step 2: @lang('modules.update.moduleFile')</div>
                    <div class="panel-body">
                        <ul class="list-group" id="files-list">
                            @foreach (\Illuminate\Support\Facades\File::files($updateFilePath) as $key=>$filename)
                                @if (\Illuminate\Support\Facades\File::basename($filename) != "modules_statuses.json" && strpos(\Illuminate\Support\Facades\File::basename($filename), 'auto') === false)
                                    <li class="list-group-item" id="file-{{ $key+1 }}">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                {{ \Illuminate\Support\Facades\File::basename($filename) }}
                                                <small class="d-block text-muted">
                                                    Uploaded: {{ \Carbon\Carbon::parse(\Illuminate\Support\Facades\File::lastModified($filename))->format('jS F, Y g:i:s a')}}
                                                </small>
                                            </div>
                                            <div>
                                                <button type="button" class="themeBtn greenBtnSoft install-files" 
                                                    data-file-no="{{ $key+1 }}" 
                                                    data-file-path="{{ $filename }}">
                                                    @lang('modules.update.install') <i class="fa fa-refresh"></i>
                                                </button>
                                                <button type="button" class="themeBtn redBtnOutline delete-files" 
                                                    data-file-no="{{ $key+1 }}" 
                                                    data-file-path="{{ $filename }}">
                                                    @lang('app.delete') <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/dropzone-master/dist/dropzone.js') }}"></script>
<script type="text/javascript">
    // "myAwesomeDropzone" is the camelized version of the HTML element's ID
    Dropzone.options.fileUploadDropzone = {
        paramName: "file", // The name that will be used to transfer the file
//        maxFilesize: 2, // MB,
        dictDefaultMessage: "Upload or drop the downloaded file here",
        accept: function (file, done) {
            done();
        },
        init: function () {
            this.on("success", function (file, response) {
                var viewName = $('#view').val();
                if(viewName == 'list') {
                    $('#files-list-panel ul.list-group').html(response.html);
                } else {
                    $('#thumbnail').empty();
                    $(response.html).hide().appendTo("#thumbnail").fadeIn(500);
                }
                window.location.reload();
            })
        }
    };

    var updateAreaDiv = $('#update-area');
    var refreshPercent = 0;
    var checkInstall = true;

    function checkIfFileExtracted(){
        $.easyAjax({
            type: 'GET',
            url: '{!! route("updateVersion.checkIfFileExtracted") !!}',
            success: function (response) {
                if(response.status =='success') {
                    checkInstall = false;
                    $('#download-progress').append("<br><i><span class='text-success'>Installed successfully. Reload page to see the changes.</span>.</i>");
                    window.location.reload();
                }
            }
        });
    }

    $('.install-files').click(function(){
            $('#install-process').html('<div class="alert alert-info ">Installing...Please wait (This may take few minutes.)</div>');

            let filePath = $(this).data('file-path');
            $.easyAjax({
                type: 'POST',
                url: '{!! route("custom-modules.store") !!}',
                data: {"_token": "{{ csrf_token() }}", filePath: filePath},
                success: function (response) {
                    if(response.status ==='success'){
                        $('#download-progress').append("<br><i><span class='text-success'>Installed successfully. Reload page to see the changes.</span>.</i>");
                        window.location.reload();
                    }
                }
            });
        });

        $('.delete-files').click(function(){
            let filePath = $(this).data('file-path');
            let fileNumber = $(this).data('file-no');

            swal({
                title: "@lang('messages.sweetAlertTitle')",
                text: "@lang('messages.removeFileText')",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "@lang('messages.confirmDelete')",
                cancelButtonText: "@lang('messages.confirmNoArchive')",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function (isConfirm) {
                if (isConfirm) {

                    $.easyAjax({
                        type: 'POST',
                        url: '{!! route("update-settings.deleteFile") !!}',
                        data: {"_token": "{{ csrf_token() }}", filePath: filePath},
                        success: function (response) {
                            $('#file-'+fileNumber).remove();
                        }
                    });
                }
            });
        });
</script>
@endpush