@php
    use Illuminate\Support\Facades\Crypt;
@endphp
        <!-- LAYOUT -->
<!-- TITLE -->
<div class="rpanel-title sticky-top">
    <i class="fa fa-pencil"></i> Aparência: Dúvidas
</div>
<!-- /TITLE -->
<!-- CONTENT -->
<div class="r-panel-body">
    <div id="appearanceHesitationAction">

        <blockquote>

            <h4 class="card-title">Título:</h4>


            <div class="row m-b-10 font-13">
                <div class="col-sm-2">
                    Título:
                </div>
                <div class="col-sm-10">
                    <input type="text" class=" form-control form-control-sm"
                           id="hesitationTitleText" name="hesitationTitleText"
                           value="{{$record_appearance->hesitationTitleText}}"/>
                </div>
            </div>

            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Cor de texto
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm"
                           id="hesitationTitleColor" name="hesitationTitleColor"
                           value="{{strtolower($record_appearance->hesitationTitleColor)}}"/>
                </div>
            </div>


            <h4 class="card-title">Subtitulo:</h4>





            <div class="row m-b-10 font-13">
                <div class="col-sm-2">
                    Subtitulo:
                </div>
                <div class="col-sm-10">
                    <input type="text" class=" form-control form-control-sm"
                           id="hesitationTitleSubText" name="hesitationTitleSubText"
                           value="{{$record_appearance->hesitationTitleSubText}}"/>
                </div>
            </div>
            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Cor de texto
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm"
                           id="hesitationTitleSubColor" name="hesitationTitleSubColor"
                           value="{{strtolower($record_appearance->hesitationTitleSubColor)}}"/>
                </div>
            </div>




            <h4 class="card-title">Descrição:</h4>






            <div class="row m-b-10 font-13">
                <div class="col-sm-5">
                    Descrição:
                </div>
            </div>
            <div class="row m-b-10 font-13">

                <div class="col-sm-12 bottom">
                <textarea class=" textarea_editor_clear form-control form-control-sm" style="height: 100px !important"
                          id="hesitationText" name="hesitationText">{{$record_appearance->hesitationText}}
                </textarea>
                </div>
            </div>

            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Cor de texto
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm"
                           id="hesitationTextColor" name="hesitationTextColor"
                           value="{{strtolower($record_appearance->hesitationTextColor)}}"/>
                </div>
            </div>


        </blockquote>

        <blockquote>

            <h4 class="card-title">Email:</h4>

            <div class="row m-b-10 font-13  ">
                <div class="col-sm-5">
                    Que tipo de email?
                </div>
                <div class="col-sm-7 text-right">
                    <div class="switch">
                        <label>Fixo
                            <input type="checkbox"
                                   @if($record_appearance->hesitationEmailStatus==1) checked="checked" @endif
                                   id="hesitationEmailStatus" name="hesitationEmailStatus">
                            <span class="lever switch-col-themecolor"></span>
                            Vendedor
                        </label>
                    </div>
                </div>
            </div>
            <div class="row m-b-10 font-13" id="hesitationEmailTextOption"
                 @if($record_appearance->hesitationEmailStatus ==1) style="display: none" @else style="display: flex" @endif>
                <div class="col-sm-4">
                    Email de fixo:
                </div>
                <div class="col-sm-8">
                    <input type="text" class=" form-control form-control-sm"
                           id="hesitationEmailText" name="hesitationEmailText"
                           value="{{$record_appearance->hesitationEmailText}}"/>
                </div>
            </div>

            <div class="row m-b-10 font-13" id="hesitationEmailTextExOption"
                 @if($record_appearance->hesitationEmailStatus==1) style="display: flex" @else style="display: none"  @endif>
                <div class="col-sm-4">
                    Email do vendedor:
                </div>
                <div class="col-sm-8">
                    <input type="text" class=" form-control form-control-sm"
                           disabled="disabled"
                           id="hesitationEmailTextEx" name="hesitationEmailTextEx"
                           value="Email do vendedor cadastrado"/>
                </div>
            </div>

            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Vendedor/Email
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm"
                           id="hesitationEmailColor" name="hesitationEmailColor"
                           value="{{strtolower($record_appearance->hesitationEmailColor)}}"/>
                </div>
            </div>

        </blockquote>

        <blockquote>
            <h5 class="m-b-15">Imagem de Fundo</h5>
            <div class="row m-b-5 font-13">
                <div class="col-sm-5">
                    Imagem:<br>
                </div>
                <div class="col-sm-5 border"
                     style="background-color: {{$record_appearance->hesitationBackgroundColor}};">
                    <div id="publicityImgBackgroundUrlFom" class="text-center">
                        <input type="hidden" name="hesitationBackgroundImgUrlInput" id="hesitationBackgroundImgUrlInput"
                               value="{{$record_appearance->hesitationBackgroundImgUrl}}">
                        <img src="{{$record_appearance->hesitationBackgroundImgUrl}}" id="hesitationBackgroundImgUrl"
                             style="max-width: 100px; max-height: 80px; "
                        >
                    </div>
                </div>
                <div class="col-sm-2 text-right">
                    <input type="hidden" name="optionSelected" id="optionSelectedBg" value="hesitationBackgroundImgUrl">
                    <button class="btn btn-secondary font-18 myfile-images-edit"
                            onclick="loadsDataForm('#modalResponsive .modal-content','{{ url('file/myfile-image')}}','#actionNot',['#_token','#optionSelectedBg'])"
                            data-toggle="modal" data-target="#modalResponsive">
                        <i class="fa fa-pencil"></i>
                    </button>

                </div>
            </div>
            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Cor de fundo
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm"
                           id="hesitationBackgroundColor" name="hesitationBackgroundColor"
                           value="{{strtolower($record_appearance->hesitationBackgroundColor)}}"/>
                </div>
            </div>
        </blockquote>




        <blockquote>
            <div class="row m-b-10 font-13">
                <div class="col-sm-5">
                    <h4 class="card-title ">CSS</h4>
                    <h6 class="card-subtitle text-muted m-b-10">Personalize seu css</h6>
                </div>
            </div>
            <div class="row m-b-10 font-13">

                <div class="col-sm-12">
                <textarea class=" form-control form-control-sm" style="height: 120px !important"
                          id="hesitationCssCustom" name="hesitationCssCustom"
                >{{$record_appearance->hesitationCssCustom}}</textarea>
                </div>
            </div>
        </blockquote>


        <hr>
        <div class="row">
            <div class="col-6">

            </div>
            <div class="col-6 text-right">

                <input type="hidden" name="idAppearanceHesitation" id="idAppearanceHesitation" class="appeance-add"
                       value="{{isset($record_appearance->idAppearanceHesitation)?Crypt::encrypt($record_appearance->idAppearanceHesitation):null}}">
                <input type="hidden" name="idAppearance" id="idAppearance" class="appeance-add"
                       value="{{isset($id_appearance)?$id_appearance:Crypt::encrypt(null)}}">

                <div class="btn-group m-b-1 m-r-1" role="group" aria-label="Button group with nested dropdown">
                    <!-- EDIT -->
                    <button class="btn btn-secondary font-18 btn-sm right-side-close"
                            id="btnModalSave"
                            data-target="sidebar-right"

                    >
                        <i class="ti-save"></i> Salvar
                    </button>
                    <!-- DELETE -->
                    <button class="right-side-close btn btn-sm btn-secondary font-18"
                            data-target="sidebar-right">
                        <i class="fa fa-times"></i> fechar
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- /CONTENT -->
<!-- /LAYOUT -->

