<div class="modal fade" id="modal-redeem">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Redeem Game Code</h4>
</div>
<div class="modal-body">
<form id="redeem_form" action="https://register.msi.com/promotion/promotion_process" method="POST" enctype="multipart/form-data">

<div class="row modal-list">
<div class="row modal-item">
<div class="col-sm-12 modal-item-head">Название устройства</div>
<div class="col-sm-12 modal-item-body modal-product-name">none</div>
</div>
<input type="hidden" class="form-control" id="product_name" name="product_name">

<div class="row modal-item">
<div class="col-sm-12 modal-item-head">Серийный номер устройства</div>
<div class="col-sm-12 modal-item-body modal-product-sn">none</div>
</div>
<input type="hidden" class="form-control" id="product_sn" name="product_sn">

<div class="row modal-item">
<div class="col-sm-12 modal-item-head"><i class="fa fa-asterisk gr_highlight"></i> Серийный номер устройства 2</div>
<div class="col-sm-12 modal-item-body">
<input type="text" class="form-control" id="product_sn2" name="product_sn2" placeholder="Серийный номер устройства 2">
</div>
</div>

<div class="row modal-item">
<div class="col-sm-12">
<p><a href="#" onclick="window.open('https://register.msi.com/page/how_to_identify#How_to_identify_Product_S_N_2_vga','how_to_identify','width=800,height=600,scrollbars=yes'); return false;" class="where">Где найти</a></p>
</div>
</div>

<div class="row modal-item">
<div class="col-sm-12 modal-item-head"><i class="fa fa-asterisk gr_highlight"></i> Приложение</div>
<div class="col-sm-12 modal-item-body">
<span class="modal-invoice"></span>
<input type="file" name="userfile" id="userfile" class="form-control">
<span class="label label-gaming" >Пожалуйста, измените размер изображения до 720px по ширине  (.jpg, .gif, .png)</span>
<span class="label label-gaming" >
Purchasing Invoice with clearly purchase item, invoice date and invoice number.(photo of printed invoice, or screenshot of digital invoice)
</span>
</div>
</div>

<div class="row modal-item hide">
<div class="col-sm-12 modal-item-head">Invoice No</div>
<div class="col-sm-12 modal-item-body">
<input type="hidden" class="form-control" id="invoice_no" name="invoice_no">
</div>
</div>

<input type="hidden" name="action" value="redeem_game_code">
<input type="hidden" name="event" value="vga_2016_feb_tctd">

<div class="row modal-item">
<div class="col-sm-12 modal-item-head">Дата приобретения</div>
<div class="col-sm-12 modal-item-body modal-buy_date">none</div>
</div>
<input type="hidden" name="pdate">
</div>

</form>
</div>
<div class="modal-footer">
<button type="button" id="promotion_redeem_game" class="btn btn-default btn-xs-block">Redeem</button>
<button type="button" class="btn btn-gray btn-xs-block" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Add warranty Modal -->

<script type="text/javascript">



function resize_top_sub()
{
var promotion_top_main = $(".promotion-top-main"),
promotion_top_sub = $(".promotion-top-sub");

if( promotion_top_main.height() > 50 && $(document).width() > 768 )
{
promotion_top_sub.height( promotion_top_main.height() );
}
else
{
promotion_top_sub.height( '' );
}

}

jQuery(document).ready(function($) {


var promotion_redeem_btn = $('.promotion_redeem_btn'),
promotion_modal = $('#modal-redeem'),
promotion_redeem_game = $('#promotion_redeem_game'),
redeem_form = $("#redeem_form");

promotion_redeem_btn.on('click', function(){
var btn = $(this),
parent = btn.parent('.promotion-game_code'),
product = parent.siblings('.promotion-product').children('.product-name'),
sn = parent.siblings('.promotion-product').children('.product-sn'),
sn2 = parent.siblings('.promotion-product').children('.product-sn2'),
invoice = parent.siblings('.promotion-invoice').data('invoice'),
buy_date = parent.siblings('.promotion-buy_date');

promotion_modal
.find('.modal-product-name').text( product.text() ).end()
.find('#product_name').val( product.text() ).end()
.find('.modal-product-sn').text( sn.text() ).end()
.find('#product_sn').val( sn.text() ).end()
.find('#product_sn2').val( sn2.text() ).end()
.find('.modal-invoice').text( invoice ).end()
.find('.modal-buy_date').text( buy_date.text() ).end()
.find('input[name=pdate]').val( buy_date.data('date') ).end();

if( invoice == '' )
{
promotion_modal.find('.modal-invoice').parent('.modal-item-body').siblings('.modal-item-head').children('.fa-asterisk').removeClass('hide');
}
else
{
promotion_modal.find('.modal-invoice').parent('.modal-item-body').siblings('.modal-item-head').children('.fa-asterisk').addClass('hide');
}
});

var vaildate = redeem_form.validate({
rules:
{
userfile:
{
'required': function(){
return ( $('.modal-invoice').text() == '' ? true : false );
}
},
product_sn2:
{
required: true,
remote:
{
url: 'https://register.msi.com/promotion/promotion_process',
type: 'post',
data:
{
product_sn: function() { return $('input[name=product_sn]').val(); },
product_sn2: function() { return $('input[name=product_sn2]').val(); },
action: 'check_product_sn'
}
}
} },
errorElement: "div",
errorPlacement: function (error, element)
{
if (element.is(':radio') || element.is(':checkbox'))
{
error.insertBefore(element);
}
else
{
error.insertAfter(element);
}
},
invalidHandler: function(event, validator)
{
_block_ui('');

},
onkeyup: false
});

// Submit Form
promotion_redeem_game.on('click', function(e){
_block_ui('Loading data, please wait.');
e.preventDefault();
redeem_form.submit();
});

resize_top_sub();

$( window ).resize(function(event) {
resize_top_sub();
});

});
</script>