@extends('admin.layouts.admin_app')
@include('admin.include.form-styles')
@section('dashboard_content')
    <header class="page-header">
        <h2>Article</h2>
    </header>
    <section class="panel">
        <header class="panel-heading">
            <h2 class="panel-title">New Article</h2>
            <div class="pull-right">
                <a href="{{ route('articulo.index') }}" class="btn btn-default">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary" form="articulo-form">
                    Save
                </button>
            </div>
        </header>
        <div class="panel-body">
            <form id="articulo-form"
                action="{{ $articulo->exists ? route('articulo.update', $articulo->id_articulo) : route('articulo.store') }}"
                class="form-horizontal" method="post" onsubmit="$('[form=\'articulo-form\']').prop('disabled', true)"
                enctype="multipart/form-data">

                @if ($articulo->exists)
                    @method('PATCH')
                @endif

                @csrf

                <div class="row">
                    <div class="col-lg-8">
                        <div class="row index-content">
                            <div class="card">
                                <h3 class="margin-x">
                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
                                    General Information
                                </h3>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="form-group {{ $errors->has('title') ? 'has-error' : null }}">
                                            <label class="control-label" for="title">Title:</label>
                                            <input type="text" id="title" name="title" class="form-control"
                                                value="{!! old('title') ?? $articulo->titulo !!}">
                                            <label class="help-block">
                                                {{ $errors->has('title') ? $errors->first('title') : null }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group {{ $errors->has('title') ? 'has-error' : null }}">
                                            <label class="control-label" for="language">Language:</label>
                                            <select class="form-control" id="language" name="language">
                                                <option value="es" >Spanish</option>
                                                <option value="en" >English</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group {{ $errors->has('autor') ? 'has-error' : null }}">
                                            <label class="control-label" for="autor">Author:</label>
                                            <input type="text" id="autor" name="autor" class="form-control"
                                                value="{!! old('autor') ?? $articulo->autor !!}">
                                            <label class="help-block">
                                                {{ $errors->has('autor') ? $errors->first('autor') : null }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div id="sectionCategory" class="form-group {{ $errors->has('category') ? 'has-error' : null }}">
                                            <label class="control-label" for="category">Category:</label>
                                            <input type="text" data-role="tagsinput" id="category"
                                                name="category"
                                                class="form-control d-none"
                                                value="{!! old('categoria') ?? $articulo->categoria !!}">
                                            <label class="help-block">
                                                {{ $errors->has('category') ? $errors->first('category') : null }}
                                            </label>
                                        </div>
                                        <div>  
                                            <label for="">Available categories (click to add):</label>
                                        </div>
                                        @include('admin.articulo.categories-tags')
                                        
                                    </div>
                                </div> <br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('description') ? 'has-error' : null }}">
                                            <label class="control-label" for="description">Description:</label>
                                            <textarea class="form-control" id="description" rows="5" name="description">
                                            {!! old('description') ?? $articulo->descripcion !!}
                                        </textarea>
                                            <label class="help-block">
                                                {{ $errors->has('description') ? $errors->first('description') : null }}
                                            </label>
                                        </div>
                                    </div>
                                </div> <br>
                                <div class="row my-2">
                                    <div class="col-lg-8">
                                        <span>Note: To use the banner section you will need to set the id [[banner]] in the content data</span>                         
                                    </div>                                    
                                </div>
                                <div class="row mt-2">                                         
                                    <div class="col-lg-6">
                                        <div class="form-group {{ $errors->has('title_banner') ? 'has-error' : null }}">
                                            <label class="control-label" for="title_banner">Title banner:</label>
                                            <input type="text" id="title_banner" name="title_banner" class="form-control"
                                                value="{!! old('title_banner') ?? $articulo->title_banner !!}">
                                            <label class="help-block">
                                                {{ $errors->has('title_banner') ? $errors->first('title_banner') : null }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group {{ $errors->has('color_banner') ? 'has-error' : null }}">
                                            <label class="control-label" for="color_banner">Background-color banner:</label>
                                            <input type="text" id="color_banner" autocomplete="off" name="color_banner" class="form-control"
                                                value="{!! old('color_banner') ?? $articulo->color_banner !!}">
                                            <label class="help-block">
                                                {{ $errors->has('color_banner') ? $errors->first('color_banner') : null }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-1">
                                        <div class="row d-flex align-items-center">
                                            <div id="bg-color" style="width: 100%; height: 6rem; {{ $articulo->color_banner != '' ? 'background-color:' . $articulo->color_banner : '' }}" ></div>
                                        </div>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('content') ? 'has-error' : null }}">
                                            <label class="control-label" for="content">Content:</label>
                                            <textarea class="summernote" id="content" name="content">{!! old('content') ?? $articulo->contenido !!}</textarea>
                                            <label class="help-block">
                                                {{ $errors->has('content') ? $errors->first('content') : null }}
                                            </label>
                                        </div>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('tags') ? 'has-error' : null }}">
                                            <label class="control-label" for="tags">Tags:</label>
                                            <input type="text" data-role="tagsinput" id="tags"
                                                name="tags"
                                                class="form-control"
                                                value="{!! old('tags') ?? $articulo->tags !!}">
                                            <label class="help-block">
                                                {{ $errors->has('tags') ? $errors->first('tags') : null }}
                                            </label>
                                        </div>
                                    </div> 
                                </div><br> 
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="row index-content">
                            <div class="card">
                                <h3 class="margin-x">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    Images and attachments
                                </h3>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('img') ? 'has-error' : null }}">
                                            <label class="control-label" for="img">Imagen:</label>
                                            <input id="img" name="img" type="file" />
                                            <span class="help-block">
                                                {{ $errors->has('img')
                                                    ? str_replace('img', 'img', $errors->first('img'))
                                                    : 'Medidas: 2340x792 pixeles, 512kb Max (PNG, JPEG)' }}
                                            </span>
                                        </div>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('thumbnail') ? 'has-error' : null }}">
                                            <label class="control-label" for="thumbnail">Thumbnail:</label>
                                            <input id="thumbnail" name="thumbnail" type="file" />
                                            <span class="help-block">
                                                {{ $errors->has('thumbnail')
                                                    ? str_replace('thumbnail', 'thumbnail', $errors->first('thumbnail'))
                                                    : 'Medidas: 740x426 pixeles, 256kb Max (PNG, JPEG)' }}
                                            </span>
                                        </div>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <span>Note: To use the download banner section you will need to set the id [[download-banner]] in the content data</span>                         
                                    </div>                                    
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('pdf') ? 'has-error' : null }}">
                                            <label class="control-label" for="pdf">PDF:</label>
                                            <input id="pdf" name="pdf" type="file" />
                                            <span class="help-block">
                                                {{ $errors->has('pdf') ? str_replace('pdf', 'pdf', $errors->first('pdf')) : '5mb Max (PDF)' }}
                                            </span>
                                        </div>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div
                                            class="form-group {{ $errors->has('title_downloadable') ? 'has-error' : null }}">
                                            <label class="control-label" for="tags">Download form title:</label>
                                            <input type="text" id="title_downloadable" name="title_downloadable"
                                                class="form-control"
                                                value="{!! old('title_downloadable') ?? $articulo->title_downloadable !!}">
                                            <label class="help-block">
                                                {{ $errors->has('title_downloadable') ? $errors->first('title_downloadable') : null }}
                                            </label>
                                        </div>
                                    </div><br>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div
                                            class="form-group {{ $errors->has('description_downloadable') ? 'has-error' : null }}">
                                            <label class="control-label" for="tags">Download form description:</label>
                                            <input type="text" id="description_downloadable"
                                                name="description_downloadable" class="form-control"
                                                value="{!! old('description_downloadable') ?? $articulo->description_downloadable !!}">
                                            <label class="help-block">
                                                {{ $errors->has('description_downloadable') ? $errors->first('description_downloadable') : null }}
                                            </label>
                                        </div>
                                    </div><br>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <label class="control-label" for="idioma">PDF Display:</label>
                                        <select class="form-control mb-md" name="pdf_display">
                                            <option
                                                {{ old('pdf_display', $articulo->pdf_display) === 'descarga' ? 'selected' : '' }}
                                                value="descarga">Just download</option>
                                            <option
                                                {{ old('pdf_display', $articulo->pdf_display) === 'visible' ? 'selected' : '' }}
                                                value="visible">Show PDF</option>
                                            <option
                                                {{ old('pdf_display', $articulo->pdf_display) === 'ambos' ? 'selected' : '' }}
                                                value="ambos">Show and download</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <label class="control-label" for="formId">Form Id:</label>
                                        <input type="text" id="formId" name="formId" class="form-control"
                                            value="{{ old('formId') ?? $articulo->FormId }}">
                                        <label class="help-block">
                                            {{ $errors->has('formId') ? $errors->first('formId') : null }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <footer class="panel-footer">
            <div class="pull-right">
                <a href="{{ route('articulo.index') }}" class="btn btn-default">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary" form="articulo-form">
                    Save
                </button>
            </div>
        </footer>
    </section>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#color_banner').colorpicker();
            $('#color_banner').change(function(){
                $('#bg-color').css('background-color', $(this).val());
            });

            var options = {
                "height": 200, "codemirror": { "theme": "ambiance" }, "removeFormat": true, 
                styleTags: [
                    'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
                ],
                fontNames: ['Arial', 'Arial Black', 'Assistant', 'futura-bold', 'Comic Sans MS', 'Courier New','Poppins','Helvetica','Impact','Tahoma','Times New Roman', 'Verdana'],
                addDefaultFonts: false,
                colors: [
                    ['#FBCC20','#F27549','#B23B7C','#412EB5'],
                    ['#000000','#FFFFFF','#FF0000','#00FF00','#0000FF','#FFFF00','#00FFFF','#FF00FF'],
                    ['#C0C0C0','#808080','#800000','#808000','#008000','#800080','#008080','#000080']

                ],
                toolbar : [
                    ["style", ["style"]],
                    ["font", ["bold", "underline", "italic", "clear", "strikethrough", "superscript", "subscript"]],
                    ["fontsize", ["fontsize"]],
                    ["font", ["fontname"]],
                    ["color", ["color"]],
                    ["height", ["height"]],
                    ["view", ["fullscreen","codeview", "help"]],
                    ["insert", ["link","picture", "video"]],
                    ["table", ["table"]],["para", ["ul", "ol", "paragraph"]]
                ],
                "insertTableMaxSize": {
                    "col": 20,
                    "row": 20
                }
            };

            $("#content").summernote(options);
        });
    </script>
@endpush