@extends('web.layout.master')

@section('content')
<style>
    body { overflow-x:hidden; }

    body{
        background-color: #f1f1f1 !important;
    }
    .mobilehidehr{
        height: 0px !important;
    }
    input,select{
        border:1.2px solid #3A3A3A !important;
        margin-top: 5px;
        height: 38px;
     }
     .card-none-border{
        border-radius: 0px !important;
        border: 0px;
    }
    .productimagereview{
        width: 58px !important;
        margin-top: 10px !important;
    }
    .productdetailsdiv{
        padding-left: 16px !important;
    }
     /* Dotted red border */
     .hrdash {
        margin-top: 5px;
        margin-bottom: 5px;
        border: none;
      height: 1px;
      background: #000;
      background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 12px);
      }
      .fw-custom-bold{
        font-weight: 600;
    }
    .fw-custom-500{
        font-weight: 500;
    }
    .font-weight-600{
        font-weight: 600 !important;
    }

     /* The message box is shown when the user clicks on the password field */
    #message {
        display:none;
        background: #f1f1f1;
        color: #000;
        position: relative;
        padding: 10px;
        margin-top: 10px;
    }

    #message p {
        padding: 0px 10px;
        font-size: 14px;
    }

    /* Add a green text color and a checkmark when the requirements are right */
    .valid {
        color: green;
    }

    .valid:before {
        position: relative;
        left: -10px;
        content: "✔";
    }

    /* Add a red text color and an "x" when the requirements are wrong */
    .invalid {
        color: red;
    }

    .invalid:before {
        position: relative;
        left: -10px;
        content: "✖";
    }
    .btn-primary {
        background: #04458f;
        border: 0px;
    }
</style>
<div class="card card-none-border">
    <div class="card-body pb-0">
        <div class="text-center">
            <img src="{{ asset('assets/web') }}/images/success.png" alt="" width="100px">
        </div>
        <div class="text-center mt-2">
            <h4><b>Thank you for your Order!</b></h4>
            <p>Order Number : {{ $orderid }}</p>
        </div>
    </div>
</div>
<div class="card card-none-border mt-1">
    <div class="card-body pt-0">
        <div class="text-start mt-3">
            <h3><b>Access your Order at any Order!</b></h3>
        </div>
        <form action="#" id="checkoutCreatePasswordForm" method="post">
            @csrf
            <input aria-labelledby="PartsWarehouse" type="hidden" name="order_id" value="{{ $orderid }}">
            @if(!auth()->check())
                <div class="mt-3">
                    <div class="form-group">
                        <label for="password">Create Password</label>
                        <input type="password" class="form-control" name="password" id="password"
                            aria-describedby="password" placeholder="">
                    </div>
                    <div class="form-group mt-3">
                        <label for="confirm_password">Verify Password</label>
                        <input type="password" class="form-control" name="confirm_password" id="confirm_password"
                            aria-describedby="confirm_password" placeholder="">
                    </div>
                </div>

        <div class="mt-3 text-center">
            <button type="button" class="btn btn-primary" style="width: 120px;"><b>Save</b></button>
        </div>
        @endif
        <div class="" id="message">
            <p id="length" class="invalid">Minimum <b>8 characters</b></p>
            <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
            <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
            <p id="number" class="invalid">A <b>number Or special character</b></p>

        </div>
    </form>
    </div>
</div>
<div class="card card-none-border mt-1">
    <div class="card-body pb-0">
        <p>We've sent an email confirmation to<br> <b>{{ (auth()->check()) ? auth()->user()->emailaddress : $order->coustomer->emailaddress }}.</b></p>

    </div>
    <hr class="m-0" style="margin-right: 16px !important;margin-left: 16px !important;">
</div>