<script src="{{ asset('template/plugins/ozi-sidebar-right/sidebar-right.js') }}" type="text/javascript"></script>

<!-- Color Picker Plugin JavaScript -->
<script src="{{ asset('template/plugins/jquery-asColorPicker-master/libs/jquery-asColor.js') }}"></script>
<script src="{{ asset('template/plugins/jquery-asColorPicker-master/libs/jquery-asGradient.js') }}"></script>
<script src="{{ asset('template/plugins/jquery-asColorPicker-master/dist/jquery-asColorPicker.min.js') }}"></script>


<script>

    // Colorpicker
    $(".colorpicker").asColorPicker();
$(function (){

    $('#btnModalSave').click(function () {

        oziLoadData(data = {
            consoleError: 'on',
            ldDestinyId: 'appearanceHesitation',
            ldCatchGroupId: ['appearanceHesitationAction'],
            ldCatchItenName: ['_token'],
            ldUrl: '{{asset("/proposal-appearance-hesitation/edit")}}',
        });


    });
});


</script>
<script>
    //---| MODAL
    //TRAZ PARA FRENTE O MODAL
    $('.myfile-images-edit').click(function () {
        $('.modal').css('z-index', '1211');
        $('.modal-backdrop-sec').css('display', 'block');
    });
</script>

<script>
    jQuery(document).ready(function () {
$('#hesitationEmailStatus').click(function (){
  $(this).prop('checked')
    if($(this).prop('checked') == true){
      $('#hesitationEmailTextExOption').css('display','flex');
        $('#hesitationEmailTextOption').css('display','none');

    }else{
        $('#hesitationEmailTextExOption').css('display','none');
        $('#hesitationEmailTextOption').css('display','flex');
    }
});


        // $( "#hesitationEmailStatus" ).on( "click", function( event ) {
        //     alert( event.type ); // "click"
        // });


        $('.textarea_editor_clear').wysihtml5({
            "font-styles": false, // Estilo da fonte, por exemplo h1, h2, etc. Padrão verdadeiro
            "emphasis": true, //Itálico, negrito, etc. Padrão true
            "lists": false, //(Listas não ordenadas, por exemplo, Bullets, Numbers. Padrão true
            "html": false, //Botão que permite editar o HTML gerado. Padrão falso
            "link": false, //Botão para inserir um link. Padrão verdadeiro
            "image": false, //Botão para inserir uma imagem. Padrão verdadeiro,
            "color": false, //Botão para mudar a cor da fonte

        });

    });

</script>