@extends('layout.default')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <style>
        .note-editing-area {
            background-color: white;
        }
    </style>
@endsection
@section('content')
    <div class="card card-custom">
        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">Templates | <span style="color: green">edit - {{ $template->name }}</span></h3>
            </div>
            <div class="card-toolbar">
                <a href="{{ url('/admin/cpalanders/templates') }}" class="btn btn-primary font-weight-bolder">Back</a>
            </div>
        </div>
        <form action="{{ url('/admin/cpalanders/templates/' . $template->id ) }}" method="POST" enctype="multipart/form-data">
            {{ method_field('PUT') }}
            @csrf
            <div class="card-body">
                @if ($errors->any())
                    <div class="form-group mb-8">
                        <div class="alert alert-custom alert-default" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
                            <div class="alert-t">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="form-group row">
                    <label class="col-form-label col-12" for="">Group<span class="text-danger">*</span></label>
                    <div class="col-12">
                        <select required class="form-control kt-select2 select2" id="kt_select2_1" name="group_id">
                            <option value="">Click to Select</option>
                            @foreach($groups as $group)
                                <option value="{{ $group->id }}" {{ ($group->id == $template->group_id) ? 'selected' : '' }}>{{ $group->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Name<span class="text-danger">*</span></label>
                    <input required type="text" name="name" value="{{$template->name}}" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>Description<span class="text-danger">*</span></label>
                    <input required type="text" name="description" value="{{ $template->description }}" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>Image</label>
                    <img src="{{ url('images/cpalanders/' . $template->id . '-' . $template->slug . $template->extension) }}" style="width: 300px" class="mb-3">
                    <input type="file" name="image" class="form-control"/>
                    <span style="color: red">Note: Only do the upload if you want to overscript the file already existing.</span>
                </div>
                <div class="form-group">
                    <label>Html<span class="text-danger">*</span></label>
                    <textarea required class="form-control" rows="30" name="html">{!! $template->html !!}</textarea>
{{--                    <textarea type="text" cols="100" rows="20" name="html"></textarea>--}}
                </div>
                <div class="form-group">
                    <label>Options</label>
                    <div class="checkbox-inline">
                        @foreach($options as $option)
                            <label class="checkbox checkbox-lg">
                                <input type="checkbox" name="options[]" value="{{ $option->id }}" {{ $template->options->where('id', '=', $option->id)->first() ? 'checked' : ''}}/>
                                <span></span>
                                {{ $option->name }}
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="form-group">
                    <label>Colors</label>
                    <div class="radio-list">
                        @foreach($colors as $color)
                            <label class="radio">
                                <input required {{ ($color->id == $template->color_id) ? 'checked' : '' }} type="radio" class="col-4" name="color_id" value="{{ $color->id }}">
                                <span></span>
                                <div style="width: 200px;height: 20px;display: inline-block; background-color: {{ $color->hexadecimal }}"></div>
                                <div class="ml-3">{{ $color->name }}</div>
                                <textarea style="max-width: 700px; margin-left: 40px;" class="form-control" type="text" name="color_class[][{{ $color->id }}]">@if(($template->colors->where('id', '=', $color->id)->first() != null)){!! $template->colors->where('id', '=', $color->id)->first()->pivot->color_class !!}@endif
                                </textarea>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="form-group">
                    <label>Active?</label>
                    <div>
                        <div class="radio-list">
                            <label class="radio">
                                <input type="radio" name="active" value="0" {{ ($template->active == "0") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                No
                            </label>
                            <label class="radio">
                                <input type="radio" name="active" value="1" {{ ($template->active == "1") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                Yes
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary mr-2">Send</button>
                <a href="{{ url('/admin/cpalanders/templates') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $('.summernote').summernote({
                height: 450,
                fontSizes: ['15', '18', '20', '24'],
                fontNames: ['rawline', 'Arial', 'Arial Black'],
                toolbar: [
                    ['font',  ['bold', 'italic', 'underline', 'clear']],
                    ['fontsize', ['fontsize']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['insert', ['link']],
                    ['view', ['fullscreen', 'codeview']]
                ]
            });
            // $('.summernote-color').summernote({
            //     height: 150,
            //     fontSizes: ['15', '18', '20', '24'],
            //     fontNames: ['rawline', 'Arial', 'Arial Black'],
            //     toolbar: [
            //         ['font',  ['bold', 'italic', 'underline', 'clear']],
            //         ['fontsize', ['fontsize']],
            //         ['fontname', ['fontname']],
            //         ['color', ['color']],
            //         ['para', ['ul', 'ol', 'paragraph']],
            //         ['height', ['height']],
            //         ['insert', ['link']],
            //     ]
            // });
            $('.select2').select2();
        });
    </script>
@endsection