@extends('layouts.front-layout')
@section('title') User DashBoard @endsection

@section('content')
    <style>
        .dataTables_filter .form-control-sm{
            height: 43px;
            width: 100% !important;
            border: solid #CED4DA 1px !important;
            outline: solid #CED4DA 1px !important;
        }
        .form-control{
            border: solid #CED4DA 1px !important;
            outline: solid #CED4DA 1px !important;
        }
        table-flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .table-flex .themeBtn {
            padding: 1rem 1.3em!important;
        }
    </style>
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{asset('upload/images/innerbnr1.png')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>User DashBoard</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="order-status padd-y">
        <div class="container">
            <div class="order-status-title text-center mb-4">
                <h3 class="secHeading"></h3>
            </div>
            <div class="row">
                <div class="col-lg-3">
                    <div class="order-status-nav nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                         aria-orientation="vertical">
                        <button class="nav-link active" id="v-pills-dashboard-tab" data-toggle="pill"
                                data-target="#v-pills-dashboard" type="button" role="tab" aria-controls="v-pills-dashboard"
                                aria-selected="true">Dashboard</button>
                        <button class="nav-link" id="v-pills-orders-tab" data-toggle="pill"
                                data-target="#v-pills-orders" type="button" role="tab" aria-controls="v-pills-orders"
                                aria-selected="false">Orders</button>

                        <button class="nav-link" id="v-pills-account-details-tab" data-toggle="pill"
                                data-target="#v-pills-account-details" type="button" role="tab"
                                aria-controls="v-pills-account-details" aria-selected="false">Account Details</button>
                        <button class="nav-link" id="v-pills-wishlist-tab" data-toggle="pill"
                                data-target="#v-pills-wishlist" type="button" role="tab" aria-controls="v-pills-wishlist"
                                aria-selected="false">Wishlist</button>

                        <button class="nav-link" id="v-pills-change-password-tab" data-toggle="pill"
                                data-target="#v-pills-change-password" type="button" role="tab" aria-controls="v-pills-change-password"
                                aria-selected="false">Change Password</button>

                        <a href="{{ route('user.logout') }}"> <button class="nav-link">Logout</button></a>


                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="order-status-tab tab-content" id="v-pills-tabContent">
                        <div class="tab-pane fade show active" id="v-pills-dashboard" role="tabpanel"
                             aria-labelledby="v-pills-dashboard-tab">
                            <div class=" table-responsive-lg">
                             <h3 class="text-center">User Dashboard</h3>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="v-pills-orders" role="tabpanel"
                             aria-labelledby="v-pills-orders-tab">
                                @include('user.new_dashboard_pages.order.index')
                        </div>
                        <div class="tab-pane fade" id="v-pills-account-details" role="tabpanel"
                             aria-labelledby="v-pills-account-details-tab">
                            @include('user.new_dashboard_pages.profile')
                        </div>
                        <div class="tab-pane fade" id="v-pills-wishlist" role="tabpanel"
                             aria-labelledby="v-pills-wishlist-tab">
                            <div id="wishlist-content">
                                @if($wishlist->count()> 0)
                                    @include('front.wishlist.wishlist-listing')
                                @else
                                    @include('front.wishlist.empty-wishlist-message')
                                @endif
                            </div>
                        </div>

                        <div class="tab-pane fade" id="v-pills-change-password" role="tabpanel"
                             aria-labelledby="v-pills-change-password-tab">
                            @include('user.auth.change-password')
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection