@extends('web.layout.master')

@section('content')
<style>
    .error{
        color: red;
    }
  /* 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: "✖";
  }
</style>
<div class="container">
    <div class="row " >
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))

            @if($msg == 'success')
                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }} <a href="{{ route('account-login') }}">Please login here</a></p>
            @else
                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}</p>
            @endif
        @endif
        @endforeach
        <div class="col-sm-12 mx-auto" >
            <div class="mt-2 text-black mb-3 font-weight-bold">
                <label class="fs-1">Order number: {{ $orderid }}</label>
                <p>You will receive an email confirmation shortly at {{ (auth()->check()) ? auth()->user()->emailaddress : $order->coustomer->emailaddress }}</p>
                {{-- <a href="fs-3" class="text-decoration-none fw-bold" aria-label="Print Receipt">Print Receipt</a> --}}
                <a href="{{ route('order-receipt-html', ['id' => $orderid ]) }}" class="text-decoration-none fw-bold" target="_blank" aria-label="Print Receipt">Print Receipt</a>
            </div>

        </div>
        {{-- <div class="col-sm-4 mx-auto" >
            <div class="mt-4">
                <h6 class="fw-bold">Question?</h6>
                <h6 class="fw-bold">Call 866.243.2721 or</h6>
                <a href="" class="text-decoration-none" aria-label="Email us"><h6 class="fw-bold ">Email us</h6></a>
            </div>
        </div> --}}
        <hr>
        <div class="col-sm-12 mx-auto" >
            <div class=" text-black font-weight-bold">
                <p class="alert alert-danger" id="checkoutCreatePasswordFormFail" style="display: none" role="alert">

                </p>
                @if(!auth()->check())


                    {{-- <label class="fs-1">Add a Password so that you can check on your order at any time</label> --}}
                    <div class="createPass">
                        <label class="fs-1">Access your Order at any time</label>
                        <form action="#" id="checkoutCreatePasswordForm" method="post">
                            @csrf
                            <input aria-labelledby="PartsWarehouse" type="hidden" name="order_id" value="{{ $orderid }}">
                        <div class="row">

                                <div class="col-md-4 ">
                                    <div class="form-group">
                                        <label for="">Create Password :</label>
                                            <input aria-labelledby="PartsWarehouse" type="password" name="password" id="password" class="form-control w-100" id="">
                                    </div>

                                </div>
                                <div class="col-md-4 form-group">
                                    <label for="">Verify Password :</label>
                                    <input aria-labelledby="PartsWarehouse" type="password" name="confirm_password" class="form-control w-100" id="">
                                </div>
                                <div class="col-md-4">
                                {{-- <button  aria-labelledby="..."class="btn btn-success mt-4"> Create Account</button> --}}
                                {{-- <button aria-labelledby="..." class="btn mt-2"> <img alt="..." src="{{ asset('assets/web') }}/images/save-cart.png" height="50px"></button> --}}
                                <button aria-labelledby="..." class="btn mt-2"> <img alt="..." src="{{ asset('assets/web') }}/images/orderconfsavebtn.png" height="50px"></button>

                                </div>

                        </div>
                        <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 spacial character</b></p>

                        </div>
                        </form>
                    </div>

                @endif


                <div class="col-lg-12 OrderReceipt" id="OrderReceipt" page-url="{{ route('order-receipt',$orderid) }}">
                </div>

                {{-- <div class="row">
                     <a href="{{ route('order-detail',$orderid) }}" class="text-decoration-none fw-bold" aria-label="Detailed Order Receipt"><i class='fas fa-angle-right'></i> Detailed Order Receipt</a>
                </div>
                <hr>
                <div class="row">
                     <a href="{{ route('pages',['slug'=>'return-policy']) }}" class="text-decoration-none fw-bold" aria-label="Return Policy"> <i class='fas fa-angle-right'></i> Return Policy</a>
                </div> --}}

            </div>
        </div>

    </div>
</div>

@if($order->is_google_order == 0)
<script type="text/javascript">
    // 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);
            false;
        ga('require', 'ecommerce', 'ecommerce.js');

        // Transaction creation
        ga('ecommerce:addTransaction', {
            'id': Order[0], // 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');

        // 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,
                item_name: OrderDetails[i][3], // Product Name
                item_id: OrderDetails[i][2], // Product Code
                item_category: OrderDetails[i][4], // Category ID
                price: OrderDetails[i][5], // Product Price
                quantity: OrderDetails[i][6] // Quantity
            };
        }

        gtag("event", "purchase", {
            transaction_id: Order[0], // Order ID
            value: Order[2], // Grand Total
            tax: Order[4],	// Sales Tax
            shipping: Order[5], // Shipping Cost
            currency: "USD",
            // coupon: "SUMMER_SALE",
            items: itemList
        });
    }
    </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: Order[0], product: pl, requiresDOM: "yes" }
	);
  }
});
</script>
<!-- Google - Event snippet for Purchase / Sale Completed conversion page -->
@endif
<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': Order[0]
		});
	// }
});
</script>
<script>
    $(document).ready(function () {
        $('.OrderReceipt').text('Loading....');

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

    });

</script>
<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 spacial = /[#?!@$%^&*-]/g;
      if(myInput.value.match(numbers)) {
        number.classList.remove("invalid");
        number.classList.add("valid");
      } else if(myInput.value.match(spacial)) {
        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