@extends('layouts.app')
@section('content')
<style>
.fo {
    font-size: 12px;
    font-weight: 600;
    margin-left: -10px !important;
}

.error {
    border-color: red;
}
input.error,textarea.error {
    padding: 5px 0px 5px 10px !important;
}
.mb-bottom{
    margin-bottom:10px;
}
.gap20{
    clear:both;
    height:20px;
}
</style>
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">@if($data->id=="")Add @else Edit @endif Custom Notifications</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ action('HomeController@index') }}">Home</a></li>
            <li class="breadcrumb-item active">Custom Notifications</li>
        </ol>
    </div>

</div>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="notificationForm" method="post" enctype="multipart/form-data" name="notificationForm" action="@if($data->id==''){{action('CustomNotificationsController@store')}}@else{{action('CustomNotificationsController@update',$data->id)}}@endif"
                        class="form-horizontal" autocomplete="off">
                        @csrf
                        @if($data->id!="")
                        @method('put')
                        @endif
                        <div class="row">
                            <div class="col-sm-12 mb-bottom">
                                <div class="form-group">
                                    <label for="title" class="col-sm-6 control-label">Notification title <span
                                            class="red">*</span></label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" id="title" name="title"
                                            placeholder="" value="@if($data->id==''){{old('title')}}@else{{$data->title}}@endif" maxlength="200" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 mb-bottom">
                                <div class="form-group">
                                    <label for="image" class="col-sm-6 control-label">Image </label>
                                    <div class="col-sm-12">
                                        <input type="file" class="form-control" id="image" name="image"
                                            placeholder="Image">
                                    <p><small>( Note: only jpg, jpeg, png formats are allowed & Maximum file size should be less then 2 MB)</small></p>
                                    @if($data->image!="")
                                    <div class="gap20"></div>
                                    <a href="{{asset('/uploads/notifications/'.$data->image)}}" target="_blank">
                                        <img src="{{asset('/uploads/notifications/'.$data->image)}}" width="100">
                                    </a>
                                    @endif

                                    </div>

                                </div>
                            </div>

                            <div class="col-sm-12 mb-bottom">
                                <div class="form-group">
                                    <label for="description" class="col-sm-6 control-label">Description <span
                                            class="red">*</span></label>
                                    <div class="col-sm-12">
                                        <textarea class="form-control" id="description" name="description"
                                            placeholder="Description" rows="3">@if($data->id==''){{old('description')}}@else{{$data->description}}@endif</textarea>
                                            <label for="description" class="error"></label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="margin-top:10px;">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="col-sm-12">
                                        <label for="notification_status" class="control-label">Send Notification <input type="checkbox" @if($data->notification_status==1) checked disabled @endif name="notification_status" value="1" id="notification_status"></label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-offset-2 col-sm-12 py-4 text-center" style="margin-top:10px;">
                            <button type="submit" class="btn btn-primary" id="btn-save" @if($data->notification_status==1) disabled @endif value="create"> Submit 
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>
<script>
   CKEDITOR.replace( 'description' );
</script>
<script type="text/javascript">
$(document).ready(function() {
    $.validator.addMethod( "extension", function( value, element, param ) {
	    param = typeof param === "string" ? param.replace( /,/g, "|" ) : "png|jpe?g|gif";
	    return this.optional( element ) || value.match( new RegExp( "\\.(" + param + ")$", "i" ) );
    }, $.validator.format( "Please enter a value with a valid extension." ) );

    $.validator.addMethod('filesize', function (value, element, param) {
        return this.optional(element) || (element.files[0].size <= param * 1000000)
    }, 'File size must be less than {0} MB');

    $("#notificationForm").validate({
        ignore: [],
        rules: {
            title: {
                required: true,
                maxlength: 200,
            },
            image: {
                //required: true,
                filesize: 2,//2mb
                extension:"jpg|jpeg|png",
            },
            description: {
                required: function(textarea) {
                    CKEDITOR.instances[textarea.id].updateElement();
                    var editorcontent = textarea.value.replace(/<[^>]*>/gi, '');
                    return editorcontent.length === 0;
                }
            },
        },
        messages: {
            title: {
                required: "Please enter notification title",
            },
            image: {
                //required: "Please upload image file",
                filesize: "File size does not exceeds 2 Mb",
                extension:"Please upload jpg,jpeg,png file formats only",
            },
            description: {
                required: "Please enter description"
            },
        },

        submitHandler: function(form) {
            $('#btn-save').html('Processing...');
            form.submit();
        }
    })
});
</script>
@endsection