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

@section('content')
<div class="content">
	<form id="form" name="goal-form" action="{{url('settings/goals/'.$goal->id)}}" method="POST">
        <x-content.header title="{{ __('title.settings_goal') }}">
            <x-slot:headerRight>
                <button type="submit" class="btn-primary-base btn-save">
                    {{trans('forms.lbl_save')}}
                </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>
            </x-slot:headerRight>
        </x-content.header>

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

@stop

@section('footer-script')
    <script type="text/javascript">

		$(document).ready(function(){
			if(!$("input[name='due_date']").is(":checked")) {
				$(".due_date").prop("disabled", true);
			}
		});

		$(".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    : "PUT",
					url     : $("#form").prop("action"),
					data    : data,
					event   : event
				}).then((response) => {
	                window.location = "{{url('settings/goals')}}";
	            });
			}
		});

		$("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