@extends('layouts.app')

@section('style')
    <style>
        @media (min-width: 576px) {
            .modal-dialog {
                max-width: 800px !important;
            }
        }
    </style>
@endsection
@section('content')
		<div class="m-content">
			@if(Session::has('success'))
				<div class="alert alert-success">
					<button type="button" class="close" data-dismiss="alert">×</button> <i class="fa fa-ban-circle"></i>
					{!! Session::get('success') !!}
				</div>
            @endif
            @if(Session::has('error'))
				<div class="alert alert-danger">
					<button type="button" class="close" data-dismiss="alert">×</button> <i class="fa fa-ban-circle"></i>
					{!! Session::get('error') !!}
				</div>
			@endif
			<div class="row">
				<div class="col-lg-12">
					<div class="m-portlet">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <span class="m-portlet__head-icon m--hide">
                                        <i class="la la-gear"></i>
                                    </span>
                                    <h3 class="m-portlet__head-text">Add Header - Footer</h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li class="m-portlet__nav-item">
                                        <a href="{{ route('header_footer.index') }}" class="btn btn-info m-btn m-btn--wide m-btn--air m-btn--custom">
                                            <span><i class="la la-arrow-left"></i><span>Back</span></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!--begin::Form-->
                        {{-- <form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed"> --}}
                        {{ Form::open(array('route' => 'header_footer.store', 'role'=>'form', 'class'=>'m-form m-form--fit m-form--label-align-right', 'id'=>'storeHeaderFooter', "enctype"=>"multipart/form-data")) }}
                            <div class="m-portlet__body">
                                <input type="hidden" name="id" value="{{ !empty($email->id) ? Hasher::encode($email->id)  : '0'}}">

                                <div class="form-group m-form__group row">
                                    <label for="name" class="col-1 col-form-label">Name</label>
                                    <div class="col-4">
                                        {{ Form::text('name', !empty($email->name)? $email->name :null, ['class'=>'form-control m-input', 'id'=>'name', 'required']) }}
                                        {!! $errors->first('name', '<span class="error">:message</span>') !!}
                                    </div>

                                    <label for="type" class="col-1 col-form-label">Select Type</label>
                                    <div class="col-5">
                                        {{ Form::select('type', ["" => "Select Type","header" => "Header", "footer" => "Footer"], !empty($email->type)? $email->type :null, ['class'=>'form-control m-input', 'id'=>'type', 'required']) }}
                                        {!! $errors->first('type', '<span class="error">:message</span>') !!}
                                    </div>
                                </div>

                                {{-- <div class="form-group m-form__group row">
                                    <label for="folder_name" class="col-1 col-form-label">Folder Name</label>
                                    <div class="col-4">
                                        {{ Form::text('folder_name', !empty($email->name)? $email->name :null, ['class'=>'form-control m-input', 'id'=>'folder_name']) }}
                                        <span class="m-form__help m--font-info">Supported only: alphabets and underscore</span>
                                        {!! $errors->first('folder_name', '<span class="error">:message</span>') !!}
                                    </div>

                                    <label for="" class="col-1 col-form-label">Upload Images</label>
                                    <div class="col-5">
                                        {{ Form::file('images[]', array("multiple"=>"multiple", 'id'=>'images', 'class' => 'custom-file-input')) }}
                                        <label class="custom-file-label" for="images">Choose file</label>
                                        <span class="m-form__help m--font-info">Supported File Type: jpg, jpeg, png</span>
                                        {!! $errors->first('images.*', '<span class="error" style="color: #f4516c;">:message</span>') !!}
                                    </div>
                                </div> --}}

                                <div class="form-group m-form__group row">
                                    <label for="mail_body" class="col-1 col-form-label">mail_body</label>
                                    <div class="col-10">
                                        <textarea name="mail_body" id="mail_body" class="form-control m-input summernote" id="mail_body" required> {{ !empty($email->mail_body)? $email->mail_body :null }} </textarea>
                                        {!! $errors->first('mail_body', '<span class="error">:message</span>') !!}
                                    </div>
                                </div>

                            </div>
                            <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                                <div class="m-form__actions m-form__actions--solid">
                                    <div class="row">
                                        <div class="col-lg-4"></div>
                                        <div class="col-lg-8">
                                            {!! Form::submit("Save", ['name' => 'Submit','class' => 'btn btn-primary']) !!}
                                            {!! Form::button("Preview", ['name' => 'Preview','class' => 'btn btn-danger','id'=>'preview']) !!}
                                            {!! link_to(URL::full(), "Cancel",array('class' => 'btn btn-secoundry')) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {{ Form::close() }}

                        <!--end::Form-->
                    </div>
				</div>
			</div>
        </div>

        <!-- The Modal -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                    <h4 class="modal-title">Preview</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body" id="model-data"></div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>
        <!-- The Modal -->


@endsection

@section('script')
{{ Html::script('custom/summernote/summernote.js') }}
<script type="text/javascript">

    $(document).ready(function () {

        $("#preview").click(function(){
            var val = $('#body').val();
            $('#model-data').html(val);
            $('#myModal').modal('show');
        });
    });

    $('.summernote').summernote({
        height: 500,
        placeholder: 'Create your custom header or footer here...',
        toolbar: [
            // [groupName, [list of button]]
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['font', ['bold', 'underline', 'clear']]
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['float', ['floatLeft', 'floatRight', 'floatNone']],
            ['table', ['table']],
            // ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']],
        ]
    });

    // $("#storeHeaderFooter").validate({
    //     rules: {
    //         name: {
    //             required: true
    //         },
    //         type: {
    //             required: true
    //         },
    //         body: {
    //             required: true
    //         }
    //     }
    //     // submitHandler : function (form) {
    //     //     var form = $("#storeHeaderFooter").serialize();
    //     //     var url = "{{ route('header_footer.store') }}";
    //     //     var table;
    //     //     $.ajax({
    //     //         type : "POST",
    //     //         url : url,
    //     //         data : form,
    //     //         beforeSend : function() {
    //     //             $.blockUI({ message: '<img src="{{ URL::to("images/loading.svg") }}" height="100%" width="100%" />', css: { border:'none', backgroundColor:'transparent' , top: '0%' , bottom: '0%'} });
    //     //         },
    //     //         success : function (data) {
    //     //             if(data.success) {        //Success Message
    //     //                 swal(data["success"], data[0], "success")
    //     //                 .then((isOK) => {
    //     //                     (mApp.unblock('.modal-content'), true);
    //     //                     eModal.close();
    //     //                     // $('#header-footer-datatable').DataTable().ajax.reload();
    //     //                     window.location.reload();
    //     //                 });
    //     //                 $('#storeHeaderFooter').clearForm();
    //     //             }
    //     //             else if(data.warning){
    //     //                 swal(data["warning"], data[0], "warning")
    //     //                 .then((isOK) => {
    //     //                     (mApp.unblock('.modal-content'), true);
    //     //                     table.ajax.reload(mApp.unblock("#storeHeaderFooter"), false);
    //     //                 });
    //     //             }
    //     //             else if(data.error){
    //     //                 swal(data["error"], data[0], "error")
    //     //                 .then((isOK) => {
    //     //                     (mApp.unblock('.modal-content'), true);
    //     //                     table.ajax.reload(mApp.unblock("#storeHeaderFooter"), false);
    //     //                 });
    //     //             }
    //     //             else if(data.validation){
    //     //                 printErrorMsg(data.validation);
    //     //                 (mApp.unblock('.modal-content'), true);
    //     //             }
    //     //         },
    //     //         complete: function () {
    //     //             $.unblockUI();
    //     //         },
    //     //         error: function(xhr,ajaxOptions,thrownError) {
    //     //             // var err = eval("(" + xhr.responseText + ")");
    //     //             // alert(err.Message);   console.log('data:');    alert(data);
    //     //             $('#msg').html('<div class="m-alert m-alert--outline m-alert--outline-2x alert alert-danger alert-dismissible fade show" role="alert"> Error occurred in form submit. <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button> </div>');

    //     //         }
    //     //     });
    //     //     // for modal blocking
    //     //     mApp.block('.modal-content', {
    //     //             overlayColor: '#000000',
    //     //             type: 'loader',
    //     //             state: 'success',
    //     //             message: 'Please Wait...'
    //     //     });
    //     // }
    // });

    // *****  Backend Error Validation Start   ***** //
    // function printErrorMsg (msg) {
    //     $(".print-error-msg").find("ul").html('');
    //     $(".print-error-msg").css('display','block');
    //     $.each( msg, function( key, value ) {
    //         $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
    //     });

    // }
    // *****  Backend Error Validation End   ***** //

</script>
@endsection