Files
merchbay/resources/views/designer/design_preview.blade.php
2022-01-29 18:54:54 +08:00

558 lines
22 KiB
PHP
Executable File

<!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('/public/designer/css/custom-style.css') }}" rel="stylesheet">
<link href="{{ asset('/public/designer/css/tab-styles.css') }}" rel="stylesheet">
<link href="{{ asset('/public/designer/css/input-range-style.css') }}" rel="stylesheet">
<link href="{{ asset('/public/designer/css/spectrum.css') }}" rel="stylesheet">
<link href="{{ asset('/public/designer/css/one-by-one-slider.css') }}" rel="stylesheet">
<link href="{{ asset('/public/designer/custom-fonts/custom-fonts.php') }}" rel='stylesheet' type='text/css'>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="{{ asset('/public/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>
{{-- <input type="hidden" id="images_thumb"> --}}
<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('/public/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">
<button type="button" class="btn btn-primary pull-right btn-purchase"
style="margin-left: 10px;"><i class="fa fa-plus-square"></i> Purchase this
Item</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('/public/designer/js/spectrum.js') }}"></script>
<!-- CUSTOM SCRIPT -->
<script src="{{ asset('/public/designer/js/custom-script.js') }}"></script>
<!-- PRICE FORMAT -->
<script src="{{ asset('/public/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('/public/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>');
var link = "{{ url('user/my-designs') }}";
$('#dd_footer_button').html('<a href="' + link +
'" 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');
});
$(document).on('a click', '.btn-purchase', function() {
var designCode = "{{ $client_design_array[0]->DesignCode }}";
// var images_thumb = $('#images_thumb').val();
$.ajax({
type: 'POST',
url: "{{ url('/user/store-items/personal-design') }}",
data: {
designCode: designCode
},
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');
},
success: function(response) {
// console.log(response)
if (response.success) {
window.location = response.link;
} else {
alert("Something went wrong. Please try again.");
location.reload();
}
}
});
return false;
});
});
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 + "/merchbay/ap/{{ $client_design_array[0]->DesignCode }}";
} else {
gen_url = ip + ":" + port + "/merchbay/mask/{{ $client_design_array[0]->DesignCode }}";
}
} else {
if (port == 5953) {
gen_url = ip + ":" + port + "/merchbay/classic-mask/{{ $client_design_array[0]->DesignCode }}";
} else {
gen_url = ip + ":" + port + "/merchbay/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");
}
}
// var thumbs = [];
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>');
}
// thumbs.push(response['thumb_' + sideName
// .toLowerCase()].replace(/^.*\/\/[^\/]+/, '').replace("/", ""))
}
// $('#images_thumb').val(thumbs.join())
}
});
}
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>