@extends('users.layouts.index')
@section('page_content')

<link href="{{ asset('css/cart.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/modalcss/mysqpaymentform.css') }}" />
<meta name="color-scheme" content="dark light">

<section id="cart">

    @if ($message = Session::get('success'))

    <script>
        $(document).ready(function() {
            $('#myModal').modal('show');
        })
    </script>

    @endif

    <div class="container cart">

        @if ($message = Session::get('message'))

        <div class="alert alert-danger alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>{{ $message }}</strong>
        </div>
        @endif
        <div>
            <h1><strong>Cart Page</strong></h1>
        </div>
        <div class="row cartpage">
            <div class="col-md-8 ">
                <span class="errors" id="myerror"></span>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Subtotal</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                                                @foreach($getcart as $g)
                        <tr>
                            <td>{!! $g->product->name !!}</td>
                            <td>${!! number_format((float)$g->product->price, 2, '.', '') !!}</td>
                            <td><input class="quantity" min="1" data-id="{!!$g->id!!}" type="number" name="quantity"
                                    value="{!!$g->quantity !!}" onkeyup="update_cart(this,'{!!$g->id!!}')"> </td>
                            <td class="product_sub_total_{!!$g->id!!}">${!! number_format((float)$g->quantity*$g->product->price, 2, '.', '') !!}</td>

                            <br />
<b>Notice</b>:  Undefined variable: g in <b>/home/demohatinco/public_html/petmates_backend/resources/views/users/cart/cart.blade.php</b> on line <b>55</b><br />
<br />
<b>Notice</b>:  Trying to get property 'quantity' of non-object in <b>/home/demohatinco/public_html/petmates_backend/resources/views/users/cart/cart.blade.php</b> on line <b>55</b><br />
<br />
<b>Notice</b>:  Undefined variable: g in <b>/home/demohatinco/public_html/petmates_backend/resources/views/users/cart/cart.blade.php</b> on line <b>55</b><br />
<br />
<b>Notice</b>:  Trying to get property 'product' of non-object in <b>/home/demohatinco/public_html/petmates_backend/resources/views/users/cart/cart.blade.php</b> on line <b>55</b><br />
<br />
<b>Notice</b>:  Trying to get property 'price' of non-object in <b>/home/demohatinco/public_html/petmates_backend/resources/views/users/cart/cart.blade.php</b> on line <b>55</b><br />
                            <td>
                                <a href="{{ route('cart.delete', $g->id) }}" class="btn btn-sm btn-danger">delete</a>

                            </td>
                        </tr>

                        @endforeach

                    </tbody>

                </table>
            </div>
            <div class="col-md-4 cartpageright">
                <h2>Cart Total</h2>
                <div class="row">
                    <div class="col-sm-6">
                        <h4>Subtotal</h4>
                    </div>
                    <div class="col-sm-6">
                        <h4 class="total_sub_total">${!! number_format((float)$subtotal, 2, '.', '') !!}</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <h4>Shipping Charges</h4>
                    </div>
                    <div class="col-sm-6">
                        <h4 class="shipping_charges">{{ $will_be_applied ? 'Will be included' : '$'. number_format((float)$shipping_charges, 2, '.', '') }}
                        </h4>
                    </div>

                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <h4><strong> TOTAL</strong></h4>
                        <div></div>
                    </div>
                    <br />
