@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('checkout.form') }}" 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="{{ $subtotal }}" 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">
                <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-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>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->name }}"
                                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->name }}" 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>USD {{ $subtotal }}</strong>
                        </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>
                        </div>
                        <hr class="w-100">
                        {{--                        <div class="col-md-12">--}}
                        {{--                            <div class="applyCoupon">--}}
                        {{--                                <input type="text" class="form-control" placeholder="Enter Voucher Code">--}}
                        {{--                                <button class="btnStyle btn-block">Apply</button>--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                        {{--                        <hr class="w-100">--}}
                        <div class="col-md-12 d-flex align-items-center justify-content-between">
                            <span>Total</span>
                            <strong>USD {{ $subtotal + $setting->shipping_rate }}</strong>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12 text-center mt-4">
                            {{--                            <a href="{{ url('pay') }}" class="themeBtn">proceed to pay</a>--}}
                            <button type="submit" class="themeBtn">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>
                            <div id="paypal-button-container"></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    {{--    <script--}}
    {{--        src="https://www.paypal.com/sdk/js?client-id=AeZqLN-vpDaqlpt1LeIOmNT1A_I2q6-P60OIxyGlUXt32IPCXex8_g_t2J2lVUnCw4fSYt5_Wv0j0feM&currency=USD&disable-funding=credit,card"--}}
    {{--        data-sdk-integration-source="button-factory"></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

    <script>
        // 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();

                    $.each(data, function (key, value) {
                        var state_name = value.name;
                        select.append(`<option value='${value.name}' 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>`);
                    });
                });

            });
        });

        // Checkout Form Starts
        $('#checkout-form').submit(function (e) {
            e.preventDefault();
            $('#paypal-button-container').empty();
            initPayPalButton();
        })

        function initPayPalButton() {
            let subtotal = $('#subtotal').val();
            let amount = $('#total_amount').val();
            let shipping_cost = $('#shipping_cost').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 shipping_cost = $('#shipping_cost').text().replace("$", "");
                        // let ship_address_check = $('#ship_address:checked').val();

                        //Shipping Address
                        // let s_address = $('#s_address').val();
                        // let s_country = $('#s_country').val();
                        // let s_city = $('#s_city').val();
                        // let s_zip_code = $('#s_zip_code').val();
                        // let s_state = $('#s_state').val();

                        // let coupon = $('#coupon').val();
                        // let shipment_digest = $('#shipment_digest').val();
                        $.ajax({
                            url: "{{url('paypalCharge')}}",
                            data: {
                                subtotal: subtotal,
                                amount: amount,
                                first_name: first_name,
                                last_name: last_name,
                                email: email,
                                phone: phone,
                                address: address,
                                country: country,
                                city: city,
                                zip_code: zip_code,
                                state: state,
                                shipping_cost: shipping_cost,
                                // ship_address_check: ship_address_check,
                                // lash_expert_name: lash_expert_name,

                                //Shipping Address
                                // s_address: s_address,
                                // s_country: s_country,
                                // s_city: s_city,
                                // s_zip_code: s_zip_code,
                                // s_state: s_state,

                                // coupon_code: coupon,
                                // shipment_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') }}"
                            }
                        })
                    });
                },

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