<?php 
/**
 * checkout.php
 */

use App\Model\CustomerModel;
$customer = new CustomerModel;
$total 		= 0;
$qtyPouches	= 0;
$shipping 	= 0;
$discount 	= 0;
$discountAmount 	= 0;
?>

<?php include 'template/header.php'; ?>
<div id="main">
	<div class="container py-4">
		<div class="h3 mb-5 border-bottom">
			Checkout
		</div>
		<?php if (isset($_SESSION['cart']) && count($_SESSION['cart']) >= 1) : ?>
			<div class="row">
				<div class="col-lg-6">
					<div class="bg-blue text-white text-center py-2">
						Información de la Orden
					</div>
					<div class="py-2">
						<label for="email">Email</label>
						<input type="text" name="email" id="email" class="form-control">
					</div>
					<div class="py-2">
						<label for="firstname">Nombre</label>
						<input type="text" name="firstname" id="firstname" class="form-control">
					</div>
					<div class="py-2">
						<label for="lastname">Apellido</label>
						<input type="text" name="lastname" id="lastname" class="form-control">
					</div>
					<div class="py-2">
						<label for="street">Dirección (Calle)</label>
						<input type="text" name="street" id="street" class="form-control">
					</div>
					<div class="py-2">
						<label for="city">Ciudad</label>
						<input type="text" name="city" id="city" class="form-control">
					</div>
					<div class="py-2">
						<label for="state">Estado</label>
						<select name="state" id="state" class="form-control">
							<option value="0">Selecionar</option>
							<?php include 'stateOptionsMx.html'; ?>
						</select>
					</div>
					<div class="py-2">
						<label for="zip">Código Postal</label>
						<input type="text" name="zip" id="zip" class="form-control">
					</div>
					<div class="py-2">
						<label for="phone">Teléfono</label>
						<input type="text" name="phone" id="phone" class="form-control">
					</div>
					<div class="py-2">
						<label for="message">Envia un mensaje</label>
						<textarea name="message" id="message" class="form-control"></textarea>
					</div>
				</div>
				<div class="col-lg-6 text-end">
					<div class="bg-blue text-white text-center py-2">
						Orden
					</div>
					<div class="pt-2">
						<?php include 'orderResume.php'; ?>

						<div class="bg-light p-3 rounded-bottom">
							<div class="row h5">
								<div class="col-6">SubTotal:</div>
								<div class="col-6">$<?= number_format($total , 2) ?></div>
							</div>
							<div class="row h5">
								<div class="col-6">Envio:</div>
								<div class="col-6">$<?= number_format($shipping , 2) ?></div>
							</div>
							<?php $grandTotal = $total - $discount + $shipping; ?>
							
							<div id="grandTotal" class="h4 m-0" data-total="<?= number_format($grandTotal , 2) ?>">
								Total: $<?= number_format($grandTotal , 2) ?>
							</div>
						</div>
						<div class="py-2">
							<a href="/cart" 
							class="btn btn-blue text-decoration-none text-center d-block py-2">
								Editar Orden
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="row py-3">
				<div class="col-12">
					<div class="bg-blue text-white text-center py-2">
						Metodos de Pago
					</div>
				</div>
				<div class="d-none">
					<input type="radio" name="paymentForm" value="paypalPayment"  disabled="disabled" />
					Pagar con Paypal
				</div>
				<div>
					<input type="radio" name="paymentForm" value="transferPayment" checked="checked" />
					Pagar con transferencia
				</div>
				<div class="py-3">
				<div id="orderAlert"></div>
					<div id="paypalPayment" class="row payment-form">
						<div id="paymentPaypal" class="d-none col-md-6 orderBtn text-center">
							<div id="paypalButton" class=""
								data-subtotal="<?= $total ?>"
								data-total="<?= $grandTotal ?>"
								data-shipping="<?= $shipping ?>"
								data-discount="<?= $discount ?>"
								data-items='<?= json_encode($_SESSION['paypal']) ?>'></div>
						</div>
					</div>
					<div id="transferPayment" class="row payment-form">
						<div id="paymentCredit" class="col-md-6 orderBtn">
							<div id="orderPlace" class="btn btn-blue form-control text-center py-3"
								data-subtotal="<?= $total ?>"
								data-total="<?= $grandTotal ?>"
								data-shipping="<?= $shipping ?>"
								data-discount="<?= $discount ?>"
								data-payment="transfer"
							>
								<h5 class="m-0">Pagar con transferencia</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
		<?php else : ?>
			<?php include 'store/empty-cart.php'; ?>
		<?php endif; ?>
	</div>
