<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="csrf_token" content="{{ csrf_token() }}" />
        <title>Designer</title>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
        <!-- ---- Include the above in your HEAD tag -------- -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        
        <link href="{{asset('/designer/css/custom-style.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/tab-styles.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/input-range-style.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/spectrum.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/one-by-one-slider.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'> 
        <link href="{{asset('/assets/css/jquery-ui.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/build.css')}}" rel="stylesheet">
        <style>
            .custom-navbar-brand>img {
                display: block;
                height: 36px;
                margin-top: -9px;
            }
            .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-loader, .thumbnail a>img, .thumbnail>img{
				margin: 0 auto;
				height: 200px;
			}

            .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-thumb-custom, .thumbnail a>img, .thumbnail>img{
				margin: 0 auto;
                height: 418.53px;
            }
            
            .panel-design-details{
                height: 484px;
                overflow: auto;
            }

            .error{
                color : #ff0000;
            }

            .roster-input{
                border-radius: 0px;
                border-right: none;
                border-top: none;
            }
            .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
                border-bottom-width: 0px;
            }
            .btn-roster-action{
                width: 20px;
                height: 20px;
                border-radius: 10px;
            }
            .btn-group-sm>.btn, .btn-roster-action {
                padding: 0px 5px;
            }
            .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
                vertical-align: unset;
            }

            .table>thead>tr>th{
                border-bottom:none;
            }
            .hide-bullets {
                list-style:none;
                margin-left: -40px;
                margin-top:20px;
                display: -webkit-inline-box;
            }
        </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="body-spacer"></div>
        
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12  col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4>{{ $client_design_array[0]->DesignName }} 
                                    <button class="btn btn-default btn-md pull-right" id="btn-reload-design" title="Reload Design"><i class="fa fa-refresh"></i></button>
                                    </h4>	
                                <div class="clearfix"></div>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                        <div class="col-md-12 text-center">
                                            @foreach($templatepaths_arrays as $k => $template)
                                                @if($k  == 0)
                                                    <img id="{{ strtolower($template->Side) }}-image-thumb" src="{{asset('/images/loading-please-wait.gif')}}" class="img img-responsive img-loader main-thumbnail">
                                                @endif
                                            @endforeach
                                        </div>
                                    <!-- </div> -->
                                </div>
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <ul class="hide-bullets">
                                        </ul>     
                                    </div>
                                </div>
                              
                            </div>
                            @if (!Auth::guest())
                            <div class="panel-footer">
                                <div id="dd_footer_button">
                                    <a href="{{ url('user/my-designs') }}" type="button" class="btn btn-default pull-right"><i class="fa fa-arrow-left"></i> Go to My Designs</a>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- Footer -->
    <!-- End Footer -->

    <!-- JQUERY  -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- FABRIC JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.15/fabric.min.js"></script>
    <!-- FABRIC JS CURVE TEXT -->
    <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script> 
    <!-- SPECTRUM -->
    <script src="{{asset('/designer/js/spectrum.js')}}"></script>
    <!-- CUSTOM SCRIPT -->
    <script src="{{asset('/designer/js/custom-script.js')}}"></script>
    <!-- PRICE FORMAT -->
    <script src="{{asset('/designer/js/jquery.priceformat.min.js')}}"></script>
    <!-- JQUERY VALIDATE  -->
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

    <script>
          
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            });

            myCart();

            $('.price_format').priceFormat({
				prefix: '$ '
			});

            $(document).on('button click', '#publish_chk', function(){
                if(!$(this).is(':checked')){
                    // $('#sale_chk').removeAttr("checked");
                    $('#sale_chk').prop('checked', false);
                    $('#item_price').attr("disabled", "disabled");
                }		
            });

            $(document).on('button click', '#sale_chk', function(){

                if($(this).is(':checked')){
                    $('#publish_chk').prop('checked', true);
                    $('#item_price').removeAttr("disabled");
                    $('#itemName').removeAttr("disabled");
                    $('#itemDescription').removeAttr("disabled");
                }else{
                    // $('#publish_chk').prop('checked', false);
                    $('#item_price').attr("disabled", "disabled");
                    $('#itemName').attr("disabled", "disabled");
                    $('#itemDescription').attr("disabled", "disabled");
                }
                
            });

            generateThumbnails();
            // console.log('{{ $client_design_array[0]->DesignCode }}');
            $('#toTop').click(function() {
                $('body,html').animate({scrollTop:0},800);
            }); 

            $('#custom-navbar-brand').html('<img src="{{asset("/images/logo.png")}}">');


            $("#frm-design-details").validate({
				rules: {
					designName: {
						required: true
					},
					itemName: {
						required: true
					},
					itemDescription: {
						required: true
					},
					storeId: {
						required: true
					}
				},

				messages: {},
				errorPlacement: function(error, element) {
					var placement = $(element).data('error');
					if (placement) {
						$(placement).append(error);
					}else {
						error.insertAfter(element);
					}
				},
				submitHandler: submitDesignDetails
			}); /* edit account validation */
            
            $(document).on('button click', '.btn-buy', function(){

                var getTemplateCode = $('#template_code').val();

                $('.panel-design-details').load("{{ url('designer/a/buy-form') }}", { temp_code : getTemplateCode }, function(response, status, xhr){
                    // console.log(response, status, xhr)
                    $('#dd_footer_button').html('<button type="button" class="btn btn-default pull-right" id="btn_cancel_buy" style="margin-left: 5px;">Cancel</button> ' +
                    '<button type="submit" class="btn btn-primary pull-right" id="btn-submit-publish">Add to Cart</button>');
                    $('.inputName').keyup(function() {
                        this.value = this.value.toLocaleUpperCase();
                    });

                    $('#frm-roster').attr("action", "{{ url('/designer/a/save-roster') }}");
                    $('#frm-roster').attr("method", "POST");
                    
                    
                });
            });

            $(document).on('button click', '.btn-sell', function(){

                // var getTemplateCode = $('#template_code').val();
                alert("adasdas");

            });
            
            $(document).on('button click', '#btn_cancel_buy', function(){
                // alert("asda")
                $('.panel-design-details').html('<div class="row"> ' +
                                                '<div class="col-sm-12"> ' +
                                                    '<div class="text-center" style="margin-top: 5em;"> ' +
                                                        '<div class="form-group"> ' +
                                                            '<button type="button" class="btn btn-info btn-lg btn-buy" style="width:150px;"><i class="fa fa-list-ol"></i> Add Roster</button>' +
                                                        '</div> ' +
                                                        '</div> ' +
                                                    '</div> ' +
                                                '</div>');
                $('#dd_footer_button').html('<a href="{{ url('user/my-designs') }}" type="button" class="btn btn-default pull-right"><i class="fa fa-arrow-left"></i> Go to My Designs</a>');
            });

            $(document).on('button click', '#addNewRow', function(){

                var orderCounterValue = $('#orderCounterValue').val();
                var numi = document.getElementById('orderCounterValue');
                var num = (document.getElementById('orderCounterValue').value -1) + 2;
                numi.value = num;

                $.ajax({    //create an ajax request to load_page.php

                    type: "POST",
                    url: "{{ url('/designer/a/add-new-row') }}",
                    data:{

                        itemCount : num,
                        tempCode  : "{{ $client_design_array[0]->TemplateCode }}"

                    },

                    dataType: "html",   //expect html to be returned

                    success: function(response){
                        var className = "row" +  (num - 1);
                        $('.tr-remove-btn').html('<button type="button" class="btn btn-danger btn-sm removeRow btn-roster-action" data-toggle="tooltip" title="Remove"><i class="fa fa-remove" aria-hidden="true"></i></button>');
                        $('#addnew-btn-tbl-row').remove();
                        $('#tableRow tbody').append(response);
                        $('#orderListPanel').scrollTop($('#orderListPanel')[0].scrollHeight);
                        $('.inputName').keyup(function() {
                            this.value = this.value.toLocaleUpperCase();
                        });
                    }
                });


            });


            $(document).on('button click', '.removeRow', function(){
                var str = $(this).closest('tr').attr('class');
                var trCount = $('#tableRow tbody').children('tr').length;
                
                if(trCount == 2){
                    return false;
                }

                if(trCount == 3){
                    $('#addnew-btn-tbl-row').remove();
                    $('.tr-remove-btn').html('<button type="button" id="addNewRow" class="btn btn-success btn-sm btn-roster-action" data-toggle="tooltip" title="Add Another"><i class="fa fa-plus" aria-hidden="true"></i></button>');		
                }
                $('.'+str).remove();
            });

            $(document).on('select change', '.order-size', function(){
                var row_number = $(this).data('row-number');
                
                var jersey_size = "order_jersey_size_" + row_number;
                var shorts_size = "order_shorts_size_" + row_number;
                // console.log($(this, 'option').eq(1).val());
                // if($('#'+jersey_size).val() == "none" && $('#'+shorts_size).val() == "none"){
                        
                // }

            });

            $(document).on('a click', '.a_thumbnail', function(){
                $('.main-thumbnail').attr('src', $(this).find("img").attr('src'));
                $('.a_thumbnail').removeClass('active');
                $(this).addClass('active');
            });
        });

        function generateThumbnails(){
			
            var ip = "{{ config('site_config.prod_private_server_ip') }}";
			var port = "{{ $array_cat_name[0]->Port }}";
            var template_format = "{{ $array_templates[0]->TemplateFormat }}";
            var gen_url;
            
            if(template_format == "png"){
				if(port == 5952){
					gen_url = ip+":"+port+"/ap/{{ $client_design_array[0]->DesignCode }}";
				}else{
					gen_url = ip+":"+port+"/mask/{{ $client_design_array[0]->DesignCode }}";
				}
                
            }else{
                if(port == 5953){
					gen_url = ip+":"+port+"/classic-mask/{{ $client_design_array[0]->DesignCode }}";
				}else{
					gen_url = ip+":"+port+"/tb/{{ $client_design_array[0]->DesignCode }}";
				}
            }

			$.ajax({    //create an ajax request to load_page.php
				type: "GET",
				url: gen_url,
				dataType: "jsonp",   //expect html to be returned
				beforeSend: function() {
					console.log('loading images');
				},
				success: function(response){
					
                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                    
                    for (var i = 0; i < SideAndPath.length; i++) {
                        if(i == 0){
                            var sideName = SideAndPath[i]['Side'];
                            var type = SideAndPath[i]['Type'];

                            $('#'+sideName.toLowerCase()+'-image-thumb').attr('src', response['thumb_'+sideName.toLowerCase()]);
                            $('#'+sideName.toLowerCase()+'-image-thumb').removeClass("img-loader");
                            $('#'+sideName.toLowerCase()+'-image-thumb').addClass("img-thumb-custom");
                        }
                    }
                    for (var j = 0; j < SideAndPath.length; j++) {
                        var sideName = SideAndPath[j]['Side'];
                        var type = SideAndPath[j]['Type'];

                        if(j == 0){
                            $('.hide-bullets').append('<div class="text-center"> ' +  
                                                            '<li style="padding:10px" class="item-thumb"> ' + 
                                                                '<a class="thumbnail a_thumbnail active" style="min-width: 130px;"> ' +
                                                                    '<img style="height: 100px;" src="'+response['thumb_'+sideName.toLowerCase()]+'" class="img img-responsive">' +
                                                                '</a> ' +
                                                            '</li> ' +
                                                        '</div>');
                        }else{
                            $('.hide-bullets').append('<div class="text-center"> ' +  
                                                            '<li style="padding:10px" class="item-thumb"> ' + 
                                                                '<a class="thumbnail a_thumbnail" style="min-width: 130px;"> ' +
                                                                    '<img style="height: 100px;" src="'+response['thumb_'+sideName.toLowerCase()]+'" class="img img-responsive">' +
                                                                '</a> ' +
                                                            '</li> ' +
                                                        '</div>');
                        }
                    }
				}
			});
		}

        function submitDesignDetails(){  
			var data = $("#frm-design-details").serialize();
            
			$.ajax({
				type : 'POST',
				url  : "{{ url('/designer/a/save-design-details') }}",
				data : data,
                beforeSend:function(xhr){
                    var token = $('meta[name="csrf_token"]').attr('content');

                        if (token) {
                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                        }
                        xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                        
                        // $("#edit-account-msg").fadeOut();
					    // $("#btn-update-account").html('Saving &nbsp; <span class="glyphicon glyphicon-transfer"></span>');
                },
				success :  function(response){

                    if(response){
                        alert("Successfully saved.");
                        location.reload();
                    }else{
                        alert("Something went wrong. Please try again.");
                        location.reload();
                    }
                    // console.log(response);
                    // alert("Item is successfully added");
					// $("#edit-account-msg").html("");
					// $("#edit-account-msg").fadeIn(1000, function(){      
					// 	$("#edit-account-msg").html(response);
					// 	$("#btn-update-account").html('Save Changes');
					// });
				}
			});
			return false;
        }

        function myCart(){
            $.ajax({    //create an ajax request to load_page.php

                type: "GET",
                url: "{{url('cartcount')}}",
                dataType: "html",   
                success: function(response){
                    $("#my-cart-count").html(response);
                }
            });
        }
    </script>
    </body>
</html>