@extends('layouts.admin')
@section('title', 'Create Blog')
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="mb-2 row">
                    <div class="col-sm-12">
                        <h1 class="m-0 text-dark">Blog</h1>
                    </div>
                    <div class="col-sm-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item text-warning">
                                <a href="{{ url('/home') }}">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item active">Add Blog</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                @if (count($errors) > 0)
                                    @foreach ($errors->all() as $error)
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                            <strong>{{ $error }}!</strong>
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    @endforeach
                                @endif
                                <div class="mb-2">
                                    <a href="{{ url('/posts') }}" class="btn btn-primary btn-sm">
                                        Back
                                    </a>
                                </div>

                                <form enctype="multipart/form-data" id="post-form" action="/post/store" method="post">
                                    <div class="row">
                                        <div class="col-lg-8">
                                            <div class="mt-3 form-group">
                                                <label for="title">Title *</label>
                                                <input name="title" required class="form-control" type="text">
                                            </div>
                                            <div class="mt-3">
                                                <label for="description">Description </label>
                                                <textarea name="description" class="form-control" id="description"></textarea>
                                            </div>
                                            <div class="mt-3">
                                                <label for="Category">Category</label>
                                                <select class="form-control" name="category" id="category">
                                                    <option selected value="1">Uncategorized</option>
                                                    @foreach ($categories as $item)
                                                        @if ($item->id != 1)
                                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                        @endif
                                                    @endforeach

                                                </select>
                                            </div>
                                            <div class="mt-3">
                                                <label for="visibility">Visibility</label>
                                                <select class="form-control" name="visibility" id="visibility">
                                                    <option selected value="draft">Draft</option>
                                                    <option value="published">Published</option>
                                                </select>
                                            </div>
                                            <div class="mt-3">
                                                <label for="video_url">Video URL <small>(optional)</small></label>
                                                <input id="video_url" name="video_url" class="form-control" type="url">
                                                <small>
                                                    Youtube videos are recommended.
                                                </small>
                                            </div>
                                            <div class="mt-3">
                                                <div class="row">
                                                    <div class="col-lg-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" name="has_comments"
                                                                type="checkbox" checked>
                                                            <label class="form-check-label">Allow Comments</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" name="is_featured"
                                                                type="checkbox">
                                                            <label class="form-check-label">Set as featured</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4"></div>
                                                </div>
                                            </div>
                                            <!--<div class="mt-3">-->
                                            <!--    <label for="">Tags</label>-->
                                            <!--    <input class="form-control" name="tags" type="text">-->
                                            <!--    <small>Enter comma separated values</small>-->
                                            <!--</div>-->

                                            <div class="mt-3">
                                                <button id="save-btn" class="btn btn-success w-100">Submit</button>
                                            </div>

                                        </div>
                                        <div class="col-lg-4">
                                            <div class="mt-3">
                                                <label for="featured_img">Featured Image</label>
                                                <div id="img-preview">
                                                    <div class="featured_img"></div>
                                                </div>
                                                <input accept="images/*" hidden type="file" name="featured_img"
                                                    id="featured_img">
                                            </div>
                                            <div class="mt-3">
                                                <label for="gallery">Other Images</label>
                                                <div id="gallery_preview" class="mb-2">

                                                </div>
                                                <input hidden accept="images/*" multiple type="file" name="photos[]"
                                                    id="other_imgs">
                                                <button type="button" id="other_imgs_btn"
                                                    class="btn btn-outline-info w-100">Add Other
                                                    Images</button>
                                            </div>
                                            <div class="mt-3">
                                                <h6>SEO</h6>
                                            </div>
                                            @csrf

                                            <div class="mt-3">
                                                <label for="meta_description">Meta Description</label>
                                                <textarea class="form-control" name="meta_description" id="meta_description" cols="17" rows="5"></textarea>
                                            </div>
                                            <div class="mt-3">
                                                <label for="keywords">Keywords</label>
                                                <input name="meta_keywords" class="form-control" type="text">
                                            </div>
                                        </div>
                                    </div>
                                </form>


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

    </div>

@endsection
@section('css')
    <style>
        .featured_img {
            min-height: 300px;
            min-width: 300px;
            background-color: #efefef;
            cursor: pointer;
        }
    </style>
@stop
@section('js')
    <script src="/resources/resources/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script>
        $(document).on('click', '.featured_img', function() {
            $('#featured_img').trigger('click')
        })
        $('#video_url').on('change',function(){
            // Get the URL of the current page
            let strVal = $(this).val()
            const url = new URL(strVal);
            
            
            // Get the value of the 'v' query parameter
            const videoId = url.searchParams.get("v");
            if(videoId){
                $(this).val(`https://www.youtube.com/embed/${videoId}`)
            }else if(!strVal.includes('embed')){
                 $(this).val(``)
            }
        })
        
      
           $(document).on('change','.note-video-url',function(){
             let strVal = $(this).val()
            const url = new URL(strVal);
            // Get the value of the 'v' query parameter
            const videoId = url.searchParams.get("v");
            if(videoId){
                $(this).val(`https://www.youtube.com/embed/${videoId}`)
            }else if(!strVal.includes('embed')){
                 $(this).val(``)
            }
        })
        let other_images = []
        let input = $('#other_imgs')
        $(document).on('click', '#other_imgs_btn', function() {
            $('#other_imgs').trigger('click')
        })
        $('#other_imgs').on('change', function(ev) {
            let files = ev.target.files;
            let out = ''
            Array.from(files).map((file, i) => {
                other_images.push(file)
                out += `
                <div
                                    class="other_imgs d-flex mt-2 justify-content-between align-items-center shadow-sm p-3 bg-white">
                                    <div>
                                        <img class="rounded" style="max-height: 30px" src="${URL.createObjectURL(file)}" alt=""
                                            srcset="">
                                    </div>
                                    <div>
                                        <i data-idx="${i}" class="fas fa-times rem-img cursor-pointer text-danger"></i>
                                    </div>
                                </div>
                `
            })
            $('#gallery_preview').html(out)
        })

        $('#featured_img').on('change', function(ev) {
            let url = URL.createObjectURL(ev.target.files[0])
            $('#img-preview').html(`
            <div style="background-image:url(${url});background-size:cover" class="featured_img"></div>
            `)
        })
        $(document).on('click', '.rem-img', function() {
            const dt = new DataTransfer();
            let pos = $(this).data('idx');
            $(this).parent().parent().remove()
            let files = input[0].files;
            for (let file of files) {
                if (file.name !== other_images[pos].name) {
                    dt.items.add(file)
                }

            }
            input[0].onchange = null // remove event listener
            input[0].files = dt.files // this will trigger a change event

        })
        $('#description').summernote()

        $('#post-form').validate({
            rules: {
                title: {
                    required: true,
                    minlength: 4,
                },

            },
            messages: {
                title: {
                    required: "Please enter a title",
                    minlength: "Your password must be at least 5 characters long"
                },

            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid').addClass('is-valid');
            },
            submitHandler: function() {

                if ($('#post-form').valid()) {
                    $("#save-btn").attr("disabled", true).text('Posting...');
                    // $("#post-form").submit()
                    return true


                }
            }
        });
    </script>
@endsection