@extends('cms.layouts.app')

@section('pre-styles')
    <x-cms.css-helper :select2="true" />
    <x-cms.css-helper :bootstrap="true" />
@endsection

@section('contents')
    <!-- Hero -->

    <x-cms.bread-crumb title="<i class='fa fa-edit'></i> Edit Page">

        <li class="breadcrumb-item">Cms</li>
        <li class="breadcrumb-item" aria-current="page">
            Page
        </li>
    </x-cms.bread-crumb>
    <!-- END Hero -->


    <!-- Page Content -->
    <div class="content">

        <div class="block">
            <div class="block-content block-content-full">
                <form action="{{ route('pages.update', ['page' => $page->id]) }}" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    {{ method_field('PATCH') }}

                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="title">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title" name="title"
                                    value="{{ old('title', $page->title) }}" maxlength="200" required
                                    placeholder="Title...">
                                <span class="text-danger">{{ validationError($errors->get('title')) }}</span>
                            </div>

                            <div class="form-group">
                                <label for="title">Content</label>
                                <textarea id="js-ckeditor" name="contents" placeholder="Content...">{{ old('contents', $page->contents) }}</textarea>

                            </div>

                            <div class="form-group">
                                <label for="Excerpt">Excerpt</label>
                                <textarea id="Excerpt" class="form-control" rows="5" name="excerpt" placeholder="Excerpt...">{{ old('excerpt', $page->excerpt) }}</textarea>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-check">
                                        <input class="form-check-input" id="isNoindex" type="checkbox" name="is_noindex"
                                            value="1" {{ $page->is_noindex ? 'checked' : '' }}>
                                        <label class="form-check-label" for="isNoindex">No Index</label>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-check">
                                        <input class="form-check-input" id="isPublic" type="checkbox" name="is_public"
                                            value="1" {{ $page->is_public ? 'checked' : '' }}>
                                        <label class="form-check-label" for="isPublic">Public</label>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-check">
                                        <input class="form-check-input" id="isActive" type="checkbox" name="is_active"
                                            value="1" {{ $page->is_active ? 'checked' : '' }}>
                                        <label class="form-check-label" for="isActive">Active</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="name">Template</label>
                                <select name="page_template_id" class="js-select2 form-control" id="val-select2"
                                    data-placeholder="Choose One...">
                                    <option></option>
                                    {{ generateOptions($pageTemplates, 'id', 'name', old('page_template_id', $page->page_template_id)) }}
                                </select>
                            </div>

                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label for="featureImage">Feature Image</label>
                                        <input type="file" class="form-control" id="featureImage" name="featureImage"
                                            maxlength="100"
                                            onchange="document.getElementById('featureImagePreview').src = window.URL.createObjectURL(this.files[0])">
                                        <span
                                            class="text-danger">{{ validationError($errors->get('featureImage')) }}</span>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-group mt-4">
                                        @if ($page->featured_image)
                                            <img id="featureImagePreview" class="inline"
                                                src="{{ asset('uploads/pages/' . $page->featured_image) }}"
                                                alt="your image" style="width: 80px; height: 50px; display:inline" />
                                        @else
                                            <img id="featureImagePreview" class="inline"
                                                src="{{ asset('uploads/noimage.png') }}" alt="your image"
                                                style="width: 80px; height: 50px; display:inline" />
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label for="bannerImage">Banner Image</label>
                                        <input type="file" class="form-control" id="bannerImage" name="bannerImage"
                                            maxlength="100"
                                            onchange="document.getElementById('bannerImagePreview').src = window.URL.createObjectURL(this.files[0])">
                                        <span
                                            class="text-danger">{{ validationError($errors->get('bannerImage')) }}</span>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-group mt-4">
                                        @if ($page->banner_image)
                                            <img id="bannerImagePreview" class="inline"
                                                src="{{ asset('uploads/pages/' . $page->banner_image) }}"
                                                alt="your image" style="width: 80px; height: 50px; display:inline" />
                                        @else
                                            <img id="bannerImagePreview" class="inline"
                                                src="{{ asset('uploads/noimage.png') }}" alt="your image"
                                                style="width: 80px; height: 50px; display:inline" />
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="publishForm">Publish From</label>
                                <input type="text" class="js-flatpickr form-control bg-white" id="publishForm"
                                    name="publish_from" value="{{ old('publish_from', $page->publish_from) }}"
                                    placeholder="d-m-Y" data-date-format="d-m-Y">
                            </div>

                            <div class="form-group">
                                <label for="publishTo">Publish To</label>
                                <input type="text" class="js-flatpickr form-control bg-white" id="publishTo"
                                    name="publish_to" value="{{ old('publish_to', $page->publish_to) }}"
                                    placeholder="d-m-Y" data-date-format="d-m-Y">
                            </div>

                            <div id="my-block" class="block block-bordered">
                                <div class="block-header block-header-default">
                                    <h3 class="block-title">SEO Detial</h3>
                                    <div class="block-options">
                                        <button type="button" class="btn-block-option" data-toggle="block-option"
                                            data-action="content_toggle"></button>
                                    </div>
                                </div>

                                <div class="block-content">
                                    <div class="form-group">
                                        <label for="seo_title">Title</label>
                                        <input type="text" class="form-control" id="seo_title" name="seo_title"
                                            value="{{ old('seo_title', $page->seo_title) }}" placeholder="Seo Title...">
                                    </div>

                                    <div class="form-group">
                                        <label for="tags">Tags</label>
                                        <input type="text" class="form-control" id="tags" name="tags"
                                            value="{{ old('tags', $page->seo_tags) }}" placeholder="Seo Tags...">
                                    </div>

                                    <div class="form-group">
                                        <label for="seo_detail">Detail</label>
                                        <textarea id="seo_detail" class="form-control" name="seo_detail" placeholder="Detail">{{ old('seo_detail', $page->seo_details) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-right">
                        <a class="btn btn-danger btn-sm" href="{{ route('pages.index') }}" title=""><i
                                class="fa fa-angle-double-left"></i> Cancel</a>
                        <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- END Page Content -->
@endsection


@section('scripts')
    <x-cms.js-helper :ckeditor="true" />
    <x-cms.js-helper :datepicker="true" />
    <x-cms.js-helper :select2="true" />

    <script>
        // Init full text editor
        if (jQuery('#js-ckeditor2:not(.js-ckeditor-enabled)').length) {
            CKEDITOR.replace('js-ckeditor2');

            // Add .js-ckeditor-enabled class to tag it as activated
            jQuery('#js-ckeditor2').addClass('js-ckeditor-enabled');
        }
    </script>
@endsection