@section('title', __('site.page_post_new_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/dropzone/min/dropzone.post.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <link href="/assets/js/plugins/bras-editor/css/tinymce.min.css" media="screen" rel="stylesheet" type="text/css">
    <style>
        :root {
            --sizeCats: {{ ($getCategories->count() > 27 ? '350px' : ($getCategories->count() > 39 ? '450px' : '250px')) }};
        }
    </style>
@endsection
@include('includes/header')
@include('includes/topSite')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('site.page_post_new_h1') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('site.menu_item_3') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.posts.r') }}">{{ __('site.menu_item_3_sub_1') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.action_add') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-8">
            <div class="block block-rounded">
                <div class="block-content block-content-full d-flex justify-content-between border-bottom">
                    <div>
                        <a href="{{ route('site.posts.r.media') }}" class="btn btn-sm btn-alt-secondary">
                            <i class="fa fa-photo-film"></i> {{ __('site.page_post_new_btn_media') }}
                        </a>
                    </div>
                    <form action="{{ route('site.posts.c.do') }}" method="POST">
                    <div>
                        <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-save me-1"></i> {{ __('site.page_post_new_btn_publish') }}</button>
                    </div>
                </div>
                <div class="block-content">
                        <input type="hidden" name="feature_image" id="feature_image" value="" />
                        <div class="form-floating mb-4 @if (\Session::has('error_title')) erro-inp @endif ">
                            <input type="text" class="form-control @if (\Session::has('error_title')) is-invalid @endif " id="title" value="{{ old('title') }}" name="title" autocomplete="off">
                            <label class="float-title">{{ __('site.page_post_new_input_title') }}</label>
                            @if (\Session::has('error_title')) <div id="msgError_title" class="form-text text-danger"> {!! \Session::get('error_title') !!} </div> @endif
                        </div>
                        <div class="mb-4">
                            <textarea name="content" class="html-editor textarea form-control">{{ htmlspecialchars_decode(old('content')) }}</textarea>
                        </div>

                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="block block-rounded">
                <div class="block-content p-0">
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    {{ __('site.page_post_new_side_grid1_title') }}
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body">

                                    <div class="row mb-4">
                                        <label class="col-sm-4 col-form-label" for="example-wp-visibility">{{ __('site.page_post_new_side_grid1_label_1') }}</label>
                                        <div class="col-sm-8">
                                            <select class="form-select" name="visibility">
                                                <option value="1" selected="">{{ __('site.page_post_new_side_grid1_option_1') }}</option>
                                                <option value="2">{{ __('site.page_post_new_side_grid1_option_2') }}</option>
                                                <option value="0">{{ __('site.page_post_new_side_grid1_option_3') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row mb-4">
                                        <label class="col-sm-4 col-form-label" for="example-wp-format">{{ __('site.page_post_new_side_grid1_label_2') }}</label>
                                        <div class="col-sm-8">
                                            <select class="form-select"  name="allow_comments">
                                                <option value="1">{{ __('site.action_yes') }}</option>
                                                <option value="0">{{ __('site.action_no') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    {{ __('site.page_post_new_side_grid2_title') }}
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                <div class="accordion-body">

                                    <div class="mb-2 divcat @if (\Session::has('error_cat')) erro-inp animated bounceIn @endif ">
                                        @foreach($getCategories as $category)
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="cat{{ $category->id }}" name="categories[]" value="{{ $category->id }}">
                                            <label class="form-check-label" for="cat{{ $category->id }}">{{ $category->name }}</label>
                                        </div>
                                        @endforeach
                                        @if (\Session::has('error_cat')) <div id="msgError_cat" class="form-text text-danger"> {!! \Session::get('error_cat') !!} </div> @endif
                                    </div>

                                    <a class="fs-sm" href="{{ route('site.posts.c.categories') }}"><i class="fa fa-plus"></i> {{ __('site.page_post_new_side_grid2_link') }}</a>

                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    {{ __('site.page_post_new_side_grid3_title') }}
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                <div class="accordion-body text-center">
                                    <div class="dropzone mb-2" action=""></div>
                                    <em class="mb-0">{{ str_replace('%1%','970x550',str_replace('%2%','2',__('site.page_post_new_side_grid3_desc'))) }}</em>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        </form>
    </div>

</div>

</div>

</main>



@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script type="text/javascript" src="/assets/js/plugins/bras-editor/js/tinymce.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
    var LNG = '{{ Config::get('app.locale') }}';
    var LNG_DROPHERE = '{{ __('site.site_file_upload') }}</br><small>({{ __('site.site_file_upload_2') }})</small>';
    var LNG_CANCELUP = '{{ __('site.site_file_cancel') }}';
    var LNG_CANCELEDUP = '{{ __('site.site_file_canceled') }}';
    var LNG_REMOVE = '{{ __('site.btn_remove') }}';
    $(".accordion-collapse").show();

    $('input[name="categories[]"]').change(function(){
        var total = $('input[name="categories[]"]:checked').length
        if(total && $('.divcat').hasClass('erro-inp')){
            $('.divcat').removeClass('erro-inp animated bounceIn');
            $('#msgError_cat').addClass('d-none');
        }
        if(total > 3){
            $('#cat'+$(this).val()).prop("checked", false);
            $('input[name="categories[]"]:not(:checked)').each(function( index, value ) {
                $('#'+value.id).prop("disabled", true);
                Sweetalert2.fire({
                    icon: 'error',
                    title: '{{ __('site.page_post_cat_limit_title') }}',
                    text: '{{ __('site.page_post_cat_limit_message') }}',
                    showConfirmButton: true,
                    confirmButtonText: '{{ __('site.page_post_cat_limit_btn') }}'
                });
            });
        }else if(total <= 3){
            $('input[name="categories[]"]:not(:checked)').each(function( index, value ) {
                $('#'+value.id).prop("disabled", false);
            });
        }
    });

</script>
<script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
    <script>
    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: "{{ route('site.posts.c.uploadAsset') }}",
        addRemoveLinks: true,
        uploadMultiple: false,
        parallelUploads: 1,
        acceptedFiles: 'image/jpeg,image/png,image/gif,image/bmp,image/webp',
        params: {
            type: 'posts'
        },
        maxFiles:1,
        thumbnailWidth: 800,
        thumbnailHeight: 450,
        init: function() {
            this.on("maxfilesexceeded", function(file) {
                file.previewElement.remove();
            });
        },
        removedfile: function(file) {
      $.post("{{ route('site.posts.c.uploadCanc') }}", { fl: file.xhr.response, type: 'posts' }).done(function( data ) { $('#feature_image').val(''); });
            file.previewElement.remove();
        },
        success: function (file, response) {
            var imgName = response;
            $('#feature_image').val(imgName);
            file.previewElement.classList.add("dz-success");
        },
        error: function (file, response) {
            if (file.type !== "image/*") {
                this.removeFile(file);
            }
            //file.previewElement.classList.add("dz-error");
        }
    });

    $('#title').on('input', function(){

        if($('#title').hasClass('is-invalid')){
            $('#title').removeClass('is-invalid');
            $('#msgError_title').addClass('d-none');
            $('.form-floating').removeClass('erro-inp');
        }

    });

</script>
<script type="text/javascript" src="/assets/js/plugins/bras-editor/js/jquery.tinymce.min.js"></script>
<script type="text/javascript" src="/assets/js/plugins/bras-editor/js/editor.js"></script>
</body>
</html>