@extends('cms.layouts.app')

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

    <style>
        .cke_contents {
            height: 100px !important;
        }
    </style>
@endsection

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

    <x-cms.bread-crumb title="<i class='fa fa-plus'></i> Add Portfolio">

        <li class="breadcrumb-item">Cms</li>
        <li class="breadcrumb-item" aria-current="page">
            Portfolio
        </li>
    </x-cms.bread-crumb>
    <!-- END Hero -->
    <!-- News Content -->
    <div class="content">

        <div class="block">
            {{-- <div class="block-header">
                <h3 class="block-title">Validation Form</h3>
            </div> --}}
            <div class="block-content block-content-full">
                <form action="{{ route('galleries.store') }}" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}

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

                            <div class="form-group">
                                <label for="Description">Description</label>
                                <textarea id="Description" class="form-control" rows="5" name="description" placeholder="Description...">{{ old('description') }}</textarea>
                                <span class="text-danger">{{ validationError($errors->get('description')) }}</span>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-check">
                                        <input class="form-check-input" id="showInGallery" type="checkbox"
                                            name="show_in_gallery_page" value="1" checked>
                                        <label class="form-check-label" for="showInGallery">Show In Gallery Page</label>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-check">
                                        <input class="form-check-input" id="aspectRatio" type="checkbox" name="aspect_ratio"
                                            value="1" checked>
                                        <label class="form-check-label" for="aspectRatio">Aspect Ratio ?</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" checked>
                                        <label class="form-check-label" for="isActive">Active</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-5">
                            {{-- <div class="form-group">
                                <label for="display_order">Parent</label>
                                <select name="parent_id" class="js-select2 form-control" data-placeholder="Choose One...">
                                    <option></option>
                                    {{ generateOptions($galleries, 'id', 'name', old('parent_id')) }}
                                </select>
                            </div> --}}

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="image">Image</label>
                                        <input type="file" class="form-control" id="image" name="galleryImage"
                                            maxlength="100">
                                        <span class="text-danger">{{ validationError($errors->get('galleryImage')) }}</span>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="display_order">Display Order</label>
                                        <input type="number" class="form-control" id="display_order" name="display_order"
                                            value="{{ old('display_order') }}" min=0 oninput="validity.valid||(value='');"
                                            placeholder="Display Order...">
                                    </div>
                                </div>


                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="width">Width</label>
                                        <input type="number" class="form-control" id="width" name="width"
                                            value="{{ old('width') }}" min=0 oninput="validity.valid||(value='');"
                                            placeholder="Width...">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="height">Height</label>
                                        <input type="number" class="form-control" id="height" name="height"
                                            value="{{ old('height') }}" min=0 oninput="validity.valid||(value='');"
                                            placeholder="Height...">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-right">
                        <a class="btn btn-danger btn-sm" href="{{ route('galleries.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-plus"></i> Save</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