@extends('layouts.admin')
@section('title', '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">{{ $post->title }}</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"> Blog Edit</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-header">
                                <a href="/posts" class="btn btn-primary"> <i class="fa fa-chevron-left"></i> back</a>
                            </div>
                            <div class="card-body">
                                <form enctype="multipart/form-data" id="post-form" action="/post/{{ $post->id }}/update"
                                    method="post">
                                    <div class="row">
                                        <div class="col-lg-8">

                                            <div class="mt-3 form-group">
                                                <label for="title">Title *</label>
                                                <input value="{{ $post->title }}" 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" >{{ $post->description }}</textarea>
                                            </div>
                                            <div class="mt-3">
                                                <label for="Category">Category</label>
                                                <select class="form-control" name="category" id="category">
                                                    <option @if ($post->category_id == 1) selected @endif
                                                        value="1">Uncategorized
                                                    </option>
                                                    @foreach ($categories as $item)
                                                        @if ($item->id != 1)
                                                            <option @if ($post->category_id == $item->id) selected @endif
                                                                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 @if ($post->status == 'draft') selected @endif
                                                        value="draft">Draft</option>
                                                    <option @if ($post->status == 'published') selected @endif
                                                        value="published">Published
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="mt-3">
                                                <label for="video_url">Video URL <small>(optional)</small></label>
                                                <input id="video_url" value="{{ $post->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 @if ($post->has_comments) checked @endif
                                                                class="form-check-input" id="has_comments"
                                                                name="has_comments" type="checkbox" checked>
                                                            <label for="has_comments" class="form-check-label">Allow
                                                                Comments</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-check">
                                                            <input @if ($post->is_featured) checked @endif
                                                                id="is_featured" class="form-check-input" name="is_featured"
                                                                type="checkbox">
                                                            <label for="is_featured" 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 style="background-image:url('/assets/images/thumbs/{{ $post->featured_img }}');background-size:cover"
                                                        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>
                                                @if ($post->images)
                                                    <div class="mb-2">
                                                        @php
                                                            $imgs = json_decode($post->images);
                                                        @endphp
                                                        @foreach ($imgs as $key => $item)
                                                            <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: 55px"
                                                                        src="/assets/images/thumbs/{{ $item }}"
                                                                        alt="" srcset="">
                                                                </div>
                                                                <div>
                                                                    <i style="cursor: pointer"
                                                                        data-name="{{ $item }}"
                                                                        class="fas fa-times del-img cursor-pointer text-danger"></i>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif

                                                <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">{{ $post->meta_description }}</textarea>
                                            </div>
                                            <div class="mt-3">
                                                <label for="keywords">Keywords</label>
                                                <input value="{{ $post->meta_keywords }}" name="meta_keywords"
                                                    class="form-control" type="text">
                                            </div>
                                        </div>
                                    </div>
                                </form>

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



    </div>
@stop


@section('css')

    <link rel="stylesheet" href="/css/admin_custom.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>
        $('#description').summernote()
        $(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



        })

        $('#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


                }
            }
        });

        $('.del-img').on('click', function() {
            let img = $(this).data('name')
            if (confirm('Are you sure you want to remove image ?')) {
                $(this).parent().parent().remove();

                $.ajax({
                    method: 'GET',
                    url: `/post/delete-image/{{ $post->id }}?img=${img}`,
                    success: function(resp) {
                        console.log(resp);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                })
            }
        })
    </script>
@stop