@extends('layouts.backend')

@section('extra_css')
    <meta name="token" id="token" value="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/iCheck/skins/flat/green.css') }}">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

    <link rel="stylesheet" href="{{ asset('assets/css/custom.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/google-code-prettify/bin/prettify.min.css') }}">
    <style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
</style>
@endsection


@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>Post</h3>
                </div>

                <div class="title_right">
                    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for...">
                            <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12">
                    @if (count($errors) > 0)
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button> {{ $error }}</div>
                        @endforeach
                    @endif

                    @if (Session::get('message'))
                        <div class="alert alert-info alert-dismissible fade in" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button> {{ Session::get('message') }}
                        </div>
                    @endif
                </div>


                <form method="post" action="{{ route('post.store') }}"
                      class="form-horizontal form-label-left" enctype="multipart/form-data">
                    {{ csrf_field() }}

                    <div class="col-md-8 col-sm-12 col-xs-12">


                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Create New Post
                                    <small>Please fill up this form carefully</small>
                                </h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                           aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Settings 1</a>
                                            </li>
                                            <li><a href="#">Settings 2</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">

                                <br/>


                                <div class="col-md-12">
                                    <div class="form-horizontal form-label-left">
                                        <div class="form-group">
                                            <label>Title</label>
                                            <input name="title" type="text" class="form-control" required="required">
                                        </div>
                                    </div>
                                </div>{{--Title--}}

                                <div class="col-md-12">
                                    <div class="form-horizontal form-label-left">
                                        <div class="form-group">
                                            <label>Sub Title</label>
                                            <input name="subtitle" type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>{{--Sub Title--}}

                                <div class="col-md-12">
                                    <div class="form-horizontal form-label-left">
                                        <div class="form-group">
                                            <label>Excerpt</label>
                                            <input name="excerpt" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                </div>{{--Excerpt--}}

                                <div class="col-md-12">
                                    <div class="form-horizontal form-label-left">
                                        <div class="form-group">
                                            <label>Post Content</label>
                                            <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.11/tinymce.min.js"></script>
                                            <textarea id="post_content" name="post_content" class="form-control my-editor"
                                                      rows="15"></textarea>
                                            <script>
                                                var editor_config = {
                                                    path_absolute: "/",
                                                    selector: "#post_content",
                                                    plugins: [
                                                        "textcolor advlist autolink lists link image charmap print preview hr anchor pagebreak",
                                                        "searchreplace wordcount visualblocks visualchars code fullscreen",
                                                        "insertdatetime media nonbreaking save table directionality",
                                                        "emoticons template paste textcolor colorpicker textpattern"
                                                    ],
                                                    toolbar: "forecolor backcolor insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
                                                    relative_urls: false,
                                                    file_browser_callback: function (field_name, url, type, win) {
                                                        var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                                                        var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

                                                        var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
                                                        if (type == 'image') {
                                                            cmsURL = cmsURL + "&type=Images";
                                                        } else {
                                                            cmsURL = cmsURL + "&type=Files";
                                                        }

                                                        tinyMCE.activeEditor.windowManager.open({
                                                            file: cmsURL,
                                                            title: 'Filemanager',
                                                            width: x * 0.8,
                                                            height: y * 0.8,
                                                            resizable: "yes",
                                                            close_previous: "no"
                                                        });
                                                    }
                                                };

                                                tinymce.init(editor_config);
                                            </script>
                                        </div>
                                    </div>
                                </div>{{--Sub Title--}}
                                <div class="clearfix"></div>
                                <div class="ln_solid"></div>
                                <div class="form-group">
                                    <div class="col-md-3 col-sm-12 col-xs-12">

                                        <button type="submit" class="text-center btn btn-success submit">Create a new
                                            Post
                                        </button>

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

                    <div class="col-md-4">
                        <div class="x_panel">
                            <div class="x_content">
                                <div class="col-md-4">
                                    <label class="mb-1">Is Lead?</label>
                                    <input type="checkbox" id="sticky" value="0" name="sticky">
                                    <div class=" position" style="display: none;" id="sticky_position_input">
                                        <label style="display: flex;">
                                            <input id="sticky_position" type="number" name="sticky_position" min="1" placeholder="Position" style="width: 100%;border: 1px solid #ccc;padding: 5px 10px;border-radius: 4px;margin-top: 6px;">
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="featured_image">Featured Image<span class="text-danger"></span></label>
                                        <div>
                                            <input type="file" name="featured_image" class="getInputFile" id="validatedCustomFile"
                                                   hidden/>
                                            
                                            <label class="pt-1" id="profileLabel" for="image">
                                                <img style="margin-top:15px;max-height:100px;" class="profileImgShow" src="{{ asset('assets/img/default.png')}}">
                                            </label>
                                            <span class="text-danger">{{ $errors->has('featured_image') ? $errors->first('featured_image'):''}}</span>
                                        </div>
                                    </div>
                                    
                                </div>{{--featured_image--}}																<div class="col-md-12">                                    <div class="form-horizontal form-label-left">                                        <div class="form-group">                                            <label>Photo Caption</label>                                            <input type="text" id="photo_caption" name="photo_caption" class="form-control">                                        </div>                                    </div>                                </div>{{--Photo Caption--}}
                                <div class="col-md-12">
                                    <div class="form-horizontal form-label-left">
                                        <div class="form-group">
                                            <label>Do you want to publish it now?</label>
                                            <select name="post_status" class="form-control">
                                                <option value="1">Yes</option>
                                                <option value="2">No</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>{{--post_status--}}
                                <div class="col-md-12">
                                    <div class="form-horizontal form-label-left">
                                        <div class="form-group">
                                            <label>Writer Name</label>
                                            <input name="writer_name" type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>{{--Writer Name--}}
                                {{--<div class="col-md-12">
                                    <div class="form-horizontal form-label-left">
                                        <div class="form-group">
                                            <label>Lead News?</label>
                                            <select name="sticky" class="form-control">
                                                <option value="2">No</option>
                                                <option value="1">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>Sticky--}}
                               
                                <div class="col-md-12">

                                    <div class="form-group">
                                        {!! Form::label('categories', 'Categories:') !!}
                                        {!! Form::select('category_id[]', $categories, null, ['required', 'id' => 'category_list', 'class' => 'form-control', 'multiple']) !!}

                                    </div>
                                </div>{{--categories--}}

                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('divisions', 'Divisions:') !!}
                                                {!! Form::select('division_id[]', $divisions, null, ['id' => 'division_list', 'class' => 'form-control']) !!}

                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="district_list">Select District</label>
                                                <select id="district_list" name="district_id" class="form-control">
                                                    <option>District</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                </div>{{--division-district--}}


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


    <!-- Trigger the modal with a button -->


