@extends('admin.layouts.app')
@section('title', isset($blog) ? 'Edit blog' : 'Add blog')
@include('admin.nav')
@section('main')
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-main">
                    <h4 class="text-capitalize breadcrumb-title">{{ isset($category) ? 'Update' : 'Add' }} Blog</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card card-Vertical card-default card-md mb-4">
                    <div class="card-body pb-md-30" style="padding: 0;">
                        <div class="Vertical-form">
                            <form method="POST" enctype="multipart/form-data"
                                action="{{ isset($blog) ? route('blog-update', $blog) : route('blog-store') }}">
                                @csrf
                                @isset($blog)
                                    @method('PUT')
                                @endisset
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title" class="color-dark fs-14 fw-500 align-center">Title</label>
                                            <input name="title" type="text" value="{{ $blog->title ?? old('title') }}"
                                                @class([
                                                    'error' => $errors->has('title'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) id="title" placeholder="Enter Title">
                                            @error('title')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="subtitle"
                                                class="color-dark fs-14 fw-500 align-center">Subtitle</label>
                                            <input name="subtitle" type="text"
                                                value="{{ $blog->subtitle ?? old('subtitle') }}"
                                                @class([
                                                    'error' => $errors->has('subtitle'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) id="subtitle" placeholder="Enter Subtitle">
                                            @error('subtitle')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="slug"
                                                class="color-dark fs-14 fw-500 align-center">Slug</label>
                                            <input name="slug" type="text"
                                                value="{{ $blog->slug ?? old('slug') }}"
                                                @class([
                                                    'error' => $errors->has('slug'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) id="slug" placeholder="Enter Subtitle">
                                            @error('slug')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="desc"
                                                class="color-dark fs-14 fw-500 align-center">Description</label>
                                            <div class="form-group formElement-editor mb-0">
                                                <textarea name="desc" id="desc" placeholder="Type description" @class([
                                                    'error' => $errors->has('desc'),
                                                    'form-control-lg',
                                                ])>{{ $blog->desc ?? old('desc') }}</textarea>
                                            </div>
                                            @error('desc')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="blog_category_id"
                                                class="color-dark fs-14 fw-500 align-center">Category</label>
                                            <select id="blog_category_id" name="blog_category_id"
                                                @class([
                                                    'error' => $errors->has('desc'),
                                                    'form-control',
                                                ])>
                                                <option>Select Category</option>
                                                @foreach ($blogCategories as $cat)
                                                    <option
                                                        {{ old('blog_category_id', @$blog->blog_category_id) == $cat->id ? 'selected' : '' }}
                                                        value="{{ $cat->id }}">{{ $cat->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('blog_category_id')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="date">Date</label>
                                            <input type="date" id="date" name="date" placeholder="Select a date"
                                                @if (isset($blog->date)) value="{{ date('Y-m-d', strtotime($blog->date)) }}"
                                                   @elseif (old('date')) value="{{ date('Y-m-d', strtotime(old('date'))) }}" @endif
                                                @class([
                                                    'error' => $errors->has('date'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])>
                                            @error('date')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="sortOrder" class="color-dark fs-14 fw-500 align-center">Sort
                                                Order</label>
                                            <input name="sortOrder" type="text" id="sortOrder" placeholder="0"
                                                value="{{ $blog->sortOrder ?? old('sortOrder') }}"
                                                @class([
                                                    'error' => $errors->has('sortOrder'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])>
                                            @error('sortOrder')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="author_id"
                                                class="color-dark fs-14 fw-500 align-center">Author</label>
                                            <select id="author_id" name="author_id" @class([
                                                'error' => $errors->has('desc'),
                                                'form-control',
                                            ])>
                                                <option>Select Author</option>
                                                @foreach ($authors as $author)
                                                    <option
                                                        {{ old('author_id', @$blog->author_id) == $author->id ? 'selected' : '' }}
                                                        value="{{ $author->id }}">{{ $author->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('author_id')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="metaTitle" class="color-dark fs-14 fw-500 align-center">Meta
                                                Title</label>
                                            <input name="metaTitle" type="text"
                                                class="form-control ih-medium ip-gray radius-xs b-light px-15"
                                                id="metaTitle" placeholder="Enter Meta Title"
                                                value="{{ $blog->metaTitle ?? old('metaTitle') }}"
                                                @class([
                                                    'error' => $errors->has('metaTitle'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])>
                                            @error('metaTitle')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="metaKeyword" class="color-dark fs-14 fw-500 align-center">Meta
                                                Keyword</label>
                                            <input name="metaKeyword" type="text"
                                                class="form-control ih-medium ip-gray radius-xs b-light px-15"
                                                id="metaKeyword" placeholder="Enter Meta Keyword"
                                                value="{{ $blog->metaKeyword ?? old('metaKeyword') }}"
                                                @class([
                                                    'error' => $errors->has('metaKeyword'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])>
                                            @error('metaKeyword')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="metaDesc" class="color-dark fs-14 fw-500 align-center">Meta
                                                Description</label>
                                            <input name="metaDesc" type="text"
                                                class="form-control ih-medium ip-gray radius-xs b-light px-15"
                                                id="metaDesc" placeholder="Enter Meta Description"
                                                value="{{ $blog->metaDesc ?? old('metaDesc') }}"
                                                @class([
                                                    'error' => $errors->has('metaDesc'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])>
                                            @error('metaDesc')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="upload-1"
                                                        class="color-dark fs-14 fw-500 align-center">Blog
                                                        Image</label>
                                                    <div class="atbd-tag-wrap">
                                                        <div class="atbd-upload">
                                                            <div class="atbd-upload__button">
                                                                <a href="javascript:void(0)"
                                                                    class="btn btn-lg btn-outline-lighten btn-upload"
                                                                    onclick="$('#upload-1').click()"> <span
                                                                        data-feather="upload"></span> Click to Upload</a>
                                                                <input type="file" name="image" class="upload-one"
                                                                    id="upload-1">
                                                            </div>
                                                            <div class="atbd-upload__file">
                                                                <ul>
                                                                </ul>
                                                            </div>
                                                            @error('image')
                                                                <span class="error">{{ $message }}</span>
                                                            @enderror
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            @if (isset($blog))
                                                <div class="col-md-6">
                                                    <img style="border: 1px solid lightgray" height="100"
                                                        width="100"src="{{ isset($blog) ? asset('storage/blogs/' . $blog->image) : '' }}" />
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-3 col-12">
                                                <div class="form-group">
                                                    <label for="featured_images"
                                                        class="color-dark fs-14 fw-500 align-center">Featured
                                                        Images</label>
                                                    <div class="atbd-tag-wrap">

                                                        <div class="atbd-upload">
                                                            <div class="atbd-upload__button">
                                                                <a href="javascript:void(0)"
                                                                    class="btn btn-lg btn-outline-lighten btn-upload"
                                                                    onclick="$('#featured_images').click()"> <span
                                                                        data-feather="upload"></span> Click to Upload</a>
                                                                <input type="file" multiple name="featured_images[]"
                                                                    class="upload-one" id="featured_images">
                                                            </div>
                                                            <div class="atbd-upload__file">
                                                                <ul>
                                                                </ul>
                                                            </div>
                                                            @error('featured_images')
                                                                <span class="error">{{ $message }}</span>
                                                            @enderror
                                                            @error('featured_images.*')
                                                                <span class="error">{{ $message }}</span>
                                                            @enderror
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            @if (isset($blog))
                                                <div class="col-md-8 col-12">
                                                    <div class="row">
                                                        @foreach ($blog->images as $image)
                                                            {{-- delete image on click event --}}
                                                            <div class="col-2">
                                                                <a href="javascript:void(0)"
                                                                    onclick="handleDeleteImage(this,'{{ route('deleteFeaturedImage', $image) }}')">
                                                                    <span data-feather="x-circle"></span>
                                                                </a>
                                                                <img style="border: 1px solid lightgray" height="50"
                                                                    width="50"
                                                                    src="{{ asset('storage/blogs/' . $image->image) }}" />
                                                            </div>
                                                        @endforeach
                                                    </div>

                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="layout-button mt-15">
                                            <button type="submit"
                                                class="btn btn-primary btn-default btn-squared px-20">{{ isset($blog) ? 'Update' : 'Save' }}</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- ends: .card -->

            </div>
        </div>
    </div>
@endsection
@section('pageJs')
    <script src="{{ asset('admin/js/ckeditor.js') }}"></script>
    <script>
        CKEDITOR.replace('desc');
        function handleDeleteImage(thisObj, route) {
            const res = confirm(`Delete image?`)
            if (!res) return false;
            fetch(route, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json, text-plain, */*',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(res => res.json())
                .then(data => {
                    //if status is ok   
                    if (data.status == 'ok') {
                        //remove the image from the dom
                        thisObj.parentElement.remove();
                        //show a success message
                        alert(data.message);
                    } else {
                        //show an error message
                        alert(data.message);
                    }
                })
                .catch(err => console.log(err))
        }
    </script>
@endsection