@extends('front.layout.app')
@section('title', 'Billing Detail')
@section('content')
    <style>
        #shipping_address {
            margin: 0px !important;
        }
        .invalid-feedback{
            margin-top: -15px;
        }
    </style>
    <div class="innerBanner">
        <img src="{{asset('front/images/aboutBanner.jpg')}}" alt="First slide" class="w-100">
        <h2>Billing Detail</h2>
    </div>


    @php $customer = Auth::user()->customers ?? null; @endphp
    <!-- Begin: Step 1 -->
    <div class="checkOutStyle">
        <div class="container">
            <form action="{{route('saveBillingDetail')}}" class="row justify-content-center formStyle" id="paymentForm" method="post">
                @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="{{url('login')}}">Login now</a></p>
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <label>First Name</label>
                    <input type="text" name="first_name" id="first_name" class="form-control requiredField @error('first_name') is-invalid @enderror" value="{{$customer->first_name ?? old('')}}">
                    @error('first_name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label>Last Name</label>
                    <input type="text" name="last_name" id="last_name" class="form-control requiredField @error('last_name') is-invalid @enderror" value="{{$customer->last_name ?? old('last_name')}}">
                    @error('last_name')
                    <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label>Email Address</label>
                    <input type="email" name="email" id="email" class="form-control requiredField @error('email') is-invalid @enderror" value="{{$customer->email ?? old('email')}}">
                    @error('email')
                    <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label>Phone</label>
                    <input type="text" name="phone" id="phone" class="form-control requiredField @error('phone') is-invalid @enderror" value="{{$customer->phone_no ?? old('phone')}}">
                    @error('phone')
                    <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <div class="col-md-12">
                    <label>Address</label>
                    <input type="text" name="address" id="address" class="form-control requiredField @error('address') is-invalid @enderror" value="{{$customer->address ?? old('address')}}">
                    @error('address')
                    <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label>Country</label>
                    <input type="text" name="country" id="country" class="form-control requiredField @error('country') is-invalid @enderror" value="{{$customer->country ?? old('country')}}">
                    @error('country')
                    <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label>City</label>
                    <input type="text" name="city" id="city" class="form-control requiredField @error('city') is-invalid @enderror" value="{{$customer->city ?? old('city')}}">
                    @error('city')
                    <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label>Zip/Postal Code</label>
                    <input type="text" name="zip_code" id="zip_code" class="form-control requiredField @error('zip_code') is-invalid @enderror" value="{{$customer->zip_code ?? old('zip_code')}}">
                    @error('zip_code')
                    <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label>State/Province</label>
                    <input type="text" name="state" id="state" class="form-control requiredField @error('state') is-invalid @enderror" value="{{$customer->state ?? old('state')}}">
                    @error('state')
                    <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </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" name="ship_address_check" id="ship_address" value="1">
                        <label for="ship_address">Ship to the same address mentioned above </label>
                    </div>
                </div>
                <div class="row" style="display: flex" id="shipping_address">
                    <div class="col-md-12">
                        <label for="">Address</label>
                        <input type="text" name="s_address" id="s_address" class="form-control requiredField @error('s_address') is-invalid @enderror" value="{{ $shippingAddress->address ?? old('s_address') }}"/>
                        @error('s_address')
                        <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        <small class="text-danger errorField" style="display: none"></small>
                    </div>
                    <div class="col-md-6">
                        <label for="">Country</label>
                            <input type="text" name="s_country" id="s_country"
                                   class="form-control requiredField @error('s_country') is-invalid @enderror"
                                   value="{{ $shippingAddress->country ?? old('s_country') }}">

                        @error('s_country')
                        <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        <small class="text-danger errorField" style="display: none"></small>
                    </div>
                    <div class="col-md-6">
                        <label for="">City</label>
                        <input type="text" name="s_city" id="s_city" class="form-control requiredField @error('s_city') is-invalid @enderror" value="{{ $shippingAddress->city ?? old('s_city') }}">
                        @error('s_city')
                        <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        <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="s_zip_code" id="s_zip_code"
                               class="form-control requiredField @error('s_zip_code') is-invalid @enderror"
                               value="{{ $shippingAddress->zip_code ?? old('s_zip_code') }}">
                        @error('s_zip_code')
                        <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        <small class="text-danger errorField" style="display: none"></small>
                    </div>
                    <div class="col-md-6">
                        <label for="">State/Province</label>
                        <input type="text" name="s_state" id="s_state"
                               class="form-control requiredField @error('s_state') is-invalid @enderror"
                               value="{{ $shippingAddress->state ?? old('s_state') }}">
                        @error('s_state')
                        <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        <small class="text-danger errorField" style="display: none"></small>
                    </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 (3 items)</span>
                            <strong>USD 75.00</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 5.00</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 80.00</strong>
                        </div>
                        <hr class="w-100">
                        <div class="col-md-12 text-center mt-4">
                            <button class="btnStyle" id="proceed">proceed to pay</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- END: Step 1 -->


@endsection
@section('scripts')
    <script>
        $("#ship_address").change(function() {
            if (this.checked) {
                //Do stuff
                $('#shipping_address').css('display', 'none');

                $('#shipping_address').find(':input').removeClass('requiredField');
                // console.log($('#shipping_address').find(':input'));
            } else {
                $('#shipping_address').css('display', 'flex');

                $('#shipping_address').find(':input').addClass('requiredField');

            }
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#couponBtn').on('click', function() {
                var $this = $(this);
                var coupon = $("#coupon").val();
                var totalAmount = $("#total_amount").val();

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: 'checkout/apply-coupon',
                    type: 'get',
                    data: {
                        'coupon_code': coupon
                    },
                    success: function(json) {
                        $("#couponRow").find('p').remove();
                        if (json['status'] === true) {
                            $this.prop('disabled', true);
                            var discount = 0;
                            var value = json['data'].value;
                            var type = json['data'].type;
                            if (type === 'value') {
                                discount = value;
                                totalAmount = totalAmount - value;
                            }
                            if (type === 'percentage') {
                                discount = (totalAmount / 100) * value;
                                totalAmount = totalAmount - discount;
                            }
                            console.log(totalAmount);
                            var html =
                                '<div class="row bb-1"><div class="col-md-6"><span>Discount</span>\n' +
                                '</div><div class="col-md-6 text-right" id="discountValue">$' +
                                discount.toFixed(2) + '</div></div>';
                            $(html).insertAfter($("#couponRow"));
                            $("#totalamount").empty().append('$' + totalAmount.toFixed(2));
                            $("#totalamount").append(
                                `<input type="hidden" id="total_amount" name="total_amount" value="${totalAmount.toFixed(2)}">`
                            );

                            $("#total_amount").val(totalAmount.toFixed(2));
                        } else {
                            $('<p style="color: red">' + json['error'] + '</p>').insertAfter($(
                                "#coupon"));
                        }
                    }
                })
            })
        })
    </script>
    <script>
        $('#proceed').on('click', function() {
            let y = $(".requiredField");
            $(".invalid-feedback").remove();
            y.removeClass('is-invalid')

            valid = true;
            for (i = 0; i < y.length; i++) {
                if (y[i].value === "") {
                    // add an "invalid" class to the field:
                    y[i].className += " is-invalid";
                    var fieldName = $(y[i]).siblings().text();
                    $('<span class="invalid-feedback" role="alert"> <strong>The '+fieldName+' field is required.</strong></span>').insertAfter(y[i])
                    valid = false;
                }
            }
            if (valid) {
                $('#final-amount').text($('#totalamount').text());
                //$('#myModal-payment').modal('show');
            }
        });
        $("#payment-form").submit(function(e) {
            e.preventDefault();
            $('#msg_span').text("Processing..");
            $('#proceed').prop('disabled', true);
            let amount = $('#total_amount').val();
            //let card_no = $('#cardNumber').val();
            //let exp_mon = $('#expiryMonth').val();
            //let exp_year = $('#expiryYear').val();
            //let cvv = $('#cvCode').val();

            let first_name = $('#first_name').val();
            let last_name = $('#last_name').val();
            let email = $('#email').val();
            let phone = $('#phone').val();

            //billing
            let address = $('#address').val();
            let country = $('#country').val();
            let city = $('#city').val();
            let state = $('#state').val();
            let zip_code = $('#zip_code').val();
            //Shipping
            let s_address = $('#s_address').val();
            let s_country = $('#s_country').val();
            let s_state = $('#s_state').val();
            let s_city = $('#s_city').val();
            let s_zip_code = $('#s_zip_code').val();

            //let shipping_cost = $('#shipping_cost').text();
            //let ship_address_check = $('#ship_address').val();

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: `{{ url('stripeCharge') }}`,
                type: 'post',
                dataType: 'json',
                data: {
                    amount: amount,
                    // card_no: card_no,
                    // exp_mon: exp_mon,
                    // exp_year: exp_year,
                    // cvv: cvv,
                    first_name: first_name,
                    last_name: last_name,
                    email: email,
                    phone: phone,
                    address: address,
                    country: country,
                    city: city,
                    zip_code: zip_code,
                    state: state,
                    s_address: s_address,
                    s_country: s_country,
                    s_state: s_state,
                    s_city: s_city,
                    s_zip_code: s_zip_code,
                    shipping_cost: shipping_cost,
                    ship_address_check: ship_address_check,
                },
                success: function(data) {
                    //console.log(data);
                    //Clearing all errors
                    $('.errorField').css('display', 'none');
                    if (!data.status) {
                        $('#myModal-payment').modal('hide');
                        $('#msg_span').css('display', 'none');
                        $('#proceed').prop("disabled", false);
                        if (Object.keys(data.errors).length > 0) {

                            if (typeof data.errors.first_name != 'undefined') {
                                $("#first_name").parent().find('.errorField').text(data
                                    .errors.first_name[0]);
                                $("#first_name").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.last_name != 'undefined') {
                                $("#last_name").parent().find('.errorField').text(data
                                    .errors.last_name[0]);
                                $("#last_name").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.email != 'undefined') {
                                $("#email").parent().find('.errorField').text(data.errors
                                    .email[0]);
                                $("#email").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.phone != 'undefined') {
                                $("#phone").parent().find('.errorField').text(data.errors
                                    .phone[0]);
                                $("#phone").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.address != 'undefined') {
                                $("#address").parent().find('.errorField').text(data.errors
                                    .address[0]);
                                $("#address").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.country != 'undefined') {
                                $("#country").parent().find('.errorField').text(data.errors
                                    .country[0]);
                                $("#country").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.city != 'undefined') {
                                $("#city").parent().find('.errorField').text(data.errors
                                    .city[0]);
                                $("#city").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.zip_code != 'undefined') {
                                $("#zip_code").parent().find('.errorField').text(data.errors
                                    .zip_code[0]);
                                $("#zip_code").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.state != 'undefined') {
                                $("#state").parent().find('.errorField').text(data.errors
                                    .state[0]);
                                $("#state").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.s_address != 'undefined') {
                                $("#s_address").parent().find('.errorField').text(data
                                    .errors.s_address[0]);
                                $("#s_address").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.s_country != 'undefined') {
                                $("#s_country").parent().find('.errorField').text(data
                                    .errors.s_country[0]);
                                $("#s_country").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.s_city != 'undefined') {
                                $("#s_city").parent().find('.errorField').text(data.errors
                                    .s_city[0]);
                                $("#s_city").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.s_zip_code != 'undefined') {
                                $("#s_zip_code").parent().find('.errorField').text(data
                                    .errors.s_zip_code[0]);
                                $("#s_zip_code").parent().find('.errorField').css('display',
                                    'block')
                            }
                            if (typeof data.errors.s_state != 'undefined') {
                                $("#s_state").parent().find('.errorField').text(data.errors
                                    .s_state[0]);
                                $("#s_state").parent().find('.errorField').css('display',
                                    'block')
                            }
                        }
                    } else {
                        // $(".e_alSuccess").show();
                        // $(".updateEvent").find('i').hide();
                        // $(".updateEvent").attr('disabled', false);
                        //$('#cust_token').val(data.customer);
                        $('#msg_span').text("");
                        //$('#myModal-payment').modal('hide');
                        window.location = "{{ url('checkout/success') }}";
                    }

                    // postJob();

                },
                error: function(xhr) {
                    //  console.log(xhr.responseJSON.message);
                    $('#msg_span').text(xhr.responseJSON.message);
                    $('#proceed').prop('disabled', false);
                }
            });
        });
    </script>
@endsection