@extends('layouts.app')

@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('plugins/select2/select2.css') }}">
    <link rel="stylesheet" href="{{ asset('/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" />
    <style>
        .modal-backdrop{
            opacity: 0.5 !important;
        }
        .note-editable ,.note-editing-area{
            min-height: 450px;
        }
        .featured_image {
            max-height: 300px;
            max-width: 150px;
        }
        .featured_image-parent{
            position: relative;
            width: 150px;
        }
        .remove-image{
            position: absolute;
            right: 5px;
            color: red;
            font-size: 15px;
            margin-top: 0px;
        }
        .tabs-container .note-editing-area .panel-body {
            margin-left: 0;
            width: 100%;
        }
        .select2-close-mask{
            z-index: 2099;
        }
        .select2-dropdown{
            z-index: 3051;
        }
        .logo-list-slider.blog_slider {
            height: auto !important;
        }

    </style>
@endsection

@section('content')
    <div id="updatePage">
        {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return savePage(this);']) !!}
        <input type="hidden" name="page_id" value="{{$page->id}}">
        <input type="hidden" name="type" value="Blog">
        <div class="studio98_websters">
            <div class="row">
                <div class="col-lg-8">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title2">
                            <h5>{{$page->title}}</h5>
                        </div>
                        <div class="ibox-content p-md">
                            @include('flash::message')
                            <div class="col-lg-12">
                                <div class="clearfix"></div>
                                <div class="form-group">
                                    {!! Form::label('title','Name') !!}
                                    {!! Form::text('title' , $page->title , ['class' => 'form-control','placeholder' => 'Title','required'=>'true']) !!}
                                </div>
                                <div class="form-group">
                                    {!! RTEForm::rte('content', $page->content) !!}
                                </div>
                                <div class="form-group">
                                    {!! Form::textarea('short_description' , $page->short_description , ['class' => 'form-control','placeholder' => 'Short Description']) !!}
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <button type="button" class="btn btn-primary pull-right add_product_btn">Add Product</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ibox-content widget white-bg">
                        <div class="clearfix"></div>
                        <div class="form-group">
                            {!! Form::label('author','Author') !!}
                            {!! Form::text('author' , customPageFieldFind($page->id,'author','') , ['class' => 'form-control','placeholder' => 'Title','required'=>'true']) !!}
                        </div>
                    </div>

                </div>
                <div class="col-lg-4">
                    <div class="ibox-content widget white-bg">
                        <div class="clearfix"></div>
                        <div class="form-group">
                            {!! Form::label('status','Status') !!}
                            <Select name="status" class="form-control">
                                <option value="1" {{ (isset($page->status) && $page->status == 1) ? 'Selected' : '' }}>Published</option>
                                <option value="0" {{ (isset($page->status) && $page->status == 0) ? 'Selected' : '' }}>Draft</option>
                            </Select>
                        </div>
                        <div class="form-group">
                            {!! Form::label('published_date','Publish Date:') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </span>
                                <input type="text" name="published_date" id="published_date" class="form-control" value="{{ (!empty($page->published_date)) ? $page->published_date : date('Y-m-d') }}">
                            </div>
                        </div>
                        <div class="form-group">
                            {!! Form::label('regions', 'Available in Regions') !!}
                            {!! Form::select('region_id[]', $regions, json_decode($page->regions, true), ['class' => 'form-control page_region_select input-sm', 'multiple', 'style' => 'width:100%;']) !!}
                        </div>
                        <div class="clearfix"></div>
                        <button type="submit" class="btn btn-primary pull-right">Update</button>
                        <div class="clearfix"></div>
                    </div>

                    <div class="ibox-content widget white-bg">
                        <div class="clearfix"></div>
                        <div class="form-group">
                            <h3>Categories</h3>
                            @include('Website::blog-post._category')
                        </div>
                    </div>
                    <div class="ibox-content widget white-bg">
                        <div class="clearfix"></div>
                        <div class="form-group">
                            <h3>Feature Image</h3>
                            <div class="featured_image-parent">
                                <a style="display: {{!empty($page->featured_image) ? 'block' : 'none'}};" href="javascript:void(0)" class="remove-image"> x </a>
                                <img src="{{ $page->featured_image }}" class="featured_image"></img><br>
                            </div>
                            <a href="javascript:void(0);" onclick="featureImage()">Set Feature Image</a>
                            <input type="hidden" name="featured_img" id="featured_img_input" value="{{ $page->featured_img }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {!! Form::close() !!}
    @include('Website::blog-post.product_popup')
    @include('Website::layout._gallery_popup')
@endsection

@section('footer')
    <script src="{{ asset('/plugins/dateRangePicker/moment.js') }}" ></script>
    <script src="{{ asset('/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}" ></script>
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("#add_new_item").click(function(){
                $('.form-item-outer').toggle('slide');
            });
            dateTimePicker('#published_date', 'YYYY-MM-DD');
            $('.page_region_select').select2();
        });
        function featureImage()
        {
            openGallery();
            $('#gallery_manager').modal('show');
        }
        $('#gallery_manager').on('shown.bs.modal', function (e) {
            $('#gallery_manager .other_file_image,#gallery_manager li#slider_tab').remove();
            if( $('#gallery_manager .use_gallery_image').length < 1 ) {
                $('#gallery_manager').find('.modal-footer').append('<button type="button" class="btn btn-primary use_gallery_image">Insert Image</button>');
            }
        });

        $(document).on('click', '#gallery_manager .use_gallery_image', function() {
            var amazon_url  = $(this).find('img').attr('src');
            if( $('#gallery_manager li.selected').length > 0 ) {
                var media_id = $('#gallery_manager li.selected a').data('id');
                var media_url = $('#gallery_manager li.selected a').data('src');
                $('form').find('img.featured_image').attr('src', media_url);
                $('form').find('img.featured_image').show();
                $('form').find('.remove-image').show();
                $('#gallery_manager').modal('hide');
                $('#featured_img_input').val(media_id);
            }
        });

        $(document).on('click', '.remove-image', function () {
            $('form').find('img.featured_image').attr('src', '');
            $('form').find('.remove-image').hide();
            $('form').find('#featured_img_input').val('');
        });

        $(document).on('click', '.add_product_btn', function () {
            $.ajax({
                type: "GET",
                url: '{{ blog_url('post/products')}}',
                success: function(data) {
                    $('#blog_products .modal-body').html(data);
                    $('#blog_products').modal('show');
                }
            });
        });

        $(document).on('click', '.save_pro_groups', function () {
            const activeTab = $(".tabs-container li.active a").data('type');
            let html = $('[name="content"]').val();
            if(activeTab === 'products') {
                let proIds = '';
                const selectedProducts =  $(".blog_post_products :selected");
                const proCount = selectedProducts.length;
                selectedProducts.each(function(index) {
                    proIds += $(this).val() + (proCount === (index + 1) ? '' : ',');
                });
                html += ' [Product_'+proIds+']';
            }else if(activeTab === 'group') {
                const groupId = $(".blog_post_product_group :selected").val();
                html += ' [Pro_group_'+groupId+']';
            }else{
                const categoryId = $(".blog_post_product_category :selected").val();
                html += ' [Pro_category_'+categoryId+']';
            }
            $('.jodit-wysiwyg').html(html);
            $('.rte-form-editor').html(html);
            $('.jodit-wysiwyg').trigger('click');
            $('#blog_products').modal('hide');
        });

        function savePage(object)
        {
            /*var sHTML = $('.summernote').summernote('code');
            $('#post-content').val(sHTML);*/
            return reloadAjaxSubmit('updatePage',"{{ application_url('website/blog/post/save') }}",'title','Submit');
        }
        function saveCategory() {
            var title = $(".category_title").val();
            var parent_id =  $( ".category_parent option:selected" ).text();
            $.ajax({
                data: 'title=' + title + '&parent_id=' + parent_id + '&_token={{ csrf_token() }}',
                type: "POST",
                url: '{{ blog_url('category/create')}}',
                success: function() {
                    toastrShow('Category has been created Successfully!','Success');
                    location.reload();
                }
            });
        }
        function mark_set_cat(id) {
            $.ajax({
                data: 'category_id=' + id + '&_token={{ csrf_token() }}',
                type: "POST",
                url: '{{ blog_url('category/item-page/'.$page->id)}}',
                success: function() {
                    toastrShow('Updated Successfully!','Success');
                }
            });
        }
    </script>
@endsection