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

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

            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Cor de fundo total
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm"
                           id="descriptionBackgroundColor" name="descriptionBackgroundColor"
                           value="{{strtolower($record_appearance->descriptionBackgroundColor)}}"/>
                </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="descriptionTitleBackgroundColor" name="descriptionTitleBackgroundColor"
                           value="{{strtolower($record_appearance->descriptionTitleBackgroundColor)}}"/>
                </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="descriptionTitleColor" name="descriptionTitleColor"
                           value="{{strtolower($record_appearance->descriptionTitleColor)}}"/>
                </div>
            </div>
        </blockquote>
        <blockquote>

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

            <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="descriptionTextareaBackgroundColor" name="descriptionTextareaBackgroundColor"
                           value="{{strtolower($record_appearance->descriptionTextareaBackgroundColor)}}"/>
                </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="descriptionTextareaColor" name="descriptionTextareaColor"
                           value="{{strtolower($record_appearance->descriptionTextareaColor)}}"/>
                </div>
            </div>
            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Altura
                </div>
                <div class="col-sm-5">
                    <input type="text" class=" form-control form-control-sm"
                           id="descriptionTextareaLineheight" name="descriptionTextareaLineheight"
                           value="{{strtolower($record_appearance->descriptionTextareaLineheight)}}"/>
                </div>
            </div>
            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Borda
                </div>
                <div class="col-sm-5">
                    <input type="text" class=" form-control form-control-sm"
                           id="descriptionTextareaBorder" name="descriptionTextareaBorder"
                           value="{{strtolower($record_appearance->descriptionTextareaBorder)}}"/>
                </div>
            </div>

            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Borda curvas
                </div>
                <div class="col-sm-5">
                    <input type="text" class=" form-control form-control-sm"
                           id="descriptionTextareaBorderradius" name="descriptionTextareaBorderradius"
                           value="{{strtolower($record_appearance->descriptionTextareaBorderradius)}}"/>
                </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="descriptionCssCustom" name="descriptionCssCustom"
                >{{$record_appearance->descriptionCssCustom}}</textarea>
                </div>
            </div>
        </blockquote>

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

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

                <input type="hidden" name="idAppearanceDescription" id="idAppearanceDescription" class="appeance-add"
                       value="{{isset($record_appearance->idAppearanceDescription)?Crypt::encrypt($record_appearance->idAppearanceDescription):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: 'appearanceDescriptionClient',
            ldCatchGroupId: ['appearanceDescriptionAction'],
            ldCatchItenName: ['_token'],
            ldUrl: '{{asset("/proposal-appearance-description/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>