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

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


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

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

            <h5 class="m-b-15">cabeçalho da tabela</h5>
            <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="bonusTableTheadColor" name="bonusTableTheadColor"
                           value="{{strtolower($record_appearance->bonusTableTheadColor)}}"/>
                </div>
            </div>
            <div class="row m-b-5  font-13 ">
                <div class="col-sm-6">
                    Cor do fundo
                </div>
                <div class="col-sm-5">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="bonusTableTheadBackground" name="bonusTableTheadBackground"
                           value="{{strtolower($record_appearance->bonusTableTheadBackground)}}"/>
                </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="bonusTableTheadColor" name="bonusTableTheadColor"
                           value="{{strtolower($record_appearance->bonusTableTheadColor)}}"/>
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="bonusTableTrFirstColorHover" name="bonusTableTrFirstColorHover"
                           value="{{strtolower($record_appearance->bonusTableTrFirstColorHover)}}"/>
                </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="bonusTableTrFirstBackground" name="bonusTableTrFirstBackground"
                           value="{{strtolower($record_appearance->bonusTableTrFirstBackground)}}"/>
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="bonusTableTrFirstBackgroundHover" name="bonusTableTrFirstBackgroundHover"
                           value="{{strtolower($record_appearance->bonusTableTrFirstBackgroundHover)}}"/>
                </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="bonusTableTrSecondColor" name="bonusTableTrSecondColor"
                           value="{{strtolower($record_appearance->bonusTableTrSecondColor)}}"/>
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="bonusTableTrSecondColorHover" name="bonusTableTrSecondColorHover"
                           value="{{strtolower($record_appearance->bonusTableTrSecondColorHover)}}"/>
                </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="bonusTableTrSecondBackground" name="bonusTableTrSecondBackground"
                           value="{{strtolower($record_appearance->bonusTableTrSecondBackground)}}"/>
                </div>
                <div class="col-sm-1">
                </div>
                <div class="col-sm-3">
                    <input type="text" class="colorpicker form-control form-control-sm "
                           id="bonusTableTrSecondBackgroundHover" name="bonusTableTrSecondBackgroundHover"
                           value="{{strtolower($record_appearance->bonusTableTrSecondBackgroundHover)}}"/>
                </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="bonusCssCustom" name="bonusCssCustom"
                >{{$record_appearance->bonusCssCustom}}</textarea>
                </div>
            </div>
        </blockquote>

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

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

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