@endsection

@section('extra_js')
    <script src="{{ asset('assets/vendors/parsleyjs/dist/parsley.min.js') }}"></script>
    <script src="{{ asset('vendor/laravel-filemanager/js/lfm.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script>
    
    let sticky = $("#sticky");
        if (sticky.is(':checked')) {
            $("#sticky_position_input").css("display", "block");
        }
        sticky.on('click', function () {
            if (sticky.is(':checked')) {
                sticky.val(1);  // checked
                $("#sticky_position_input").css("display", "block");
            } else {
                sticky.val(0);
                $("#sticky_position_input").css("display", "none");
                $("#sticky_position").val('');
            }
        });
        document.getElementById("sticky_position").addEventListener("keyup", function() {
          this.value = this.value.replace(/[^0-9]/g,"");
        });    
        $('#lfm').filemanager('image');
        $('#category_list').select2();
        $('#division_list').select2({
            divisions   : true
            }
        );

        $('#division_list').on('change', function (e) {
            var division_id = e.target.value;
            $.get("{{ route('division.district') }}/" + division_id, function (data) {
                /*success data*/
                $('#district_list').empty();
                $.each(data, function (index, districtObj) {
                    $('#district_list').append('<option value="'+ districtObj.id +'">'+ districtObj.name +'</option>')
                })
            })
            
        
        });

        $('.getInputFile').change(function (e) {
            var reader = new FileReader();
            reader.onload = function (e) {
                console.log(e.target.result);
                $('.profileImgShow').attr('src', e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        })
    </script>
@endsection