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

@section('content')

	<div class="content">
        <x-content.header title="{{ __('title.workflow') }}" />
        <div class="tw-card">
            <div class="p-6">
                <form id="form"
                        name="workflow-form"
                        action="{{route('settings.workflows.store')}}"
                        method="POST"
                >

                    @include('workflow::workflows.form', [
                        'edit' => false
                    ])

                    <div class="mt-4 border-top">
                        <button type="submit" class="btn btn-info mt-4 btn-save">
                            {{trans('forms.lbl_create')}}
                        </button>
                        <a href="{{route('settings.workflows.index')}}"  class="btn btn-outline-secondary mt-4">{{trans('forms.lbl_cancel')}}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

@stop

@section('footer-script')
	{{-- {{ Module::asset('workflow:js/criteria.js') }} --}}
    <script src="{{asset('js/criteria.js')}}"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            var typeId = null,
                type = null,
                formId = null;

            $('input[name="execution_time"]').datetimepicker({
                format:'HH:mm:ss',
                defaultDate: moment({
                    hour: 8
                }),
                allowInputToggle: true,
                keepOpen : false,
                icons: datePickerIcons
            });

            $(".btn-save").on("click", function(event) {
                event.preventDefault();
                data = $('#form').serialize();

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


            $('body').on('change', '#execution_rule', function (e) {

                let value = $(this).val() ;

                if ( value === 'ON' ) {
                    $('span.execution-datetime-laspe').hide();
                } else {
                    $('span.execution-datetime-laspe').show();
                }
            });


            $('body').on('click', '#repeat', function (e) {
                if ( $(this).is(":checked") ) {
                    $('span.repeated').show();
                } else {
                    $('span.repeated').hide();
                }
            });


            $('body').on('change', '#workflow_type_id', function (e) {
                typeId = $(this).val() ;
                type   = $(this).find(':selected').data('type');

                $("div.workflow-types").hide();
                $("div." + type).show();
            });


            $('body').on('change', '#form_id', function (e) {

                let url = "/settings/workflow/utility/forms";

                formId = $(this).val();

                PDRequest({
                    type    : "POST",
                    url     : url+"/"+formId+"/events",
                    isFlash : false
                }).then(response => {
                    var model = $("#workflow_event_id");
                    model.val("").html("");
                    model.append("<option value>Select Workflow Execution Event</option>");
                    $.each(response.events, function(index, element) {
                        model.append("<option value='"+element.id+"'>" + element.name + "</option>");
                    });
                    model.select2().trigger('change');
                }).then(error => {
                    // console.log(error);
                });


                PDRequest({
                    type    : "POST",
                    url     : url+"/"+formId+"/fields",
                    data    : {'field_types' : 'date'},
                    isFlash : false
                }).then(response => {
                    updateFieldList($("#form_field_id"), response);
                }).then(error => {
                    // console.log(error);
                });


                let models = $('select.action-groups');
                $.each(models, function(index, element) {
                    $(element).val('').find('optgroup').html('');
                });

                PDRequest({
                    type    : "POST",
                    url     : url+"/"+formId+"/actions",
                    isFlash : false
                }).then(response => {
                    // console.log(response);

                    $.each(response.actions, function(index, element) {
                        $('select[name="actions['+element.workflow_action_type_id+'][]"]')
                            .find('optgroup')
                            .append("<option value='"+element.id+"'>" + element.name + "</option>");
                    });

                    $.each(models, function(index, element) {
                        $(element).select2().trigger('change');
                    });
                }).then(error => {
                    // console.log(error);
                });


				//get criteriable fields
				getCriteriableFields(formId);
            });

			function updateFieldList(model, response) {
                model.val("").html("");
                model.append("<option value>{{trans('action.select_field')}}</option>");
                $.each(response.fields, function(index, element) {
                    model.append("<option value='"+element.id+"'>" + element.label + "</option>");
                });
                model.select2().trigger('change');
            }


		});

    </script>
@stop