<link href="//fonts.googleapis.com/css?family=K2D:400,700" rel="stylesheet">
<?php /*<div class="modal-header"><h4 class="modal-title text-center"></h4></div>*/ ?>
<div class="modal-body font-firma">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 text-center">
                    <?php echo e(Html::image('assets/email/logos/cvp.jpg','image-cvp',['class'=>'check-image'])); ?>

                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 text-center m-t-10">
                    <?php echo e(Html::image('assets/email/logos/telecom.png','image-telecom',['class'=>'check-image'])); ?>

                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 text-center">
                    <?php echo e(Html::image('assets/email/logos/utv.png','image-utv',['class'=>'check-image'])); ?>

                </div>
            </div>
        </div>

        <?php /*<div class="col-md-12 m-t-40">*/ ?>
        <?php /*<div class="col-sm-4 text-right" style="margin-top: 1.3em;">*/ ?>
        <?php /*<img src="" class="image-recargar">*/ ?>
        <?php /*</div>*/ ?>
        <?php /*<div class="col-sm-8">*/ ?>
        <?php /*<p class="firma-nombre m-b-0"><?php echo e($persona->apellidos_nombres); ?></p>*/ ?>
        <?php /*<p class="firma-cargo m-b-0">*/ ?>
        <?php /*<span class="firma-cargo-nombre"><?php echo e($persona->cargo->nombre); ?></span>*/ ?>
        <?php /*<span class="firma-cargo-color">&nbsp;</span>*/ ?>
        <?php /*</p>*/ ?>
        <?php /*<p class="firma-contenidos m-b-0">*/ ?>
        <?php /*<?php if($persona->telefono_empresa != null): ?>*/ ?>
        <?php /*<span class="firma-celular cableperuBold">*/ ?>
        <?php /*<i class="zmdi zmdi-phone"></i> <?php echo e($persona->telefono_empresa); ?>*/ ?>
        <?php /*</span>*/ ?>
        <?php /*<span class="cableperu"> | </span>*/ ?>
        <?php /*<?php endif; ?>*/ ?>
        <?php /*<span class="firma-telefono cableperuBold">*/ ?>
        <?php /*<i class="zmdi zmdi-smartphone"></i> (01) 640-9608*/ ?>
        <?php /*</span>*/ ?>
        <?php /*<?php if($persona->anexo != null): ?>*/ ?>
        <?php /*<span class="firma-anexo">*/ ?>
        <?php /*<span class="cableperu"> | </span>*/ ?>
        <?php /*<span class="cableperuwarning">Anexo</span>*/ ?>
        <?php /*<span class="cableperuBold"><?php echo e($persona->anexo); ?></span>*/ ?>
        <?php /*</span>*/ ?>
        <?php /*<?php endif; ?>*/ ?>
        <?php /*</p>*/ ?>
        <?php /*<p class="firma-url m-b-0 cableperuBold">*/ ?>
        <?php /*<a href="//cableperu.pe">*/ ?>
        <?php /*<span class="cableperuwarning">www</span>.cableperu.<span*/ ?>
        <?php /*class="cableperuwarning">pe</span>*/ ?>
        <?php /*</a>*/ ?>
        <?php /*</p>*/ ?>
        <?php /*</div>*/ ?>
        <?php /*</div>*/ ?>

        <button type="button" class="btn btn-danger btn-circle btn-xs btn-close-delete m-l-5 btnDeleteModal"
                data-dismiss="modal">
            <span class="zmdi zmdi-close"></span>
        </button>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="row">
                <div class="col-md-8 col-sm-12">
                    <div class="m-t-20" id="copy-table" style="float: right;">
                        <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom:10px;">
                            <tr>
                                <td style="padding:0px 8px 0px 0px;width:auto;height: 85px; vertical-align: middle"
                                    valign="middle">
                                    <img alt="Cable Perú" class="image-recargar"
                                         style="width:auto;height: 85px;border:0" src=""/>
                                </td>
                                <td style="padding-left: 10px;">
                                    <table cellspacing="0" cellpadding="0" border="0"
                                           style="font-family: Arial, sans-serif;font-size: 10pt">
                                        <tr>
                                            <td>
                                                <span style="color: #004f7b;"><b><?php echo e($persona->apellidos_nombres); ?></b></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="letter-spacing: 0.4px;">
                                                <span style="background-color: rgba(0, 104, 171,1);padding: 5px 10px 5px 10px !important;color: #fff;display: inline-block;"><b><?php echo e($persona->cargo->nombre); ?></b></span>
                                                <span style="padding: 5px 10px 5px 10px !important;display: inline-block;background-color: #E7C649;">&nbsp;</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 5px 0;letter-spacing: .5px;">
                                                <?php if($persona->telefono_empresa != null): ?>
                                                    <span style="color: #004f7b;font-weight: bold;">
                                                <img src="https://dircorp.cableperu.net.pe/img/firmahtml/celular.png"
                                                     alt=""
                                                     style="width: 10px;vertical-align: initial;"> <?php echo e($persona->telefono_empresa); ?>

                                            </span>
                                                    <span> | </span>
                                                <?php endif; ?>
                                                <span style="color: #004f7b;font-weight: bold;">
                                            <img src="https://dircorp.cableperu.net.pe/img/firmahtml/telefono.png"
                                                 alt=""
                                                 style="width: 10px;vertical-align: initial;"> (01) 640-9608
                                        </span>
                                                <?php if($persona->anexo != null): ?>
                                                    <span>
                                            <span> | </span>
                                            <span style="color: #E7C649;font-weight: bold;">Anexo</span>
                                            <span style="color: #004f7b;font-weight: bold;"><?php echo e($persona->anexo); ?></span>
                                        </span>
                                                <?php endif; ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="color: #004f7b;font-weight: bold;">
                                                <a href="https://cableperu.pe"><span
                                                            style="color: #E7C649;font-weight: bold;">www</span>.cableperu.<span
                                                            style="color: #E7C649;font-weight: bold;">pe</span></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <table border="0" style="color: gray;font-family: Arial, sans-serif;"
                               width="550" cellspacing="0" cellpadding="0">
                            <tr>
                                <td style="font-size: 11px;border-top: 1px dotted;border-top-color: #131313;padding-top: 5px;">
                                    No imprima este correo electrónico a menos que sea necesario. Cada correo
                                    electrónico sin imprimir ayuda al medio ambiente.
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12" style="margin-top: 4rem;">
                    <button type="button" data-clipboard-target="#copy-table" class="btn btn-cp btn-danger"
                            style="padding: 10px;font-size: 1.6rem;border-radius: 15px;">
                        <span class="zmdi zmdi-copy"></span> Copiar Firma HTML <br>
                        GMAIL - OUTLOOK
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="row">
                <div class="col-md-8 col-sm-12">
                    <div class="m-t-20" id="copy-table-html">
                        <textarea id="code1" rows="6" class="d-block" style="width: 100%;"></textarea>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12" style="margin-top: 4rem;">
                    <button type="button" data-clipboard-target="#copy-table-html" class="btn btn-cp btn-success"
                            style="padding: 10px;font-size: 1.6rem;border-radius: 15px;">
                        <span class="zmdi zmdi-copy"></span> Copiar Firma HTML<br>
                        THUNDERBIRD
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .font-firma {
        font-family: 'K2D', sans-serif;
    }

    .btn-close-delete {
        position: absolute;
        right: 5px;
        top: 5px;
        outline: none !important;
    }

    .firma-nombre {
        color: #004f7b;
    }

    .firma-cargo {
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .firma-cargo-nombre {
        background-color: rgb(0, 104, 171);
        padding: 5px 10px;
        color: #fff;
        display: inline-block;
        /*font-style: italic;*/
    }

    .firma-cargo-color {
        padding: 5px 10px;
        display: inline-block;
        background-color: #E7C649;
    }

    .cableperuBold {
        color: #004f7b;
        font-weight: bold;
    }

    .firma-nombre,
    .firma-cargo {
        font-weight: bold;
    }

    .cableperuwarning {
        color: #E7C649;
        font-weight: bold;
    }

    .check-image {
        cursor: pointer;
    }

    .CodeMirror {
        display: none;
    }
</style>
<script>
    $(function () {
        new Clipboard('.btn-cp');
        $(document).on('click', '.check-image', function () {
            // console.log("imageALT:::", $(this).prop('alt'));
            // console.log("imageSRC:::", $(this).prop('src'));
            $(".image-recargar").prop("src", $(this).prop('src'));
            setTimeout(function () {
                var copy_html = $("#copy-table").html();
                $("#code1").html(copy_html.trim());
            }, 200);
        });
    });
</script>

