@extends('frontend.master')

@section('content')
    <!-- Start My Account Area  -->
    <div class="axil-dashboard-area axil-section-gap">
        <div class="container">
            <div class="axil-dashboard-warp">
                <div class="row">
                    <div class="axil-dashboard-author col-lg-4">
                        <div class="media">
                            <div class="thumbnail">
                                @if (Auth::user()->image == '')
                                    <img style="width: 200px; height: 150px;" src="{{ asset('/uploads/user.png') }}"
                                        alt="Hello Annie">
                                @else
                                    <img style="width: 200px; height: 200px;"
                                        src="{{ asset('/uploads/customer') }}/{{ Auth::user()->image }}" alt="Hello Annie">
                                @endif

                            </div>
                            <div class="media-body">
                                <h5 class="title mb-0">{{ Auth::user()->name }}</h5>
                                <span class="joining-date">Member Since:
                                    {{ date('d-M-Y', strtotime(Auth::user()->created_at)) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="row">
                            <div class="col-lg-3 my-2">
                                <div class="card">
                                    <div class="card-body p-3 bg-danger">
                                        <h4 class="text-white text-center m-auto">Pending</h4>
                                        <p class="text-white m-auto text-center">{{ $pendingOrder }}
                                            {{ $pendingOrder > 1 ? 'Orders' : 'Order' }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 my-2">
                                <div class="card">
                                    <div class="card-body p-3 bg-warning">
                                        <h4 class="text-white text-center m-auto">Cancelled</h4>
                                        <p class="text-white m-auto text-center">{{ $cancelledOrder }}
                                            {{ $cancelledOrder > 1 ? 'Orders' : 'Order' }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 my-2">
                                <div class="card">
                                    <div class="card-body p-3 bg-success">
                                        <h4 class="text-white text-center m-auto">Completed</h4>
                                        <p class="text-white m-auto text-center">{{ $completedOrder }}
                                            {{ $completedOrder > 1 ? 'Orders' : 'Order' }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 my-2">
                                <div class="card">
                                    <div class="card-body p-3 bg-info">
                                        <h4 class="text-white text-center m-auto">Total</h4>
                                        <p class="text-white m-auto text-center">{{ $totalOrder }}
                                            {{ $totalOrder > 1 ? 'Orders' : 'Order' }}</p>
                                    </div>
                                </div>
                            </div>

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

                <div class="row">
                    <div class="col-xl-3 col-md-4">
                        <aside class="axil-dashboard-aside">
                            <nav class="axil-dashboard-nav">
                                <div class="nav nav-tabs" role="tablist">
                                    <a class="nav-item nav-link active" data-bs-toggle="tab" href="#nav-dashboard"
                                        role="tab" aria-selected="true"><i class="fas fa-th-large"></i>Dashboard</a>
                                    <a class="nav-item nav-link" data-bs-toggle="tab" href="#nav-orders" role="tab"
                                        aria-selected="false"><i class="fas fa-shopping-basket"></i>Orders</a>

                                    <a class="nav-item nav-link" data-bs-toggle="tab" href="#nav-address" role="tab"
                                        aria-selected="false"><i class="fas fa-heart"></i>Wishlist</a>

                                    <a class="nav-item nav-link" href="{{ route('logout') }}"><i
                                            class="fal fa-sign-out"></i>Logout</a>
                                </div>
                            </nav>
                        </aside>
                    </div>
                    <div class="col-xl-9 col-md-8">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="nav-dashboard" role="tabpanel">
                                <div class="row align-items-center">
                                    <form class="row m-0" action="{{ route('profile.update') }}" method="POST">
                                        @csrf

                                        <div class="col-lg-6 my-2">
                                            <div class="form-group">
                                                <label>Full Name *</label>
                                                <input type="text" class="form-control" name="name"
                                                    value="{{ Auth::user()->name }}" />

                                                @error('name')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-6 my-2">
                                            <div class="form-group">
                                                <label>Email Address *</label>
                                                <input type="email" class="form-control" name="email"
                                                    value="{{ Auth::user()->email }}" />
                                                @error('email')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>New Password *</label>
                                                <input type="password" class="form-control" name="password" />
                                                @error('password')
                                                    <strong class="text-danger">{{ $message }}</strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-xl-6 col-lg-6 my-2 col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label>Address *</label>
                                                <input type="text" class="form-control" name="address"
                                                    value="{{ Auth::user()->address == '' ? old('address') : Auth::user()->address }}" />
                                                @error('address')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-2">
                                            <button type="submit" class="btn btn-lg btn-dark">Update</button>
                                        </div>

                                    </form>


                                    <form action="{{ route('profile.image.update') }}" method="POST"
                                        style="margin-top: 50px;" enctype="multipart/form-data">
                                        @csrf

                                        <div class="col-xl-12 col-lg-12 my-2 col-md-12 col-sm-12">
                                            <div class="form-group">
                                                {{-- <label>Image *</label> --}}
                                                <input type="file" class="form-control" name="image"
                                                    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

                                                @error('image')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>

                                            <div class="my-3">
                                                <img id="blah"
                                                    src="{{ Auth::user()->image != '' ? asset('/uploads/customer/' . Auth::user()->image) : asset('/uploads/user.png') }}"
                                                    width="100" height="100" alt="">
                                            </div>
                                        </div>

                                        <div class="col-lg-2">
                                            <button class="btn btn-lg btn-dark my-3" type="submit">Update</button>

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

                            {{-- orders --}}
                            <div class="tab-pane fade" id="nav-orders" role="tabpanel">
                                <div class="axil-dashboard-order">
                                    <div class="table-responsive">
                                        <table class="table table-sm myTable" id="myTable">
                                            <thead>
                                                <tr>
                                                    <th>SL</th>
                                                    <th>Order Id</th>
                                                    <th>Subtotal</th>
                                                    <th>Discount</th>
                                                    <th>Delivery Charge</th>
                                                    <th>Grand Total</th>
                                                    <th>Payment Status</th>
                                                    <th>Order Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($orders as $sl => $order)
                                                    <tr>
                                                        <td>{{ $sl + 1 }}</td>
                                                        <td>{{ $order->invoice_id }}</td>
                                                        <td>{{ $order->subtotal }}</td>
                                                        <td>{{ $order->discount ?? 0 }}</td>
                                                        <td>{{ $order->delivery_charge ?? 0 }}</td>
                                                        <td>{{ $order->total }}</td>
                                                        <td>
                                                            @if ($order->payment_status == 'completed')
                                                                <span
                                                                    class="badge bg-success">{{ $order->payment_status }}</span>
                                                            @endif

                                                            @if ($order->payment_status == 'pending')
                                                                <span
                                                                    class="badge bg-danger">{{ $order->payment_status }}</span>
                                                            @endif
                                                        </td>

                                                        <td>
                                                            @if ($order->order_status == 'delivered')
                                                                <span
                                                                    class="badge bg-success">{{ $order->order_status }}</span>
                                                            @elseif($order->order_status == 'processed')
                                                                <span
                                                                    class="badge bg-secondary">{{ $order->order_status }}</span>
                                                            @elseif($order->order_status == 'pending')
                                                                <span
                                                                    class="badge bg-warning">{{ $order->order_status }}</span>
                                                            @elseif($order->order_status == 'cancelled')
                                                                <span
                                                                    class="badge bg-danger">{{ $order->order_status }}</span>
                                                            @elseif($order->order_status == 'completed')
                                                                <span
                                                                    class="badge bg-success">{{ $order->order_status }}</span>
                                                            @endif
                                                        </td>

                                                        <td class="d-flex">

                                                            <a href="{{ route('customer.order.show', $order->id) }}"
                                                                class="btn btn-primary mx-2">
                                                                show
                                                            </a>

                                                            <a data-link="{{ route('customer.order.cancel', $order->id) }}"
                                                                class="btn btn-danger delete mx-2">
                                                                Cancel
                                                            </a>

                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>


                            {{-- wishlist --}}
                            <div class="tab-pane fade" id="nav-address" role="tabpanel">
                                <div class="axil-dashboard-address">
                                    <div class="row row--30">
                                        <div class="col-lg-12">
                                            <div class="table-responsive">
                                                <table class="table table-sm table-bordered" id="myTable">
                                                    <thead>
                                                        <tr>
                                                            <th>SL</th>
                                                            <th>Product</th>
                                                            <th>Price</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($wishlists as $sl => $wishlist)
                                                            <tr>
                                                                <td>{{ $sl + 1 }}</td>
                                                                <td>
                                                                    <img width="50" height="50"
                                                                        src="{{ asset('/uploads/product') }}/{{ $wishlist->product->image }}"
                                                                        alt="">
                                                                    {{ $wishlist->product->name }}
                                                                </td>
                                                                <td>{{ $wishlist->product->offer_price ?? $wishlist->product->price }}
                                                                    TK</td>
                                                                <td class="d-flex">
                                                                    <a href="{{ route('product.details', $wishlist->product->slug) }}"
                                                                        class="btn btn-primary mx-2">
                                                                        Visit
                                                                    </a>

                                                                    <a data-link="{{ route('wishlist.remove', $wishlist->id) }}"
                                                                        class="btn btn-danger delete mx-2">
                                                                        Delete
                                                                    </a>

                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End My Account Area  -->
    </main>
@endsection

@push('scripts')
    <script>
        $('.delete').on('click', function() {
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes!"
            }).then((result) => {
                if (result.isConfirmed) {

                    let link = $(this).data('link');
                    location.href = link;
                }
            });
        });
    </script>
@endpush