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

            <h4 class="card-title">Imprimir:</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="headerImprintBackgroundColor" name="headerImprintBackgroundColor"
                           value="{{strtolower($record_appearance->headerImprintBackgroundColor)}}"/>
                </div>
            </div>
        </blockquote>
        <blockquote>

            <h4 class="card-title">Logo:</h4>
            <div class="row m-b-5 font-13">
                <div class="col-sm-5">
                    Alterar Logo:<br>
                    <span class="font-13"> Dimensão: 200pxx50px</span>
                </div>
                <div class="col-sm-5 border" style="background-color: {{$record_appearance->headerLogoBackgroundColor}}; padding: 2px;">
                    <div id="headerOrcamentoFom" class="text-center">
                        <input type="hidden" name="headerLogoImgUrlInput" id="headerLogoImgUrlInput"
                               value="{{$record_appearance->headerLogoImgUrl}}">
                        <img src="{{$record_appearance->headerLogoImgUrl}}" id="headerLogoImgUrl"
                             style="max-width: 150px;"
                        >
                    </div>
                </div>

                <div class="col-sm-2 text-right">
                    <input type="hidden" name="optionSelected" id="optionSelected1" value="headerLogoImgUrl">
                    <button class="btn btn-secondary font-18 myfile-images-edit"
                            onclick="loadsDataForm('#modalResponsive .modal-content','{{ url('file/myfile-image')}}','#actionNot',['#_token','#optionSelected1'])"
                            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">
                    Logo de fundo
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="headerLogoBackgroundColor" name="headerLogoBackgroundColor"
                           value="{{strtolower($record_appearance->headerLogoBackgroundColor)}}"/>
                </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="headerCssCustom" name="headerCssCustom"
                >{{$record_appearance->headerCssCustom}}</textarea>
                </div>
            </div>
        </blockquote>

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

            </div>
            <div class="col-6 text-right">
                <input type="hidden" name="idAppearanceHeader" id="idAppearanceHeader" class="appeance-add"
                       value="{{isset($record_appearance->idAppearanceHeader)?Crypt::encrypt($record_appearance->idAppearanceHeader):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: 'appearanceHearder',
            ldCatchGroupId: ['appearanceHearderAction'],
            ldCatchItenName: ['_token'],
            ldUrl: '{{asset("/proposal-appearance-header/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>