<b>Notice</b>:  Undefined variable: shipping_charges in <b>/home/demohatinco/public_html/petmates_backend/resources/views/users/cart/cart.blade.php</b> on line <b>94</b><br />
                    <div class="col-sm-6">
                        <h4 id="total-price"class="total_price"> ${!! number_format((float)$total_price, 2, '.', '') !!} </h4>
                    </div>
                </div>
            </div>
        </div>
        <h1>Shipping Address</h1>

        <form action="{{ route('user.request') }}" method="post" id="my-request-form">
            @csrf
            <div class="row form-group">
                <div class="col-md-6">
                    <input type="hidden" name="shipping_method_id_hidden" id="shipping_method_hidden">
                    <input type="text" name="customer" class="form-control forminput" placeholder="Name of Customer"
                        required>
                </div>
                <div class="col-md-6">
                    <input type="text" name="company" class="form-control" placeholder="Company Name" required>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <input type="email" name="email" class="form-control" placeholder="Email" required>
                </div>
                <div class="col-md-6">
                    <input type="phone" name="phone" class="form-control" placeholder="Phone No." required>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <input type="text" name="address" class="form-control" placeholder="Address" required>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <input type="text" name="city" class="form-control" placeholder="City" required>
                </div>


                <div class="col-md-6">
                    <select name="state" id="state" class="form-control">
                        @foreach($states as $s)
                        <option name="state" value="{{$s}}">{{$s}}</option>
                        @endforeach

                    </select>
                </div>

            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <input type="text" name="country" class="form-control" placeholder="Country" required>
                </div>
                <div class="col-md-6">
                    <input type="text" name="zip" class="form-control" placeholder="Zip Code">
                </div>
            </div>

            <input type="hidden" id="mypayment" name="mypayment" value="">
            <div class="row form-group text-center ">

                <button class="ob" type="button" onclick="openPayment();">
                    Payment
                </button>
            </div>
        </form>
    </div>

    <div class="container">

        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog ">

                <!-- Modal content-->
                <div class="modal-content modalbgio">
                    <div class="modal-body">
                        <div class="text-center">
                            <img src="{{ asset('images/tick.png') }}" alt="">
                            <p class="place">YOUR ORDER HAS BEEN PLACED SUCCESSFULLY.</p>
                            <p class="place">THANKYOU </p>

                            <div class="row text-cnter">
                                <div class="col-sm-12">

                                    <div class="modal-footer">



                                        <a href="{{url('user/home')}}" class="btn btn-lg btngotocart">

                                            <!-- <span> <img src="{{ asset('images/left.png') }}" /> -->
                                            </span> Go to Home</a>

                                    </div>

                                </div>
                                <div class="col-sm-4"></div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>

    <!-- @if($will_be_applied)
                @include('users.cart.partial.error_payment_modal')
        @endif -->

</section>

@yield('app_jquery')

<script type="text/javascript" src="https://js.squareupsandbox.com/v2/paymentform"></script>
@include('users.cart.partial.paymentModal',['total_price'=>$total_price])
<script>
    function loadDoc() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "ajax_info.txt", true);
        xhttp.send();
    }

    function set_editable(){
        $('.quantity').attr("readonly", false);
    }

    function update_cart(e,cart_id){

        var quantity =  $(e).val() ;
        if(quantity == ''){
            return;
        }
        console.log('qqqq ',quantity);

        $.ajax({
            headers: {
        'X-CSRF-TOKEN': '{!!csrf_token()!!}'
        },
            url: '{!!asset("user/update/cart")!!}'+'?id='+cart_id+'&quantity='+quantity,
            method: 'post',
            dataType: 'json',
            success: function(data){
                console.log("data my data : ",data);
                if(data.status){
                    $('.product_sub_total_'+cart_id).html(data.subtotal);
                    $('.shipping_charges').html(data.shipping_charges);
                    $('.total_sub_total').html(data.total_sub_total);
                    $('.total_price').html(data.total_price);
                }
                else{
                    $('.errors').html(data.response);
                    // $('.errors').className ('alert alert-danger alert-block');
                }

            },
            error: function (data) {
                console.log('Error:', JSON.stringify(data));
            }
        });
    }

    function save_cart(){
        return;

    }

    function add_shipping() {
        var subtotal = '{!!$subtotal!!}';
        subtotal = parseInt(subtotal);
        let all_shipping_charges = $('.shipping_charges');


        $('.shipping_charges').each(function() {
            if ($(this).is(':checked')) {
                subtotal = subtotal + parseInt($(this).attr('shipping_price'));
                $('#shipping_method_hidden').val($(this).attr('value'));
            }
        });

        $('#total-price').text('$' + subtotal);

    }

    function openPayment() {
        // var fields = $('#my-request-form :input');
        // $('#squarePaymentModal').modal('show');
        var inputs_filled = true;
        var error_msg = '';
        $('#my-request-form :input[required], #my-request-form select').each(





            function(index) {
                var input = $(this);
                if(input.val() == ''){
                    inputs_filled = false;

                    console.log('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + ' Value: ' + input.val()+' is empty');
                    input.attr('placeholder','Fill this field');
                }
                else if(input.attr('type') == 'email'){
                    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                    if(!regex.test(input.val())){
                    inputs_filled = false;
                        input.val('');
                        input.attr('placeholder','Invalid Email');
                    }
                }
            }
        );
        console.log('inputs_filled',inputs_filled);
        if(inputs_filled){
            $('#squarePaymentModal').modal('show');
        }
    }

</script>

@endsection