GIF89a
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="utf-8">
<meta name="description"
content="" />
<meta name="keywords"
content="" />
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- title -->
<title>Viralhoga.com</title>
<!-- favicon -->
<link rel="icon" type="image/x-icon" href="img/logo/favicon.png">
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- magnific-popup css -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
<!-- animate css -->
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<!-- bootstrap icon -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-icons.css">
<!-- font-awesome css -->
<link rel="stylesheet" type="text/css" href="css/all.min.css">
<!--fether css -->
<link rel="stylesheet" type="text/css" href="css/feather.css">
<!-- owl css -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css">
<!-- swiper-bundle css -->
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css">
<!-- slick slider css -->
<link rel="stylesheet" type="text/css" href="css/slick.css">
<!-- style css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/product-page.css">
<!-- style css -->
<link rel="stylesheet" type="text/css" href="css/other-page.css">
<link rel="stylesheet" href="css/ourstyle.css">
</head>
<body>
<!-- header start -->
<?php include('includes/navbar.php');
//check customer login or not
if(!isset($_SESSION['reg_id']) || empty($_SESSION['reg_id']))echo "<script>window.location='login.php'</script>";
//get product
$song_dta = mysqli_fetch_array($obj->select_all('product',"where id='$_REQUEST[pid]'"));
$explodeDist = explode(",",$song_dta['Pro_code']);
?>
<!-- header end -->
<!-- main section start-->
<main>
<!-- breadcrumb start -->
<section class="breadcrumb-area">
<div class="container">
<div class="col">
<div class="row">
<div class="breadcrumb-index">
<!-- breadcrumb main-title start-->
<div class="breadcrumb-title">
<h2>Booking</h2>
</div>
<!-- breadcrumb main-title end-->
<!-- breadcrumb-list start -->
<ul class="breadcrumb-list">
<li class="breadcrumb-item-link">
<a href="index.php">Home</a>
</li>
<li class="breadcrumb-item-link">
<span>Booking <?php echo $song_dta['pro_type']?> Song</span>
</li>
</ul>
<!-- breadcrumb-list end -->
</div>
</div>
</div>
</div>
</section>
<!-- breadcrumb end -->
<section class="product-details-page pro-style7">
<div class="container">
<div class="row">
<div class="col">
<div class="pro_details_pos pro_details_right_pos">
<!-- Product slider start -->
<div class="product_detail_slider product_details_tb product_details product_details_sticky shadow">
<!-- Product slider start -->
<!-- <div class="checkout-area">
<div class="order-area">
<h2>Your order</h2>
<ul class="order-history">
<li class="order-details">
<span>Product:</span>
<span>Total</span>
</li>
<li class="order-details">
<span>Cutter knife 8mm</span>
<span>€44,00</span>
</li>
<li class="order-details">
<span>Stripping plierss</span>
<span>€84,00</span>
</li>
<li class="order-details">
<span>Subtotal</span>
<span>€128,00</span>
</li>
<li class="order-details">
<span>Shipping Charge</span>
<span>Free shipping</span>
</li>
<li class="order-details">
<span>Total</span>
<span>€128,00</span>
</li>
</ul>
</div>
</div> -->
<!-- Product slider end -->
</div>
<!-- peoduct detail start -->
<div class="product_details_wrap product_details_tb product_details">
<div class="product_details_info">
<div class="pro-nprist">
<div class="product-info">
<!-- product-title start -->
<div class="product-title">
<h2>Order Details</h2>
</div>
</div>
<form method="post">
<div class="mt-3">
<div class="form-check">
<input class="form-check-input me-3" type="checkbox" id="check1" name="option1" value="something" checked>
<label class="form-check-label mt-1 text-black">Exclusive Song</label>
</div>
</div>
<div class="mt-3">
<div class="form-check">
<input class="form-check-input me-3" type="checkbox" id="check1" name="option1" value="something" >
<label class="form-check-label mt-1 text-black">Add On</label>
</div>
<div class="row align-items-center mt-3">
<div class="title">Recreate / Dance Video</div>
<p>Maxium Discount 35% Purchase on 30</p>
</div>
<div class="plans">
<div class="title">Offer</div>
<label class="plan basic-plan mt-3" for="basic">
<input checked type="radio" name="plan" id="basic" value="1" onClick="getPackageType(this.value)" />
<div class="plan-content">
<div class="plan-details">
<span>Buy 1</span>
<p><?php echo $explodeDist[0]?>% Discount</p>
</div>
</div>
</label>
<label class="plan basic-plan mt-3" for="select_second">
<input type="radio" name="plan" id="select_second" value="2" onClick="getPackageType(this.value)"/>
<div class="plan-content">
<div class="plan-details">
<span>Buy 2</span>
<p><?php echo $explodeDist[1]?>% Discount</p>
</div>
</div>
</label>
<label class="plan complete-plan mt-3" for="complete">
<input type="radio" id="complete" name="plan" value="3" onClick="getPackageType(this.value)"/>
<div class="plan-content">
<div class="plan-details">
<span>Buy3</span>
<p><?php echo $explodeDist[2]?>% Discount</p>
</div>
</div>
</label>
</div>
</div>
<script>
function getPackageType(getPackageType){
alert(getPackageType);
}
</script>
<div class="product-info">
<div class="product-inventory">
<div class="stock-inventory stock-more">
<p class="text-success ">Deliver Video Within
<span class="available-stock bg-success">7</span>
<span>Days!</span>
</p>
</div>
<div class="book_add mt-4">
<p class="mb-2 text-black">Youtube Channel Url</p>
<div class="customer_records d-flex mb-3">
<input name="customer_name" class="form-control rounded-end-0" type="text" placeholder="Enter Channel url" required>
<a class="extra-fields-customer align-content-center px-3 py-2 bg-success text-white" href="#!"><i class="feather-plus"></i></a>
</div>
<div class="customer_records_dynamic"></div>
</div>
<div class="book_add mt-4">
<p class="mb-2 text-black">Youtube Channel Name</p>
<div class="customer_records1 d-flex mb-3">
<input name="customer_name" class="form-control rounded-end-0" type="text" placeholder="Enter Channel Name" required>
<a class="extra-fields-customer1 align-content-center px-3 py-2 bg-success text-white" href="#!"><i class="feather-plus"></i></a>
</div>
<div class="customer_records_dynamic1"></div>
</div>
<div class="payment_option">
<h6 class="mb-3">Payment:</h6>
<div class="form mb-3">
<label class="me-3"><input type="radio" class="input-radio off " onClick="javascript:yesnoCheck();" name="yesno" id="yesCheck" required> Advance </label>
<label><input type="radio" class="input-radio on" onClick="javascript:yesnoCheck();" name="yesno" id="noCheck" required> Full Payment</label>
</div>
<div id="ifYes" style="visibility:hidden">
<input type='text' class="form-control" id='yes' name='yes' placeholder="Enter Amount">
</div>
</div>
<div class="payment_btn">
<button type="submit" class="btn btn-danger mt-4 px-lg-4 rounded-pill">Continue</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- peoduct detail end -->
</div>
</div>
</div>
</div>
</section>
</main>
<!-- main section end-->
<!-- footer start -->
<?php include('includes/footer.php')?>
<!-- screen-bg start -->
<div class="screen-bg"></div>
<!-- screen-bg end -->
<!-- back-to-top start -->
<a href="javascript:void(0)" id="top" class="scroll">
<span><i class="feather-arrow-up"></i></span>
</a>
<!-- back-to-top end -->
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>
<!-- magnific-popup js -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- owl js -->
<script src="js/owl.carousel.min.js"></script>
<!-- swiper-bundle js -->
<script src="js/swiper-bundle.min.js"></script>
<!-- slick js -->
<script src="js/slick.min.js"></script>
<!-- waypoints js -->
<script src="js/waypoints.min.js"></script>
<!-- counter js -->
<script src="js/counter.js"></script>
<!-- main js -->
<script src="js/main.js"></script>
</body>
<script>
$('.extra-fields-customer').click(function() {
$('.customer_records').clone().appendTo('.customer_records_dynamic');
$('.customer_records_dynamic .customer_records').addClass('single remove');
$('.single .extra-fields-customer').remove();
$('.single').append('<a href="#" class="remove-field btn-remove-customer px-3 py-2"><i class="feather-minus"></i></a>');
$('.customer_records_dynamic > .single').attr("class", "remove");
$('.customer_records_dynamic input').each(function() {
var count = 0;
var fieldname = $(this).attr("name");
$(this).attr('name', fieldname + count);
count++;
});
});
$(document).on('click', '.remove-field', function(e) {
$(this).parent('.remove').remove();
e.preventDefault();
});
</script>
<script>
$('.extra-fields-customer1').click(function() {
$('.customer_records1').clone().appendTo('.customer_records_dynamic1');
$('.customer_records_dynamic1 .customer_records1').addClass('single remove');
$('.single .extra-fields-customer1').remove();
$('.single').append('<a href="#" class="remove-field btn-remove-customer1 px-3 py-2"><i class="feather-minus"></i></a>');
$('.customer_records_dynamic1 > .single').attr("class", "remove");
$('.customer_records_dynamic1 input').each(function() {
var count = 0;
var fieldname = $(this).attr("name");
$(this).attr('name', fieldname + count);
count++;
});
});
$(document).on('click', '.remove-field', function(e) {
$(this).parent('.remove').remove();
e.preventDefault();
});
</script>
<script>
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.visibility = 'visible';
}
else document.getElementById('ifYes').style.visibility = 'hidden';
}
</script>
</html>