@extends('backend.layouts.app')

@section('title', app_name() . ' | ' .'Update clipart')

@section('content')
    {{ html()->modelForm($clipart, 'PATCH', route('admin.clipart.update', $clipart->id))->class('form-horizontal')->attribute('enctype', 'multipart/form-data')->open() }}
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-5">
                    <h4 class="card-title mb-0">
                        Clipart management
                        <small class="text-muted">Edit clipart</small>
                    </h4>
                </div><!--col-->
            </div><!--row-->

            <hr>

            <div class="row mt-4 mb-4">
                <div class="col">
                    <div class=" form-group row " style="border-bottom: 1px solid darkgrey">
                        <h5>Metadata</h5>
                    </div>
                    <div class="form-group row">
                        {{ html()->label('Name')->class('col-md-2 form-control-label')->for('name') }}

                        <div class="col-md-10">
                            {{ html()->text('name')
                                ->class('form-control')
                                ->placeholder('name')
                                ->attribute('maxlength', 254)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                        {{ html()->label('Description')->class('col-md-2 form-control-label')->for('description') }}

                        <div class="col-md-10">
                            {{ html()->textarea('description')
                                ->class('form-control')
                                ->placeholder('Description')
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->
                    <div class="form-group row">
                        {{ html()->label('Citations')->class('col-md-2 form-control-label')->for('citations') }}

                        <div class="col-md-10">
                            {{ html()->textarea('citations')
                                ->class('form-control richtext')
                                ->placeholder('Citations')
                              }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                        {{ html()->label('Paid')->class('col-md-2 form-control-label') }}
                        <div class="col-md-10">
                            <div class="checkbox d-flex align-items-center">
                                {{ html()->label(
                                        html()->checkbox('paid')
                                                ->class('switch-input')
                                                ->id('paid')
                                            . '<span class="switch-slider" data-checked="yes" data-unchecked="no"></span>')
                                        ->class('switch switch-label switch-pill switch-primary mr-2')
                                    ->for('paid')
                                    }}
                                {{ html()->label('Paid')->for('paid') }}
                            </div>
                        </div>

                    </div><!--form-group-->

                    <div class="form-group row ">
                        {{ html()->label('Tags')->for('tags[]')->class('col-md-2 form-control-label') }}
                        <div class="col-md-10">
                            {{ html()->multiselect('tags[]', $tags->pluck('text', 'id'), $clipart->tags->pluck('id'))
                              ->class('form-control')
                              }}
                        </div>
                    </div><!--form-group-->
                    <div class=" form-group row " style="border-bottom: 1px solid darkgrey">
                        <h5>Files</h5>
                    </div>
                    <div class=" form-group row " style="margin-bottom: 0">
                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">

                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        @if($clipart->colourways->where('colour_name', 'baseline')->first())
                                            <img
                                                src="{{$clipart->colourways->where('colour_name', 'baseline')->first()->path()}}"
                                                alt="{{$clipart->name.' '.$clipart->colourways->where('colour_name', 'baseline')->first()->colour}}"
                                                style="width: 30px; height: auto">
                                        @else
                                            <span class="text-muted"> (not set)</span>
                                        @endif
                                        {{ html()->label('Baseline')->for('baseline')->attribute('style', 'font-weight:bold')->class('col-auto') }}
                                    </div>

                                </div>

                                {{ html()->file('baseline')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">

                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        @if($clipart->colourways->where('colour_name', 'outline')->first())
                                            <img
                                                src="{{$clipart->colourways->where('colour_name', 'outline')->first()->path()}}"
                                                alt="{{$clipart->name.' '.$clipart->colourways->where('colour_name', 'outline')->first()->colour}}"
                                                style="width: 30px; height: auto">
                                        @else
                                            <span class="text-muted"> (not set)</span>
                                        @endif
                                        {{ html()->label('Outline')->for('outline')->attribute('style', 'font-weight:bold')->class('col-auto') }}
                                    </div>

                                </div>

                                {{ html()->file('outline')->class('form-control') }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group row " style="margin-bottom: 0">
                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">

                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        @if($clipart->colourways->where('colour_name', 'blue')->first())
                                            <img
                                                src="{{$clipart->colourways->where('colour_name', 'blue')->first()->path()}}"
                                                alt="{{$clipart->name.' '.$clipart->colourways->where('colour_name', 'blue')->first()->colour}}"
                                                style="width: 30px; height: auto">
                                        @else
                                            <span class="text-muted"> (not set)</span>
                                        @endif
                                        {{ html()->label('Blue')->for('blue')->attribute('style', 'font-weight:bold; color:Blue')->class('col-auto') }}
                                    </div>
                                </div>

                                {{ html()->file('blue')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">

                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        @if($clipart->colourways->where('colour_name', 'green')->first())
                                            <img
                                                src="{{$clipart->colourways->where('colour_name', 'green')->first()->path()}}"
                                                alt="{{$clipart->name.' '.$clipart->colourways->where('colour_name', 'green')->first()->colour}}"
                                                style="width: 30px; height: auto">
                                        @else
                                            <span class="text-muted"> (not set)</span>
                                        @endif
                                        {{ html()->label('Green')->for('green')->attribute('style', 'font-weight:bold; color:DarkGreen')->class('col-auto') }}
                                    </div>
                                </div>

                                {{ html()->file('green')->class('form-control') }}
                            </div>
                        </div>


                    </div>
                    <div class="form-group row " style="margin-bottom: 0">
                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">
                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        @if($clipart->colourways->where('colour_name', 'grey')->first())
                                            <img
                                                src="{{$clipart->colourways->where('colour_name', 'grey')->first()->path()}}"
                                                alt="{{$clipart->name.' '.$clipart->colourways->where('colour_name', 'grey')->first()->colour}}"
                                                style="width: 30px; height: auto">
                                        @else
                                            <span class="text-muted"> (not set)</span>
                                        @endif
                                        {{ html()->label('Grey')->for('grey')->attribute('style', 'font-weight:bold; color:DarkGray')->class('col-auto') }}
                                    </div>


                                </div>

                                {{ html()->file('grey')->class('form-control') }}
                            </div>
                        </div>

                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">

                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        @if($clipart->colourways->where('colour_name', 'purple')->first())
                                            <img
                                                src="{{$clipart->colourways->where('colour_name', 'purple')->first()->path()}}"
                                                alt="{{$clipart->name.' '.$clipart->colourways->where('colour_name', 'purple')->first()->colour}}"
                                                style="width: 30px; height: auto">
                                        @else
                                            <span class="text-muted"> (not set)</span>
                                        @endif
                                        {{ html()->label('Purple')->for('purple')->attribute('style', 'font-weight:bold; color:DarkViolet')->class('col-auto') }}
                                    </div>
                                </div>

                                {{ html()->file('purple')->class('form-control') }}
                            </div>
                        </div>

                    </div>
                    <div class="form-group row ">
                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">

                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        @if($clipart->colourways->where('colour_name', 'red')->first())
                                            <img
                                                src="{{$clipart->colourways->where('colour_name', 'red')->first()->path()}}"
                                                alt="{{$clipart->name.' '.$clipart->colourways->where('colour_name', 'red')->first()->colour}}"
                                                style="width: 30px; height: auto">
                                        @else
                                            <span class="text-muted"> (not set)</span>
                                        @endif
                                        {{ html()->label('Red')->for('red')->attribute('style', 'font-weight:bold; color:DarkRed')->class('col-auto') }}
                                    </div>
                                </div>

                                {{ html()->file('red')->class('form-control') }}
                            </div>
                        </div>
                        {{--                        <div class="col">--}}
                        {{--                            <div class="form-group">--}}
                        {{--                                {{ html()->label('Red')->for('red')->attribute('style', 'color:DarkRed; font-weight:bold') }}--}}
                        {{--                                {{ html()->file('red')->class('form-control') }}--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">

                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        @if($clipart->colourways->where('colour_name', 'yellow')->first())
                                            <img
                                                src="{{$clipart->colourways->where('colour_name', 'yellow')->first()->path()}}"
                                                alt="{{$clipart->name.' '.$clipart->colourways->where('colour_name', 'yellow')->first()->colour}}"
                                                style="width: 30px; height: auto">
                                        @else
                                            <span class="text-muted"> (not set)</span>
                                        @endif
                                        {{ html()->label('Yellow')->for('yellow')->attribute('style', 'font-weight:bold; color:Gold')->class('col-auto') }}
                                    </div>
                                </div>

                                {{ html()->file('yellow')->class('form-control') }}
                            </div>
                        </div>
                        {{--                        <div class="col">--}}
                        {{--                            <div class="form-group">--}}
                        {{--                                {{ html()->label('Yellow')->for('yellow')->attribute('style', 'color:Gold; font-weight:bold') }}--}}
                        {{--                                {{ html()->file('yellow')->class('form-control') }}--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                    </div>
                </div><!--col-->
            </div><!--row-->
        </div><!--card-body-->

        <div class="card-footer">
            <div class="row">
                <div class="col">
                    {{ form_cancel(route('admin.clipart.index'), __('buttons.general.cancel')) }}
                </div><!--col-->

                <div class="col text-right">
                    {{ form_submit(__('buttons.general.crud.update')) }}
                </div><!--row-->
            </div><!--row-->
        </div><!--card-footer-->
    </div><!--card-->
    {{ html()->closeModelForm() }}
@endsection
@push('after-scripts')
    <script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ asset('js/tinymce/jquery.tinymce.min.js') }}"></script>
    <script>

        $(document).ready(function () {

            $('select').select2({
                placeholder: 'Select...',
                tags: true
            }).trigger('change');

            //tinymce
            tinymce.init({
                selector: '.richtext',
                menubar: false,
                relative_urls: false,
                remove_script_host: true,
                document_base_url: "{{url('/')}}",
                valid_elements: 'a[href|target=_blank],' +
                    'strong/b,div[align],strong/b,em/i,strike,u,' +
                    'p[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|title],' +
                    'ol[class|compact<compact|dir<ltr?rtl|id|lang|start|style|title|type],' +
                    'ul[class|compact<compact|dir<ltr?rtl|id|lang|start|style|title|type],-li',

                plugins: [
                    "lists"
                ],
                mobile: {
                    theme: 'mobile',
                    plugins: [""],
                    toolbar: ['bold', 'italic']
                },
                toolbar: 'bold italic numlist bullist',

            });

        })
    </script>
@endpush

@push('after-styles')
    <style>
        .select2 {
            width: 100% !important;
        }
    </style>
@endpush