File: /var/www/html/www.winghung.com/demo_v6/result.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once('../wp-load.php');
session_start();
date_default_timezone_set("Asia/Hong_Kong");
global $wpdb, $sitepress;
?>
<!doctype html>
<html lang="en" id="mainHTML">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.container {
margin-top:20px;
}
.card {
background-color: rgba(0, 0, 0, 0.01);
margin-bottom: 20px;
border: none;
}
.card-header {
background-color: #0067b1;
color: #ffffff;
}
.col-form-label {
font-size: 14px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
</style>
<title>Wing Hung Printing Solution</title>
</head>
<body>
<div style="font-size:1cm; text-align: center;">
<h2 face="verdana" style="margin: 0px auto; font-weight: 700; padding: 20px">Wing Hung Printing Solution <img src='asset/logo.png' height='60'></h2>
</div>
<div class="container">
<div class="row mt-3">
<?php
$productResult = $wpdb->get_results("SELECT * FROM `custom_quotation_product` WHERE status = '1'");
foreach($productResult as $productObj) {
?>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="card" style="width: 100%;">
<div class="card-header text-center"><h4 class="card-title"><?php echo $productObj->name;?></h5></div>
<div class="card-body">
<!--<h6 class="card-subtitle mb-2 text-muted">Product Size (cm): <?php echo $productObj->length_cm;?>(L) x <?php echo $productObj->width_cm;?>(W) x <?php echo $productObj->height_cm;?>(H)</h6>
<h6 class="card-subtitle mb-2 text-muted">Folded Size (cm): <?php echo $productObj->folded_length_cm;?>(L) x <?php echo $productObj->folded_width_cm;?>(W)</h6>-->
<iframe class='preview_section' id='preview_<?php echo $productObj->id;?>' src="<?php echo $productObj->path;?>?hash=<?php echo $_GET['hash'];?>&length=<?php echo $productObj->length_cm;?>&width=<?php echo $productObj->width_cm;?>&height=<?php echo $productObj->height_cm;?>" title="<?php echo $productObj->name;?>" width='100%' height='300'></iframe>
<div class='price_area text-center' id='price_<?php echo $productObj->id;?>'></div>
<hr>
<div class="mb-3 row">
<label for="length" class="col-sm-4 col-form-label">Length (cm)*</label>
<div class="col-sm-8">
<input type="number" class="form-control param_length" id="length_<?php echo $productObj->id;?>" value="<?php echo $productObj->length_cm;?>" min="1" max="100" step="1" >
</div>
</div>
<div class="mb-3 row">
<label for="quantity" class="col-sm-4 col-form-label">Width (cm) *</label>
<div class="col-sm-8">
<input type="number" class="form-control param_width" id="width_<?php echo $productObj->id;?>" value="<?php echo $productObj->width_cm;?>" min="1" max="100" step="1" >
</div>
</div>
<div class="mb-3 row">
<label for="quantity" class="col-sm-4 col-form-label">Depth (cm) *</label>
<div class="col-sm-8">
<input type="number" class="form-control param_height" id="height_<?php echo $productObj->id;?>" value="<?php if ($productObj->id!=3) echo $productObj->height_cm;?>" min="1" max="100" step="1" <?php if ($productObj->id==3) echo "readonly";?> >
</div>
</div>
<div class="mb-3 row">
<label for="quantity" class="col-sm-4 col-form-label">Qty. <small>(MOQ.:100)</small> *</label>
<div class="col-sm-8">
<input type="number" class="form-control param_qty" id="qty_<?php echo $productObj->id;?>" value="100" min="100" max="100000" step="1">
</div>
</div>
<div class="mb-3 row">
<label for="paper" class="col-sm-4 col-form-label">Paper Material *</label>
<div class="col-sm-8">
<select id='paper_<?php echo $productObj->id;?>' name='paper' class="form-select param_paper" aria-label="Select paper material">
<?php
$result = $wpdb->get_results("SELECT * FROM `custom_material_paper` WHERE status = '1'");
foreach($result as $paper){
echo "<option value='".$paper->id."'>".$paper->name."</option>";
}
?>
</select>
</div>
</div>
<div class="mb-3 row">
<label for="color" class="col-sm-4 col-form-label">Printing Colour *</label>
<div class="col-sm-8">
<select id='color_<?php echo $productObj->id;?>' name='color' class="form-select param_color" aria-label="Select printing color">
<?php
$result = $wpdb->get_results("SELECT * FROM `custom_printing_color` WHERE status = '1'");
foreach($result as $color){
echo "<option value='".$color->id."'>".$color->name."</option>";
}
?>
</select>
</div>
</div>
<hr>
<div class="mb-3 row">
<label for="unitprice" class="col-sm-4 col-form-label">Unit Price (HKD)</label>
<label for="unitprice" class="col-sm-8 col-form-label" id="displayunitprice_<?php echo $productObj->id;?>"><p class='text-danger'>Enter All Required Information</p></label>
<input type="hidden" id="unitprice_<?php echo $productObj->id;?>" readonly>
<!--<div class="col-sm-8">
<input type="text" class="form-control param_unitprice" id="unitprice_<?php echo $productObj->id;?>" readonly>
</div>-->
</div>
<div class="mb-3 row">
<label for="finishing" class="col-sm-4 col-form-label">Finishing</label>
<div class="col-sm-8">
<div class="form-check">
<?php
$result = $wpdb->get_results("SELECT * FROM `custom_finishing_option` WHERE status = '1'");
foreach($result as $finishing){
?>
<input class="form-check-input finishing_<?php echo $productObj->id;?>_<?php echo $finishing->category;?>" type="checkbox" id="finishing_<?php echo $productObj->id;?>_<?php echo $finishing->id;?>" name="finishing" value="<?php echo $finishing->price_factor;?>">
<label class="form-check-label"><?php echo $finishing->name;?></label><br>
<?php
}
?>
</div>
</div>
</div>
<div class="mb-3 row">
<label for="totalprice" class="col-sm-4 col-form-label">Total Price (HKD)</label>
<label for="totalprice" class="col-sm-8 col-form-label" id="displaytotalprice_<?php echo $productObj->id;?>"><p class='text-danger'>Enter All Required Information</p></label>
<input type="hidden" id="totalprice_<?php echo $productObj->id;?>" readonly>
</div>
<div class="mb-3 row">
<label for="leadtime" class="col-sm-4 col-form-label">Est. Lead Time</label>
<label for="leadtime" class="col-sm-8 col-form-label">20 Days</label>
</div>
<div class='d-grid gap-2' style="display:none">
<button id='placeorder_<?php echo $productObj->id;?>' type='button' class='btn btn-lg btn-dark'>Place Order</button>
</div>
<div class="mb-3 row">
<label for="contact" class="col-sm-12 col-form-label"><small class='text-primary'>To further customize your product, please contact sales@winghung.com</small></label>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="row" style='margin:20px 0px;'>
<div class="col-md-4 col-sm-12 col-xs-12">
<button type="button" class="btn btn-outline-dark" onclick="window.location.href='index.php'">Back</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script>
$('input[type=number]').on('mousewheel', function(e) {
$(e.target).blur();
});
function calculate_box_price(id){
if($("#length_"+id).val().length<=0 || $("#length_"+id).val()==0){
$("#displayunitprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_"+id).prop('disabled', true);
} else if($("#width_"+id).val().length<=0 || $("#width_"+id).val()==0){
$("#displayunitprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_"+id).prop('disabled', true);
} else if(id!=3 && ($("#height_"+id).val().length<=0 || $("#height_"+id).val()==0)){
$("#displayunitprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_"+id).prop('disabled', true);
} else if($("#qty_"+id).val().length<=0){
$("#displayunitprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_"+id).prop('disabled', true);
} else if ($("#qty_"+id).val() < 100){
$("#displayunitprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_"+id).prop('disabled', true);
} else if ($("#paper_"+id).val().length<=0){
$("#displayunitprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_"+id).prop('disabled', true);
} else if ($("#color_"+id).val().length<=0){
$("#displayunitprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_"+id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_"+id).prop('disabled', true);
} else {
if(id==1){
page = 'box.php';
} else if (id==2) {
page = 'insertCard.php';
} else if (id==3) {
page = 'card.php';
}
$('#preview_'+id).attr('src', page+"?hash=<?php echo $_GET['hash'];?>&length="+$("#length_"+id).val()+"&width="+$("#width_"+id).val()+"&height="+$("#height_"+id).val());
var dataString = "section=calculate_price_by_product_type&type="+id+"&length="+$("#length_"+id).val()+"&width="+$("#width_"+id).val()+"&height="+$("#height_"+id).val()+"&qty="+$("#qty_"+id).val()+"&paper="+$("#paper_"+id).val()+"&color="+$("#color_"+id).val();
$.ajax({
type: "POST",
url: "ajax_data.php",
data: dataString,
cache: false,
success: function(data){
var json = JSON.parse(data);
if(json.condition=='success'){
$("#displayunitprice_"+id).html("<h3>"+json.display_unit_price+"</h3>");
$("#displaytotalprice_"+id).html("<h3 class='text-primary'>"+json.display_price+"</h3>");
$("#totalprice_"+id).val(json.price);
$("#unitprice_"+id).val(json.unit_price);
// $("#placeorder_"+id).css('display','block');
$("#placeorder_"+id).prop('disabled', false);
calculate_finishing(id);
} else {
$("#displayunitprice_"+id).html("<p class='text-danger'>Product size out of range</p>");
$("#displaytotalprice_"+id).html("<p class='text-danger'>Product size out of range</p>");
$("#placeorder_"+id).prop('disabled', true);
}
},
beforeSend: function() {
$("#unitprice_"+id).html("<p class='text-danger'>Calculating...</p>");
$("#totalprice_"+id).html("<p class='text-danger'>Calculating...</p>");
},
});
}
}
/*
$(".param_length, .param_width, .param_height, .param_qty, .param_paper, .param_color").change(function(){
var id = $(this).attr('id').split("_")[1];
console.log("change");
calculate_box_price(id);
});
*/
$(".param_length, .param_width, .param_height, .param_qty").keyup(function(e){
var id = $(this).attr('id').split("_")[1];
calculate_box_price(id);
});
$(".param_length, .param_width, .param_height, .param_qty").on('keypress',function(e) {
if(e.which == 13) {
var id = $(this).attr('id').split("_")[1];
calculate_box_price(id);
e.preventDefault();
}
});
function check_finishing_action(){
$("input[name=finishing]").click(function(){
var product_type = $(this).attr('id').split("_")[1];
var class_name = $(this).attr('class').split(" ")[1];
$('.'+class_name).not(this).each(function(){
$(this).prop( "checked", false );
});
calculate_finishing(product_type);
});
}
function calculate_finishing(product_type){
var price_factor = 0;
//$(".finishing_"+product_type).each(function(){
$("input[id^='finishing_"+product_type+"']").each(function(){
if($(this).is(':checked')){
price_factor += parseFloat($(this).val());
}
})
var total_price = $("#totalprice_"+product_type).val();
var display_total_price = parseFloat(total_price) * (1+price_factor);
var display_total_price = Math.ceil(display_total_price);
var display_unit_price = display_total_price / parseInt($("#qty_"+product_type).val());
$("#displaytotalprice_"+product_type).html("<h3 class='text-primary'>"+display_total_price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")+"</h3>");
$("#displayunitprice_"+product_type).html("<h3>"+display_unit_price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")+"</h3>");
}
calculate_box_price(1);
calculate_box_price(2);
calculate_box_price(3);
check_finishing_action();
</script>
</body>
</html>