@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="appearanceFooterAction">
        <blockquote>

            <h4 class="card-title">FUNDO DO PLANO:</h4>

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

        <blockquote>
            <h5 class="m-b-15">Logo</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->footerBackgroundColor}};">
                    <div id="publicityImgBackgroundUrlFom" class="text-center">
                        <input type="hidden" name="footerLogoBackgroundImgUrlInput" id="footerLogoBackgroundImgUrlInput"
                               value="{{$record_appearance->footerLogoBackgroundImgUrl}}">
                        <img src="{{$record_appearance->footerLogoBackgroundImgUrl}}" id="footerLogoBackgroundImgUrl"
                             style="max-width: 100px; max-height: 80px; "
                        >
                    </div>
                </div>
                <div class="col-sm-2 text-right">
                    <input type="hidden" name="optionSelected" id="optionSelectedBg" value="footerLogoBackgroundImgUrl">
                    <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="bg-hover-light m-b-10 ">
                <a class="get-code  " data-toggle="collapse" href="#gavetaLogo" aria-expanded="true">
                    <h6 class="card-title" style="margin-top: .75rem;">
                        <i class="mdi mdi-arrow-down-drop-circle text-themecolor-inverse " title="DETALHES"
                           style="padding-left: 10px; font-style: normal;">
                        </i> | Editar

                        <br>


                    </h6>
                </a>
            </div>
            <div id="gavetaLogo" aria-expanded="true" class="m-l-15 m-b-15 collapse ">
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Largura
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerLogoBackgroundImgWidth" name="footerLogoBackgroundImgWidth"
                               value="{{$record_appearance->footerLogoBackgroundImgWidth}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Alfa
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerLogoBackgroundImgOpacity" name="footerLogoBackgroundImgOpacity"
                               value="{{$record_appearance->footerLogoBackgroundImgOpacity}}"/>
                    </div>
                </div>
            </div>
            <hr>
            Pedidos:
            <div class="bg-hover-light m-b-10 ">
                <a class="get-code  " data-toggle="collapse" href="#gavetaSalesorder" aria-expanded="true">
                    <h6 class="card-title" style="margin-top: .75rem;">
                        <i class="mdi mdi-arrow-down-drop-circle text-themecolor-inverse " title="DETALHES"
                           style="padding-left: 10px; font-style: normal;">
                        </i> | Editar

                        <br>


                    </h6>
                </a>
            </div>
            <div id="gavetaSalesorder" aria-expanded="true" class="m-l-15 m-b-15 collapse ">
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Cor do texto
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class="colorpicker form-control form-control-sm"
                               id="footerSalesOrderTextColor" name="footerSalesOrderTextColor"
                               value="{{$record_appearance->footerSalesOrderTextColor}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Preenchimento da esquerda
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerSalesOrderTextPaddingleft" name="footerSalesOrderTextPaddingleft"
                               value="{{$record_appearance->footerSalesOrderTextPaddingleft}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Tamanho da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerSalesOrderTextFontsize" name="footerSalesOrderTextFontsize"
                               value="{{strtolower($record_appearance->footerSalesOrderTextFontsize)}}"/>
                    </div>
                </div>
            </div>
        </blockquote>
        <blockquote>
            <h5 class="m-b-15">Informações da empresa</h5>
            Nome da Empresa
            <div class="row m-b-5 font-13">
                <div class="col-sm-4">
                    Título
                </div>
                <div class="col-sm-8">
                    <input type="text" class=" form-control form-control-sm"
                           id="footerCompanyTitleText" name="footerCompanyTitleText"
                           value="{{$record_appearance->footerCompanyTitleText}}"/>
                </div>
            </div>
            <div class="bg-hover-light m-b-10 ">
                <a class="get-code  " data-toggle="collapse" href="#gavetaCompany" aria-expanded="true">
                    <h6 class="card-title" style="margin-top: .75rem;">
                        <i class="mdi mdi-arrow-down-drop-circle text-themecolor-inverse " title="DETALHES"
                           style="padding-left: 10px; font-style: normal;">
                        </i> | Editar

                        <br>


                    </h6>
                </a>
            </div>
            <div id="gavetaCompany" aria-expanded="true" class="m-l-15 m-b-15 collapse ">
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Cor do texto
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" colorpicker form-control form-control-sm"
                               id="footerCompanyTitleColor" name="footerCompanyTitleColor"
                               value="{{strtolower($record_appearance->footerCompanyTitleColor)}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Tamanho da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCompanyTitleFontSize" name="footerCompanyTitleFontSize"
                               value="{{$record_appearance->footerCompanyTitleFontSize}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Espessura da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCompanyTitleFontWeight" name="footerCompanyTitleFontWeight"
                               value="{{$record_appearance->footerCompanyTitleFontWeight}}"/>
                    </div>
                </div>
            </div>
            <hr>
            Subtitulo da Empresa
            <div class="row m-b-5 font-13">
                <div class="col-sm-4">
                    Título
                </div>
                <div class="col-sm-8">
                    <input type="text" class=" form-control form-control-sm"
                           id="footerCompanyTitleSubText" name="footerCompanyTitleSubText"
                           value="{{strtolower($record_appearance->footerCompanyTitleSubText)}}"/>
                </div>
            </div>
            <div class="row m-b-5 font-13">
                <div class="col-sm-4">
                    Segundo título
                </div>
                <div class="col-sm-8">
                    <input type="text" class=" form-control form-control-sm"
                           id="footerCompanyTitleSub2Text" name="footerCompanyTitleSub2Text"
                           value="{{$record_appearance->footerCompanyTitleSub2Text}}"/>
                </div>
            </div>

            <div class="bg-hover-light m-b-10 ">
                <a class="get-code  " data-toggle="collapse" href="#gavetaCompanySub" aria-expanded="true">
                    <h6 class="card-title" style="margin-top: .75rem;">
                        <i class="mdi mdi-arrow-down-drop-circle text-themecolor-inverse " title="DETALHES"
                           style="padding-left: 10px; font-style: normal;">
                        </i> | Editar

                        <br>


                    </h6>
                </a>
            </div>
            <div id="gavetaCompanySub" aria-expanded="true" class="m-l-15 m-b-15 collapse ">
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Cor do texto
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" colorpicker form-control form-control-sm"
                               id="footerCompanyTitleSubColor" name="footerCompanyTitleSubColor"
                               value="{{$record_appearance->footerCompanyTitleSubColor}}"/>
                    </div>
                </div>

                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Tamanho da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCompanyTitleSubFontSize" name="footerCompanyTitleSubFontSize"
                               value="{{$record_appearance->footerCompanyTitleSubFontSize}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Espessura da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCompanyTitleSubFontWeight" name="footerCompanyTitleSubFontWeight"
                               value="{{$record_appearance->footerCompanyTitleSubFontWeight}}"/>
                    </div>
                </div>

            </div>
            <hr>
            Fone da empresa
            <div class="row m-b-5 font-13">
                <div class="col-sm-4">
                    Texto
                </div>
                <div class="col-sm-8">
                    <input type="text" class=" form-control form-control-sm"
                           id="footerCompanyTitleSubPhoneText" name="footerCompanyTitleSubPhoneText"
                           value="{{$record_appearance->footerCompanyTitleSubPhoneText}}"/>
                </div>
            </div>
            <div class="bg-hover-light m-b-10 ">
                <a class="get-code  " data-toggle="collapse" href="#gavetaCompanyPhone" aria-expanded="true">
                    <h6 class="card-title" style="margin-top: .75rem;">
                        <i class="mdi mdi-arrow-down-drop-circle text-themecolor-inverse " title="DETALHES"
                           style="padding-left: 10px; font-style: normal;">
                        </i> | Editar

                        <br>


                    </h6>
                </a>
            </div>
            <div id="gavetaCompanyPhone" aria-expanded="true" class="m-l-15 m-b-15 collapse ">
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Cor do texto
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" colorpicker form-control form-control-sm"
                               id="footerCompanyTitleSubPhoneColor" name="footerCompanyTitleSubPhoneColor"
                               value="{{$record_appearance->footerCompanyTitleSubPhoneColor}}"/>
                    </div>
                </div>

                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Tamanho da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCompanyTitleSubPhoneFontSize" name="footerCompanyTitleSubPhoneFontSize"
                               value="{{$record_appearance->footerCompanyTitleSubPhoneFontSize}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Espessura da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCompanyTitleSubPhoneFontWeight" name="footerCompanyTitleSubPhoneFontWeight"
                               value="{{$record_appearance->footerCompanyTitleSubPhoneFontWeight}}"/>
                    </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="footerCompanyTitleSubPhoneFontLineheight"
                               name="footerCompanyTitleSubPhoneFontLineheight"
                               value="{{$record_appearance->footerCompanyTitleSubPhoneFontLineheight}}"/>
                    </div>
                </div>
            </div>

        </blockquote>
        <blockquote>
            <h5 class="m-b-15">Copyright</h5>
            <div class="row m-b-5 font-13">
                <div class="col-sm-4">
                    Titulo
                </div>
                <div class="col-sm-8">
                    <input type="text" class="  form-control form-control-sm"
                           id="footerCopyrightTitleText" name="footerCopyrightTitleText"
                           value="{{$record_appearance->footerCopyrightTitleText}}"/>
                </div>
            </div>
            <div class="row m-b-5 font-13">
                <div class="col-sm-4">
                    Segundo titulo
                </div>
                <div class="col-sm-8">
                    <input type="text" class="  form-control form-control-sm"
                           id="footerCopyrightTitle2Text" name="footerCopyrightTitle2Text"
                           value="{{$record_appearance->footerCopyrightTitle2Text}}"/>
                </div>
            </div>

            <div class="bg-hover-light m-b-10 ">
                <a class="get-code  " data-toggle="collapse" href="#gavetaCopyright" aria-expanded="true">
                    <h6 class="card-title" style="margin-top: .75rem;">
                        <i class="mdi mdi-arrow-down-drop-circle text-themecolor-inverse " title="DETALHES"
                           style="padding-left: 10px; font-style: normal;">
                        </i> | Editar

                        <br>


                    </h6>
                </a>
            </div>
            <div id="gavetaCopyright" aria-expanded="true" class="m-l-15 m-b-15 collapse ">


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

                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Alinhar
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightAlignitems" name="footerCopyrightAlignitems"
                               value="{{$record_appearance->footerCopyrightAlignitems}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Largura
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightWidth" name="footerCopyrightWidth"
                               value="{{$record_appearance->footerCopyrightWidth}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Maximo Largura
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightMaxwidth" name="footerCopyrightMaxwidth"
                               value="{{$record_appearance->footerCopyrightMaxwidth}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Margin a esquerda
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightMarginleft" name="footerCopyrightMarginleft"
                               value="{{$record_appearance->footerCopyrightMarginleft}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Margin a direita
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightMarginright" name="footerCopyrightMarginright"
                               value="{{strtolower($record_appearance->footerCopyrightMarginright)}}"/>
                    </div>
                </div>
            </div>
            <hr>

            Texto
            <div class="bg-hover-light m-b-10 ">
                <a class="get-code  " data-toggle="collapse" href="#gavetaCopyrightText" aria-expanded="true">
                    <h6 class="card-title" style="margin-top: .75rem;">
                        <i class="mdi mdi-arrow-down-drop-circle text-themecolor-inverse " title="DETALHES"
                           style="padding-left: 10px; font-style: normal;">
                        </i> | Editar

                        <br>


                    </h6>
                </a>
            </div>
            <div id="gavetaCopyrightText" aria-expanded="true" class="m-l-15 m-b-15 collapse ">
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Margin a direita
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightTitleTextalign" name="footerCopyrightTitleTextalign"
                               value="{{strtolower($record_appearance->footerCopyrightTitleTextalign)}}"/>
                    </div>
                </div>

                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Tamanho da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightTitleFontsize" name="footerCopyrightTitleFontsize"
                               value="{{strtolower($record_appearance->footerCopyrightTitleFontsize)}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Espessura da fonte
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightTitleFontweight" name="footerCopyrightTitleFontweight"
                               value="{{strtolower($record_appearance->footerCopyrightTitleFontweight)}}"/>
                    </div>
                </div>
                <div class="row m-b-5 font-13">
                    <div class="col-sm-6">
                        Margin a topo
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class=" form-control form-control-sm"
                               id="footerCopyrightTitleMargintop" name="footerCopyrightTitleMargintop"
                               value="{{strtolower($record_appearance->footerCopyrightTitleMargintop)}}"/>
                    </div>
                </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="footerCssCustom" name="footerCssCustom"
                >{{$record_appearance->footerCssCustom}}</textarea>
                </div>
            </div>
        </blockquote>

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

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

                <input type="hidden" name="idAppearanceFooter" id="idAppearanceFooter" class="appeance-add"
                       value="{{isset($record_appearance->idAppearanceFooter)?Crypt::encrypt($record_appearance->idAppearanceFooter):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();

    $('#btnModalSave').click(function () {
        oziLoadData(data = {
            consoleError: 'on',
            ldDestinyId: 'appearanceFooter',
            ldCatchGroupId: ['appearanceFooterAction'],
            ldCatchItenName: ['_token'],
            ldUrl: '{{asset("/proposal-appearance-footer/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>