@extends('frontend.layout.app')
@section('content')
    <style>
        /* Modernized & improved UI for My Account Page */
        .my__account--section__inner {
            background: #f8fafd !important;
            border-radius: 20px;
            padding: 3rem 2.3rem;
            box-shadow: 0 8px 40px 0 rgba(60, 72, 88, .11);
        }

        .nav-pills .nav-link.active,
        .nav-pills .show>.nav-link {
            background: linear-gradient(90deg, #206bc4 0%, #30c7ec 100%);
            color: #fff;
            transition: background .24s;
            box-shadow: 0 2px 8px rgba(32, 107, 196, .13);
            font-weight: 700;
        }

        .nav 700;
        -pills .nav-link {
            color: #206bc4;
            border-radius: 8px;
            font-weight: 600;
            padding: .75rem 1rem;
            letter-spacing: .25px;
            background: #f2f6fa;
            transition: color .18s, background .18s;
        }

        .nav-pills .nav-link:not(.active):hover {
            background: #eaf2fa;
            color: #206bc4;
        }

        .nav-pills {
            gap: 8px;
        }

        .card {
            border: none;
            background: #fff;
            border-radius: 17px;
            box-shadow: 0 2px 18px 0 rgba(52, 62, 130, .06);
        }

        .alert {
            margin-bottom: 1.25rem;
            border-radius: 8px;
            font-size: 15px;
        }

        .tab-pane {
            min-height: 340px;
        }

        .table th,
        .table td {
            vertical-align: middle;
        }

        .table {
            border-radius: 7px;
            overflow: hidden;
        }

        .table th {
            background: #e4efff;
        }

        .btn-success,
        .btn-primary,
        .btn-info {
            border-radius: 5px;
            min-width: 98px;
            font-weight: 600;
            letter-spacing: .03em;
        }

        .btn-success {
            background: linear-gradient(90deg, #41c977 0, #64dfb1 100%);
            border-color: #41c977;
        }

        .btn-success:hover,
        .btn-success:focus {
            background: #16a34a;
            border-color: #16a34a;
        }

        .btn-info {
            background: #03a9f4;
            color: #fff;
            border: none;
        }

        .btn-info:hover,
        .btn-info:focus {
            background: #1598d2;
        }

        .btn-danger {
            border-radius: 5px;
            background: #ff3b3b;
            border: none;
        }

        .btn-danger:hover,
        .btn-danger:focus {
            background: #c32121;
        }

        .modal-header {
            background: #ecf3fa;
            border-bottom: 1.5px solid #dde6f4;
            border-radius: 17px 17px 0 0;
        }

        .form-label {
            font-weight: 600;
            color: #043d72;
        }

        .input-group-text {
            background: #f3f7fb;
            border-radius: 0 4px 4px 0 !important;
        }

        .star-edit.text-warning i,
        .text-warning i.fa-star {
            color: #f9af02 !important;
        }

        /* Fancy table look for order items */
        .order-items-table {
            margin-top: 10px;
            margin-bottom: 0;
            background: #fafdff;
            border-radius: 6px;
            font-size: 14px;
            border: 1px solid #eaf1fc;
        }

        .order-items-table th,
        .order-items-table td {
            padding: 7px 16px !important;
            border-top: none;
        }

        .order-items-table th {
            background: #e4efff;
            font-weight: 600;
        }

        /* Modal improvements */
        .modal-content {
            border-radius: 17px;
            box-shadow: 0 4px 32px 0 rgba(56, 112, 255, .09);
        }

        .modal-title {
            font-weight: 700;
            color: #156ec4;
        }

        .fw-bold,
        .card-title {
            font-weight: 700 !important;
            color: #124378;
        }

        .main-section.default-page {
            background: #f7fbfc;
        }

        /* Improved Order Status Design */
        .order-status-badge {
            display: inline-flex;
            align-items: center;
            font-weight: 700;
            font-size: 15px;
            border-radius: 22px;
            padding: 6px 18px 6px 14px;
            letter-spacing: 0.03em;
            background: #f5f7fa;
            min-width: 120px;
            justify-content: left;
            gap: 0.5em;
            border: 1px solid #e6eaf1;
            box-shadow: 0 1px 3px 0 rgba(60, 72, 88, .05);
            transition: background .2s,border .2s;
        }
        .order-status-badge .status-dot {
            height: 12px;
            width: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 7px;
            transition: background .2s;
            border: 2px solid #fff;
            box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .04);
        }
        /* Status hues */
        .order-status-delivered   { background: linear-gradient(90deg,#e0fbe7 40%, #d2ffe5 100%); color: #067a35; border-color:#bdf1cb;}
        .order-status-delivered .status-dot { background: #3dca76;}
        .order-status-completed  { background: linear-gradient(90deg,#e0fbe7 40%, #d2ffe5 100%); color: #067a35; border-color:#bdf1cb;}
        .order-status-completed .status-dot { background: #31d86e;}
        .order-status-pending    { background: linear-gradient(90deg,#f1f5fa 40%, #f7e4cf 100%); color: #a96d04; border-color:#f5e6b0;}
        .order-status-pending .status-dot { background: #f9bd55;}
        .order-status-processing { background: linear-gradient(90deg,#f6fafe 40%, #defcfb 100%); color: #1b81cb; border-color:#b7e3fa;}
        .order-status-processing .status-dot { background: #2bb7ea;}
        .order-status-confirmed  { background: linear-gradient(90deg,#fdfbe6 40%, #f4ffd6 100%); color: #588240; border-color:#e5f7b9;}
        .order-status-confirmed .status-dot { background: #c5d64a;}
        .order-status-shipped    { background: linear-gradient(90deg,#e7f3ff 40%, #dbf3ff 100%); color: #246ef3; border-color:#bbd9fa;}
        .order-status-shipped .status-dot { background: #1b87e9;}
        .order-status-out_for_delivery { background: linear-gradient(90deg,#ffe7ef 40%, #e0f2ff 100%); color: #6a549b; border-color:#dad1ea;}
        .order-status-out_for_delivery .status-dot { background: #b280db;}
        .order-status-cancelled,
        .order-status-canceled,
        .order-status-failed,
        .order-status-refunded  { background: linear-gradient(90deg,#ffe8e8 40%, #f8d4e4 100%);
            color: #bb2323; border-color:#f0b2b2; }
        .order-status-cancelled .status-dot,
        .order-status-canceled .status-dot,
        .order-status-failed .status-dot,
        .order-status-refunded .status-dot { background: #e55050; }
        .order-status-success { background: linear-gradient(90deg,#e0fbe7 40%, #d2ffe5 100%); color: #067a35; border-color:#bdf1cb;}
        .order-status-success .status-dot { background: #30d158;}
        .order-status-secondary { background: #f7f8fa; color: #6d7892; border-color: #e6eaf1;}
        .order-status-secondary .status-dot { background: #bababa;}
        .order-status-default .status-dot { background: #bababa;}
        .order-status-default { background: #f7f8fa; color: #447; border-color: #e6eaf1;}
        .order-status-badge .status-label {
            font-size: 15px;
            white-space: nowrap;
            font-weight: 700;
            vertical-align: middle;
        }


        /* Mobile responsive enhancements */
        @media (max-width: 991px) {
            .my__account--section__inner {
                padding: 1.2rem .6rem;
            }

            .tab-pane {
                min-height: 0;
            }
        }

        @media (max-width:576px) {
            .nav-pills .nav-link {
                font-size: 15px;
                padding: .6rem .6rem;
            }

            .my__account--section__inner {
                padding: .8rem .2rem;
            }

            .card,
            .modal-content {
                border-radius: 9px;
            }
            .order-status-badge {
                font-size: 13px;
                padding: 5px 9px 5px 10px;
                min-width: 73px;
            }
        }
    </style>

    <div class="breadcumb-wrapper " data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">My-Account</h1>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{ route('index') }}">Home</a></li>
                        <li>MyAccount</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="about-page-area py-5">
        <section class="main-section default-page">
            <div class="container">
                <div class="my__account--section__inner">
                    <div class="row gy-4">
                        <!-- Tabs Navigation -->
                        <div class="col-12 col-lg-3 mb-4 mb-lg-0">
                            <div class="nav flex-column nav-pills me-3 shadow-sm p-3 bg-white rounded-3" id="v-pills-tab"
                                 role="tablist" aria-orientation="vertical" style="border: 1.5px solid #e4efff;">
                                <button class="nav-link active mb-2 text-start d-flex align-items-center"
                                        id="v-pills-Profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-Profile"
                                        type="button" role="tab" aria-controls="v-pills-Profile" aria-selected="true">
                                    <span class="me-2" style="min-width: 24px; text-align: left;"><i
                                            class="fas fa-user"></i></span>
                                    Profile
                                </button>
                                <button class="nav-link mb-2 text-start d-flex align-items-center" id="v-pills-Orders-tab"
                                        data-bs-toggle="pill" data-bs-target="#v-pills-Orders" type="button" role="tab"
                                        aria-controls="v-pills-Orders" aria-selected="false">
                                    <span class="me-2" style="min-width: 24px; text-align: left;"><i
                                            class="fas fa-shopping-bag"></i></span>
                                    My Orders
                                </button>
                                <button class="nav-link mb-2 text-start d-flex align-items-center" id="v-pills-Wishlist-tab"
                                        data-bs-toggle="pill" data-bs-target="#v-pills-Wishlist" type="button" role="tab"
                                        aria-controls="v-pills-Wishlist" aria-selected="false">
                                    <span class="me-2" style="min-width: 24px; text-align: left;"><i
                                            class="fas fa-heart text-danger"></i></span>
                                    My Wishlist
                                </button>
                                <button class="nav-link mb-2 text-start d-flex align-items-center" id="v-pills-Change-tab"
                                        data-bs-toggle="pill" data-bs-target="#v-pills-Change" type="button" role="tab"
                                        aria-controls="v-pills-Change" aria-selected="false">
                                    <span class="me-2" style="min-width: 24px; text-align: left;"><i
                                            class="fas fa-lock"></i></span>
                                    Change Password
                                </button>
                                <button class="nav-link mb-2 text-start d-flex align-items-center" id="v-pills-Reviews-tab"
                                        data-bs-toggle="pill" data-bs-target="#v-pills-Reviews" type="button" role="tab"
                                        aria-controls="v-pills-Reviews" aria-selected="false">
                                    <span class="me-2" style="min-width: 24px; text-align: left;"><i
                                            class="fas fa-star"></i></span>
                                    My Reviews
                                </button>
                                <button class="nav-link mb-2 text-start d-flex align-items-center"
                                        id="v-pills-ManageAddress-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-ManageAddress" type="button" role="tab"
                                        aria-controls="v-pills-ManageAddress" aria-selected="false">
                                    <span class="me-2" style="min-width: 24px; text-align: left;"><i
                                            class="fas fa-map-marker-alt"></i></span>
                                    Manage Address
                                </button>
                                <form action="{{ route('user-logout') }}" method="get" style="display:inline;">
                                    @csrf
                                    <button type="submit"
                                            style="background: linear-gradient(90deg,#e83f4f 80%,#ef6690 100%); color:white; height:42px; border:none; width:100%; border-radius:7px;"
                                            class="mt-3 fw-bold shadow-sm text-start d-flex align-items-center">
                                        <span class="me-2" style="min-width: 24px; text-align: left;"><i
                                                class="fas fa-sign-out-alt"></i></span>
                                        Logout
                                    </button>
                                </form>
                            </div>
                        </div>

                        <!-- Tabs Content -->
                        <div class="col-12 col-lg-9">
                            <div class="tab-content" id="v-pills-tabContent">

                                <!-- Alerts -->
                                @if (Session::has('flash_success'))
                                    <div class="alert alert-success alert-dismissible fade show shadow-sm">
                                        <i class="fas fa-check-circle me-2"></i>
                                        {{ Session::get('flash_success') }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                    </div>
                                @endif
                                @if (Session::has('flash_error'))
                                    <div class="alert alert-danger alert-dismissible fade show shadow-sm">
                                        <i class="fas fa-times-circle me-2"></i>
                                        {{ Session::get('flash_error') }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                    </div>
                                @endif

                                <!-- Profile Tab -->
                                <div class="tab-pane fade show active" id="v-pills-Profile" role="tabpanel"
                                     aria-labelledby="v-pills-Profile-tab">
                                    <div class="card shadow-sm mb-4 mb-lg-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h5 class="card-title mb-0">
                                                    <i class="fas fa-user-edit me-2 text-primary"></i>My Profile
                                                </h5>
                                                <button type="button" class="btn btn-primary btn-sm rounded-pill"
                                                        onclick="openEditProfileModal()" style="font-weight:600;">
                                                    <i class="fas fa-edit"></i> Edit
                                                </button>
                                            </div>
                                            <table class="table table-bordered table-striped mb-0 shadow-xs"
                                                   style="border-radius:8px;">
                                                <tbody>
                                                @if ($user)
                                                    <tr>
                                                        <th width="37%">First Name</th>
                                                        <td>{{ $user->first_name }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Email</th>
                                                        <td>{{ $user->email }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Phone Number</th>
                                                        <td>{{ $user->phone }}</td>
                                                    </tr>
                                                @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <!-- Edit Profile Modal -->
                                    <div class="modal fade" id="editProfileModal" tabindex="-1"
                                         aria-labelledby="editProfileModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <form action="{{ route('myaccount') }}" method="post">
                                                    @csrf
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="editProfileModalLabel">
                                                            <i class="fas fa-edit me-2"></i>Edit Profile
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        @if (Session::has('flash_success'))
                                                            <div class="alert alert-success alert-dismissible fade show">
                                                                <i class="fas fa-check-circle me-2"></i>
                                                                {{ Session::get('flash_success') }}
                                                                <button type="button" class="btn-close"
                                                                        data-bs-dismiss="alert"></button>
                                                            </div>
                                                        @endif
                                                        @if (Session::has('flash_error'))
                                                            <div class="alert alert-danger alert-dismissible fade show">
                                                                <i class="fas fa-times-circle me-2"></i>
                                                                {{ Session::get('flash_error') }}
                                                                <button type="button" class="btn-close"
                                                                        data-bs-dismiss="alert"></button>
                                                            </div>
                                                        @endif
                                                        <div class="row g-3">
                                                            <div class="col-md-6">
                                                                <label class="form-label">First Name <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="text" class="form-control"
                                                                       name="first_name" required
                                                                       value="{{ @$user->first_name }}">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Email <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="email" class="form-control" required
                                                                       name="email" value="{{ @$user->email }}">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Phone Number <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" name="phone"
                                                                       maxlength="10"
                                                                       oninput="this.value = this.value.replace(/\D/g,'')"
                                                                       required value="{{ @$user->phone }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-success me-2">
                                                            <i class="fas fa-save"></i> Update
                                                        </button>
                                                        <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">
                                                            Cancel
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Modal -->
                                </div>

                                <!-- Orders Tab -->
                                @php
                                    $orders = \App\Models\Order::with(['orderItems.product', 'orderItems.vendorProduct'])
                                        ->where('user_id', $user->id)
                                        ->orderBy('created_at', 'desc')
                                        ->get();
                                @endphp
                                <div class="tab-pane fade" id="v-pills-Orders" role="tabpanel"
                                     aria-labelledby="v-pills-Orders-tab">
                                    <div class="card shadow-sm mb-3">
                                        <div class="card-body">
                                            <h5 class="card-title mb-3">
                                                <i class="fas fa-shopping-bag me-2 text-primary"></i> My Orders
                                            </h5>
                                            @if ($orders->count())
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-hover align-middle shadow-xs"
                                                           style="border-radius:8px;">
                                                        <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Order ID</th>
                                                            <th>Status</th>
                                                            <th>Total Paid (₹)</th>
                                                            <th>Invoice</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        @foreach ($orders as $k => $order)
                                                            <tr>
                                                                <td>{{ $k + 1 }}</td>
                                                                <td style="font-family:monospace">
                                                                    {{ $order->order_number ?? $order->id }}
                                                                </td>
                                                                @php
                                                                    // Improved order status badge mapping
                                                                    $orderStatus = $order->order_status
                                                                        ?? (($order->payment_status ?? '') === 'paid' ? 'processing' : 'pending');
                                                                    $normalizedStatus = strtolower($orderStatus);

                                                                    $orderStatusConfig = [
                                                                        // status => [iconClass, label override/translate, badge css class]
                                                                        'delivered'         => ['fa-truck','Delivered',   'order-status-badge order-status-delivered'],
                                                                        'completed'         => ['fa-check-circle','Completed','order-status-badge order-status-completed'],
                                                                        'processing'        => ['fa-sync-alt','Processing','order-status-badge order-status-processing'],
                                                                        'pending'           => ['fa-clock','Pending','order-status-badge order-status-pending'],
                                                                        'confirmed'         => ['fa-clipboard-check','Confirmed','order-status-badge order-status-confirmed'],
                                                                        'shipped'           => ['fa-shipping-fast','Shipped','order-status-badge order-status-shipped'],
                                                                        'out_for_delivery'  => ['fa-truck-loading','Out for Delivery','order-status-badge order-status-out_for_delivery'],
                                                                        'cancelled'         => ['fa-ban','Cancelled','order-status-badge order-status-cancelled'],
                                                                        'canceled'          => ['fa-ban','Cancelled','order-status-badge order-status-canceled'],
                                                                        'failed'            => ['fa-times-circle','Failed','order-status-badge order-status-failed'],
                                                                        'refunded'          => ['fa-undo','Refunded','order-status-badge order-status-refunded'],
                                                                        'success'           => ['fa-check-circle','Success','order-status-badge order-status-success'],
                                                                    ];
                                                                    $icon = 'fa-circle';
                                                                    $orderStatusLabel = ucfirst(str_replace('_', ' ', $normalizedStatus));
                                                                    $badgeClass = 'order-status-badge order-status-default';

                                                                    // Try mapping
                                                                    if(array_key_exists($normalizedStatus, $orderStatusConfig)){
                                                                        [$icon, $label, $badgeClass] = $orderStatusConfig[$normalizedStatus];
                                                                        $orderStatusLabel = $label;
                                                                    }
                                                                @endphp
                                                                <td>
                                                                        <span class="{{ $badgeClass }}">
                                                                            <span class="status-dot"></span>
                                                                            <i class="fas {{ $icon }} me-1" style="font-size: 15px;"></i>
                                                                            <span class="status-label">
                                                                                {{ $orderStatusLabel }}
                                                                            </span>
                                                                        </span>
                                                                </td>
                                                                <td>
                                                                    ₹{{ number_format($order->total_amount ?? 0, 2) }}
                                                                </td>
                                                                <td>
                                                                    <a href="{{ route('invoice.generate', $order->id) }}"
                                                                       class="btn btn-sm btn-primary"
                                                                       target="_blank"
                                                                       title="Generate Invoice">
                                                                        <i class="fas fa-file-invoice"></i> Generate Invoice
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @else
                                                <div class="alert alert-info mb-0">
                                                    <i class="fas fa-info-circle me-2"></i>
                                                    You have not placed any orders yet.
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <!-- End Orders Tab -->


                                <!-- Wishlist Tab -->
                                @php
                                    $wishlistItems = \App\Models\Wishlist::with('product')
                                        ->where('user_id', $user->id)
                                        ->latest()
                                        ->get();
                                @endphp
                                <div class="tab-pane fade" id="v-pills-Wishlist" role="tabpanel"
                                     aria-labelledby="v-pills-Wishlist-tab">
                                    <div class="card shadow-sm">
                                        <div class="card-body">
                                            <h5 class="card-title mb-3"><i class="fas fa-heart me-2 text-danger"></i> My
                                                Wishlist</h5>
                                            @if ($wishlistItems->count() > 0)
                                                <div class="table-responsive">
                                                    <table
                                                        class="table table-bordered table-striped align-middle shadow-xs"
                                                        style="border-radius:8px;">
                                                        <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Product</th>
                                                            <th>Price</th>
                                                            <th>Added On</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        @foreach ($wishlistItems as $key => $item)
                                                            <tr>
                                                                <td>{{ $key + 1 }}</td>
                                                                <td>
                                                                    @if ($item->product)
                                                                        <a href="{{ route('productsdetails', $item->product->id) }}"
                                                                           target="_blank"
                                                                           class="fw-semibold text-primary">
                                                                            {{ $item->product->product_name }}
                                                                        </a>
                                                                    @else
                                                                        <span class="text-muted">Product
                                                                                Unavailable</span>
                                                                    @endif
                                                                </td>
                                                                <td>
                                                                    @if ($item->product && isset($item->product->sp))
                                                                        @php
                                                                            $accountSp = $item->product->sp ?? 0;
                                                                            $accountGst = $item->product->gst ?? 0;
                                                                            $accountPriceWithGst = $accountSp + ($accountSp * $accountGst / 100);
                                                                        @endphp
                                                                        <span class="fw-bold">₹{{ number_format($accountPriceWithGst, 2) }}</span>
                                                                        <small class="gst-note" style="font-size: 10px; color: #666; display: block;">({{ $accountGst }}% GST)</small>
                                                                    @elseif ($item->product && isset($item->product->price))
                                                                        @php
                                                                            $accountSp = $item->product->price ?? 0;
                                                                            $accountGst = $item->product->gst ?? 0;
                                                                            $accountPriceWithGst = $accountSp + ($accountSp * $accountGst / 100);
                                                                        @endphp
                                                                        <span class="fw-bold">₹{{ number_format($accountPriceWithGst, 2) }}</span>
                                                                        <small class="gst-note" style="font-size: 10px; color: #666; display: block;">({{ $accountGst }}% GST)</small>
                                                                    @else
                                                                        <span class="text-muted">N/A</span>
                                                                    @endif
                                                                </td>
                                                                <td>{{ \Carbon\Carbon::parse($item->created_at)->format('d M Y h:ia') }}
                                                                </td>

                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @else
                                                <div class="alert alert-info mb-0">
                                                    <i class="fas fa-info-circle me-2"></i>
                                                    Your wishlist is empty.
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <!-- End Wishlist Tab -->


                                <!-- Change Password Tab -->
                                <div class="tab-pane fade" id="v-pills-Change" role="tabpanel"
                                     aria-labelledby="v-pills-Change-tab">
                                    <div class="card shadow-sm">
                                        <div class="card-body">
                                            <h5 class="card-title mb-3">
                                                <i class="fas fa-lock me-2"></i> Change Password
                                            </h5>

                                            {{-- Success Message --}}
                                            @if (session('success'))
                                                <div class="alert alert-success shadow-sm">
                                                    <i class="fas fa-check-circle me-2"></i>
                                                    {{ session('success') }}
                                                </div>
                                            @endif

                                            @if ($errors->any())
                                                <div class="alert alert-danger shadow-sm">
                                                    <ul class="mb-0">
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif

                                            <form action="{{ route('changepassword') }}" method="post">
                                                @csrf

                                                <div class="row g-3">
                                                    {{-- Old Password --}}
                                                    <div class="col-md-6">
                                                        <label class="form-label">Old Password <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <input type="password"
                                                                   class="form-control @error('current_password') is-invalid @enderror"
                                                                   id="current_password" name="current_password" required>
                                                            <span class="input-group-text"
                                                                  onclick="togglePassword('current_password', this)"
                                                                  style="cursor:pointer"
                                                                  title="Show/Hide Password">👁</span>
                                                        </div>
                                                        @error('current_password')
                                                        <div class="invalid-feedback d-block">
                                                            {{ $message }}
                                                        </div>
                                                        @enderror
                                                    </div>

                                                    {{-- New Password --}}
                                                    <div class="col-md-6">
                                                        <label class="form-label">New Password <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <input type="password"
                                                                   class="form-control @error('new_password') is-invalid @enderror"
                                                                   id="new_password" name="new_password" required>
                                                            <span class="input-group-text"
                                                                  onclick="togglePassword('new_password', this)"
                                                                  style="cursor:pointer"
                                                                  title="Show/Hide Password">👁</span>
                                                        </div>
                                                        @error('new_password')
                                                        <div class="invalid-feedback d-block">
                                                            {{ $message }}
                                                        </div>
                                                        @enderror
                                                    </div>

                                                    {{-- Confirm Password --}}
                                                    <div class="col-md-6">
                                                        <label class="form-label">Confirm Password <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <input type="password"
                                                                   class="form-control @error('password_confirmation') is-invalid @enderror"
                                                                   id="password_confirmation" name="password_confirmation"
                                                                   required>
                                                            <span class="input-group-text"
                                                                  onclick="togglePassword('password_confirmation', this)"
                                                                  style="cursor:pointer"
                                                                  title="Show/Hide Password">👁</span>
                                                        </div>
                                                        @error('password_confirmation')
                                                        <div class="invalid-feedback d-block">
                                                            {{ $message }}
                                                        </div>
                                                        @enderror
                                                    </div>

                                                    {{-- Buttons --}}
                                                    <div class="col-12 d-flex gap-3 justify-content-start mt-3">
                                                        <button type="submit" class="btn btn-success me-2">
                                                            <i class="fas fa-save"></i> Update
                                                        </button>
                                                        <button type="reset" class="btn btn-secondary">Cancel</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- My Reviews Tab -->
                                @php
                                    $myReviews = \App\Models\Review::with('product')
                                        ->where('user_id', $user->id)
                                        ->get();
                                @endphp
                                <div class="tab-pane fade" id="v-pills-Reviews" role="tabpanel"
                                     aria-labelledby="v-pills-Reviews-tab">
                                    <div class="card shadow-sm">
                                        <div class="card-body">
                                            <h5 class="card-title mb-3"><i class="fas fa-star me-2 text-warning"></i> My
                                                Reviews</h5>
                                            @if ($myReviews->count() > 0)
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-striped shadow-xs"
                                                           style="border-radius:8px;">
                                                        <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Product</th>
                                                            <th>Rating</th>
                                                            <th>Message</th>
                                                            <th>Date</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        @foreach ($myReviews as $key => $review)
                                                            <tr>
                                                                <td>{{ $key + 1 }}</td>
                                                                <td>
                                                                    @if ($review->product)
                                                                        <a href="{{ route('productsdetails', $review->product_id) }}"
                                                                           target="_blank"
                                                                           class="fw-semibold text-primary">{{ $review->product->product_name }}</a>
                                                                    @else
                                                                        N/A
                                                                    @endif
                                                                </td>
                                                                <td>
                                                                    {{-- Star ratings --}}
                                                                    @php
                                                                        $rating = (int) $review->rating;
                                                                    @endphp
                                                                    <span class="text-warning">
                                                                            @for ($i = 1; $i <= 5; $i++)
                                                                            @if ($i <= $rating)
                                                                                <i class="fas fa-star"></i>
                                                                            @else
                                                                                <i class="far fa-star"></i>
                                                                            @endif
                                                                        @endfor
                                                                        </span>
                                                                    <span
                                                                        class="ms-1">({{ $review->rating }})</span>
                                                                </td>
                                                                <td>{{ $review->message }}</td>
                                                                <td>{{ \Carbon\Carbon::parse($review->created_at)->format('d M Y') }}
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @else
                                                <div class="alert alert-info mb-0">
                                                    <i class="fas fa-info-circle me-2"></i>
                                                    You have not submitted any reviews yet.
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <!-- Manage Address Tab -->
                                <div class="tab-pane fade" id="v-pills-ManageAddress" role="tabpanel"
                                     aria-labelledby="v-pills-ManageAddress-tab">
                                    <div class="card shadow-sm">
                                        <div class="card-body">
                                            <h5 class="card-title mb-3"><i
                                                    class="fas fa-map-marked-alt text-primary me-2"></i> Manage Address
                                            </h5>
                                            @php
                                                $addresses = \App\Models\Address::where('user_id', $user->id)
                                                    ->latest()
                                                    ->get();
                                            @endphp

                                            {{-- Show success message if address is added --}}
                                            @if (session('flash_success'))
                                                <div class="alert alert-success shadow-sm">
                                                    <i class="fas fa-check-circle me-2"></i>
                                                    {{ session('flash_success') }}
                                                </div>
                                            @endif

                                            @if ($addresses && $addresses->count() > 0)
                                                <div class="table-responsive">
                                                    <table
                                                        class="table table-bordered table-striped align-middle shadow-xs"
                                                        style="border-radius:8px;">
                                                        <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Name</th>
                                                            <th>Phone</th>
                                                            <th>Address</th>
                                                            <th>Pin Code</th>
                                                            <th>City</th>
                                                            <th>State</th>
                                                            <th>Type</th>
                                                            <th>Actions</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        @foreach ($addresses as $key => $address)
                                                            <tr>
                                                                <td>{{ $key + 1 }}</td>
                                                                <td>{{ $address->name }}</td>
                                                                <td>{{ $address->phone }}</td>
                                                                <td>{{ $address->address }}</td>
                                                                <td>{{ $address->pincode }}</td>
                                                                <td>{{ $address->city }}</td>
                                                                <td>{{ $address->state }}</td>
                                                                <td>{{ ucfirst($address->address_type ?? 'N/A') }}</td>
                                                                <td>
                                                                    <div class="d-flex gap-2">
                                                                        <button class="btn btn-sm btn-info px-3 py-2"
                                                                                data-bs-toggle="modal"
                                                                                data-bs-target="#editAddressModal{{ $address->id }}"
                                                                                title="Edit address"
                                                                                style="font-size: 0.95rem; min-width:38px; min-height:38px;">
                                                                            <i class="fa fa-edit"
                                                                               style="font-size:16px;"></i>
                                                                        </button>
                                                                        <form
                                                                            action="{{ route('delete-address', $address->id ?? 0) }}"
                                                                            method="POST" style="display:inline;">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit"
                                                                                    class="btn btn-sm btn-danger px-3 py-2"
                                                                                    onclick="return confirm('Are you sure you want to delete this address?')"
                                                                                    title="Delete address"
                                                                                    style="font-size: 0.95rem; min-width:38px; min-height:38px;">
                                                                                <i class="fa fa-trash"
                                                                                   style="font-size:16px;"></i>
                                                                            </button>
                                                                        </form>
                                                                    </div>
                                                                </td>
                                                            </tr>

                                                            <!-- Edit Address Modal -->
                                                            <div class="modal fade"
                                                                 id="editAddressModal{{ $address->id }}"
                                                                 tabindex="-1"
                                                                 aria-labelledby="editAddressModalLabel{{ $address->id }}"
                                                                 aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered">
                                                                    <div class="modal-content">
                                                                        <form
                                                                            action="{{ route('edit-address', $address->id ?? 0) }}"
                                                                            method="POST" class="edit-address-form"
                                                                            id="editAddressForm{{ $address->id }}"
                                                                            novalidate>
                                                                            @csrf
                                                                            @method('PUT')
                                                                            <div class="modal-header">
                                                                                <h5 class="modal-title"
                                                                                    id="editAddressModalLabel{{ $address->id }}">
                                                                                    <i
                                                                                        class="fas fa-map-marker-alt me-2"></i>Edit
                                                                                    Address
                                                                                </h5>
                                                                                <button type="button"
                                                                                        class="btn-close"
                                                                                        data-bs-dismiss="modal"
                                                                                        aria-label="Close"></button>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <div class="row">
                                                                                    <div class="col-md-6">
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">Name
                                                                                                <span
                                                                                                    class="text-danger">*</span></label>
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   name="name"
                                                                                                   value="{{ $address->name }}"
                                                                                                   required
                                                                                                   minlength="2">
                                                                                            <div
                                                                                                class="invalid-feedback">
                                                                                                Please enter a valid
                                                                                                name (min 2 characters).
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">Phone
                                                                                                <span
                                                                                                    class="text-danger">*</span></label>
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   name="phone"
                                                                                                   value="{{ $address->phone }}"
                                                                                                   required
                                                                                                   pattern="^[0-9\-\+\s\(\)]{7,20}$">
                                                                                            <div
                                                                                                class="invalid-feedback">
                                                                                                Please enter a valid
                                                                                                phone number.</div>
                                                                                        </div>
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">Pin
                                                                                                Code <span
                                                                                                    class="text-danger">*</span></label>
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   name="pincode"
                                                                                                   value="{{ $address->pincode }}"
                                                                                                   required
                                                                                                   pattern="^[0-9]{4,20}$">
                                                                                            <div
                                                                                                class="invalid-feedback">
                                                                                                Please enter a valid pin
                                                                                                code.</div>
                                                                                        </div>
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">Address
                                                                                                <span
                                                                                                    class="text-danger">*</span></label>
                                                                                            <textarea class="form-control" name="address" required minlength="5">{{ $address->address }}</textarea>
                                                                                            <div
                                                                                                class="invalid-feedback">
                                                                                                Please enter a valid
                                                                                                address (min 5
                                                                                                characters).</div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-md-6">
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">State
                                                                                                <span
                                                                                                    class="text-danger">*</span></label>
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   name="state"
                                                                                                   value="{{ $address->state }}"
                                                                                                   required
                                                                                                   minlength="2">
                                                                                            <div
                                                                                                class="invalid-feedback">
                                                                                                Please enter a valid
                                                                                                state.</div>
                                                                                        </div>
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">City
                                                                                                <span
                                                                                                    class="text-danger">*</span></label>
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   name="city"
                                                                                                   value="{{ $address->city }}"
                                                                                                   required
                                                                                                   minlength="2">
                                                                                            <div
                                                                                                class="invalid-feedback">
                                                                                                Please enter a valid
                                                                                                city.</div>
                                                                                        </div>
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">Type
                                                                                                <span
                                                                                                    class="text-danger">*</span></label>
                                                                                            <select
                                                                                                class="form-control"
                                                                                                name="address_type"
                                                                                                required>
                                                                                                <option value="home"
                                                                                                    {{ $address->address_type == 'home' ? 'selected' : '' }}>
                                                                                                    Home</option>
                                                                                                <option value="work"
                                                                                                    {{ $address->address_type == 'work' ? 'selected' : '' }}>
                                                                                                    Work</option>
                                                                                                <option value="other"
                                                                                                    {{ $address->address_type == 'other' ? 'selected' : '' }}>
                                                                                                    Other</option>
                                                                                            </select>
                                                                                            <div
                                                                                                class="invalid-feedback">
                                                                                                Please select an address
                                                                                                type.</div>
                                                                                        </div>
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">Created
                                                                                                At</label>
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   value="{{ $address->created_at }}"
                                                                                                   readonly>
                                                                                        </div>
                                                                                        <div class="mb-3">
                                                                                            <label
                                                                                                class="form-label">Updated
                                                                                                At</label>
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   value="{{ $address->updated_at }}"
                                                                                                   readonly>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="submit"
                                                                                        class="btn btn-success me-2"><i
                                                                                        class="fas fa-save"></i>
                                                                                    Update</button>
                                                                                <button type="button"
                                                                                        class="btn btn-secondary"
                                                                                        data-bs-dismiss="modal">Cancel</button>
                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <script>
                                                                document.addEventListener("DOMContentLoaded", function() {
                                                                    var form = document.getElementById('editAddressForm{{ $address->id }}');
                                                                    if (form) {
                                                                        form.addEventListener('submit', function(event) {
                                                                            if (!form.checkValidity()) {
                                                                                event.preventDefault();
                                                                                event.stopPropagation();
                                                                            }
                                                                            form.classList.add('was-validated');
                                                                        }, false);
                                                                    }
                                                                });
                                                            </script>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @else
                                                <div class="alert alert-info mb-0">
                                                    <i class="fas fa-info-circle me-2"></i>
                                                    No addresses found.
                                                </div>
                                            @endif

                                            <!-- Add New Address Button -->
                                            <button type="button" class="btn btn-success mt-3 rounded-pill shadow-sm"
                                                    data-bs-toggle="modal" data-bs-target="#addAddressModal">
                                                <i class="fas fa-plus-circle"></i> Add New Address
                                            </button>

                                            <!-- Add Address Modal -->
                                            <div class="modal fade" id="addAddressModal" tabindex="-1"
                                                 aria-labelledby="addAddressModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <form action="{{ route('add-address') }}" method="POST">
                                                            @csrf
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="addAddressModalLabel"><i
                                                                        class="fas fa-map-pin me-2"></i>Add New Address
                                                                </h5>
                                                                <button type="button" class="btn-close"
                                                                        data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Name <span
                                                                                    class="text-danger">*</span></label>
                                                                            <input type="text" class="form-control"
                                                                                   name="name" required>
                                                                        </div>
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Phone <span
                                                                                    class="text-danger">*</span></label>
                                                                            <input type="text" class="form-control"
                                                                                   name="phone" required
                                                                                   pattern="^[0-9\-\+\s\(\)]{7,20}$">
                                                                        </div>
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Pin Code <span
                                                                                    class="text-danger">*</span></label>
                                                                            <input type="text" class="form-control"
                                                                                   name="pincode" required
                                                                                   pattern="^[0-9]{4,20}$">
                                                                        </div>
                                                                        <div class="mb-3">
                                                                            <label class="form-label">State <span
                                                                                    class="text-danger">*</span></label>
                                                                            <input type="text" class="form-control"
                                                                                   name="state" required>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="mb-3">
                                                                            <label class="form-label">City <span
                                                                                    class="text-danger">*</span></label>
                                                                            <input type="text" class="form-control"
                                                                                   name="city" required>
                                                                        </div>
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Address <span
                                                                                    class="text-danger">*</span></label>
                                                                            <textarea class="form-control" name="address" required></textarea>
                                                                        </div>
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Address Type <span
                                                                                    class="text-danger">*</span></label>
                                                                            <select class="form-control"
                                                                                    name="address_type" required>
                                                                                <option value="">Select Type</option>
                                                                                <option value="home">Home</option>
                                                                                <option value="work">Work</option>
                                                                                <option value="other">Other</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="submit" class="btn btn-success me-2"><i
                                                                        class="fas fa-save"></i> Add</button>
                                                                <button type="button" class="btn btn-secondary"
                                                                        data-bs-dismiss="modal">Cancel</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- End Add Address Modal -->
                                        </div>
                                    </div>
                                </div>
                                <script>
                                    @if (session('flash_success'))
                                    document.addEventListener('DOMContentLoaded', function() {
                                        document.getElementById('v-pills-ManageAddress-tab')?.click();
                                        let section = document.getElementById('v-pills-ManageAddress');
                                        if (section) {
                                            section.scrollIntoView({
                                                behavior: "smooth"
                                            });
                                        }
                                    });
                                    @endif
                                </script>
                                <!-- End Manage Address Tab -->

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

            <script>
                function togglePassword(inputId, el) {
                    const input = document.getElementById(inputId);
                    if (input.type === "password") {
                        input.type = "text";
                        el.innerText = "🙈";
                    } else {
                        input.type = "password";
                        el.innerText = "👁";
                    }
                }

                function openEditProfileModal() {
                    var modal = new bootstrap.Modal(document.getElementById('editProfileModal'));
                    modal.show();
                }
            </script>
        </section>
    </div>
@endsection