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

@section('content')
    @if (isset($user) && $user)
        @include('layouts.partials.employee-files')
    @endif
    <div class="{{!isset($user) ? 'content': 'tab-content-wrapper'}}">
        <!-- Tab Content -->
        <form id="form" name="form" action="{{url('settings/goals')}}" method="POST">

            @if (!isset($user))
                <x-content.header title="{{ __('title.settings_goal') }}">
                    <x-slot:headerRight>
                        <button type="submit" class="btn-primary-base btn-save">
                            {{trans('forms.lbl_create')}}
                        </button>

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

            @include('goal::form', [
                'edit' => false
            ])

            @if (isset($user))
                <div class="flex flex-wrap justify-start items-center gap-2">
                    <button type="submit" class="btn-primary-base btn-save">
                        {{trans('forms.lbl_create')}}
                    </button>

                    <button type="submit" class="btn-secondary-base btn-save btn-concept">
                        {{trans('forms.lbl_save_concept')}}
                    </button>

                    <a href="{{url('settings/goals')}}" class="btn-tertiary-base">
                        {{trans('forms.lbl_cancel')}}
                    </a>
                </div>
            @endif
        </form>
    </div>

@stop

@section('footer-script')
<script src="{{ asset('js/tailwind/profile.js') }}"></script>
    <script type="text/javascript">
console.log('asdfads');
		$(".btn-save").on("click", function(event) {
			event.preventDefault();
			if($("#form").valid()){

                data = $('#form').serialize();

                data = $(this).hasClass('btn-concept') ? data+"&status=0" : data+"&status=1";

				PDRequest({
					type    : "POST",
					url     : $("#form").prop("action"),
					data    : data,
					event   : event
				}).then((response) => {
	                @if (isset($user) && $user)
                        window.location = "{{route('goal.index').'?user_id='.request()->user_id}}";
                    @else
                        window.location = "{{url('settings/goals')}}";
                    @endif
                });
			}
		});

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