@extends('layout.default')
@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/cpabanners/templates') }}" class="btn btn-primary font-weight-bolder">Back</a>
            </div>
        </div>
        <form action="{{ url('/admin/cpabanners/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">
                    <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>
                    <textarea required class="form-control" rows="3" name="description">{!! old('description') !!}</textarea>
                </div>
                <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" 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 row">
                    <label class="col-form-label col-12" for="">Format<span class="text-danger">*</span></label>
                    <div class="col-12">
                        <select required class="form-control" name="format_id">
                            <option value="">Click to Select</option>
                            @foreach($formats as $format)
                                <option value="{{ $format->id }}">{{ $format->name }} - {{ $format->device }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-12" for="">Color<span class="text-danger">*</span></label>
                    <div class="col-12">
                        <select required class="form-control" name="color_id">
                            <option value="">Click to Select</option>
                            @foreach($colors as $color)
                                <option value="{{ $color->id }}">{{ $color->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Status<span class="text-danger">*</span></label>
                    <div>
                        <div class="radio-list">
                            <label class="radio">
                                <input type="radio" name="status" value="0" checked {{ (old('status') == "0") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                Inactive
                            </label>
                            <label class="radio">
                                <input type="radio" name="status" value="1" {{ (old('status') == "1") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                Active
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Html<span class="text-danger">*</span></label>
                    <textarea required class="form-control" rows="15" name="html">{!! old('html') !!}</textarea>
                </div>
                <div class="form-group">
                    <label>Image</label>
                    <input type="file" name="image" class="form-control"/>
                </div>
                <div class="mt-6">
                    <h4>Funcionamento</h4>
                    <p> - O elemento mais externo do html deve ter o id="target"</p>
                    <p> - O #target deve ter um tamanho definido</p>
                    <p> - O tamanho #target será o tamanho da imagem final</p>
                    <p> - As macros devem estar dentro de uma tag com a classe "changeable"</p>
                    <p> - O nome da macro será o id da tag html que contém a macro</p>
                    <p> - A macro da imagem deve usar o id "image" e ter as dimensões na imagem no html</p>
                    <p> - Não deve ser utilizado NENHUM tipo de classe, SOMENTE a "changeable", pois pode ser interferido pelas classes do site (já que os banners não são feitos por "iframe")</p>
                    <p> - Os links do tipo 'css' devem conter o atributo: crossorigin="anonymous" *</p>
                    <span class="text-muted">* Exemplo: < link href='https://fonts.googleapis.com/css?family=Passion+One:400,700,900' rel='stylesheet' type='text/css' <strong>crossorigin="anonymous"</strong>></span>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary mr-2">Send</button>
                <a href="{{ url('/admin/cpabanners/templates') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
@endsection