@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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <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="form-floating mb-4 @if (\Session::has('error_short')) erro-inp @endif ">
                            <input type="text" class="form-control @if (\Session::has('error_short')) is-invalid @endif " id="short_text" value="{{ old('short_text') }}" name="short_text" autocomplete="off">
                            <label class="float-short_text">Subtítulo (linha fina)</label>
                            @if (\Session::has('error_short')) <div id="msgError_short" class="form-text text-danger"> {!! \Session::get('error_short') !!} </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-2">
                                        <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 id="sel_visibility" class="form-select" name="visibility">
                                                <option value="1" @selected(old('visibility') == '1')>{{ __('site.page_post_new_side_grid1_option_1') }}</option>
                                                <option value="3" @selected(old('visibility') == '3')>{{ __('site.page_post_new_side_grid1_option_4') }}</option>
                                                <option value="2" @selected(old('visibility') == '2')>{{ __('site.page_post_new_side_grid1_option_2') }}</option>
                                                <option value="0" @selected(old('visibility') == '0')>{{ __('site.page_post_new_side_grid1_option_3') }}</option>
                                            </select>

                                        </div>
                                    </div>
                                    @php
                                        $now = now();
                                        $oldSchedule = old('schedule_time');
                                        $value = ($oldSchedule && \Carbon\Carbon::parse($oldSchedule)->greaterThan($now))
                                            ? $oldSchedule
                                            : $now->format('Y-m-d\TH:i');
                                    @endphp
                                    <div class="mb-2" id="schedule_box" style="display:none">
                                        <label for="schedule_time" class="form-label">{{ __('site.page_post_schedule_for') }}</label>
                                        <input
                                            type="datetime-local" 
                                            name="schedule_time" 
                                            class="form-control"
                                            id="schedule_time"
                                            min="{{ now()->format('Y-m-d\TH:i') }}"
                                            value="{{ $value }}"
                                            required
                                        >
                                    </div>
                                    <div class="row mb-2">
                                        <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" @selected(old('allow_comments') == '1')>{{ __('site.action_yes') }}</option>
                                                <option value="0" @selected(old('allow_comments') == '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 }}"
                                                      {{ in_array($category->id, old('categories', [])) ? 'checked' : '' }}>
                                                  <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");
        }
    });
    
    function verificarVisibilidade() {
        const valor = $('#sel_visibility').val();
        if (valor == 3) {
            $('#schedule_box').show();
            atualizarMinimo();
            $('#schedule_time').on('change', atualizarMinimo);
        } else {
            $('#schedule_box').hide();
            $('#schedule_time').off('change', atualizarMinimo);
        }
    }
    
    $('#sel_visibility').on('change', verificarVisibilidade);
    
    $(document).ready(function () {
        verificarVisibilidade();
    });

    
    function atualizarMinimo() {
        const $input = $('#schedule_time');
        const agora = new Date();
        
        // Formata a data/hora atual para o formato do input (YYYY-MM-DDTHH:MM)
        const yyyy = agora.getFullYear();
        const mm = String(agora.getMonth() + 1).padStart(2, '0');
        const dd = String(agora.getDate()).padStart(2, '0');
        const hh = String(agora.getHours()).padStart(2, '0');
        const mi = String(agora.getMinutes()).padStart(2, '0');
        const agoraStr = `${yyyy}-${mm}-${dd}T${hh}:${mi}`;
        
        // Define o m�nimo como AGORA
        $input.attr('min', agoraStr);
        
        // Se o valor atual for menor que o m�nimo, ajusta para o m�nimo
        if ($input.val() < agoraStr) {
            $input.val(agoraStr);
        }
    }
    
    $('#title').on('input', function(){

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

    });
	
	$('form[action="{{ route('site.posts.c.do') }}"]').on('submit', function () {
		const title = $('#title').val().trim();
		const cats  = $('input[name="categories[]"]:checked').length;

		if (!title || !cats) return;

		$(this).find('button[type="submit"]')
			.prop('disabled', true)
			.html('<span class="spinner-border spinner-border-sm me-1" role="status"></span> {{ __("site.page_post_new_btn_publish") }}...');
	});

</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>