@extends('layouts.app')

@section('content')
    <form class="form-label-left input_mask" action="javascript:;" id="create_form">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-6">
                                                                    <h4 class="header-title">Edit Notification</h4>
                                                                </div>
                            <div class="col-sm-6">
                                <div class="float-right">
                                                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label>Notification Title <span class="text-danger">*</span></label>
                                    <hr class="mt-1 mb-2">
                                    <input type="text" class="form-control" name="title" placeholder="Notification Title" value="">
                                </div>

                                <div class="form-group">
                                    <label>Notification URL (You can set any URL if needed. It will show the button for the URL on notification view.)</label>
                                    <hr class="mt-1 mb-2">
                                    <input type="text" class="form-control" name="actionUrl" placeholder="Notification URL" value="">
                                </div>

                                <div class="form-group">
                                    <label>Notification Description <span class="text-danger">*</span></label>
                                    <hr class="mt-1 mb-2">
                                    <textarea name="description" class="form-control description"  placeholder="Notification Description"></textarea>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="form-group mb-3">
                                        <label for="system">Select Administrators</label>
                                        <hr class="mt-1 mb-2">
                                        <input type="text" class="form-control" name="admin">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                            </div>
                            <div class="col-md-4 text-center">
                                <div class="form-group" style="margin-top: 30px;">
                                    <button type="submit" class="btn btn-success btn-add-row">Send Notification</button>
                                </div>
                            </div>
                            <div class="col-md-3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        let adminMS = null;
        window.onload = function()
        {
            adminMS = $("input[name='admin']").magicSuggest({
                allowFreeEntries: false,
                toggleOnClick: true,
                maxSelection:9999,
                data: "/admin/admin/search_data",
                dataUrlParams:{"_token":"{{ csrf_token() }}"}
            });

            submitCreateForm();

            $(".description").summernote({height:300});
        };

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

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

            let errors=0;
            let errorText=[];

            let title=form.title.value;
            let description=form.description.value;

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

            if(title === "") {
                errors++;
                errorText.push('Notification Title Required.');
            }

            if(description === "") {
                errors++;
                errorText.push('Notification Description Required.');
            }

            if(adminMS.getValue() === "") {
                errors++;
                errorText.push('Administrators 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");

            @if($formMode === "add")
            if(responseText.notify.status && responseText.notify.status === "success") {
                $("#create_form").trigger("reset");
                adminMS.clear();
            }
            @endif

            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

@section('page_css')
@endsection

@section('page_js')
@endsection