@extends("layouts.app")
@section("content")
    <script src="https://www.paypal.com/sdk/js?client-id=AcKwbyi3-LtcW9orYwnWecAHjTaU6SDpJ6JiVW6FIP3lO-9yY-DjWoPNoo6vTbfEW2Xitkmkiiz5O1le&currency=USD"></script>
    <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 class="main-slider">
        <img class="img-fluid w-100" src="{{asset('images/innerBnnr.jpg')}}" alt="First slide">
        <div class="carousel-caption">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-uppercase">CHECK OUT</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->


    <!-- Begin: Step 2 -->
    <div class="checkOutStyle">
        <div class="container">
            <form action="{{ route('checkoutStore') }}" class="row justify-content-center formStyle" method="POST"
                  id="checkout-form">
                @csrf
                <div class="col-md-12">
                    <div class="title inner">
                        <h2>Billing Address</h2>
                        <h4>Fill the form below to complete your purchase</h4>
                        @if(!Auth::check())
                            <p class="checkout-subheading"><span>Already Registered?</span> Click here to
                                <a href="{{ route('client-sign-in') }}">Login now</a></p>
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <label>first Name</label>
                    <input type="text" name="name"
                           value="{{ Auth::check() ? Auth::user()->name : "" }}"
                           class="form-control" {{ Auth::check() ? 'readonly' : "" }} required/>
                </div>
                <div class="col-md-6">
                    <label>Last Name</label>
                    <input type="text" name="last_name"
                           value="{{ Auth::check() ? Auth::user()->name : "" }}"
                           class="form-control"
                           {{ Auth::check() ? 'readonly' : "" }} required/>
                </div>
                <div class="col-md-6">
                    <label>email address</label>
                    <input type="email" name="email"
                           value="{{ Auth::check() ? Auth::user()->email : "" }}" {{ Auth::check() ? 'readonly' : "" }}
                           class="form-control" required/>
                </div>
                <div class="col-md-6">
                    <label>Phone</label>
                    <input type="phone" name="phone"
                           value="{{ Auth::check() ? Auth::user()->phone : "" }}"
                           class="form-control" required/>
                </div>
                @if(!Auth::check())
                    <div class="col-md-12">
                        <div class="checkbox">
                            <input type="checkbox" name="pass_check" value="1" id="box-1">
                            <label for="box-1">Create an account for later use</label>
                        </div>
                    </div>
                    <div class="col-md-12 d-none" id="password_fields">
                        <div class="row">
                            <div class="col-md-6">
                                <label>password</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                            <div class="col-md-6">
                                <label>confirm password</label>
                                <input type="password" class="form-control" name="personal_confirm">
                            </div>
                        </div>
                    </div>
                @endif
                <div class="col-md-12">
                    <label>address</label>
                    <input type="address" name="address" value="{{ Auth::check() ? Auth::user()->address : "" }}"
                           class="form-control" required/>
                </div>
                <div class="col-md-6">
                    <label>Country</label>
                    <input type="country" name="country" value="" class="form-control" required/>
                </div>
                <div class="col-md-6">
                    <label>city</label>
                    <input type="city" name="city"
                           value="{{ Auth::check() ? Auth::user()->city : "" }}" class="form-control" required/>
                </div>
                <div class="col-md-6">
                    <label>Zip/Postal code</label>
                    <input type="zip" name="zip"
                           value="{{ Auth::check() ? Auth::user()->zip : "" }}" class="form-control" required/>
                </div>
                <div class="col-md-6">
                    <label>State/Province</label>
                    <input type="state" name="state"
                           value="{{ Auth::check() ? Auth::user()->state : "" }}" class="form-control" required/>
                </div>
                <div class="col-md-12">
                    <div class="checkbox">
                        <input type="checkbox" name="shipping_address_check" value="1" id="box-2">
                        <label for="box-2">Ship To Difference Address ?</label>
                    </div>
                </div>
                <div class="row text-left w-100 d-none" id="shipping_address_form">
                    <div class="col-md-12">
                        <label for="shipping_address">ADDRESS</label>
                        <input type="text" class="form-control" name="shipping_address">
                    </div>
                    <div class="col-md-6">
                        <label for="">COUNTRY</label>
                        <input name="shipping_country" id="s_country" class="form-control requiredField">
                    </div>
                    <div class="col-md-6">
                        <label for="">CITY</label>
                        <input type="text" name="shipping_city" id="s_city"
                               class="form-control requiredField "
                               value="">
                        <small class="text-danger errorField" style="display: none"></small>
                    </div>
                    <div class="col-md-6">
                        <label for="">ZIP/POSTAL CODE</label>
                        <input type="text" name="shipping_zip" id="s_zip_code"
                               class="form-control requiredField "
                               value="">
                        <small class="text-danger errorField" style="display: none"></small>
                    </div>
                    <div class="col-md-6">
                        <label for="">STATE/PROVINCE</label>
                        <input type="text" name="shipping_state" id="s_state"
                               class="form-control requiredField "
                               value="">
                        <small class="text-danger errorField" style="display: none"></small>
                    </div>
                </div>

                <div class="row text-left w-100">
                    <div class="col-md-12">
                        <h2>Payment Options</h2>
                    </div>
                    <div class="col-md-6">
                        <div class="checkbox">
                            <input type="radio" name="payment_method" value="paypal" id="paypal">
                            <label for="paypal">Paypal</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="checkbox">
                            <input type="radio" name="payment_method" value="square" id="square">
                            <label for="square">Square</label>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 text-center mt-4">
                    <button type="submit" class="btnStyle">proceed to checkout</button>
                </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 ({{ Cart::count() }} items)</span>
                            <strong id="price_total">USD {{ Cart::priceTotalFloat() + $prdDiscounts }}</strong>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12 d-flex align-items-center justify-content-between">
                            <span>Tax</span>
                            <strong>USD {{ Cart::tax() }}</strong>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12">
                            <div class="applyCoupon">
                                <input type="text" value="" class="form-control coupountxt"
                                       placeholder="Enter Voucher Code">
                                <button type="button" class="btnStyle btn-block coupoun">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>
                            <strong id="discounttxt">USD {{ Cart::discount() + $prdDiscounts }}</strong>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12 d-flex align-items-center justify-content-between">
                            <span>Total</span>
                            <strong id="total">USD {{ (Cart::total()) }}</strong>
                        </div>
                        <hr class="w-100">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- END: Step 2 -->
@endsection

@section('script')
    <script>

        //show password fields when checkout account is checked
        $('input[name="pass_check"]').on('click', function () {
            $('#password_fields').addClass('d-none');
            $('input[name="personal_pass"],input[name="personal_confirm"]').val('');
            if ($(this).prop('checked')) {
                $('#password_fields').removeClass('d-none');
            }
        });

        //show shipping fields when checkout address is checked
        $('input[name="shipping_address_check"]').on('click', function () {
            $('#shipping_address_form').addClass('d-none');
            if ($(this).prop('checked')) {
                $('#shipping_address_form').removeClass('d-none');
            }
        });

        // 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').text().replace("USD ", "");

            $.ajax({
                'url': "{{route('coupon.check')}}",
                'method': "POST",
                headers: {
                    'X-CSRF-TOKEN': token,
                },
                'data': {
                    coupoun: coupoun
                },
                success: function (response) {
                    // console.log(response)
                    if (response['status']) {
                        toastr.success(response['msg']);
                        var total = $('#total').text().replace('USD ', "");
                        // console.log("total", total, $('#total').text())
                        $('.discount').show();
                        $('#discounttxt').text('USD ' + response['value']);
                        // var discount = total / parseFloat(response['value'] + '');
                        $('#total').text('USD ' + (parseFloat(price) - parseFloat(response['value'])).toFixed(2));
                    } else {
                        toastr.error(response['msg']);
                    }
                },
            });
        });

        // Stripe Checkout payment
        {{--$('#checkout-form').on('submit', function (e) {--}}
        {{--    e.preventDefault();--}}
        {{--    $.ajax({--}}
        {{--        'url': {{ route('payout') }},--}}
        {{--        'data': $(this).serialize(),--}}
        {{--        method: 'POST',--}}
        {{--        dataType: 'json',--}}
        {{--        headers: {--}}
        {{--            'X-CSRF-TOKEN': $('input[name="_token"]').val(),--}}
        {{--        },--}}
        {{--        beforeSend: function () {--}}
        {{--            $('.loaderOverlay').removeClass('d-none');--}}
        {{--        },--}}
        {{--        success: function (res) {--}}
        {{--            // console.log(res.data.url);--}}
        {{--            if (res.hasOwnProperty('errors')) {--}}
        {{--                for (const re in res.errors) {--}}
        {{--                    toastr.error(res.errors[re][0]);--}}
        {{--                }--}}
        {{--            } else {--}}
        {{--                console.log(res.data)--}}
        {{--                if (res.data.hasOwnProperty('error')) {--}}
        {{--                    toastr.error(res.data.error);--}}
        {{--                } else {--}}
        {{--                    window.location = res.data.url--}}
        {{--                }--}}
        {{--            }--}}

        {{--            $('.loaderOverlay').addClass('d-none');--}}
        {{--        },--}}
        {{--    });--}}
        {{--});--}}
    </script>
@endsection