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

            <h4 class="card-title">Produtos e Serviços:</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="prodctservBackgroundColor" name="prodctservBackgroundColor"
                           value="{{strtolower($record_appearance->prodctservBackgroundColor)}}"/>
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-6">
                    Título
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTitleColor" name="prodctservTitleColor"
                           value="{{strtolower($record_appearance->prodctservTitleColor)}}"/>
                </div>
            </div>
        </blockquote>
        <blockquote>

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

            <h5 class="m-b-15">Babeça da tabela</h5>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-6">
                   cor Título do cabeçalho
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTheadColor" name="prodctservTableTheadColor"
                           value="{{strtolower($record_appearance->prodctservTableTheadColor)}}"/>
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-6">
                   Cor de fundo do cabeçalho
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTheadBackground" name="prodctservTableTheadBackground"
                           value="{{strtolower($record_appearance->prodctservTableTheadBackground)}}"/>
                </div>
            </div>

            <hr>
            <h5 class="m-b-15">Corpo da tabela</h5>

            <div class="row m-b-5  font-13 ">
                <div class="col-sm-4">
                    <h6>Linha A</h6>
                </div>
                <div class="col-sm-3">
                    ativo
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    Hover
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-4">
                   Cor do Texto
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTrFirstColor" name="prodctservTableTrFirstColor"
                           value="{{strtolower($record_appearance->prodctservTableTrFirstColor)}}"/>
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTrFirstColorHover" name="prodctservTableTrFirstColorHover"
                           value="{{strtolower($record_appearance->prodctservTableTrFirstColorHover)}}"/>
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-4">
                    Cor do fundo
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTrFirstBackground" name="prodctservTableTrFirstBackground"
                           value="{{strtolower($record_appearance->prodctservTableTrFirstBackground)}}"/>
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTrFirstBackgroundHover" name="prodctservTableTrFirstBackgroundHover"
                           value="{{strtolower($record_appearance->prodctservTableTrFirstBackgroundHover)}}"/>
                </div>
            </div>
            <br>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-4">
                    <h6>Linha B</h6>
                </div>
                <div class="col-sm-3">
                    ativo
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    Hover
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-4">
                    Cor do Texto
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTrSecondColor" name="prodctservTableTrSecondColor"
                           value="{{strtolower($record_appearance->prodctservTableTrSecondColor)}}"/>
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTrSecondColorHover" name="prodctservTableTrSecondColorHover"
                           value="{{strtolower($record_appearance->prodctservTableTrSecondColorHover)}}"/>
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-4">
                    Cor do fundo
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTrSecondBackground" name="prodctservTableTrSecondBackground"
                           value="{{strtolower($record_appearance->prodctservTableTrSecondBackground)}}"/>
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTableTrSecondBackgroundHover" name="prodctservTableTrSecondBackgroundHover"
                           value="{{strtolower($record_appearance->prodctservTableTrSecondBackgroundHover)}}"/>
                </div>
            </div>
        </blockquote>

        <blockquote>

            <h4 class="card-title">Produtos e Serviços:</h4>

            <div class="row m-b-5 font-13">
                <div class="col-sm-6">
                    Cor do Subtitulo
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm"
                           id="prodctservTotalSubColor" name="prodctservTotalSubColor"
                           value="{{strtolower($record_appearance->prodctservTotalSubColor)}}"/>
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-6">
                    Cor do Frete
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservFreightColor" name="prodctservFreightColor"
                           value="{{strtolower($record_appearance->prodctservFreightColor)}}"/>
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-6">
                    Cor do Total
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="prodctservTotalColor" name="prodctservTotalColor"
                           value="{{strtolower($record_appearance->prodctservTotalColor)}}"/>
                </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="prodctservCssCustom" name="prodctservCssCustom"
                >{{$record_appearance->prodctservCssCustom}}</textarea>
                </div>
            </div>
        </blockquote>

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

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

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