<div class="card card-none-border">
    <div class="card-bod pt-0">
        <div class="row p-3">
            <div class="col-12">
                <h5 class="font-weight-600"><i class="fas fa-shipping-fast"></i>&nbsp;&nbsp;&nbsp;Shipping Address</h5>
                <span class="fw-custom-bold">{{ $order->shipfirstname }} {{ $order->shiplastname }}</span><br>
                @if(!empty($order->shipcompanyname))
                    <span class="fw-custom-bold">{{ $order->shipcompanyname }}</span><br>
                @endif
                <p class="m-0">{{ $order->shipaddress1 }}</p>
                @if(!empty($order->shipaddress2))
                    <p class="m-0">{{ $order->shipaddress2 }}</p>
                @endif
                <p class="mb-0">{{ $order->shipcity }} {{ $order->shipstate }} {{ $order->shippostalcode }}</p>
                <p>{{ $order->shipcountry }}</p>
                @if(!empty($order->shippingmethodname))
                <p class="m-0 fw-custom-bold">{{ $order->shippingmethodname }}</p>
                @endif
            </div>

        </div>
        <hr class="m-0">
        <div class="card-body row p-3">
            <div class="col-12">
                <h5 class="font-weight-600"><i class="fas fa-receipt"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Billing Address</h5>
                <span class="fw-custom-bold">{{ $order->billingfirstname }} {{ $order->billinglastname }}</span><br>
                @if(!empty($order->billingcompanyname))
                    <span class="fw-custom-bold">{{ $order->billingcompanyname }}</span><br>
                @endif
                <p class="m-0">{{ $order->billingaddress1 }}</p>
                @if(!empty($order->billingaddress2))
                    <p class="m-0">{{ $order->billingaddress2 }}</p>
                @endif
                <p class="m-0">{{ $order->billingcity }} {{ $order->billingstate }} {{ $order->billingpostalcode }}</p>
                <p class="mb-0">{{ $order->billingcountry }}</p>
            </div>

        </div>
        <hr class="m-0">
        <div class="card-body row p-3 pb-0">
            <div class="col-12">
                <h5 class="font-weight-600"><i class="far fa-credit-card"></i>&nbsp;&nbsp;&nbsp;&nbsp;Payment Method</h5>
                <div class="row mt-3">
                    @if(empty($paypal_order_id))
                        <div class="col-md-2 col-3 p-2">
                            @if($cardType == 'mastercard')
                                <img src="{{ asset('assets/web') }}/images/card-master.png" alt="" srcset="" width="70px" class="p-1 cardtypeimage">
                            @else
                                <img src="{{ asset('assets/web') }}/images/card-{{ $cardType }}.png" alt="" srcset="" width="70px" class="p-1 cardtypeimage">
                            @endif

                        </div>
                        <div class="col-md-10 col-9 p-1">
                            <span class="fw-custom-bold" style="font-size: 18px;">.... .... {{ substr($card_number, -4) }}</span>
                            <p style="font-size: 13px;">{{ $expiry_month }}/{{ substr($expiry_year, -4) }}</p>
                        </div>
                    @else
                        @if($order->paymentlog->pay_paymentmethodid == '35')
                            <div class="col-md-2 col-3 p-2">
                                <img src="{{ asset('assets/web') }}/images/affirm-logo.png" alt="" srcset="" width="200px" class="p-1">
                            </div>
                         @elseif($order->paymentlog->pay_paymentmethodid == '36')
                            <div class="col-md-2 col-3 p-2">
                                <img src="{{ asset('assets/web') }}/images/google-pay.png" alt="" srcset="" width="200px" class="p-1">
                            </div>
                       @elseif($order->paymentlog->pay_paymentmethodid == '37')
                            <div class="col-md-2 col-3 p-2">
                                <img src="{{ asset('assets/web') }}/images/apple-pay.png" alt="" srcset="" width="200px" class="p-1">
                            </div>
                        @else
                            <div class="col-md-2 col-3 p-2">
                                    <img src="{{ asset('assets/web') }}/images/paypal-logo.png" alt="" srcset="" width="80px" class="p-1 cardtypeimage">
                            </div>
                            <div class="col-md-10 col-9">
                                <span class="fw-custom-bold" style="font-size: 18px;">{{ $paypalemail }}</span>
                            </div>
                        @endif
                    @endif
                </div>
            </div>

        </div>


        <hr class="d-lg-none" style="border: 2.5px solid #ddd;margin-top: 5px;margin-bottom: 0px;">
                <div class="card-body p-2">
            <div class="p-1">
                <h4>Item Summary ({{ $quantity }} item)</h4>
            </div>
            @foreach ($order->orderdetail as $orderdetail)
            <div class="row">
                <div class="col-md-2 col-2 text-center">
                    <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $orderdetail->productcode }}-1.jpg" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;" alt="Product Image" class="productimagereview" style="width: 100px">
                </div>
                <div class="col-md-6 col-7 p-2 productdetailsdiv">
                    <p class="fw-custom-500 m-0" style="font-size: 18px;">{{ (!empty($orderdetail->pin->Name))?$orderdetail->pin->Name:$orderdetail->productcode }}</p>
                    <span style="font-size: 14px;color: #a3a3a3;">Product Code: {{ !empty($orderdetail->productcode) ? $orderdetail->productcode : "" }}</span>
                    <p style="font-size: 14px;color: #a3a3a3;" class="d-lg-none">Qty: {{ $orderdetail->quantity }}</p>
                </div>
                <div class="col-md-2 text-end p-2 d-none d-lg-block">
                    <p>{{ $orderdetail->quantity }} Qty</p>
                </div>
                <div class="col-md-2 col-3 text-end p-2">
                    <p class="me-2">${{ $orderdetail->totalprice }}</p>
                </div>
            </div>
            <hr class="m-0">
            @endforeach
            <div class="card-body">
                <h4><b>Need help with your order ?</b></h4>
                <p class="m-0">Give us a call at 866-243-2721 or email us at</p>
                <p class="m-0"><a href="mailto:" class="text-dark">info@partsvana.com</a></p>
            </div>
        </div>


    </div>


