@extends('front.layout.app')
@section('title', 'My Account')
@section('content')

    <div class="innerBanner">
        <img src="{{asset('front')}}/images/aboutBanner.jpg" alt="First slide" class="w-100">
        <h2>My Account</h2>
    </div>

    <!-- !-- Begin: Account Section -->

    <section class="myAccount">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <ul class="nav nav-tabs tabNavStyle" id="bestSellerTab" role="tablist">
                        <li>
                            <div class="userNamePic">
                                <img src="{{asset('front')}}/images/user.jpg" alt="">
                                <div class="content">
                                    <h4>Hello</h4>
                                    <p>{{Auth::user()->name ?? ''}}</p>
                                </div>
                            </div>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" id="account-tab" data-toggle="tab" href="#account" role="tab"
                               aria-controls="account" aria-selected="false"><i class="fal fa-user"></i> My Account
                                Information</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="orders-tab" data-toggle="tab" href="#orders" role="tab"
                               aria-controls="orders" aria-selected="true"><i class="fal fa-box"></i> My Orders</a>
                        </li>
{{--                        <li class="nav-item">--}}
{{--                            <a class="nav-link" id="wishlist-tab" data-toggle="tab" href="#wishlist" role="tab"--}}
{{--                               aria-controls="wishlist" aria-selected="false"><i class="fal fa-heart"></i> My Wishlist</a>--}}
{{--                        </li>--}}
                        <li class="nav-item">
                            <a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab"
                               aria-controls="address" aria-selected="false"><i class="fal fa-book"></i> My Addresses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="password-tab" data-toggle="tab" href="#password" role="tab"
                               aria-controls="password" aria-selected="false"><i class="fas fa-key"></i> Change Password</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-8">
                    <div class="tab-content">
                        <div role="tabpanel" class="" id="dashboard">
                        </div>
                        <div role="tabpanel" class="tab-pane active" id="account">
                            <div class="accounTab">
                                <h2 class="title">My Account Information</h2>
                                <form action="{{route('updateAccountInformation')}}" method="post" class="row formStyle">
                                    @csrf
                                    <div class="col-md-6">
                                        <label>First Name <span>*</span></label>
                                        <input type="text" class="form-control @error('first_name') is-invalid @enderror" placeholder="First Name" name="first_name" value="{{Auth::user()->customers->first_name ?? ''}}" required>
                                        @error('first_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{$message}}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label>Last Name <span>*</span></label>
                                        <input type="text" class="form-control @error('last_name') is-invalid @enderror" placeholder="Last Name" name="last_name" value="{{Auth::user()->customers->last_name ?? ''}}" required>
                                        @error('last_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{$message}}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label>Email <span>*</span></label>
                                        <input type="email" class="form-control" placeholder="Email" value="{{Auth::user()->email ?? ''}}" required readonly>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="">Gender</label>

                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="male" name="gender" value="Male" class="custom-control-input" @if(Auth::user()->customers->gender == 'Male') checked @endif>
                                            <label class="custom-control-label" for="male">Male</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="female" name="gender" value="Female" class="custom-control-input" @if(Auth::user()->customers->gender == 'Female') checked @endif>
                                            <label class="custom-control-label" for="female">Female</label>
                                        </div>
                                        <div class="text-right"><button class="btnStyle">Save</button></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="orders">
                            <!--   <div class="orderTab">
                                  <h2 class="title">My Orders</h2>
                                  <table class="table orderTable">
                                      <thead>
                                          <tr>
                                              <th>Order#</th>
                                              <th>Date</th>
                                              <th>Order Total</th>
                                              <th>Order Status</th>
                                              <th></th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          <tr>
                                              <td>
                                                  <p><span>Order#</span>100000568</p>
                                              </td>
                                              <td>
                                                  <p><span>Date</span>9/03/2020</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Total</span>$ 150.00</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Status</span>Delivered</p>
                                              </td>
                                              <td>
                                                  <a href="#" class="btnStyle btn-block">Track Order</a>
                                                  <a href="javascript:void(0)" class="btnStyle" data-toggle="modal"
                                                      data-target="#OrderDetailModal">View Order</a>
                                                  <a href="#" class="btnStyle">Reorder</a>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td>
                                                  <p><span>Order#</span>100000568</p>
                                              </td>
                                              <td>
                                                  <p><span>Date</span>9/03/2020</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Total</span>$ 150.00</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Status</span>Delivered</p>
                                              </td>
                                              <td>
                                                  <a href="#" class="btnStyle btn-block">Track Order</a>
                                                  <a href="javascript:void(0)" class="btnStyle" data-toggle="modal"
                                                      data-target="#OrderDetailModal">View Order</a>
                                                  <a href="#" class="btnStyle">Reorder</a>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td>
                                                  <p><span>Order#</span>100000568</p>
                                              </td>
                                              <td>
                                                  <p><span>Date</span>9/03/2020</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Total</span>$ 150.00</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Status</span>Delivered</p>
                                              </td>
                                              <td>
                                                  <a href="#" class="btnStyle btn-block">Track Order</a>
                                                  <a href="javascript:void(0)" class="btnStyle" data-toggle="modal"
                                                      data-target="#OrderDetailModal">View Order</a>
                                                  <a href="#" class="btnStyle">Reorder</a>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td>
                                                  <p><span>Order#</span>100000568</p>
                                              </td>
                                              <td>
                                                  <p><span>Date</span>9/03/2020</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Total</span>$ 150.00</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Status</span>Delivered</p>
                                              </td>
                                              <td>
                                                  <a href="#" class="btnStyle btn-block">Track Order</a>
                                                  <a href="javascript:void(0)" class="btnStyle" data-toggle="modal"
                                                      data-target="#OrderDetailModal">View Order</a>
                                                  <a href="#" class="btnStyle">Reorder</a>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td>
                                                  <p><span>Order#</span>100000568</p>
                                              </td>
                                              <td>
                                                  <p><span>Date</span>9/03/2020</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Total</span>$ 150.00</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Status</span>Delivered</p>
                                              </td>
                                              <td>
                                                  <a href="#" class="btnStyle btn-block">Track Order</a>
                                                  <a href="javascript:void(0)" class="btnStyle" data-toggle="modal"
                                                      data-target="#OrderDetailModal">View Order</a>
                                                  <a href="#" class="btnStyle">Reorder</a>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td>
                                                  <p><span>Order#</span>100000568</p>
                                              </td>
                                              <td>
                                                  <p><span>Date</span>9/03/2020</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Total</span>$ 150.00</p>
                                              </td>
                                              <td>
                                                  <p><span>Order Status</span>Delivered</p>
                                              </td>
                                              <td>
                                                  <a href="#" class="btnStyle btn-block">Track Order</a>
                                                  <a href="javascript:void(0)" class="btnStyle" data-toggle="modal"
                                                      data-target="#OrderDetailModal">View Order</a>
                                                  <a href="#" class="btnStyle">Reorder</a>
                                              </td>
                                          </tr>
                                      </tbody>
                                  </table>
                              </div> -->
                            <h2 class="title">My Orders</h2>
                            @if(count($recentOrders) > 0)
                                <table class="table orderTable wishlistTable tableOrder">
                                    <thead>
                                    <tr>
                                        <th>Order#</th>
                                        <th>Date</th>
                                        <th>Order Total</th>
                                        <th>Order Status</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($recentOrders as $order)
                                        <tr>
                                            <td>
                                                <p><span>Order#</span>{{$order->order_no}}</p>
                                            </td>
                                            <td>
                                                <p><span>Date</span>{{date('d-m-Y',strtotime($order->created_at))}}</p>
                                            </td>
                                            <td>
                                                <p><span>Order Total</span>${{$order->total_amount+$order->shipping_cost}}</p>
                                            </td>
                                            <td>
                                                <p style="text-transform: uppercase;"><span>Order Status</span>{{$order->order_status}}</p>
                                            </td>
                                            <td>
                                                <a href="javascript:void(0)" class="btnStyle w-100 orderDetailBtn" data-order_id="{{$order->id}}">View Order</a>
{{--                                                    <a href="#" class="btnStyle  w-100">Reorder</a>--}}
                                            </td>
                                        </tr>
                                    @empty
                                    @endforelse
                                    </tbody>
                                </table>
                            @else
                                <div class="noRecord">
                                    <p>No Record Found</p>
                                </div>
                            @endif

                        </div>
                        <div role="tabpanel" class="tab-pane" id="wishlist">
                            <h2 class="title">My Wishlist</h2>
                            <table class="table orderTable wishlistTable">
                                <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <img src="{{asset('front')}}/images/flower.webp" alt="" class="img-fluid">
                                            <p>Original Organic Honey</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>$ 10.00</p>
                                    </td>
                                    <td>
                                        <a href="#" class="btnStyle">Add to cart</a>
                                        <a href="#" class="btnStyle">Remove</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <img src="{{asset('front')}}/images/flower.webp" alt="" class="img-fluid">
                                            <p>Original Organic Honey</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>$ 10.00</p>
                                    </td>
                                    <td>
                                        <a href="#" class="btnStyle">Add to cart</a>
                                        <a href="#" class="btnStyle">Remove</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <img src="{{asset('front')}}/images/flower.webp" alt="" class="img-fluid">
                                            <p>Original Organic Honey</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>$ 10.00</p>
                                    </td>
                                    <td>
                                        <a href="#" class="btnStyle">Add to cart</a>
                                        <a href="#" class="btnStyle">Remove</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <img src="{{asset('front')}}/images/flower.webp" alt="" class="img-fluid">
                                            <p>Original Organic Honey</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>$ 10.00</p>
                                    </td>
                                    <td>
                                        <a href="#" class="btnStyle">Add to cart</a>
                                        <a href="#" class="btnStyle">Remove</a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="address">
                            <h2 class="title">My Address <a href="javascript:void(0)" class="btnStyle" data-toggle="modal"
                                                            data-target="#addNewsAddressModal"><i class="fa fa-plus-circle"></i> Add New Address</a>
                            </h2>
                            <div class="row">
                                @forelse($addresses as $address)
                                    <div class="col-lg-6">
                                        <div class="adressCard">
                                            <span class="tag" style="color: black">{{$address->title ?? ''}}</span>
                                            <address>
                                                <span>{{$address->first_name . ' ' .$address->last_name}}</span>
                                                <span>{{$address->address ?? ''}}</span>
                                                <span>{{$address->city ?? ''}} </span>
                                                <span>{{$address->country ?? ''}}</span>
                                                <span>{{$address->phone_no}}</span>
                                            </address>
                                            <a href="javascript:void(0)" data-id="{{$address->id}}" class="edit editAddress">
                                                <i class="fa fa-pencil"></i>
                                            </a>
                                            <a href="javascript:void(0)" class="remove removeAddress" data-id="{{$address->id}}"><i class="fa fa-trash"></i></a>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-lg-12">
                                        <div class="adressCard">
                                            <h5>No Address Saved Yet!</h5>
                                        </div>
                                    </div>
                                @endforelse

                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="password">
                            <div class="accounTab">
                                <h2 class="title">Change Password </h2>
                                <form action="{{route('updatePassword')}}" method="post" class="row formStyle">
                                    @csrf
                                    <div class="col-md-6">
                                        <label>Current Password <span>*</span></label>
                                        <input type="password" class="form-control @error('old_password') is-invalid @enderror" placeholder="" name="old_password" required>
                                        @error('old_password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{$message}}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label>New Password <span>*</span></label>
                                        <input type="password" class="form-control @error('new_password') is-invalid @enderror" placeholder="" name="new_password" required>
                                        @error('new_password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{$message}}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label>Retype New Password <span>*</span></label>
                                        <input type="password" class="form-control" placeholder="" name="password_confirmation" required>
                                    </div>
                                    <div class="col-md-6"></div>

                                    <div class="col-md-12">
                                        <div class="text-right"><button class="btnStyle" type="submit">Save</button></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END: Account Section -->

    <!-- Add New Address Modal-->
    <div class="modal fade accountAccesSec" id="addNewsAddressModal" tabindex="-1" aria-labelledby="addNewsAddressModal"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title m-0">Shipping Address</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{route('addCustomerAddress')}}" class="row formStyle">
                        @csrf
                        <div class="col-md-6">
                            <label>First Name <span>*</span></label>
                            <input type="text" name="first_name" class="form-control @error('first_name') is-invalid @enderror" placeholder="" value="{{old('first_name')}}" required>
                            @error('first_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Last Name <span>*</span></label>
                            <input type="text" name="last_name" class="form-control @error('last_name') is-invalid @enderror" placeholder="" value="{{old('last_name')}}" required>
                            @error('last_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
{{--                        <div class="col-md-6">--}}
{{--                            <label>Mobile Number <span>*</span></label>--}}
{{--                            <div class="CNum">--}}
{{--                                <div class="input-group">--}}
{{--                                    <div class="input-group-prepend">--}}
{{--                                        <button class="btn btn-outline-secondary dropdown-toggle" type="button"--}}
{{--                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img--}}
{{--                                                    src="{{asset('front')}}/images/us.png" alt=""> +1</button>--}}
{{--                                        <div class="dropdown-menu">--}}
{{--                                            <a class="dropdown-item" href="#"><img src="{{asset('front')}}/images/british.jpg" alt=""> +025</a>--}}
{{--                                            <a class="dropdown-item" href="#"><img src="{{asset('front')}}/images/us.png" alt=""> +1</a>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <input type="number" name="phone_no" class="form-control @error('phone_no') is-invalid @enderror" value="{{old('phone_no')}}" placeholder="50 123 4567" required>--}}
{{--                                    @error('phone_no')--}}
{{--                                    <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>--}}
{{--                                    @enderror--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="col-md-6">
                            <label>Mobile Number <span>*</span></label>
                            <input type="number" name="phone_no" class="form-control @error('phone_no') is-invalid @enderror" value="{{old('phone_no')}}" placeholder="50 123 4567" required>

                        </div>
                        <div class="col-md-6">
                            <label>Title <span>*</span></label>
                            <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" placeholder="" value="{{old('title')}}" required>
                            @error('title')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Street Address <span>*</span></label>
                            <input type="text" name="address" class="form-control @error('address') is-invalid @enderror" placeholder="" value="{{old('address')}}" required>
                            @error('address')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>City <span>*</span></label>
                            <input type="text" name="city" class="form-control @error('city') is-invalid @enderror" placeholder="" value="{{old('city')}}" required>
                            @error('city')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Company Name <span>*</span></label>
                            <input type="text" name="company_name" class="form-control @error('company_name') is-invalid @enderror" value="{{old('company_name')}}" placeholder="" required>
                            @error('company_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Zip Code <span>*</span></label>
                            <input type="text" name="zip_code" class="form-control @error('zip_code') is-invalid @enderror" placeholder="" value="{{old('zip_code')}}" required>
                            @error('zip_code')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Country <span>*</span></label>
                            <select class="form-control @error('country') is-invalid @enderror" name="country" required>
                                <option value="">Select</option>
                                <option value="US">USA</option>

                            </select>
                            @error('country')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>State <span>*</span></label>
                            <input type="text" name="state" class="form-control @error('state') is-invalid @enderror" placeholder="" value="{{old('state')}}" required>
                            @error('state')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            {{--                            <div class="custom-control custom-checkbox ml-3">--}}
                            {{--                                <input type="checkbox" class="custom-control-input" id="subscribeCheckBox">--}}
                            {{--                                <label class="custom-control-label" for="subscribeCheckBox">Save in address book</label>--}}
                            {{--                            </div>--}}
                            <div class="text-right"><button class="btnStyle" type="submit">Save</button></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Address Modal-->
    <div class="modal fade accountAccesSec" id="editAddressModal" tabindex="-1" aria-labelledby="editAddressModal"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title m-0">Edit Address</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" id="editAddressForm" action="" class="row formStyle">
                        @csrf
                        <div class="col-md-6">
                            <label>First Name <span>*</span></label>
                            <input type="text" id="first_name_e" name="first_name" class="form-control @error('first_name') is-invalid @enderror" placeholder="" required>
                            @error('first_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Last Name <span>*</span></label>
                            <input type="text" id="last_name_e" name="last_name" class="form-control @error('last_name') is-invalid @enderror" placeholder="" required>
                            @error('last_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Mobile Number <span>*</span></label>
                            <div class="CNum">
                                <div class="input-group">
{{--                                    <div class="input-group-prepend">--}}
{{--                                        <button class="btn btn-outline-secondary dropdown-toggle" type="button"--}}
{{--                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img--}}
{{--                                                    src="{{asset('front')}}/images/us.png" alt=""> +1</button>--}}
{{--                                        <div class="dropdown-menu">--}}
{{--                                            <a class="dropdown-item" href="#"><img src="{{asset('front')}}/images/british.jpg" alt=""> +025</a>--}}
{{--                                            <a class="dropdown-item" href="#"><img src="{{asset('front')}}/images/us.png" alt=""> +1</a>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                    <input type="number" id="phone_no_e" name="phone_no" class="form-control @error('phone_no') is-invalid @enderror" placeholder="50 123 4567" required>
                                    @error('phone_no')
                                    <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label>Title <span>*</span></label>
                            <input type="text" id="title_e" name="title" class="form-control @error('title') is-invalid @enderror" placeholder="" required>
                            @error('title')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Street Address <span>*</span></label>
                            <input type="text" id="address_e" name="address" class="form-control @error('address') is-invalid @enderror" placeholder="" required>
                            @error('address')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>City <span>*</span></label>
                            <input type="text" id="city_e" name="city" class="form-control @error('city') is-invalid @enderror" placeholder="" required>
                            @error('city')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Company Name <span>*</span></label>
                            <input type="text" id="company_name_e" name="company_name" class="form-control @error('company_name') is-invalid @enderror" placeholder="" required>
                            @error('company_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Zip Code <span>*</span></label>
                            <input type="text" id="zip_code_e" name="zip_code" class="form-control @error('zip_code') is-invalid @enderror" placeholder="" required>
                            @error('zip_code')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Country <span>*</span></label>
                            <select class="form-control @error('country') is-invalid @enderror" id="country_e" name="country" required>
                                <option value="">Select</option>
                                <option value="US">USA</option>

                            </select>
                            @error('country')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>State <span>*</span></label>
                            <input type="text" id="state_e" name="state" class="form-control @error('state') is-invalid @enderror" placeholder="" required>
                            @error('state')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-12">
{{--                            <div class="custom-control custom-checkbox ml-3">--}}
{{--                                <input type="checkbox" class="custom-control-input" id="subscribeCheckBox">--}}
{{--                                <label class="custom-control-label" for="subscribeCheckBox">Save in address book</label>--}}
{{--                            </div>--}}
                            <div class="text-right"><button class="btnStyle" type="submit">Save</button></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Detail Modal-->
    <div class="modal fade accountAccesSec" id="OrderDetailModal" tabindex="-1" aria-labelledby="OrderDetailModal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="m-0">My Order Details</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="orderTab" id="OrderDetailModalBody">

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

@endsection
@section('scripts')
<script>
    $(document).ready(function (){

        $('.orderDetailBtn').on('click',function () {
            $order_id = $(this).data('order_id');

            $.ajax({
                url: "{{ route('getOrderDetail') }}/"+$order_id,
                method: 'GET',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(res){
                    // console.log(res);
                    var html = '';
                    let total_amount = parseInt(res.total_amount);
                    html += `<div class="alert alert-success" role="alert">
                            <span>Order# ${res.order_no}</span>
                            <span>Total: $${total_amount}</span>
                            <span>Placed on: ${new Date(res.created_at).toDateString()}</span>
                            <span style="text-transform: capitalize" >Payment Method: ${res.payment.pay_method_name}</span>
                            <span>Ship to: ${res.customer.first_name}</span>
                        </div>
                        <table class="table orderTable">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                    <th>Subtotal</th>
                                    <th>Reorder</th>
                                </tr>
                            </thead>
                            <tbody>`

                    res.order_items.map(function (item) {
                        html += `<tr>
                                    <td><p><img src="../uploads/products/${item.product.product_image}" alt="" width="50px" height="50px">${item.product.product_name}</p></td>
                                    <td><p>$ ${item.product_per_price}</p></td>
                                    <td><p>${item.product_qty}</p></td>
                                    <td><p>$ ${item.product_per_price*item.product_qty}</p></td>
                                    <td><button type="submit" class="btnStyle buttonCart" data-id="${item.product.id}">Reorder</button></td>
                                </tr>`
                    });
                    html += `</tbody>
                                    </table>`;
                    $('#OrderDetailModalBody').html(html);
                    $('#OrderDetailModal').modal('show');

                }
            })
        });

        //Edit Address
        $('.editAddress').on('click',function () {
            $id = $(this).data('id');

            $.ajax({
                url: "{{ route('getAddressDetail') }}/"+$id,
                method: 'GET',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(res){
                    console.log(res);
                    $("#editAddressForm").attr('action', "updateCustomerAddress/"+res.customer_address.id)
                    $('#add_id').val(res.customer_address.id);
                    $('#first_name_e').val(res.customer_address.first_name);
                    $('#last_name_e').val(res.customer_address.last_name);
                    $('#phone_no_e').val(res.customer_address.phone_no);
                    //$("#phone_no_e").intlTelInput("setNumber", res.customer_address.phone_no);
                    $('#title_e').val(res.customer_address.title);
                    $('#address_e').val(res.customer_address.address);
                    $("#city_e").val(res.customer_address.city);
                    //$("#city_e").append(new Option(res.city.name, res.city.id));

                    $('#company_name_e').val(res.customer_address.company_name);
                    $('#zip_code_e').val(res.customer_address.zip_code);
                    $('#country_e').val(res.customer_address.country);
                    // $('#country_e option[value="res.country"]').attr("selected", "selected");


                    $("#state_e").val(res.customer_address.state);
                    //$("#state_e").append(new Option(res.state.name, res.state.id));
                    $('#shipping_billing_e').val(res.customer_address.shipping_billing);

                    $('#editAddressModal').modal('show');

                }
            })
        });

        $(".removeAddress").on('click', function (){
            var csrf_token = $('meta[name="csrf-token"]').attr('content');
            var id = $(this).attr('data-id');
            $.ajax({
                url: 'removeAddress/'+id,
                type: 'delete',
                data: {"_token": csrf_token, "id": id},
                dataType: 'json',
                success: function (resp) {
                    if(resp.status == true){
                        location.reload();
                    }else{
                        toastr.error('Something Went Wrong');
                    }
                }
            });
        });
    })
</script>
<script>
    $(document).ready(function(){
        var a = window.location.href;
        var tabId = a.split('#')[1];
        if(tabId != undefined){
            $("#account").removeClass('active show');
            $("#orders").removeClass('active show');
            $("#address").removeClass('active show');
            $("#password").removeClass('active show');
            $("#"+tabId).addClass('active show');
            history.replaceState(null, "", location.href.split("#")[0]);
        }
    });
</script>
@if(Session::has('addAddressError') && Session::get('addAddressError') == true)
    <script> $("#addNewsAddressModal").modal('show'); </script>
@endif
@if(Session::has('editAddressError') && Session::get('editAddressError') == true)
    <script> $("#editAddressModal").modal('show'); </script>
@endif
@endsection