<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="Custom Uniforms offered in a variety colors to match your team. Browse through our baseball, fastpitch, softball, lacrosse, football, volleyball and basketball gear.">
	    <meta name="keywords" content="custom uniforms, footwear, athletic equipment, sporting goods">
        <meta name="author" content="CREW Developers">
        <meta name="csrf_token" content="{{ csrf_token() }}" />
        <meta name="company_url" content="CREW Uniform Designer" />

        <meta property="og:url"           content="https://crewsportswear.com" />
		<meta property="og:type"          content="article" />
		<meta property="og:title"         content="CREW Apparel" />
		<meta property="og:description"   content="Custom Uniforms offered in a variety colors to match your team. Browse through our baseball, fastpitch, softball, lacrosse, football, volleyball and basketball gear." />
		<meta property="og:image"         content="{{asset('public/images/fb-share-logo.png')}}" />

        <title>Merchbay</title>

        <!-- Bootstrap core CSS -->
        <link href="{{ asset('public/assets/css/bootstrap.min.css') }}" rel="stylesheet">

        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <link href="{{ asset('public/assets/css/ie10-viewport-bug-workaround.css') }}" rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="{{ asset('public/assets/css/style.css')}}" rel="stylesheet">

        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="{{asset('public/assets/js/ie-emulation-modes-warning.js')}}"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    

        <![endif]-->
        <!-- font-awesome -->
        <link href="{{ asset('public/assets/css/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet">
        
        <!-- Social Media Share button 
        <script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=599bc5cf6d61950012975405&product=sticky-share-buttons"></script>-->

        <style>
            .sports-title{
                margin-top: 15px;
                font-size: 16px;
                font-weight: bold;
                text-transform: uppercase;
            }
            .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
                margin: auto;
            }

            .col-margin-bottom{
                padding-bottom: 25px;
            }
            
            .breadcrumb{
                text-transform: uppercase;
            }
        </style>
        <!-- Global site tag (gtag.js) - Google Analytics -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-136108155-1"></script>
		<script>
		  window.dataLayer = window.dataLayer || [];
		  function gtag(){dataLayer.push(arguments);}
		  gtag('js', new Date());

		  gtag('config', 'UA-136108155-1');
		</script>
    </head>

    <body>
        @include('layout.navbar')
        <div class="container">
        
            <!-- Example row of columns -->
            @yield('content')
        
        </div>

        <!-- Bootstrap core JavaScript  ================================================= !-->
        <!-- Placed at the end of the document so the pages load faster -->
        <!-- jquery -->
        <script src="{{ asset('public/assets/js/jquery.min.js') }}"></script>
        <!-- bootstrap -->
        <script src="{{asset('public/assets/js/bootstrap.min.js')}}"></script>]
        <!-- validate -->
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <!-- custom js -->
        <script src="{{ asset('public/assets/js/crew-designer.js') }}"></script>
        <script>
            $(function(){ 
                $(".hide-row").hide();
                
                // $(window).scroll(function() { 
                //     $('.order-summary').css('top', $(this).scrollTop());
                // });

                $('.modal').on('show.bs.modal', function() {
                    $(this).show();
                    setModalMaxHeight(this);
                });

                $(window).resize(function() {
                    if ($('.modal.in').length != 0) {
                        setModalMaxHeight($('.modal.in'));
                    }
                });

                $(document).on('button click', '.c', function() {
                    $(".hide-row").show();
                });

                $("#frm_voucher").validate({
                    rules: {
                        voucher: {
                            required: true
                        }
                    },
                    messages: {},

                    errorPlacement: function(error, element) {
                    var placement = $(element).data('error');
                        
                        if (placement) {
                        
                        $(placement).append(error)
                        
                        }else {
                        
                        error.insertAfter(element);
                        
                        }
                    },
                    submitHandler: submitVoucher
                });
            });

            function submitVoucher(){
                var form = $('#frm_voucher')
                var data = form.serialize();
                // console.log(data);
                $.ajax({
                    type: "POST",
                    url: "{{url('teamstore/q/add-voucher')}}",
                    data: data,
                    beforeSend: function(xhr){
                        $("#btn_apply_voucher").attr('disabled', true);
                        $("#btn_apply_voucher").html('Applying <i class="fa fa-spinner fa-spin"></i>');

                        var token = $('meta[name="csrf_token"]').attr('content');
                        if (token) {
                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                        }
                    },
                    success: function (response) {
                        // console.log(response);
                        $("#btn_apply_voucher").attr('disabled', false);
                        $("#btn_apply_voucher").html('Apply');
                        if(response.success){
                            $("#voucher_list").append(response.message);
                            form.validate().resetForm();
                            form[0].reset();
                            $('#my_subtotal').text(response.subtotal);
                           
                        }else{
                            $("#error_voucher").html(response.message).fadeIn().delay(5000).fadeOut('slow', function(){
                                $("#error_voucher").html("");
                                $("#error_voucher").css("display", "block");
                            });
                        }
                    }
                });
                return false;
            }

            function setModalMaxHeight(element) {
                this.$element     = $(element);  
                this.$content     = this.$element.find('.modal-content');
                var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
                var dialogMargin  = $(window).width() < 768 ? 20 : 60;
                var contentHeight = $(window).height() - (dialogMargin + borderWidth);
                var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
                var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
                var maxHeight     = contentHeight - (headerHeight + footerHeight);

                this.$content.css({
                    'overflow': 'hidden'
                });
                
                this.$element
                    .find('.modal-body').css({
                    'max-height': maxHeight,
                    'overflow-y': 'auto'
                });
            }
        </script>
    </body>
</html>
