@extends('admin.layouts.main')

@section('title', 'Tambah Page')

@section('menu', 'Page')

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/metronic/plugins/custom/summernote/summernote-lite.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/metronic/plugins/custom/summernote/custom-summernote.css') }}">
@endpush

@section('content')
<!--begin::Container-->
<div id="kt_content_container" class="app-container container-fluid">
    <form id="form-create-post" method="post" action="{{ route('admin.page.store') }}" enctype="multipart/form-data" autocomplete="off">
        @csrf
        <div class="card card-flush">
            <div class="card-header">
                <h3 class="card-title">Tambah Page</h3>
            </div>
            <div class="card-body py-5 px-10">
                <div class="mb-5">
                    <label class="form-label" for="name">Nama Page<span class="text-danger ms-1">*</span></label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Masukkan judul" value="{{ old('name') }}" required>
                    @if ($errors->has('name'))
                        <span class="error">{{ $errors->first('name') }}</span>
                    @endif
                </div>

                <div class="mb-5">
                    <label class="form-label" for="url">Eksternal Link<span class="text-danger ms-1">*</span></label>
                    <input type="text" class="form-control" name="url" id="url" placeholder="Masukkan judul" value="{{ old('url') }}" required>
                    @if ($errors->has('url'))
                        <span class="error">{{ $errors->first('url') }}</span>
                    @endif
                </div>

                <div class="mb-5">
                    <label class="form-label" for="content">Konten<span class="text-danger ms-1">*</span></label>
                    <textarea name="content" id="content" class="editor" required>{{ old('content') }}</textarea>
                    <span class="error-content"></span>
                    @if ($errors->has('content'))
                        <span class="error">{{ $errors->first('content') }}</span>
                    @endif
                </div>

                <div class="card-footer px-10">
                    <div class="float-end">
                        <a class="btn btn-secondary me-1" href="{{ route('admin.page.index') }}">Kembali/Batal</a>
                        <button type="submit" class="btn btn-primary ms-2">Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!--end::Container-->
@endsection

@push('js')
<!-- Asset -->
<script src="{{ asset('assets/metronic/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
<script src="{{ asset('assets/metronic/plugins/custom/summernote/summernote-lite.js') }}"></script>
<!-- Asset -->

<!-- Main Script -->
<script>
    $(document).ready( function () {
        /* Set Nav-Link Active */
        $('#menu-link-pages').addClass('active');

        /* Summernote */
        $('#content').summernote({
            height: 350, // set editor height
            minHeight: null, // set minimum height of editor
            maxHeight: null, // set maximum height of editor
            focus: false // set focus to editable area after initializing summernote
        });;
    });
</script>
<!-- Main Script -->

<!-- Validation -->
<script>
    $(document).ready(function() {
        /* Add custom method */
        jQuery.validator.addMethod("title", function(value, element) {
            return this.optional(element) || /^[A-Z0-9 _]*[A-Z0-9][A-Z0-9]*$/i.test(value);
        });

        /* Create room type validation */
        $("#form-create-post").validate({
            ignore: [],
            rules: {
                name: {
                    required: true,
                    minlength: 5,
                    maxlength: 100,
                    title: true,
                },
                content: {
                    required: function(element){
                        return $("#url").val() == '';
                    },
                    minlength: 10,
                },
                url: {
                    required: function(element){
                        return $("#content").val() == '';
                    }
                }
            },
            messages: {
                name: {
                    required: "Nama page tidak boleh kosong",
                    minlength: "Nama page minimal 5 karakter",
                    maxlength: "Nama page maksimal 100 karakter",
                    title: "Nama page hanya boleh huruf, angka, spasi, dan underscore",
                },
                content: {
                    required: "Konten tidak boleh kosong jika eksternal link kosong",
                    minlength: "Konten minimal 10 karakter",
                },
                url: {
                    required: "Eksternal link tidak boleh kosong jika konten kosong",
                }
            },
            errorPlacement: function (error, element) {
                if(element.hasClass('form-select') && element.next('.select2-container').length) {
                    error.insertAfter(element.next('.select2-container'));
                }else if(element.attr('name') === 'content'){
                    error.insertAfter('.error-content');
                }
                else {
                    error.insertAfter(element);
                }
            }
        });
    });
</script>
<!-- Validation -->
@endpush