@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <!-- Customer Info Card -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <div class="text-center mb-4">
                        <img src="{{ $customer->profile_photo_url }}" alt="{{ $customer->name }}" 
                             class="rounded-circle avatar-xl">
                        <h4 class="mt-3 mb-0">{{ $customer->name }}</h4>
                        <p class="text-muted">{{ $customer->email }}</p>
                    </div>

                    <div class="mt-3">
                        <h6 class="text-muted text-uppercase">Customer Information</h6>
                        <div class="table-responsive">
                            <table class="table table-borderless mb-0 text-muted">
                                <tbody>
                                    <tr>
                                        <th scope="row">Member Since</th>
                                        <td>{{ $customer->created_at->format('M d, Y') }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Total Orders</th>
                                        <td>{{ $customer->orders->count() }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Total Spent</th>
                                        <td>₦{{ number_format($customer->orders->sum('total'), 2) }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Reviews</th>
                                        <td>{{ $customer->reviews->count() }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Orders & Reviews Tabs -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs nav-bordered mb-3">
                        <li class="nav-item">
                            <a href="#orders" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
                                Orders History
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#reviews" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                                Reviews
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane show active" id="orders">
                            <div class="table-responsive">
                                <table class="table table-centered mb-0">
                                    <thead>
                                        <tr>
                                            <th>Order ID</th>
                                            <th>Date</th>
                                            <th>Items</th>
                                            <th>Total</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($customer->orders as $order)
                                        <tr>
                                            <td>{{ $order->order_number }}</td>
                                            <td>{{ $order->created_at->format('M d, Y') }}</td>
                                            <td>{{ $order->items->count() }}</td>
                                            <td>₦{{ $order->formatted_total }}</td>
                                            <td>{!! $order->status_badge !!}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="tab-pane" id="reviews">
                            @foreach($customer->reviews as $review)
                            <div class="border-bottom pb-3 mb-3">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="mt-0">{{ $review->product->name }}</h5>
                                        <p class="text-warning mb-1">{{ $review->rating_stars }}</p>
                                        <p class="text-muted">{{ $review->comment }}</p>
                                        <small class="text-muted">Posted on {{ $review->created_at->format('M d, Y') }}</small>
                                    </div>
                                    <div class="dropdown">
                                        <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                            <i class="bi bi-three-dots-vertical"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <form action="{{ route('admin.customers.reviews.toggle-status', $review) }}" method="POST">
                                                @csrf
                                                <button type="submit" class="dropdown-item">
                                                    {{ $review->status ? 'Hide' : 'Show' }} Review
                                                </button>
                                            </form>
                                            <form action="{{ route('admin.customers.reviews.delete', $review) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="dropdown-item text-danger">Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection