@php
    $routeLink = $blade_data['routesLink'] ?? 'admin.memberships';
@endphp
@extends('admin.layouts.app')
@section('page-title', $blade_data['title'])

@section('breadcrumb')
    <x-breadcrumb :blades="$blade_data" />
@endsection


@section('content')

    <div class=" ">
        <div class="card rounded-0 mb-2">
            <div class="card-body">
                <form
                    action="{{ isset($form_data->id) ? route($routeLink . '.update', ['id' => $form_data->id]) : route($routeLink . '.store') }}"
                    method="POST" class="edit-form" enctype="multipart/form-data">
                    @csrf

                    <div class="form-group row">

                        <div class="col-sm-4 mb-3">
                            <label class="">Name</label>
                            <div class="">
                                <input type="text" name="name" value="{{ old('name', $form_data->name) }}"
                                    class="form-control @error('name') is-invalid @enderror" required>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-12 mb-3">
                            <label class="">Description</label>
                            <div class="">
                                <textarea name="description" 
                                id="lv-editor" class="form-control @error('description') is-invalid @enderror">{{ old('description', $form_data->description) }}</textarea>
                                @error('description')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>


                    <div class="row mt-3">
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-sm btn-primary submitBtn">Save</button>
                            <a href="{{ route($routeLink . '.index') }}" class="btn btn-sm btn-secondary"
                                wire:navigate>Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection



@section('javascript')

<script>
    CKEDITOR.replace('lv-editor',{
        height: 500,
        allowedContent: true,
        toolbar: [
            { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source',] },
            { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            '/',
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
            { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
            { name: 'links', items: [ 'Link', 'Unlink', ] },
            { name: 'insert', items: [ 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
            '/',
            { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
            { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
            { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },        
        ],
     
     },);

    var oEditor = CKEDITOR.instances.editor;

</script>

    <script>
        $(".edit-form").validate({
            highlight: function(element) {
                $(element).closest('.form-control').removeClass('is-valid').addClass(
                    'is-invalid'); // add the Bootstrap error class to the control group
            },
            ignore: ":hidden, [contenteditable='true']",
            unhighlight: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
            },
            success: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass(
                    'is-valid'); // remove the Boostrap error class from the control group
            },
            submitHandler: function(form) {
                var loadingText = '<i class="fa fa-circle-notch fa-spin"></i> Saving..';
                $('.edit-form  .submitBtn').html(loadingText).prop('disabled', true);
                return true;
            }
        });
    </script>
@endsection
{{--
    //it not working on livewire-navigate
    @push('scripts')
@endpush --}}