@extends('layouts.app')
@section('title', trans('settings.onboarding_title'))

@section('plugin-styles')
    <link rel="stylesheet" href="{{asset('vendors/jquery-file-upload/uploadfile.css')}}">
@stop

@section('content')
	<div class="content">
        <form id="form" name="form" action="{{url('settings/onboardings')}}" method="POST">
            <x-content.header title="{{__('title.settings_onboarding')}}">
                <x-slot:headerRight>
                    <button type="submit" class="btn-primary-base btn-save">
                        {{trans('forms.lbl_create')}}
                    </button>

                    <a href="{{url('settings/onboardings')}}" class="btn-tertiary-base">
                        {{trans('forms.lbl_cancel')}}
                    </a>
                </x-slot:headerRight>
            </x-content.header>

            @include('onboarding::form', [
                'edit' => false
            ])
        </form>
    </div>

@stop

@section('footer-script')
    <!-- plugin js for this page -->
    <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
    <!-- Custom js for this page-->
    <script src="{{asset('js/jquery-file-upload.js')}}"></script>
    <script type="text/javascript">

		$(".btn-save").on("click", function(event) {
			event.preventDefault();
            if($("#form").valid()){
                data = $('#form').serialize();
                data = data+"&files="+ JSON.stringify(selectedFiles);

    			PDRequest({
    				type    : "POST",
    				url     : $("#form").prop("action"),
    				data    : data,
    				event   : event
    			}).then((response) => {
                    window.location = "{{url('settings/onboardings')}}";
                });
            }
		});

        $("body").on("change", "input[name='due_date']", function(e) {
            if( $(this).is(":checked") ){
                $(".due_date").prop("disabled", false);
            }else{
                $(".due_date").prop("disabled", true);
            }
        });

		var currentlyScrolling = false;
		var SCROLL_AREA_HEIGHT = 40;

        $( "#tasks" ).sortable({
            items: ".draggable-field",
            cursor: 'move',
            opacity: 0.6,
            sort: function(event, ui) {

                if (currentlyScrolling) {
                    return;
                }

                var windowHeight   = $(window).height();
                var mouseYPosition = event.clientY;

                if (mouseYPosition < SCROLL_AREA_HEIGHT) {
                    currentlyScrolling = true;

                    $('html, body').animate({
                    scrollTop: "-=" + windowHeight / 2 + "px" // Scroll up half of window height.
                    },
                    800, // 400ms animation.
                    function() {
                    currentlyScrolling = false;
                    });

                } else if (mouseYPosition > (windowHeight - SCROLL_AREA_HEIGHT)) {

                    currentlyScrolling = true;

                    $('html, body').animate({
                    scrollTop: "+=" + windowHeight / 2 + "px" // Scroll down half of window height.
                    },
                    800, // 400ms animation.
                    function() {
                    currentlyScrolling = false;
                    });

                }
            },
            update: function() {
                sendOrderToServer();
            }
        });

		function sendOrderToServer() {

            var order = [];
            $('.draggable-field').each(function(index, element) {
				$(this).find("input.order").val(index+1);
            });

        }
    </script>
@stop