@extends('web.layout.master')

@section('content')
    <style>
        .hr_color {
            background-color: #24b2b5 !important;
            height: 4px;
            border: 0;
            margin-left: 15px;
            width: 110px;
            opacity: 1;
            margin-top: 8px;
        }

        .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="row">
                <div class="col-md-8">
                    <div class="row">
                        <i class="fa fa-check-circle" style="font-size:48px;color:#24b2b5"></i>

                    </div>
                    <div class="row mt-2">
                        <h2>Thank you for your order!</h2>
                        <span style="font-size: 19px;"><b>Order Number: {{ $orderid }}</b></span>
                        <hr class="hr_color">

                        {{-- <span>{{ date('M d, Y', strtotime($order->orderdate)) }}</span> --}}
                    </div>
                    <p class="alert alert-danger" id="checkoutCreatePasswordFormFail" style="display: none" role="alert">

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


                    <label class="" style="font-size: 30px;font-weight: 600;">Access your Order at any time</label>
                    <div class="createPass">
                        <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> --}}
                                <button class="btn btn-block btn-danger btn-sm p-0 form-control" class="cursor-pointer" alt="..." srcset="" aria-label="" style="margin-top: 24px;width: 25%;height: 35px;font-size: 22px;background-color: #bc2125;border-color: #bc2125;">Save</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="row mt-4">
                        <p>We've sent an email confirmation to <b>{{ (auth()->check()) ? auth()->user()->emailaddress : $order->coustomer->emailaddress }}.</b> </p>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <h4>Ship to</h4>
                            <span>{{ $order->shipfirstname }} {{ $order->shiplastname }}<br />
                                @if(!empty($order->shipcompanyname)){{ $order->shipcompanyname }}<br>@endif
                                {{ $order->shipaddress1 }}<br />
                                @if(!empty($order->shipaddress2))
                                    {{ $order->shipaddress2 }}<br />
                                @endif
                                {{ $order->shipcity }}, {{ $order->shipstate }} {{ $order->shippostalcode }}<br />
                                {{ $order->shipcountry }}<br />
                                @if(!empty($order->shippingmethodname))
                                    <b>Shipment Method</b><br />
                                    {{ $order->shippingmethodname }}
                                @endif

                            </span>
                        </div>
                        <div class="col-md-6">
                            <h4>Bill to</h4>
                            <span>{{ $order->billingfirstname }} {{ $order->billinglastname }}<br />
                                @if(!empty($order->billingcompanyname)){{ $order->billingcompanyname }}<br>@endif
                                {{ $order->billingaddress1 }}<br />
                                @if(!empty($order->billingaddress2))
                                    {{ $order->billingaddress2 }}<br />
                                @endif
                                {{ $order->billingcity }}, {{ $order->billingstate }} {{ $order->billingpostalcode }}<br />
                                {{ $order->billingcountry }}<br />
                                <b>Payment Method</b><br />
                                @if(!empty($order->paymentlog->pay_details))
                                    @if(!empty($order->paymentlog->pay_paymentmethodid) && $order->paymentlog->pay_paymentmethodid == '13')
                                        {{ 'Purchase order # '.$order->paymentlog->pay_details }}
                                    @else
                                    <i class="fa fa-light fa-credit-card"></i>  {{ !empty($order->paymentlog->pay_details) ? $order->paymentlog->pay_details : "Credit Card" }}
                                    @endif
                                @else
                                    @if($order->paymentlog->pay_paymentmethodid == '35')
                                        Affirm
                                    @elseif($order->paymentlog->pay_paymentmethodid == '36')
                                        Google Pay
                                    @elseif($order->paymentlog->pay_paymentmethodid == '37')
                                        Apple Pay
                                    @else
                                        <i class="fab fa-cc-paypal"></i> Paypal
                                    @endif
                                @endif
                            </span>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <hr width="98%" color="black" />
                    </div>
                                        <div class="row mt-2">
                        <div class="col-md-6">
                            <h5>Item Summary ({{ $quantity }} item)</h5>
                        </div>
                        {{-- <div class="col-md-6">
                            <i class="fa fa-share-alt" aria-hidden="true"></i> &nbsp; Sleeknote

                        </div> --}}
                    </div>

                    @foreach ($order->orderdetail as $orderdetail)
                        <div class="card mt-2" style="background-color: #f1f6f9;">
                            <div class="card-body p-2">
                                <div class="row">
                                    <div class="col-md-9">
                                        <h5>SKU: {{ !empty($orderdetail->productcode) ? $orderdetail->productcode : "" }}</h5>
                                        <span class="text-primary">{{ (!empty($orderdetail->clientmap->pin->Name))?$orderdetail->clientmap->pin->Name:$orderdetail->productcode." Part" }}
                                        </span><br />
                                        <span><b>${{ $orderdetail->totalprice }}</b> | Qty: {{ $orderdetail->quantity }}</span>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $orderdetail->productcode }}-1.jpg"
                                            style="width: 80px" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-2.jpg&quot;">
                                    </div>
                                </div>

                            </div>
                        </div>
                    @endforeach
                    @php
                        $subtotal = number_format((float)($order->paymentamount - ($order->totalshippingcost + $order->salestax1 )) + $order->coupon_discount , 2, '.', '');
                    @endphp
                    <div class="row mt-4">
                        <span><b>Need help with your order?</b></span>
                        <span class="text-primary">Give us a call at 866-243-2721 or email us at info@partswarehouse.com
                        </span><br />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <span style="background: #4e5b64;border-radius: 4px;color: white;font-weight: 600;font-size: 18px;">Order Summary </span>
                    </div>
                    <div class="row">
                        <div class="col-md-8 mt-2">
                            <span>Subtotal ({{ $quantity }} item)</span><br />
                        </div>
                        <div class="col-md-4 mt-2" style="text-align: right;">
                            <span>${{ $subtotal }}</span><br />
                        </div>
                        @if(!empty($order->coupon_discount))
                        @php $discountPer = (($order->coupon_discount / $subtotal) * 100) @endphp
                            <div class="col-md-8">
                                <span class="text-success"><b>Discount ({{ $order->coupon_code }} - {{ round($discountPer) .'%' }})</b></span><br />
                            </div>
                            <div class="col-md-4" style="text-align: right;">
                                <span><b>-${{ number_format((float)$order->coupon_discount, 2, '.', '') }}</b></span><br />
                            </div>
                        @endif

                        <div class="col-md-8 mt-2">
                            <span>Shipping @if(!empty($order->shippingmethodname)) ({{ $order->shippingmethodname }} @if(!empty($order->shippingsurcharges))inc. surcharges of ${{ number_format((float)$order->shippingsurcharges, 2, '.', '') }}@endif) @endif</span><br />
                        </div>
                        <div class="col-md-4 mt-2" style="text-align: right;">
                            <span>${{ number_format((float)$order->totalshippingcost, 2, '.', '') }}</span><br />
                        </div>
                        <div class="col-md-8 mt-2">
                            <span>Estimated Tax @if(!empty(request()->isadmin)) ({{ round($order->salestaxrate1 *100,2).'%' }}) @endif</span>
                        </div>
                        <div class="col-md-4 mt-2" style="text-align: right;">
                            <span>${{ number_format((float)$order->salestax1, 2, '.', '') }}</span>
                        </div>

                    </div>
                    <div class="row mt-2">
                        <hr width="100%" color="black" />
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <span>Total</span>
                        </div>
                        <div class="col-md-6" style="text-align: right;">
                            <h3>${{ number_format((float)($order->paymentamount), 2, '.', '') }}</h3>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <a href="{{ route('home') }}" class="btn btn-block btn-danger btn-sm" style="font-size: 20px;">Continue Shopping</a>
                    </div>
                    {{-- @if(!auth()->check())
                    <div class="mt-4">
                        <div class="card">
                            <div class="card-body">
                                <i class="fas fa-user-circle" style="font-size: 25px;"></i><br/>
                                <a href="{{ route('account-register') }}" style="text-decoration: none; font-size:20px;">Create an account</a>
                                <p class="card-text">Manage your shipping and billing <br /> addresses, save payment
                                    information, and <br /> access your order history.</p>
                                <a @if(auth()->check()) href="{{ route('my-account') }}" @else  onclick="loginModel('{{ route('my-account') }}')" @endif style="text-decoration: none; cursor: pointer; color:#0f6dfd; font-size:15px;">View My Account</a>
                            </div>
                        </div>
                    </div>
                    @endif --}}
                </div>

            </div>


        </div>
    </div>
    <script src="{{ asset('assets/web') }}/js/jquery.session.js"></script>
    <script src="https://cdn.attn.tv/partswarehouse/dtag.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);
            false;
        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');

        // 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: '{{$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
        });
    }
    </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 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