@extends("layouts.app")
@section("content")

    <div class="main-slider">
        <img class="img-fluid w-100" src="{{asset('images/innerBnnr.jpg')}}" alt="First slide">
        <div class="carousel-caption">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-uppercase">Account</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->

    <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('images/user.jpg')}}" alt="">--}}
                                <div class="content">
                                    <h4>Hello</h4>
                                    <p>John Doe</p>
                                </div>
                            </div>
                        </li>
                        {{--                        <li class="nav-item">--}}
                        {{--                            <a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab"--}}
                        {{--                               aria-controls="dashboard" aria-selected="false"><i class="fal fa-desktop-alt"></i> My Dashboard</a>--}}
                        {{--                        </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>--}}
                    </ul>
                </div>
                <div class="col-lg-8">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane" id="dashboard">
                            <div class="myDashboardTab">
                                <h2 class="title">My Dashboard</h2>
                                <div class="mt-3 mb-5">
                                    <h4>My Dashboard</h4>
                                    <p>From this dashboard you have the ability to view a snapshot of your recent
                                        account activity and update your account information. Select a link below to
                                        view or edit information.</p>
                                </div>
                                <h4>Recent Orders</h4>
                                <div class="noRecord">
                                    <p>No Record Found</p>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane active" id="account">
                            <div class="accounTab">
                                <h2 class="title">My Account Information</h2>
                                <form method="POST" action="{{route('update-account')}}" class="row formStyle">
                                    @csrf
                                    <div class="col-md-12">
                                        <label>Full Name <span>*</span></label>
                                        <input type="text" name="name"
                                               class="form-control @error('name') is-invalid @enderror"
                                               @error('name') autofocus @enderror
                                               placeholder="" value="{{$user_detail->name}}">
                                        @error('name')
                                        <span class="invalid-feedback ml-2" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label>Email <span>*</span></label>
                                        <input type="text" class="form-control @error('email') is-invalid @enderror"
                                               @error('email') autofocus @enderror
                                               name="email" placeholder="" value="{{$user_detail->email}}">
                                        @error('email')
                                        <span class="invalid-feedback ml-2" 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="images/uae.jpg" alt=""> +097
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="#"><img
                                                                src="{{asset('images/british.jpg')}}" alt=""> +025</a>
                                                        <a class="dropdown-item" href="#"><img
                                                                src="{{asset('images/uae.jpg')}}" alt=""> +097</a>
                                                    </div>
                                                </div>
                                                <input type="text" name="phone_number"
                                                       class="form-control @error('phone_number') is-invalid @enderror"
                                                       @error('phone_number') autofocus @enderror
                                                       placeholder="50 123 4567">
                                                @error('phone_number')
                                                <span class="invalid-feedback ml-2" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </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">
                                            <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">
                                            <label class="custom-control-label" for="female">Female</label>
                                        </div>
                                        {{--                                        <div class="custom-control custom-checkbox">--}}
                                        {{--                                            <input type="checkbox" class="custom-control-input" id="subscribeCheckBox">--}}
                                        {{--                                            <label class="custom-control-label" for="subscribeCheckBox">I would like to receive emails and SMS regarding the promotions and special offers.</label>--}}
                                        {{--                                        </div>--}}
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" name="change_password" value="1"
                                                   class="custom-control-input" id="changePasswordCheckbox">
                                            <label class="custom-control-label" for="changePasswordCheckbox">Change
                                                Password?</label>
                                        </div>
                                        <div class="text-right">
                                            <button class="themeBtn">Save</button>
                                        </div>
                                    </div>
                                    <div class="changePassword">
                                        <div class="col-md-12">
                                            <label>Old Password <span>*</span></label>
                                            <input type="password" name="current_password"
                                                   class="form-control @error('current_password') is-invalid @enderror"
                                                   @error('current_password') autofocus @enderror
                                                   placeholder="">
                                            @error('current_password')
                                            <span class="invalid-feedback ml-2" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                            @enderror
                                        </div>
                                        <div class="col-md-12">
                                            <label>New Password (At least 6 characters) <span>*</span></label>
                                            <input type="password" name="password"
                                                   @error('password') autofocus @enderror
                                                   class="form-control @error('password') is-invalid @enderror"
                                                   placeholder="">
                                            @error('password')
                                            <span class="invalid-feedback ml-2" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                            @enderror
                                        </div>
                                        <div class="col-md-12">
                                            <label>Confirm New Password <span>*</span></label>
                                            <input type="password" name="password_confirmation" class="form-control"
                                                   placeholder="">
                                        </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>
                                    @forelse($orders as $order)
                                    <tr>
                                        <td>
                                            <p><span>Order#</span>{{$order->order_no}}</p>
                                        </td>
                                        <td>
                                            <p><span>Date</span>{{$order->created_at}}</p>
                                        </td>
                                        <td>
                                            <p><span>Order Total</span>$ {{$order->total_amount}}</p>
                                        </td>
                                        <td>
                                            <p><span>Order Status</span>{{$order->status}}</p>
                                        </td>
                                    </tr>
                                    @empty
                                        <tr>
                                            <td colspan="100%" class="text-center">No orders found</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </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('images/pro-4.jpg')}}" alt="" class="img-fluid">
                                            <p>Original Organic Honey</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>$10.00</p>
                                    </td>
                                    <td>
                                        <a href="{{ route('products') }}" class="themeBtn">ADD TO CART</a>
                                        <a href="#" class="themeBtn">Remove</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <img src="{{asset('images/pro-4.jpg')}}" alt="" class="img-fluid">
                                            <p>Original Organic Honey</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>$10.00</p>
                                    </td>
                                    <td>
                                        <a href="{{ route('products') }}" class="themeBtn">ADD TO CART</a>
                                        <a href="#" class="themeBtn">Remove</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <img src="{{asset('images/pro-4.jpg')}}" alt="" class="img-fluid">
                                            <p>Original Organic Honey</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>$10.00</p>
                                    </td>
                                    <td>
                                        <a href="{{ route('products') }}" class="themeBtn">ADD TO CART</a>
                                        <a href="#" class="themeBtn">Remove</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <img src="{{asset('images/pro-4.jpg')}}" alt="" class="img-fluid">
                                            <p>Original Organic Honey</p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>$10.00</p>
                                    </td>
                                    <td>
                                        <a href="{{ route('products') }}" class="themeBtn">ADD TO CART</a>
                                        <a href="#" class="themeBtn">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="themeBtn"
                                                            data-toggle="modal" data-target="#addNewsAddressModal"><i
                                        class="fa fa-plus-circle"></i> Add New Address</a></h2>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="adressCard">
                                        <span class="tag">Home</span>
                                        <address>
                                            <span>John Doe</span>
                                            <span>1705, Citadel Tower, Business Bay, Dubai</span>
                                            <span>Dubai, </span>
                                            <span>United Arab Emirates</span>
                                            <span>+015 333 4567</span>
                                        </address>
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#editAddressModal"
                                           class="edit"><i class="fa fa-pencil"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-trash"></i></a>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="adressCard">
                                        <span class="tag">Work</span>
                                        <address>
                                            <span>John Doe</span>
                                            <span>1705, Citadel Tower, Business Bay, Dubai</span>
                                            <span>Dubai, </span>
                                            <span>United Arab Emirates</span>
                                            <span>+015 333 4567</span>
                                        </address>
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#editAddressModal"
                                           class="edit"><i class="fa fa-pencil"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-trash"></i></a>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="adressCard">
                                        <span class="tag">Other</span>
                                        <address>
                                            <span>John Doe</span>
                                            <span>1705, Citadel Tower, Business Bay, Dubai</span>
                                            <span>Dubai, </span>
                                            <span>United Arab Emirates</span>
                                            <span>+015 333 4567</span>
                                        </address>
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#editAddressModal"
                                           class="edit"><i class="fa fa-pencil"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-trash"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection