@extends('layout.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="innerBan">
        <img src="{{ asset('front/images/innerbnr1.png') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>Checkout</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <div class="col-md-11 mx-auto">
        <nav aria-label="breadcrumb" class="bg-white">
            <ol class="breadcrumb bg-white">
                <li class="breadcrumb-item"><a href="{{ route('front.home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Browser Art</a></li>
                <li class="breadcrumb-item active" aria-current="page">Checkout</li>
            </ol>
        </nav>
    </div>


    <!-- Begin: Step 2 -->
    <div class="checkOutStyle">
        <div class="container">
            <form action="#" 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="#">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>--}}

                {{--                <div class="col-md-6">--}}
                {{--                    <label>Password</label>--}}
                {{--                    <input type="password" name="password"--}}
                {{--                           value="--}}{{--{{ Auth::check() ? Auth::user()->phone : "" }}--}}{{--"--}}
                {{--                           class="form-control" required/>--}}
                {{--                </div>--}}
                {{--                <div class="col-md-6">--}}
                {{--                    <label>Confirm Password</label>--}}
                {{--                    <input type="password" name="confirm_password"--}}
                {{--                           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="col-md-12 form-group">
                    <label for="">Card Number</label>
                    <input type="text" class="form-control" name="xCardNum" id="xCardNum" required>
                    <small class="text-danger errorField" style="display: none"></small>
                </div>
                <div class="col-md-6 form-group">
                    <label for="">Expiry (MM/YY)</label>
                    <input type="text" class="form-control" name="xExp" id="xExp" maxlength="5" placeholder="MM/YY"
                           required>
                    <small class="text-danger errorField" style="display: none"></small>
                </div>
                <div class="col-md-6 form-group">
                    <label for="">CVV</label>
                    <input type="password" min="3" max="3" class="form-control" name="xCVV" id="xCVV" maxlength="3"
                           required>
                    <small class="text-danger errorField" style="display: none"></small>
                </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">
                    @if($totalPrice > 1000)
                        <button id="payLaterButton" type="submit" class="btnStyle">Request N30</button>
                        <button id="checkoutButton" type="submit" class="btnStyle">Proceed to Checkout</button>
                    @else
                        <button id="checkoutButton" type="submit" class="btnStyle">Proceed to Checkout</button>
                    @endif
                </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() }}</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() }}</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
@push('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': "",
                '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']);
                    }
                },
            });
        });


        var clickedButton;

        $('#payLaterButton').on('click', function (e) {
            e.preventDefault();  // Prevent the default form submission
            clickedButton = 'payLaterButton';
            $('#checkout-form').submit();
        });

        $('#checkoutButton').on('click', function (e) {
            e.preventDefault();  // Prevent the default form submission
            clickedButton = 'checkoutButton';
            $('#checkout-form').submit();
        });

        // Stripe Checkout payment
        $('#checkout-form').on('submit', function (e) {
            e.preventDefault();  // Prevent the default form submission

            var formData = new FormData(this);  // Use "this" instead of selecting the form again

            if (clickedButton === 'payLaterButton') {
                formData.append('payout', true);
            } else if (clickedButton === 'checkoutButton') {
                formData.append('payout', false);
            }

            $.ajax({
                url: "{{ route('beforeCharge') }}",
                data: formData,
                method: 'POST',
                dataType: 'json',
                contentType: false,
                processData: false,
                headers: {
                    _token: "{{ csrf_token() }}",
                },
                beforeSend: function () {
                    $('.loaderOverlay').removeClass('d-none');
                },
                success: function (res) {
                    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');
                },
            });
        });


        $('#xExp').on('keyup', function () {
            const expirationDateInput = document.getElementById('xExp');

            // Get the input value
            let inputValue = expirationDateInput.value;

            // Remove non-numeric characters
            inputValue = inputValue.replace(/\D/g, '');

            // Format the input as MM/YY
            if (inputValue.length > 1) {
                let year = inputValue.substring(2, 4);
                let month = inputValue.substring(0, 2);
                if ((parseInt(year) < (new Date().getFullYear() % 100)) || (parseInt(year) == (new Date().getFullYear() % 100) && (parseInt(month) <= (new Date().getMonth() + 1)))) {
                    expirationDateInput.setCustomValidity('Your card has expired.');
                    return;
                }
                expirationDateInput.setCustomValidity('');
                inputValue = month + '/' + year;
            }

            // Update the input value
            expirationDateInput.value = inputValue;
        });


    </script>
@endpush