@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">create</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') }}" method="POST" enctype="multipart/form-data">
            @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->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="{{ old('name') }}" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>Description<span class="text-danger">*</span></label>
                    <input required type="text" name="description" value="{{ old('description') }}" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>Image</label>
                    <input type="file" name="image" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>Html<span class="text-danger">*</span></label>
                    <textarea required class="form-control" rows="30" name="html">{!! old('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 }}"/>
                            <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 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 }}]"></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" checked {{ (old('active') == "0") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                No
                            </label>
                            <label class="radio">
                                <input type="radio" name="active" value="1" {{ (old('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']]
                ]
            });
            $('.select2').select2();
        });
    </script>
@endsection