@extends('layouts.app')

@section('content')
<style>
    div[class^="emojionearea-editor"] {
        font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    }
</style>
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Configuração</span>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <a href="{{ url('/configuracao_relatorio') }}">Configuração Relatório</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>CSAT</span>
                </li>
            </ul>
        </div>
        <h1 class="page-title nova-faixa">Configuração Relatório CSAT
            <div class="pull-right">
                <i class="nova-faixa-icon icon-user"></i>
            </div>
        </h1>
        <br>

        <div class="form-body row">
            <div class="col-md-12">
                <div class="">
                    <!-- BLOCO DE PESQUISA -->
                    <div class="portlet" style="margin-bottom: 0;">
                        <div class="portlet-body form">
                            <div class="form-group">
                                <form id="formStoreEmoji">
                                    {{ csrf_field() }}

                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="emjnota1" class="control-label">Emoji Nota 1</label>
                                            <input type="text" class="form-control" id="emjnota1" name="emjnota1" value="{{$nota1}}">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="emjnota2" class="control-label">Emoji Nota 2</label>
                                            <input type="text" class="form-control" id="emjnota2" name="emjnota2" value="{{$nota2}}">
                                        </div>
                                    </div>
                                    <div class="row">
                                    <div class="col-md-6">
                                            <label for="emjnota3" class="control-label">Emoji Nota 3</label>
                                            <input type="text" class="form-control" id="emjnota3" name="emjnota3" value="{{$nota3}}">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="emjnota4" class="control-label">Emoji Nota 4</label>
                                            <input type="text" class="form-control" id="emjnota4" name="emjnota4" value="{{$nota4}}">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="emjnota5" class="control-label">Emoji Nota 5</label>
                                            <input type="text" class="form-control" id="emjnota5" name="emjnota5" value="{{$nota5}}">
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <a id="SetEmoji" class="btn blue">
                                                <i class="fa fa-check"></i> Salvar
                                            </a>
                                            <span id="msg_salvar"></span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="success" style="display: none;">
                                <div class="alert alert-success">
                                    <ul>
                                        
                                    </ul>
                                </div>
                            </div>
                            <div class="erros" style="display: none;">
                                <div class="alert alert-danger">
                                    <ul>
                                        <li>{{ $errors->first() ?? $modelInstance->getAttribute('campo') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<link rel="stylesheet" type="text/css" href="{{ asset('pages/css/emojionearea.min.css')}}">
<script type="text/javascript" src="{{ asset('pages/scripts/emojionearea.min.js')}}"></script> 
<script src="{{ asset('pages/scripts/configuracao_relatorio/configRelatorio.js') }}" type="text/javascript"></script>

<script>
    
$(`#emjnota1,#emjnota2,#emjnota3,#emjnota4,#emjnota5`).emojioneArea({
        pickerPosition: 'bottom',
        saveEmojisAs: 'unicode',
        tones: true
    });    
</script>
@endpush
@endsection