@extends('layouts.backend.master')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row m-0">
                        <div class="col-sm-12">
                            <h4 class="header-title">{{$approval["title"]}}</h4>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            {!!$approval["description"] !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <form action="javascript:" id="create_form">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="approval">Approve/Decline<span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    @if(isset($approvalStatusList) && is_array($approvalStatusList) && count($approvalStatusList) > 0)
                                                        @foreach($approvalStatusList as $status)
                                                            <div class="form-check">
                                                                <input type="radio" class="form-check-input" name="status" value="{{$status["id"]}}" @if ($approval["status"] === $status["id"]) checked="checked" @endif>
                                                                <label class="form-check-label">{{$status["name"]}}</label>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="remarks">Remarks<span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <textarea id="remarks" class="form-control" name="remarks" rows="5">{{$approval["remarks"]}}</textarea>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group text-center">
                                                    <button type="submit" class="btn btn-success">Submit Approval</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {

            submitCreateForm();
        });

        function submitCreateForm() {
            $('#create_form').ajaxForm({
                url			: "@if(isset($formSubmitUrl)) {{ $formSubmitUrl }} @endif",
                type		: "POST",
                dataType	: "json",
                beforeSubmit: validateForm,
                success		: serverResponse,
                error		: onError
            });
        }

        function validateForm(formData, jqForm) {
            let form = jqForm[0];

            let errors=0;
            let errorText=[];

            let status=form.status.value;
            let remarks=form.remarks.value;

            errorText.push("<strong> <span class='glyphicon glyphicon-warning-sign'></span> Following errors occurred while submitting the form</strong><br/>");

            if (status === "") {
                errors++;
                errorText.push("Please Approve or Decline Before Saving.");
            }

            if (remarks === "") {
                errors++;
                errorText.push('Remarks Required.');
            }

            if(errors > 0) {
                let errorData=[];
                errorData.status="warning";
                errorData.notify=errorText;

                showNotifications(errorData);

                return false;
            } else {
                //show preloader
                showPreloader($('#create_form'), true);

                //disable form submit
                $('#create_form button[type="submit"]').attr("disabled", "disabled");
                return true;
            }
        }

        function serverResponse(responseText) {
            //Hide preloader
            hidePreloader($('#create_form'));
            $('#create_form button[type="submit"]').removeAttr("disabled");

            showNotifications(responseText.notify)
        }

        function onError() {
            //Hide preloader
            hidePreloader($("#create_form"));
            $('#create_form button[type="submit"]').removeAttr("disabled");

            let errorText=[];
            let errorData=[];

            errorText.push('Something went wrong. Please try again.');

            errorData.status="warning";
            errorData.notify=errorText;

            showNotifications(errorData)
        }
    </script>
@endsection