@extends('decorator.console')

@section('page-title')
    File Backup (FTP)
@stop

@section('html-head')
    <meta name="menu" content="systemAdministrationMenu">
@stop

@section('page-wrapper')
    <div class="clear-normal"></div>
    @include('console.tab_backup')

    <div class="row">
        <div class="col-md-12">
            <h1 class="page-header"> {{ trans('fileBackup.detail.heading') }} </h1>
            <p> {{ trans('fileBackup.detail.message') }} </p>
            <ol class="breadcrumb breadcrumb-dark col-md-12">
                <li><a href="{{ url('/console/dashboard') }}"> {{ trans('breadcrumb.dashboard') }} </a></li>
                <li class="active"> {{ trans('breadcrumb.systemAdministration.fileBackup') }} </li>
            </ol>
        </div>
    </div>

    <form id="fileBackupForm" class="well form-horizontal" action="{{ url('/console/fileBackup') }}"
        method="post" enctype="multipart/form-data">

        <div class="form-group">
            <label class="col-md-2 control-label">
            </label>
            <div class="col-md-10">
                <input id="active" name="active" type="checkbox" style="display: none;"
                       @if($active) checked @endif />
            </div>
        </div>

        <div class="form-group">
            <label for="type" class="col-md-2 control-label">fileBackup.type</label><div class="col-md-10">
                <select id="type" name="type" class="form-control" readonly="readonly"><option value="HOURLY">Every Hour</option><option value="THREE_HOUR">Every Three Hours (starting at 00:00)</option><option value="SIX_HOUR">Every Six Hours (starting at 00:00)</option><option value="TWELVE_HOUR" selected="selected">Every Twelve Hours (starting at 00:00)</option><option value="DAILY">Every Day (at 00:00)</option><option value="MONTHLY">Every 1st day of Month (at 00:00)</option></select></div>
        </div>

        <div class="form-group">
            <label for="server" class="col-md-2 control-label">fileBackup.server</label><div class="col-md-10">
                <input id="server" name="server" class="form-control" type="text" value="127.0.0.1" maxlength="250" readonly="readonly"></div>
        </div>

        <div class="form-group">
            <label for="port" class="col-md-2 control-label">fileBackup.port</label><div class="col-md-10">
                <input id="port" name="port" class="form-control" type="text" value="21" maxlength="250" readonly="readonly"></div>
        </div>

        <div class="form-group">
            <label for="username" class="col-md-2 control-label">fileBackup.username</label><div class="col-md-10">
                <input id="username" name="username" class="form-control" type="text" value="username" maxlength="250" readonly="readonly"></div>
        </div>

        <div class="form-group">
            <label for="password" class="col-md-2 control-label">fileBackup.password</label><div class="col-md-10">
                <input id="password" name="password" class="form-control" type="password" value="password" readonly="readonly"></div>
        </div>

        <div class="form-group">
            <label for="remoteDirPath" class="col-md-2 control-label">fileBackup.remoteDirPath</label><div class="col-md-10">
                <input id="remoteDirPath" name="remoteDirPath" class="form-control" type="text" value="/home/user" maxlength="250" readonly="readonly"></div>
        </div>

        <div class="form-group">
            <label for="remoteParentDir" class="col-md-2 control-label">fileBackup.remoteParentDir</label><div class="col-md-10">
                <input id="remoteParentDir" name="remoteParentDir" class="form-control" type="text" value="data" maxlength="250" readonly="readonly"></div>
        </div>

        <div class="form-group">
            <label for="localDirPath" class="col-md-2 control-label">fileBackup.localDirPath</label><div class="col-md-10">
                <input id="localDirPath" name="localDirPath" class="form-control" type="text" value="/temp" maxlength="250" readonly="readonly"></div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-primary" name="edit" onclick="bCancel=false">
                    <i class="glyphicon glyphicon-floppy-saved"></i> Update</button>
                <button type="submit" class="btn" name="cancel" onclick="bCancel=true">
                    <i class="glyphicon glyphicon-ok"></i> Done</button>
            </div>
        </div>
    </form>

    <script type="text/javascript" src="{{ url('/scripts/bootstrap-checkbox.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            readonlyFields();

            $("input[type='text']:visible:enabled:first", document.forms['fileBackupForm']).focus();

            $(':checkbox').checkboxpicker({
                onLabel:'Active', offLabel:'Deactive'
            });
        });

        $('#active').change(function(){
            readonlyFields();
        });

        function readonlyFields() {
            var isChecked = $('#active').is(':checked');
            if (isChecked) {
                $('.form-control').removeAttr('readonly');
            } else {
                $('.form-control').attr('readonly','');
            }
        }
    </script>


    <script>
        $("#fileBackupForm").submit(function(event){
            var $form = $(this);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            $inputs.prop("disabled", true);

            pleaseWaitDialog.showPleaseWait();
            request = $.ajax({
                url: $form.attr('action'),
                type: "post",
                data: serializedData
            });

            request.done(function (result, textStatus, jqXHR){
                console.log( "RESULT : " + JSON.stringify(result));
                pleaseWaitDialog.hidePleaseWait();
                if (result.status == "OK") {
                    swal({
                        title: "Success!",
                        text: result.errorMessage,
                        type: "success",
                        showCancelButton: false,
                        confirmButtonColor: "#4cae4c",
                        confirmButtonText: "OK",
                        closeOnConfirm: false
                    }, function(){
                        window.location = "{{ url('/console/fileBackup') }}";
                    });
                } else if (result.status == "ERROR") {
                    ErrorMessage = "";
                    $.each(result.returnData.errors, function(i, error) {
                        ErrorMessage = ErrorMessage + error + "<br>";
                    });
                    swal({title: result.errorMessage, text: ErrorMessage, type: "warning", html: true });
                } else {
                    swal({title: "Error!", text: "Something went wrong! Please contact Administrator.", type: "error", html: true });
                }
                $inputs.prop("disabled", false);
            });

            request.fail(function (result, textStatus, errorThrown){
                pleaseWaitDialog.hidePleaseWait();
                swal("Error!", result.responseText, "error");
            });

            request.always(function () {});

            event.preventDefault();
        });
    </script>

@stop