</div>
<script>
	$("#email").focusout(function(){
		var email = $(this).val();
		console.log('debug email: ' + email);
		
		$.ajax({
			type	: 'POST',
			url		: '/customer',
			data	: {'email' : email},
			success	: function(json){
				var response = $.parseJSON(json);
				console.log(response);
				if (response.customer == 1) {
					$("#firstname").val(response.firstname).prop('disabled', true);
					$("#lastname").val(response.lastname).prop('disabled', true);
					$("#street").val(response.street).prop('disabled', true);
					$("#state").val(response.id_state).prop('disabled', true);
					$("#city").val(response.city).prop('disabled', true);
					$("#zip").val(response.zip_code).prop('disabled', true);
					$("#phone").val(response.phone).prop('disabled', true);
				} else {
					$("#firstname").val('').prop('disabled', false);
					$("#lastname").val('').prop('disabled', false);
					$("#street").val('').prop('disabled', false);
					$("#state").val('').prop('disabled', false);
					$("#city").val('').prop('disabled', false);
					$("#zip").val('').prop('disabled', false);
					$("#phone").val('').prop('disabled', false);
				}
			}
		});		
	});

	$('input[type=radio][name=paymentForm]').change(function() {
	    var payment = this.value;
	    $('.payment-form').addClass('d-none');
	    $('#' + payment).removeClass('d-none');
	});

	$("#orderPlace").click(function(){
		var validate = checkOrderInfo();
		if (validate) {
			var firstname	= $("#firstname").val();
			var lastname	= $("#lastname").val();
			var street		= $("#street").val();
			var state		= $("#state").val();
			var city		= $("#city").val();
			var zip_code	= $("#zip").val();
			var phone		= $("#phone").val();
			var email 		= $("#email").val();
			var payment 	= $("input[name='payment']:checked").val();
			var total		= $("#grandTotal").data('total');
			var message 	= $("#message").val();
			var payment   	= $("#orderPlace").data('payment');
            var total     	= $("#orderPlace").data('total');
            var shipping  	= $("#orderPlace").data('shipping');
            var subtotal  	= $("#orderPlace").data('subtotal');
            var discount  	= $("#orderPlace").data('discount');

			console.log('validate debug: ' + email + '/' + street + '/' + payment);
			
			$.ajax({
				type	: 'POST',
				url		: '/order',
				data	: {
					'firstname'	: firstname,
					'lastname' 	: lastname,
					'street'	: street,
					'id_state'	: state,
					'city'		: city,
					'state'		: state,
					'zip_code'	: zip_code,
					'phone'		: phone,
					'email' 	: email,
					'payment' 	: payment,
					'total' 	: total,
					'message'	: message,
                    'total'     : total,
                    'subtotal'  : subtotal,
                    'shipping'  : shipping,
                    'discount'  : discount
                },
				success	: function(json) {
					var response = $.parseJSON(json);
					console.log(response);
					window.location.href = "/order-success";
				}
			});
		}
	});

	function checkOrderInfo() {
		if ( ($("#email").val()) && ($("#street").val())) {
			$("#orderAlert").html('');
			return true;
		} else {
			$("#orderAlert").html('<div class="alert alert-danger text-center py-2">Es necesario llenar la información para poder continuar.</div>');
			return false;
		}
	}
</script>
<?php //include 'store/paypal-btn.php'; ?>
<?php include 'template/footer.php'; ?>