@extends('layouts.main')
@section('content')
    {{--Notification modal--}}
    <div class="modal fade" id="ordernotify" tabindex="-1" role="dialog" aria-labelledby="ordernotify" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header custom_bg_color_2">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 1;color: #fff"><span aria-hidden="true">&times;</span></button>
                    <img
                            src="{{asset('images/check.png')}}"
                            class="text-center" alt="success"
                            style="
                            width: 100px;
                            margin: 0 auto;
                            left: 40%;
                            top: 10%;
                            position: relative;"
                    >
                </div>
                <div class="modal-body text-center">
                    <h2 class="">Great!</h2>
                    <h4 class="order_response"></h4>
                    <br><br>
                    <div class="row" role="group" aria-label="">
                        <div class="col-sm-10 col-sm-offset-1">
                            <div class="col-sm-6" role="group">
                                <a type="button" href="{{url('catalogue')}}" aria-label="Close" class="btn btn-large custom_button_color_2" style="width: 100%; height: 40px;">
                                    <span>Continue Shopping</span> <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </div>
                            <div class="col-sm-6" role="group">
                                <a href="{{url('cart')}}" class="btn btn-large custom_button_color"  style="width: 100%; height: 40px;">
                                    <i class="fa fa-shopping-cart" aria-hidden="true"></i> <span>View Cart</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--Address modal--}}
    <div class="modal fade" id="editaddress" tabindex="-1" role="dialog" aria-labelledby="editaddress" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header" style="height: 50px;">
                    <span class="modal-title" id="exampleModalLongTitle">Edit Address</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    </button>
                </div>
                <div class="modal-body">
                    <form name="update-address-form" class="form-horizontal">
                        <div class="container">
                            <div class="row form-group">
                                <div class="col-sm-4" style="padding:20px 5px">
                                    <label for="firstname">First name</label>
                                    <input type="text" name="firstname" class="form-control">
                                </div>
                                <div class="col-sm-4" style="padding:20px 5px">
                                    <label for="lastname">Last name</label>
                                    <input type="text" name="lastname" class="form-control">
                                </div>
                                <div class="col-sm-4" style="padding:20px 5px">
                                    <label for="phone">Phone</label>
                                    <input type="text" name="phone" class="form-control">
                                </div>
                                <div class="col-sm-4" style="padding:20px 5px">
                                    <label for="email">Email</label>
                                    <input type="text" name="email" class="form-control" >
                                </div>
                                <div class="col-sm-4" style="padding:20px 5px">
                                    <label for="state">State</label>
                                    <select name="state_id" class="modal_state_select form-control">
                                        @foreach($states as $state)
                                            <option value="{{$state->state_id}}">{{$state->state_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-4" style="padding:20px 5px">
                                    <label for="city">City</label>
                                    <select name="city_id" id="city_id" class="modal_city_select form-control" disabled>
                                        @foreach($cities as $city)
                                            <option value="{{$city->city_id}}">{{$city->city_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <br>
                            <div class="clear"></div>
                            <div class="form-group">
                                <label for="address">Address</label>
                                <textarea name="address" class="form-control">
                        </textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary updateModalDataBtn"><i class="fa fa-spinner fa-spin updateAddBtn updateModalNotif off"></i> Save changes</button>
                </div>
            </div>
        </div>
    </div>


    <div id="tt-pageContent">
        <div class="wish-list-bg">
            <div class="centered">
                <h5>CHECKOUT</h5>
            </div>
            <img class="wish-list-img" src="{{asset('images/slides/bg.png')}}" width="100%" />
        </div>
        <!-- Radio Buttons -->

        <div class="checkout-container">
            <div class="back-to-cart">
                <a href="{{url('cart')}}">
                    <i class="fa fa-arrow-left" aria-hidden="true">
                        <span>Back To Cart Page</span>
                    </i>
                </a>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-6">
                    @if(count($pendingcart) > 0)
                    <div class="save-address-container">
                    <span class="address-icons">
                        <i class="fa fa-arrow-circle-o-down" aria-hidden="true">
                            <span class="black-text bold-text">&nbsp;&nbsp; &nbsp; Save address</span>
                          </i>
                        </span>
                        <hr />
                        @if(count($addresses) > 0)
                        <div class="address-div">
                            <form class="register-form" role="form">

                            @foreach($addresses as $i => $item)
                            <div class="row added-margin">
                                <div class="col-md-6 col-sm-6">
                                    <p>{{ $item->firstname . " " . $item->lastname }} - {{$item->phone}}</p>
                                    <p>{{$item->address}}, {{$item->state_name}}, {{$item->city_name}}</p>
                                </div>
                                <div class="col-md-4 col-sm-4">
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input class="form-check-input" id="guest" type="radio" name="shipaddress" value="{{$item->id}}">Use Address
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-1 col-sm-1">
                                    <a class="edit-address-btn" id="{{$item->id}}">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </a>
                                </div>
                                <div class="col-md-1 col-sm-1">
                                    <a class="dropdown-item delete-address-btn"
                                       style="cursor: pointer;"
                                       id="{{$item->id}}">
                                    <i class="fa fa-trash-o" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                                <hr/>
                            @endforeach
                            </form>
                        </div>
                        @endif
                        <hr />
                        <div class="shipping-address">
                            <h6 class="bold-text">Add Shipping address</h6>
                            <p class="my-paragraph">Please fill the form below to add a shipping address</p>
                            <form class="register-form add_address_form" role="form" action="{{url('add_order_address')}}" method="post">
                                <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
                                <div class="form-container">
                                <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                        <div class="form-group">
                                            <label for="firstname">First name:</label>
                                            <input type="text" class="form-control"  id="billing_first_name" name="firstname" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <div class="form-group">
                                            <label for="lastname">Last name:</label>
                                            <input type="text" class="form-control" id="billing_last_name" name="lastname" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                        <div class="form-group">
                                            <label for="firstname">State:</label>
                                            <select  data-placeholder="" tabindex="-1" aria-hidden="true" class="form-control state_select" name="state_id" required>
                                                @foreach($states as $state)
                                                    <option value="{{$state->state_id}}">{{$state->state_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <div class="form-group">
                                            <label for="lastname">City:</label>
                                            <select class="form-control city_select"  data-placeholder=""  name="city_id" required disabled>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="address">Address:</label>
                                            <input type="text" class="form-control"   id="billing_address_1" name="address" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                        <div class="form-group">
                                            <label for="firstname">Phone Number:</label>
                                            <input type="number" class="form-control"  id="billing_phone" name="phone" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <div class="form-group">
                                            <label for="lastname">Email:</label>
                                            <input type="email" class="form-control"  id="email" name="email" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                        <!-- <div class="form-group">
                                            <label for="firstname">Phone Number:</label>
                                            <input type="number" class="form-control" id="usr">
                                          </div> -->
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <button type="submit" class="btn btn-default address-button">
                                            Save

                                        </button>
                                    </div>
                                </div>

                            </div>
                            </form>
                        </div>
                    </div>
                        @endif
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="order-details-container">
                        <h6 class="bold-text">Your order details</h6>
                        <div style="margin-bottom: 3%;" class="row">
                            <div class="col-md-9 col-sm-6">
                                <p class="grey-text">Product</p>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <p class="grey-text">Price (Total)</p>
                            </div>
                        </div>
                        <hr class="check-horizontal" />
                        @foreach($pendingcart as $item)
                        <div class="row margin-bottom">
                            <div class="col-md-2 col-sm-2">
                                <img src="{{$item->image}}" width="100%" />
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <p class="cart-paragraph">{{$item->qty}}x {{$item->name}}
                                    @if($item->attrib)
                                        <br/>
                                        ( {{rtrim(trim($item->attrib->value), ",")}} )
                                    @endif
                                </p>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                @if(Auth::check())
                                    @if(Auth::user()->currency->is_currency_fixed == '1')
                                        <p class="woocommerce-Price-currencySymbol">&#8358;</p>{{ transform_product_price($item->price,1)}}
                                    @else
                                        <p> {{ transform_product_price($item->price, Auth::user()->currency->rate)}} <span class="sigmagreen">{{Auth::user()->currency->currency}}</span></p>
                                    @endif
                                @endif
                            </div>
                        </div>
                        <hr />
                        @endforeach

                        <div class="row">
                            <div class="col-md-8 col-sm-6">
                                <p class="bold-text black-text">Subtotal</p>
                            </div>
                            <div class="col-md-4 col-sm-6 text-right">
                                @if(Auth::check())
                                    @if(Auth::user()->currency->is_currency_fixed == '1')
                                        <p class="bold-text black-text" id="subtotal_value" data-subtotal="{{(int)$pendingcartsum[0]}}"></p>
                                        <span class="woocommerce-Price-currencySymbol">&#8358;</span>{{number_format($pendingcartsum[0], 0, '.', ',')}}</span>
                                    @else
                                        <p class="bold-text black-text" id="subtotal_value" data-subtotal="{{(int)$pendingcartsum[0] * Auth::user()->currency->rate}}"></p>
                                        <span>{{ transform_product_price($pendingcartsum[0], Auth::user()->currency->rate)}} <span class="green-text">{{Auth::user()->currency->currency}}</span></span>
                                    @endif
                                @endif

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-8 col-sm-6">
                                <p class="grey-text">Delivery</p>
                            </div>
                            <div class="col-md-4 col-sm-6 text-right">
                                <p class="bold-text black-text deliveryCharge">__</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-7 col-sm-6">
                                <p class="bold-text sigma-price">Grand Total</p>
                            </div>
                            <div class="col-md-5 col-sm-6 text-right">
                              <span class="woocommerce-Price-amount amount">
                                                        @if(Auth::check())
                                      @if(Auth::user()->currency->is_currency_fixed == '1')
                                          <p class="bold-text black-text grand-total">
                                          <span class="woocommerce-Price-currencySymbol">&#8358;</span>
                                          <span class="totalAmount">__</span>
                                          </p>

                                @else
                                          <p class="bold-text black-text grand-total">
                                    <span class="totalAmount bold-text black-text grand-total">__</span>
                                    <span class="currencyName off">{{Auth::user()->currency->currency}}</span>
                                          </p>
                                    @endif
                                    @endif
                                    </span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-6">
                                <button type="button" class="btn btn-default login-btn modal-cart-btn checkout_btn" id="checkoutbtn">
                                    <i class="fa fa-spinner fa-spin off process_indicator"></i>    <span class="checkoutbtn">Process Order</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Load more button -->






    </div>





    <div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width: 80%; overflow-y: scroll; text-align: left;">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header no-height">
                    {{--                    <button type="button" class="close" data-dismiss="modal">&times;</button>--}}
                    <h4 class="modal-title" style="color: #000;">Items Update</h4>
                </div>
                <div class="modal-body">

                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Status</th>
                            <th>Item</th>
                            <th>Item Name</th>
                            <th>QTY</th>
                            <th></th>
                            {{--                            <th>Old Item Price</th>--}}
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="error-data">

                        </tbody>
                    </table>


                </div>
                <div class="modal-footer modal-center">
                    <button class="btn btn-green btnmodproceed" data-dismiss="modal" onclick="reloadpage()">Proceed</button>
                    <a class="btn btn-green btncontineshopping" style="display: none;" href="{{url('catalogue')}}">Cart is Empty Click to Continue Shopping</a>
                </div>
            </div>

        </div>
    </div>

    @if($table != "")

        <div data-table="{{$table}}" id="error" data-cart="{{$cartqty}}"></div>
    @endif

@endsection

@push('style')
    <link rel="stylesheet" type="text/css" href="{{asset('css/alertui.min.css')}}">
    <link rel="stylesheet" href="{{asset('css/intlTelInput.min.css')}}">
    <style>

        .table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table .table{background-color:#fff}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #dee2e6}.table-bordered td,.table-bordered th{border:1px solid #dee2e6}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#d6d8db}.table-hover .table-secondary:hover{background-color:#c8cbcf}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#c8cbcf}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.table .thead-dark th{color:#fff;background-color:#212529;border-color:#32383e}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#dee2e6}.table-dark{color:#fff;background-color:#212529}.table-dark td,.table-dark th,.table-dark thead th{border-color:#32383e}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{background-color:rgba(255,255,255,.075)}@media (max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-sm>.table-bordered{border:0}}@media (max-width:767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-md>.table-bordered{border:0}}@media (max-width:991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-lg>.table-bordered{border:0}}@media (max-width:1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}


        .iti-flag {background-image: url({{asset('images/flags.png')}});}
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .iti-flag {background-image: url({{asset('images/flags.png')}})}
        }
        .intl-tel-input{
            width: 100%
        }
    </style>
@endpush
@push('script')
    <script src="{{asset('js/alertui.min.js')}}"></script>
    <script src="{{asset('js/intlTelInput.min.js')}}"></script>
    <script src="{{asset('js/theia-sticky-sidebar.js')}}"></script>
    <script>
        //Declare global variables.
        var conversionRate = "