Simple File Manage Design by index.php

��

@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">
                                                <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>
                                                <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')

@section('js')

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