@extends('front.layouts.app')
@section('title', 'Checkout')
@section('description', 'Checkout description')
@section('content')
    <style>
        .loaderOverlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000000;
            z-index: 1000;
            opacity: 0.5;
        }

        .loaderOverlay .spinner-grow {
            background: #fff;
            font-size: 0;
        }
    </style>

    <div class="loaderOverlay d-none">
        <div class="spinner-grow" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <!-- Begin: Main Slider -->
    <div id="cursor-follow"></div>
    <div class="main-slider proIner">
        <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel">
            <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="img-fluid w-100" src="{{ asset('front/images/abtBg.jpg') }}" alt="First slide">
                        <div class="carousel-caption">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2>Checkout</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="overlay">
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->

    <div class="checkOutStyle">
        <div class="container">
            {{--            <form action="{{ route('calculate.shipping') }}" class="row justify-content-center formStyle" method="post">--}}
            <form action="#" class="row justify-content-center formStyle" id="checkout-form" method="post">
                {{ csrf_field() }}
                <input type="hidden" name="subtotal" value="{{ $total }}" id="subtotal">
                <input type="hidden" name="total" value="{{ $subtotal + $setting->shipping_rate }}" id="total_amount">
                <input type="hidden" name="shipping_cost" value="{{ $setting->shipping_rate }}" id="shipping_cost">
                <input type="hidden" name="weight" value="{{ $weight }}" id="weight">
                <div class="col-md-12">
                    <div class="title inner">
                        <h2>Billing Address</h2>
                        <h4>Fill the form below to complete your purchase</h4>
                        {{--                        <p class="checkout-subheading"><span>Already Registered?</span> Click here to <a href="#">Login now</a></p>--}}
                    </div>
                </div>
                <div class="col-md-12">
                    <div id="message" style="display: none">
                        <div class="alert-dismissible fade show" role="alert">
                            <span id="text"></span>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <label>first Name</label>
                    <input type="text" class="form-control" name="first_name" id="first_name" required>
                </div>
                <div class="col-md-6">
                    <label>Last Name</label>
                    <input type="text" class="form-control" name="last_name" id="last_name" required>
                </div>
                <div class="col-md-6">
                    <label>email address</label>
                    <input type="text" class="form-control" name="email" id="email" required>
                </div>
                <div class="col-md-6">
                    <label>Phone</label>
                    <input type="text" class="form-control" name="phone" id="phone" required>
                </div>
                {{--                <div class="col-md-6">--}}
                {{--                    <label>password</label>--}}
                {{--                    <input type="text" class="form-control" name="password">--}}
                {{--                </div>--}}
                {{--                <div class="col-md-6">--}}
                {{--                    <label>confirm password</label>--}}
                {{--                    <input type="text" class="form-control" name="confirm_password">--}}
                {{--                </div>--}}
                <div class="col-md-12">
                    <label>Street address</label>
                    <input type="text" class="form-control" name="address" id="address" required>
                </div>
                <div class="col-md-6">
                    <label>Country</label>
                    <select name="country" id="country" class="form-control" required>
                        @foreach($countries as $country)
                            <option
                                value="{{ $country->iso2 }}"
                                id="{{ $country->id }}" {{ ($country->name == 'United States') ? 'selected' : '' }}>{{ $country->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label>State/Province</label>
                    <select name="state" id="state" class="form-control">
                        @foreach($states as $state)
                            <option value="{{ $state->iso2 }}" id="{{ $state->id }}">{{ $state->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label>city</label>
                    <select name="city" id="city" class="form-control">
                        @foreach($cities as $city)
                            <option value="{{ $city->name }}" id="{{ $city->id }}">{{ $city->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label>Zip/Postal code</label>
                    <input type="text" class="form-control" name="zip" id="zip_code" required>
                </div>
                {{--                <div class="col-md-12">--}}
                {{--                    <div class="checkbox">--}}
                {{--                        <input type="checkbox" id="box-1">--}}
                {{--                        <label for="box-1">Create an account for later use</label>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                {{--                <div class="col-md-12">--}}
                {{--                    <div class="checkbox">--}}
                {{--                        <input type="checkbox" id="box-2">--}}
                {{--                        <label for="box-2">Ship to the same address mentioned above </label>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                <div class="col-md-6">
                    <div class="row order-summery no-gutters">
                        <div class="col-md-12 title my-5 text-center">
                            <h2>Order Summary</h2>
                        </div>
                        <div class="col-md-12 d-flex align-items-center justify-content-between">
                            <span>Subtotal ({{ $product_count }} items)</span>
                            <strong id="price_total">USD {{ $subtotal }}</strong>
                        </div>
                        <hr class="w-100 shipping-methods d-none">
                        <div
                            class="col-md-12 d-flex align-items-center justify-content-between shipping-methods d-none">
                            <span>Shipping Methods</span>
                            <div id="shippingRates"></div>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12 d-flex align-items-center justify-content-between">
                            <span>Shipping fee</span>
                            {{--                            <strong>USD {{ $setting->shipping_rate }}</strong>--}}
                            <strong id="calculated-shipping">Submit the form to calculate shipping fee</strong>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12">
                            <div class="applyCoupon">
                                <input type="text" value="{{ $coupon['name'] ?? '' }}" name="code" id="code"
                                       class="form-control coupountxt"
                                       placeholder="Enter Voucher Code">
                                <button type="button" class="themeBtn block coupoun" id="coupon_btn"> Apply</button>
                            </div>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12 d-flex align-items-center justify-content-between discount">
                            <span>Discount</span>
                            <input type="hidden" name="coupon" id="coupon" value="{{ $coupon['value'] ?? '' }}">
                            <strong id="discounttxt">USD {{ $coupon['value'] ?? 0 }}</strong>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12 d-flex align-items-center justify-content-between">
                            <span>Total</span>
                            <strong id="calculated-total">USD {{ $total }}</strong>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12 text-center mt-4">
                            <button type="submit" class="themeBtn">Calculate Shipping & Proceed To Pay</button>
                        </div>

                        <div class="col-md-12 title my-5 text-center">
                            {{--                            <h4 class="text-capitalize">Submit the form to show all the available payment methods</h4>--}}
                            @if($setting->paypal_check == 'yes')
                                <div id="paypal-button-container"></div>
                            @endif
                            @if($setting->stripe_check == 'yes')
                                <div id="stripe-button-container" style="display:none">
                                    <button type="button" class="themeBtn" id="stripe-button">Pay With Stripe</button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    @if($setting->paypal_check == 'yes')
        @if($setting->paypal_env == 'Live')
            <script
                src="https://www.paypal.com/sdk/js?client-id={{ $setting->paypal_client_id }}&currency=USD&disable-funding=credit,card"
                data-sdk-integration-source="button-factory"></script>
        @else
            <script
                src="https://www.paypal.com/sdk/js?client-id={{ $setting->paypal_testing_client_id }}&currency=USD&disable-funding=credit,card"
                data-sdk-integration-source="button-factory"></script>
        @endif
    @endif

    {{-- Stripe --}}
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

    <script>
        var paypal, price, amount = '';
        let shipping_cost, digest = '';

        // Change State and city with respect to selected country
        $(function () {
            $('select[name=country]').change(function () {
                var stateUrl = '{{ url('country') }}' + '/' + $(this).find(':selected').attr('id') + '/states/';

                // Change States
                $.get(stateUrl, function (data) {
                    var select = $('form select[name=state]');

                    select.empty();

                    // Change States
                    $.each(data, function (key, value) {
                        var state_name = value.name;
                        select.append(`<option value='${value.iso2}' id='${value.id}'>${value.name}</option>`);
                    });

                    // Change Cities
                    // console.log('State ID: ' + $('select[name=state]').find(':selected').attr('id'));
                    var cityUrl = '{{ url('state') }}' + '/' + $('select[name=state]').find(':selected').attr('id') + '/cities/';

                    $.get(cityUrl, function (data) {
                        // console.log(data);
                        var select = $('form select[name=city]');

                        select.empty();

                        $.each(data, function (key, value) {
                            select.append(`<option value='${value.name}' id='${value.id}'>${value.name}</option>`);
                        });
                    });
                });

            });

            $('select[name=state]').change(function () {
                // console.log('State ID: ' + $('select[name=state]').find(':selected').attr('id'));
                var cityUrl = '{{ url('state') }}' + '/' + $(this).find(':selected').attr('id') + '/cities/';


                // Change Cities
                $.get(cityUrl, function (data) {
                    var select = $('form select[name=city]');

                    select.empty();

                    $.each(data, function (key, value) {
                        select.append(`<option value='${value.name}' id='${value.id}'>${value.name}</option>`);
                    });
                });

            });
        });

        // Calculate Shipping - USPS
        $('#checkout-form').submit(function (e) {
            e.preventDefault();
            // getUpsShipping();
            getUspsShippingRate();
        })

        // Calculate USPS Shipping
        function getUspsShippingRate() {
            let first_name = $('#first_name').val();
            let last_name = $('#last_name').val();
            let email = $('#email').val();
            let phone = $('#phone').val();
            let address = $('#address').val();
            let country = $('#country').val();
            let city = $('#city').val();
            let zip_code = $('#zip_code').val();
            let state = $('#state').val();
            let subtotal = $('#subtotal').val();
            let weight = $('#weight').val();

            $.ajax({
                'url': "{{ route('calculate.usps.shipping') }}",
                data: {
                    subtotal: subtotal,
                    amount: amount,
                    first_name: first_name,
                    last_name: last_name,
                    email: email,
                    phone: phone,
                    address: address,
                    country: country,
                    city: city,
                    zip: zip_code,
                    state: state,
                    weight: weight,
                    // shipping_cost: shipping_cost,
                },
                'type': 'GET',
                beforeSend: function () {
                    $('.loaderOverlay').removeClass('d-none');
                },
                success: function (res) {
                    $('.loaderOverlay').addClass('d-none');

                    if (typeof res.Error !== 'undefined') {
                        // console.log(res.Error);
                        $('#message').show();
                        $('#message #text').text(res.Error.Description);
                        $('#message .alert-dismissible').removeClass('alert alert-success');
                        $('#message .alert-dismissible').addClass('alert alert-danger');
                    } else {
                        // console.log(res);
                        $('.shipping-methods').removeClass('d-none');

                        if (res != 'USPS Not Activated') {
                            const obj = JSON.parse(res);
                            var html = '<select name="shipping_rate[]" class="form-control"><option>Select Payment Method</option>';
                            $.each(obj, function (i, o) {
                                // html += '<div class="col-md-12 form-group">'+
                                //     '<input type="radio" class="shippingOption" name="shipping_rate" value="'+o.value+'" id="shipping_rate'+i+'">'+
                                //     '<label for="shipping_rate'+i+'" style="margin-left: 10px;">'+o.name+' | $'+o.value+'</label>'+
                                //     '</div>'
                                html += '<option value="' + o.value + '">' + o.name + ' | $' + o.value + '</option>'
                            });
                            html += '</select>'

                            $('#shippingRates').empty().append(html)

                            var shipping_options = $('#shippingRates').find('select').find('option');
                            shipping_options.each(function () {
                                if (($(this).val() != '66.35' && $(this).val() != '22.45' && !$(this).text().includes('Large Flat Rate Box |') && !$(this).text().includes('USPS Retail Ground')) || $(this).text().includes('Pickup')) {
                                    $(this).remove();
                                }
                            });
                        } else {
                            var html = '<select name="shipping_rate[]" class="form-control"><option>Select Payment Method</option>';
                            html += '<option value="0">Free Shipping | $0</option>';
                            html += '</select>';
                            $('#shippingRates').empty().append(html);
                        }
                    }
                }
            })
        }

        $("#shippingRates").on('change', 'select', function () {
            shipping_cost = this.value;
            amount = parseFloat(parseFloat($('#subtotal').val()) + parseFloat(this.value)).toFixed(2);

            // $('#calculated-total').text('USD ' + parseFloat(price).toFixed(2));


            // console.log('Shipping Cost: ', shipping_cost);
            $('#calculated-shipping').text('USD ' + parseFloat(shipping_cost).toFixed(2));
            // $('#calculated-total').text('USD ' + parseFloat(amount).toFixed(2));
            $('#paypal-button-container').empty();
            $('#stripe-button-container').show();
            initPayPalButton();
        });

        // Calculate UPS Shipping
        function getUpsShipping() {
            let first_name = $('#first_name').val();
            let last_name = $('#last_name').val();
            let email = $('#email').val();
            let phone = $('#phone').val();
            let address = $('#address').val();
            let country = $('#country').val();
            let city = $('#city').val();
            let zip_code = $('#zip_code').val();
            let state = $('#state').val();
            let subtotal = $('#subtotal').val();

            $.ajax({
                'url': "{{ route('calculate.shipping') }}",
                data: {
                    subtotal: subtotal,
                    amount: amount,
                    first_name: first_name,
                    last_name: last_name,
                    email: email,
                    phone: phone,
                    address: address,
                    country: country,
                    city: city,
                    zip: zip_code,
                    state: state,
                    // shipping_cost: shipping_cost,
                },
                'method': 'POST',
                'dataType': 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    // 'Accept': 'application/json',
                    // 'Accept-Language': 'en_US',
                    // 'Content-Type': 'application/json',
                },
                beforeSend: function () {
                    $('.loaderOverlay').removeClass('d-none');
                },
                success: function (res) {
                    // console.log(res);
                    $('#message').show();
                    $('#message #text').text(res.message);
                    if (res.status) {
                        $('#message .alert-dismissible').removeClass('alert alert-danger');
                        $('#message .alert-dismissible').addClass('alert alert-success');
                    } else {
                        $('#message .alert-dismissible').removeClass('alert alert-success');
                        $('#message .alert-dismissible').addClass('alert alert-danger');
                    }
                    shipping_cost = res.data.shipping_amount;
                    amount = parseFloat(parseFloat(subtotal) + parseFloat(res.data.shipping_amount)).toFixed(2);
                    digest = res.data.shipment_digest_code;
                    $('.loaderOverlay').addClass('d-none');
                    $('#calculated-shipping').text('$' + shipping_cost);
                    $('#calculated-total').text('$' + amount);
                    $('#paypal-button-container').empty();
                    $('#stripe-button-container').show();
                    initPayPalButton();
                }
            })
        }

        $('#stripe-button').on('click', function (e) {

            let first_name = $('#first_name').val();
            let last_name = $('#last_name').val();
            let email = $('#email').val();
            let phone = $('#phone').val();
            let address = $('#address').val();
            let country = $('#country').val();
            let city = $('#city').val();
            let zip_code = $('#zip_code').val();
            let state = $('#state').val();
            let subtotal = $('#subtotal').val();
            let coupon = $('#coupon').val();

            // alert('Shipping cost: ' + shipping_cost);

            $.ajax({
                'url': "{{ route('stripeCharge') }}",
                'data': {
                    first_name: first_name,
                    last_name: last_name,
                    email: email,
                    phone: phone,
                    address: address,
                    country: country,
                    city: city,
                    zip_code: zip_code,
                    state: state,
                    subtotal: subtotal,
                    coupon: coupon,
                    total_amount: amount,
                    shipping_cost: shipping_cost,
                    digest: digest,
                },
                method: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                beforeSend: function () {
                    $('.loaderOverlay').removeClass('d-none');
                },
                success: function (res) {
                    // console.log(res);
                    $('.loaderOverlay').addClass('d-none');
                    window.location = res.data.url
                }
            })
        })

        function initPayPalButton() {
            let subtotal = $('#subtotal').val();
            paypal.Buttons({
                style: {
                    shape: 'rect',
                    color: 'gold',
                    layout: 'vertical',
                    label: 'paypal',
                },

                createOrder: function (data, actions) {
                    // console.log({
                    // purchase_units: [{
                    //     "amount": {
                    //         "currency_code": "USD",
                    //         "value": amount
                    //     },
                    // }]
                    // })
                    return actions.order.create({
                        purchase_units: [{
                            "amount": {
                                // "currency_code": "USD",
                                "value": amount
                            },
                        }]
                    });
                },

                onApprove: function (data, actions) {
                    return actions.order.capture().then(function (details) {
                        let first_name = $('#first_name').val();
                        let last_name = $('#last_name').val();
                        let email = $('#email').val();
                        let phone = $('#phone').val();
                        let address = $('#address').val();
                        let country = $('#country').val();
                        let city = $('#city').val();
                        let zip_code = $('#zip_code').val();
                        let state = $('#state').val();
                        let subtotal = $('#subtotal').val();
                        let coupon = $('#coupon').val();

                        $.ajax({
                            url: "{{url('paypalCharge')}}",
                            data: {
                                first_name: first_name,
                                last_name: last_name,
                                email: email,
                                phone: phone,
                                address: address,
                                country: country,
                                city: city,
                                zip_code: zip_code,
                                state: state,
                                subtotal: subtotal,
                                coupon: coupon,
                                total_amount: amount ?? price,
                                shipping_cost: shipping_cost,
                                digest: digest,
                            },
                            method: 'POST',
                            dataType: 'json',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                // 'Accept': 'application/json',
                                // 'Accept-Language': 'en_US',
                                // 'Content-Type': 'application/json',
                            },
                            beforeSend: function () {
                                $('.loaderOverlay').removeClass('d-none');
                            },
                            success: function (res) {
                                // console.log(res);
                                // $('.loaderOverlay').addClass('d-none');
                                {{--window.location = "{{ url('checkout/success') }}"--}}
                                    window.location = res.redirect_url;
                            }
                        })
                    });
                },

                onError: function (err) {
                    // console.log(err);
                }
            }).render('#paypal-button-container');
        }

        // coupon discount work
        $(".coupoun").on('click', function () {
            var coupoun = $(".coupountxt").val();
            var token = $('input[name="_token"]').val();

            if (coupoun == '') {
                toastr.error('Please Enter Coupon Code');
            }
            // var price = $('#price_total').html();
            // price.replace(/USD/g, "")
            var totalAmount = {{ $subtotal }};
            $.ajax({
                'url': "{{route('coupon.check')}}",
                'method': "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                'data': {
                    coupoun: coupoun
                },
                success: function (response) {
                    if (response['status']) {
                        toastr.success(response['msg']);
                        // window.location.reload();
                        // var total = $('#total').text().slice(4);

                        $('.discount').show();
                        $('#discounttxt').text('USD ' + parseFloat(response['value']).toFixed(2));
                        // var discount = total / parseFloat(response['value'] + '');
                        price = totalAmount - response['value'];
                        $('#calculated-total').text('USD ' + parseFloat(price).toFixed(2));
                    } else {
                        toastr.error(response['msg']);
                    }
                },
            });
        });
    </script>
@endsection