view-personalizacao

<?php echo $this->Html->script('vendor/jquery-1.9.0.min'); ?>

<div class="row">
    <div class="span12">
        <br/>
        <ul class="breadcrumb">
            <li><?php echo $this->Html->link('Página Inicial', '/'); ?>
                <span class="divider">></span>
            </li>
            <li class="active">Compras
                <span class="divider">></span>
            </li>
            <li>    
                <?php echo $this->Html->link('Frente', '/compras/iniciar/' . $produto['Produtos']['slug']); ?>
                <span class="divider">></span>
            </li>
            <li class="active">Interna</li>
        </ul>
    </div>
    <div class="span12">
        <p>Personalize seu cartão</p>
        <div class="alert alert-info">
            Recomendamos o upload de uma imagem com no
            mínimo 2MB e/ou resolução superior a 1024x768, qualquer medida 
            abaixo das recomendadas implicarão em perda de qualidade de seu cartão
        </div>
        <div class="hr"></div>
        <br />
    </div>


    <div class="span6">
        <ul class="personalizar-interna">
            <li><?php echo $this->Html->link('Frente', '/compras/iniciar/' . $produto['Produtos']['slug']); ?></li>
            <li><a href="#">Interna</a></li>
            <?php
            if (AuthComponent::user('tipo_documento', '#') == 'cnpj') {
                ;
                ?>
                <li><?php echo $this->Html->link('Verso', '#myModal3', array('role' => 'button', 'class' => '', 'data-toggle' => 'modal')); ?></li>
            <?php } ?>
        </ul>
    </div>
    <div class="span6">
        <ul class="personalizar-visualizar">
            <li><a href="#" role="button" class="btn-visualizar" data-toggle="modal">Visualizar</a></li>
            <li><?php echo $this->Html->link('Prosseguir', '#', array('class' => 'btn-vertodos')); ?></li>
        </ul>
    </div>

    <!-- Modal 1 -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel"></h3>
        </div>
        <div class="modal-body">
            <div class="col-esq">
                <img src="img/img-cartao.png"/><br /><br />
            </div>
            <div class="col-dir">
                <h3 id="myModalLabel">Cartão de Natal</h3>
                <p>Mauris blandit suscipit convallis. Donec accumsan accumsan ligula, vel convallis nibh faucibus non. Curabitur metus tortor, feugiat vitae accumsan ac, porttitor quis magna. Duis quis placerat est. </p>

                <p>Etiam tristique porttvitor lorem, sit amet tincidunt erat </p><br />
                <p class="preco"><span class="reais">RS </span>
                    <span class="inteiro">6</span>
                    <span class="decimal">,99</span></p>
                <a href="#" class="btn-vertodos">Personalizar</a>
                <br />
                <div class="fb-like" data-href="http://www.redsuns.com.br" data-send="true" data-width="450" data-show-faces="true"></div>
            </div>


        </div>
        <div class="modal-footer">
            <ul class="pager">
                <li class="previous">
                    <a href="#"><</a>
                </li>
                <li class="texto-modal-rodape">Frente</li>
                <li class="next">
                    <a href="#">></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- fim modal1 -->

    <!-- Modal2 -->
    <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel"></h3>
        </div>
        <div class="modal-body">
            <div class="col-esq">
                <img src="img/img-cartao.png"/><br /><br />
            </div>
            <div class="col-dir">
                <h3 id="myModalLabel">Cartão de Aniversário</h3>
                <p>Mauris blandit suscipit convallis. Donec accumsan accumsan ligula, vel convallis nibh faucibus non. Curabitur metus tortor, feugiat vitae accumsan ac, porttitor quis magna. Duis quis placerat est. </p>

                <p>Etiam tristique porttvitor lorem, sit amet tincidunt erat </p><br />
                <div class="modal-endereco-entrega">
                    <h3>Endereço da entrega</h3>
                    <p>Mauris blandit suscipit convallis. Donec accumsan accumsan ligula, vel convallis nibh faucibus non. Curabitur metus tortor, feugiat vitae accumsan ac, porttitor quis magna. Duis quis placerat est.</p>
                </div>
                <a href="#" class="btn-vertodos-cinza">Acompanhe seu pedido</a>
                <br />
                <div class="fb-like" data-href="http://www.redsuns.com.br" data-send="true" data-width="450" data-show-faces="true"></div>
            </div>


        </div>
        <div class="modal-footer">
            <ul class="pager">
                <li class="previous">
                    <a href="#"><</a>
                </li>
                <li class="texto-modal-rodape">Frente</li>
                <li class="next">
                    <a href="#">></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- fim modal2 -->

    <!-- Modal3 -->
    <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel"></h3>
        </div>
        <div class="modal-body">
            <div class="col-esq">
                <p>Mauris blandit suscipit convallis. Donec accumsan accumsan ligula, vel convallis nibh faucibus non. Curabitur metus tortor, feugiat vitae accumsan ac, porttitor quis magna. Duis quis placerat est. Etiam tristique porttitor lorem, sit amet tincidunt erat rhoncus vel. Mor</p>
                <p>Mauris blandit suscipit convallis. Donec accumsan accumsan ligula, vel convallis nibh faucibus non. Curabitur metus tortor, feugiat vitae accumsan ac, porttitor quis magna. Duis quis placerat est. Etiam tristique porttitor lorem, sit amet tincidunt erat rhoncus vel. Mor</p>
            </div>
            <div class="col-dir book">
                <p>Mauris blandit suscipit convallis. Donec accumsan accumsan ligula, vel convallis nibh faucibus non. Curabitur metus tortor, feugiat vitae accumsan ac, porttitor quis magna. Duis quis placerat est. Etiam tristique porttitor lorem, sit amet tincidunt erat rhoncus vel. Mor</p>
                <p>Mauris blandit suscipit convallis. Donec accumsan accumsan ligula, vel convallis nibh faucibus non. Curabitur metus tortor, feugiat vitae accumsan ac, porttitor quis magna. Duis quis placerat est. Etiam tristique porttitor lorem, sit amet tincidunt erat rhoncus vel. Mor</p>

            </div>


        </div>

    </div>
    <!-- fim modal3 -->


    <?php echo $this->Form->create('Cesta', array('type' => 'file')); ?>
    <div class="span12">
        <div class="box-personalizar1 clearfix">
            <div class="foto" align="center">
                <div id="imagem_selecionada"><?php echo @$this->Session->read('ItemCesta.photo'); ?></div>
                <?php
                echo $this->Form->input('Cesta.photo_dir', array('type' => 'hidden', 'label' => false,));
                echo $this->Form->input(
                        'Cesta.photo', array(
                    'label' => false,
                    'type' => 'file',
                    'class' => 'btn-adicionar-img',
                    'style' => 'cursor: pointer;margin-top: 200px;display:none;',
                    'div' => false,
                    'id' => 'ImgUploadButton')
                );
                ?>

                <input type="button" id="ImgUpload" class="btn-adicionar-img" style="cursor: pointer;margin-top: 250px; border: none;"/>

                <?php
                if (@!empty($itemNaCesta)) {
                    echo $this->Form->input('quantidade', array('type' => 'hidden', 'value' => $itemNaCesta['Cesta']['quantidade']));
                    echo $this->Form->input('valor_unit', array('type' => 'hidden', 'value' => $itemNaCesta['Cesta']['valor_unit']));
                }
                ?>
            </div>
            <div class="texto">
                
                    <div class="tools">
                        
                    </div>
                    <?php
                    $mensagemInterna = $produto['Produtos']['mensagem_interna'];
                    
                    $mensagemSessao = @$this->Session->read('ItemCesta.mensagem_interna');
                    if ( !empty($mensagemSessao) ) {
                        $mensagemInterna = $mensagemSessao;
                    }

                    echo $this->Form->textarea('Cesta.mensagem_interna', array('class' => 'ckeditor', 'label' => false, 
                                                'type' => 'textarea', 'style' => 'width: 415px; height: 230px;', 
                                                'value' => $mensagemInterna, 'maxlength' => 500));
                    ?>
                    <!--Você tem <span id="charsLeft"></span> caracteres ainda.-->
                
               
                    <div class="tools">
                        
                    </div>
                    <?php echo $this->Form->input('Cesta.assinatura', array('maxlength' => 35, 'type' => 'text', 'label' => false, 
                                                                        'placeholder' => 'Sua assinatura aqui', 
                                                                        'value' => @$this->Session->read('ItemCesta.assinatura'))); 
                    ?>                    
                    <?php
                    if (@$itemNaCesta) {
                        echo $this->Form->input('id', array('type' => 'hidden', 'value' => $itemNaCesta['Cesta']['id']));
                    }
                    ?>
                    <!--Você tem <span id="charsLeft2"></span> caracteres ainda.-->
                
            </div>
        </div>
    </div>
    <span style="display: none;">
        <?php echo $this->Form->input('visualizar', array('type' => 'hidden', 'value' => '0')); ?>
        <?php echo $this->Form->end(array('id' => 'submit')); ?>
    </span>    
</div>

<script>
    jQuery(document).ready(function() {

        jQuery("#ImgUpload").click(function() {

            jQuery("#ImgUploadButton").click();

            jQuery("#ImgUploadButton").change(function() {
                var filename = jQuery('input[type=file]').val().split('\\').pop();
                jQuery('#imagem_selecionada').html(filename);
            })
        });

        //jQuery('#CestaAssinatura').limit('50', '#charsLeft2');



        $('.btn-vertodos').bind("click", function () {
            alert("Prosseguir");
            $("#submit").trigger("click");
            return false;
        });
        
        $('.btn-visualizar').bind("click", function () {
            alert("Visualizar");
            $("#submit").trigger("click");
            return false;
        });
        
    });
</script>