</div>
@php
$subtotal = number_format((float)($order->paymentamount - ($order->totalshippingcost + $order->salestax1 )) + $order->coupon_discount , 2, '.', '');
@endphp
    <div class="card card-none-border mt-1">
        <div class="card-body p-3">

            <div class="row mb-2">
                <h4>Order Summary</h4>
                <div class="col-6 fs-6 mt-2">
                    <b>Subtotal</b>
                </div>
                <div class="col-6 fs-6 text-end">
                    <b>${{ $subtotal }}</b>
                </div>
            </div>
            @if(!empty($order->coupon_discount))
                @php $discountPer = (($order->coupon_discount / $subtotal) * 100) @endphp
                <div class="row mb-2">
                    <div class="col-6 fs-6">
                        <b>Discount ({{ $order->coupon_code }} - {{ round($discountPer) .'%' }})</b>
                    </div>
                    <div class="col-6 fs-6 text-end">
                        <b>-${{ number_format((float)$order->coupon_discount, 2, '.', '') }}</b>
                    </div>
                </div>
            @endif
            <div class="row mb-2">
                <div class="col-6 fs-6">
                    <b>Estimated Shipping @if(!empty($order->shippingmethodname)) ({{ $order->shippingmethodname }} @if(!empty($order->shippingsurcharges))inc. surcharges of ${{ number_format((float)$order->shippingsurcharges, 2, '.', '') }}@endif) @endif</b>
                </div>
                <div class="col-6 fs-6 text-end">
                    <b>${{ number_format((float)$order->totalshippingcost, 2, '.', '') }}</b>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-6 fs-6">
                    <b>Estimated Tax @if(!empty(request()->isadmin)) ({{ round($order->salestaxrate1 *100,2).'%' }}) @endif</b>
                </div>
                <div class="col-6 fs-6 text-end">
                    <b>${{ number_format((float)$order->salestax1, 2, '.', '') }}</b>
                </div>

            </div>
            <hr class="d-none d-lg-block">
            <hr class="hrdash mt-4 mb-4 d-lg-none">
            <div class="row mb-2">
                <div class="col-6 fs-6">
                    <b>Order Total</b>
                </div>
                <div class="col-6 fs-6 text-end">
                    <b>${{ number_format((float)($order->paymentamount), 2, '.', '') }}</b>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-12">
                    <a href="{{ route('home') }}" type="button" class="btn btn-primary btn-lg w-100 mb-4 mt-2" aria-label="Proceed to Checkout">Continue Shopping</a>
                </div>
            </div>

        </div>
    </div>
   
    <script src="{{ asset('assets/web') }}/js/jquery.session.js"></script>
   

	@if($order->is_google_order == 0)
	<script type="text/javascript">
		$.session.set("couponDiscount",'');
		$.session.set("discountPrice",0);
		// ROI Javascript
		var Order = new Array();
		var OrderDetails = [];
		Order[0] = "{{$orderid}}"; // Order ID
		Order[1] = '';
		Order[2] = "{{ number_format((float)($order->paymentamount - ((float)$order->coupon_discount)), 2, '.', '') }}"; // Payment Amount
		Order[3] = ''; // Affiliate Commisionable Value
		Order[4] = "{{$order->salestax1}}"; // Sales Tax
		Order[5] = "{{ number_format((float)$order->totalshippingcost, 2, '.', '') }}"; // Total Shipping Cost
		Order[6] = "{{$order->billingcity}}"; // Billing City
		Order[7] = "{{$order->billingstate}}"; // Billing State
		Order[8] = "{{$order->billingcountry}}"; // Biling Country
		Order[9] = "{{ $order->coustomer->emailaddress }}"; // Email Address

		   @php $od = 0; @endphp
			@foreach ($order->orderdetail as $orderdetails)
				OrderDetails.push([]);
				OrderDetails[{{ $od }}][0] = "{{ $orderdetails->orderid }}"; // OrderID
				OrderDetails[{{ $od }}][1] = "{{ $orderdetails->orderdetailid }}"; // OrderDetailID
				OrderDetails[{{ $od }}][2] = "{{ $orderdetails->productcode }}"; // Product Code
				OrderDetails[{{ $od }}][3] = "{{ $orderdetails->productname }}"; // Product Name
				OrderDetails[{{ $od }}][4] = ''; // Category ID
				OrderDetails[{{ $od }}][5] = "{{ $orderdetails->productprice }}"; // Product Price
				OrderDetails[{{ $od }}][6] = "{{ $orderdetails->quantity }}"; // Quantity


				@php $od++; @endphp

			@endforeach
	</script>

	<script>
	recordConversion();
	function recordConversion() {

		console.log(Order);
		ga('require', 'ecommerce', 'ecommerce.js');

		// Transaction creation
		ga('ecommerce:addTransaction', {
			'id': '{{$orderid}}', // Order ID
			'affiliation': 'vacpartswarehouse', // Store name - Add yours
			'revenue': Order[2], // Grand Total
			'shipping': Order[5], // Shipping Cost
			'tax': Order[4]	// Sales Tax
		});

		// Order line addition
		for (var i = 0; i < OrderDetails.length; i++) {
			ga('ecommerce:addItem', {
				'id': OrderDetails[i][0], // Order Detail ID
				'name': OrderDetails[i][3], // Product Name
				'sku': OrderDetails[i][2], // Product Code
				'category': OrderDetails[i][4], // Category ID
				'price': OrderDetails[i][5], // Product Price
				'quantity': OrderDetails[i][6] // Quantity
			});
		}

		ga('ecommerce:send');

		// Ad Words and Google Analytics 4
		var itemList = [];
		for (var i = 0; i < OrderDetails.length; i++) {
			itemList[i] = {
				index: i,
				item_list_id: OrderDetails[i][0], // Order Detail ID,
				id: OrderDetails[i][2], // Product Code
				item_id: OrderDetails[i][2], // Product Code
				item_name: OrderDetails[i][3], // Product Name
				item_category: OrderDetails[i][4], // Category ID
				price: OrderDetails[i][5], // Product Price
				quantity: OrderDetails[i][6] // Quantity
			};
		}

		gtag('set', 'user_data', {
			"email": Order[9]
		});

		enhanced_conversion_data.email = Order[9];
		gtag("event", "purchase", {
			transaction_id: '{{$orderid}}', // Order ID
			value: Order[2], // Grand Total
			tax: Order[4],	// Sales Tax
			shipping: Order[5], // Shipping Cost
			currency: "USD",
			// coupon: "SUMMER_SALE",
			items: itemList,
			aw_merchant_id:6084472,
			aw_feed_country:"US",
			aw_feed_language:"EN",
			send_to: ['AW-1034163501/dp4zCOPNjQEQraqQ7QM', 'G-DCZ8ZDHM8G'] // Send to both Ad Words and Analytics
		});
	}
	</script>
	<!-- Bing -->
	<script>
		if (typeof(OrderDetails) != "undefined") {
		window.uetq = window.uetq || [];
		window.uetq.push('event', '', {"revenue_value":Order[2],"currency":"USD"});
		window.uetq.push({ 'gv': Order[2] }); //Original line.
		}
	</script>
	<!-- END Bing -->
	<script type="application/javascript">
		window.dotq = window.dotq || [];
		window.dotq.push({
		'projectId': '10001672982400',
		'properties': {
			'pixelId': '406625',
			'qstrings': {
			'et': 'custom',
			'gv': Order[2]
			}
		}
		});
	</script>
	<!-- Criteo -->
	<script>
		jQuery(document).ready(function () {
		if (typeof(OrderDetails) != "undefined") {
			var pl = [];

			for (var i = 0; i < OrderDetails.length; i++) {
				pl.push({
					id: OrderDetails[i][2],
					price: OrderDetails[i][5],
					quantity: OrderDetails[i][6]
				});
			}

			window.criteo_q.push(
				{ event: "setAccount", account: 15727},
				{ event: "setSiteType", type: "d"},
				{ event: "setEmail", email: Order[9]},
				{ event: "trackTransaction", id: '{{$orderid}}', product: pl, requiresDOM: "yes" }
			);
		}
		});
	</script>
	<!-- Google - Event snippet for Purchase / Sale Completed conversion page -->
	<script>
		/*gtag('set', 'user_data', {
			"email": Order[9],

		});//*/
	</script>
	<script>
		/*window.addEventListener('load', function(){
			// if(window.location.pathname.indexOf('/OrderFinished.asp') != -1){
				enhanced_conversion_data.email = Order[9];
				gtag('event', 'conversion', {
					'send_to': 'AW-1034163501/dp4zCOPNjQEQraqQ7QM',
					'value': Order[2],
					'currency': 'USD',
					'transaction_id': '{{$orderid}}'
				});
			// }
		});//*/
	</script>
		<script>
		$(document).ready(function () {
			$('.OrderReceipt').text('Loading....');

			var url = $('#OrderReceipt').attr('page-url');
			url = url+"?isSuccess=1";
			$('#OrderReceipt').load(url);

		});

	</script>
	@endif

	<script>

		$(document).ready(function () {
			$.validator.addMethod("strongePassword", function(value) {
				return /^(?=.*[A-Z])(?=.*[a-z])((?=.*[0-9])|(?=.*?[#?!@$%^&*-]))/.test(value);
			},"The password must contain at least one number, at least one lower case letter, and at least one upper case letter");

			$('#checkoutCreatePasswordForm').validate({ // initialize the plugin
				rules: {
					password: {
						required: true,
						strongePassword: true,
						minlength: 8
					},
					confirm_password: {
						required: true,
						equalTo: "#password"
					}
				},
				messages :{
					password: {
						required: 'Please Enter Password'
					},
					confirm_password: {
						required: 'Please Enter Confirm Password'
					}
				},
				submitHandler: function (form) {

					$.ajax({
						type: 'POST',
						url: "{{ route('gust-password-generate') }}",
						data: $('#checkoutCreatePasswordForm').serialize(),
						dataType: "json",
						success: function (resultData) {
							if(resultData.status == true){
								$('#checkoutCreatePasswordFormFail').removeClass('alert-danger');
								$('#checkoutCreatePasswordFormFail').addClass('alert-success');
							}else{
								$('#checkoutCreatePasswordFormFail').addClass('alert-danger');
								$('#checkoutCreatePasswordFormFail').removeClass('alert-success');
							}

							$('#checkoutCreatePasswordFormFail').show();
							$('.createPass').hide();

							$('#checkoutCreatePasswordFormFail').html(resultData.message+" <a href='{{ route('account-login') }}'>Please login here</a></p>");
						}
					});
				}
			});

		});
	</script>

	<script>
		var myInput = document.getElementById("password");
		var letter = document.getElementById("letter");
		var capital = document.getElementById("capital");
		var number = document.getElementById("number");
		var length = document.getElementById("length");

		// When the user clicks on the password field, show the message box
		myInput.onfocus = function() {
		document.getElementById("message").style.display = "block";
		}

		// When the user clicks outside of the password field, hide the message box
		myInput.onblur = function() {
		document.getElementById("message").style.display = "none";
		}

		// When the user starts to type something inside the password field
		myInput.onkeyup = function() {
			// Validate lowercase letters
			var lowerCaseLetters = /[a-z]/g;
			if(myInput.value.match(lowerCaseLetters)) {
				letter.classList.remove("invalid");
				letter.classList.add("valid");
			} else {
				letter.classList.remove("valid");
				letter.classList.add("invalid");
			}

			// Validate capital letters
			var upperCaseLetters = /[A-Z]/g;
			if(myInput.value.match(upperCaseLetters)) {
				capital.classList.remove("invalid");
				capital.classList.add("valid");
			} else {
				capital.classList.remove("valid");
				capital.classList.add("invalid");
			}

			// Validate numbers
			var numbers = /[0-9]/g;
			var special = /[#?!@$%^&*-]/g;
			if(myInput.value.match(numbers)) {
				number.classList.remove("invalid");
				number.classList.add("valid");
			} else if(myInput.value.match(special)) {
				number.classList.remove("invalid");
				number.classList.add("valid");
			}else {
				number.classList.remove("valid");
				number.classList.add("invalid");
			}

			// Validate length
			if(myInput.value.length >= 8) {
				length.classList.remove("invalid");
				length.classList.add("valid");
			} else {
				length.classList.remove("valid");
				length.classList.add("invalid");
			}
		}
	</script>
@endsection