@push('title')
    Customer Management
@endpush

<x-app-layout>
    <!-- Bootstrap CSS -->

    <!-- Bootstrap Bundle JS (includes Popper) -->

    @can('view_customer_management')
        <div class="container-fluid py-4">
            <!-- Success Alert -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert" id="success-alert">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Customer Info Row -->
            <div class="row g-4 mb-5">
                <!-- Customer Basic Info -->
                <div class="col-12 col-lg-4 min-h-card">
                    <div class="card border-0 shadow-sm ">
                        <div class="card-header text-white">
                            <h5 class="mb-0"><i class="fas fa-user me-2"></i>Customer Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                @if ($customers->profile_picture)
                                    <img src="{{ asset('assets/img/avatars/' . $customers->profile_picture) }}"
                                        class="rounded-circle img-fluid mb-3" alt="Profile Picture"
                                        style="width: 60px; height: 60px; object-fit: cover;">
                                @else
                                    <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                                        style="width: 120px; height: 120px;">
                                        <i class="fas fa-user fa-3x text-white"></i>
                                    </div>
                                @endif

                                <div class="mb-2">
                                    @if ($customers->is_blocked)
                                        <span class="badge bg-danger ">
                                            <i class="fas fa-ban me-1"></i>Blocked
                                        </span>
                                    @else
                                        <span class="badge bg-success ">
                                            <i class="fas fa-check-circle me-1"></i>Active
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="fw-semibold text-muted small">Full Name</label>
                                <p class="mb-0">{{ $customers->name }}</p>
                            </div>

                            <div class="mb-3">
                                <label class="fw-semibold text-muted small">Email Address</label>
                                <p class="mb-0">
                                    {{ $customers->email }}
                                    @if ($customers->email_verified_at)
                                        <span class="badge bg-success ms-2">Verified</span>
                                    @else
                                        <span class="badge bg-warning ms-2">Unverified</span>
                                    @endif
                                </p>
                            </div>

                            <div class="mb-3">
                                <label class="fw-semibold text-muted small">Registration Date</label>
                                <p class="mb-0">{{ $customers->created_at->format('M d, Y') }}</p>
                            </div>

                            <div class="mb-3">
                                <label class="fw-semibold text-muted small">Last Updated</label>
                                <p class="mb-0">{{ $customers->updated_at->format('M d, Y g:i A') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Customer Contact Info -->
                <div class="col-12 col-lg-4 min-h-card">
                    <div class="card border-0 shadow-sm ">
                        <div class="card-header text-white">
                            <h5 class="mb-0"><i class="fas fa-address-card me-2"></i>Contact Details</h5>
                        </div>
                        <div class="card-body">
                            @if ($customers->customerInfo)
                                <div class="mb-3">
                                    <label class="fw-semibold text-muted small">First Name</label>
                                    <p class="mb-0">{{ $customers->customerInfo->first_name ?? 'Not provided' }}</p>
                                </div>

                                <div class="mb-3">
                                    <label class="fw-semibold text-muted small">Last Name</label>
                                    <p class="mb-0">{{ $customers->customerInfo->last_name ?? 'Not provided' }}</p>
                                </div>

                                <div class="mb-3">
                                    <label class="fw-semibold text-muted small">Phone Number</label>
                                    <p class="mb-0">{{ $customers->customerInfo->phone ?? 'Not provided' }}</p>
                                </div>

                                <div class="mb-3">
                                    <label class="fw-semibold text-muted small">Address</label>
                                    <p class="mb-0">{{ $customers->customerInfo->address ?? 'Not provided' }}</p>
                                </div>

                                <div class="mb-3">
                                    <label class="fw-semibold text-muted small">City</label>
                                    <p class="mb-0">{{ $customers->customerInfo->city ?? 'Not provided' }}</p>
                                </div>

                                <div class="mb-3">
                                    <label class="fw-semibold text-muted small">State</label>
                                    <p class="mb-0">{{ $customers->customerInfo->state ?? 'Not provided' }}</p>
                                </div>

                                <div class="mb-3">
                                    <label class="fw-semibold text-muted small">Postal Code</label>
                                    <p class="mb-0">{{ $customers->customerInfo->postal_code ?? 'Not provided' }}</p>
                                </div>
                            @else
                                <div class="text-center text-muted">
                                    <i class="fas fa-info-circle fa-2x mb-3"></i>
                                    <p>No additional contact information available.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Customer Statistics -->
                <div class="col-12 col-lg-4 min-h-card">
                    <div class="card border-0 shadow-sm ">
                        <div class="card-header text-white">
                            <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Order Statistics</h5>
                        </div>
                        <div class="card-body">
                            <div class="row ">
                                <div class="col-6 mb-3 ">
                                    <div class="border-end">
                                        <h3 class="fw-bold text-primary mb-1">{{ $customers->orders->count() }}</h3>
                                        <p class="small text-muted mb-0">Total Orders</p>
                                    </div>
                                </div>
                                <div class="col-6 mb-3">
                                    <h3 class="fw-bold text-success mb-1">
                                        {{ number_format($customers->orders->sum('total_amount'), 2) }}
                                        {{ $config->currancy }}</h3>
                                    <p class="small text-muted mb-0">Total Spent</p>
                                </div>
                            </div>

                            <hr>

                            <div class="mb-3">
                                <div class="d-flex justify-content-between mb-1">
                                    <span class="small">Completed Orders</span>
                                    <span
                                        class="small fw-semibold">{{ $customers->orders->where('order_status', 'completed')->count() }}</span>
                                </div>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar bg-success"
                                        style="width: {{ $customers->orders->count() > 0 ? ($customers->orders->where('order_status', 'completed')->count() / $customers->orders->count()) * 100 : 0 }}%">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="d-flex justify-content-between mb-1">
                                    <span class="small">Pending Orders</span>
                                    <span
                                        class="small fw-semibold">{{ $customers->orders->where('order_status', 'pending')->count() }}</span>
                                </div>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar bg-warning"
                                        style="width: {{ $customers->orders->count() > 0 ? ($customers->orders->where('order_status', 'pending')->count() / $customers->orders->count()) * 100 : 0 }}%">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="d-flex justify-content-between mb-1">
                                    <span class="small">Cancelled Orders</span>
                                    <span
                                        class="small fw-semibold">{{ $customers->orders->where('order_status', 'cancelled')->count() }}</span>
                                </div>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar bg-danger"
                                        style="width: {{ $customers->orders->count() > 0 ? ($customers->orders->where('order_status', 'cancelled')->count() / $customers->orders->count()) * 100 : 0 }}%">
                                    </div>
                                </div>
                            </div>

                            @if ($customers->orders->count() > 0)
                                <div class="mt-3 pt-3 border-top">
                                    <div class="small text-muted">
                                        <strong>Average Order Value:</strong>
                                        {{ number_format($customers->orders->avg('total_amount'), 2) }}
                                        {{ $config->currancy }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order History -->
            <div class="row">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-shopping-cart me-2"></i>Order History</h5>
                            <span class="badge  text-dark">{{ $customers->orders->count() }} Orders</span>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive text-wrap">
                                @if ($customers->orders->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-striped table-borderless">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>Order ID</th>
                                                    <th>Date</th>
                                                    <th>Items</th>
                                                    <th>Total Amount</th>
                                                    <th>Payment Status</th>
                                                    <th>Order Status</th>
                                                    <th class="text-align-right">Payment Method</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($customers->orders->sortByDesc('created_at') as $order)
                                                    <tr>
                                                        <td><strong>#{{ $order->id }}</strong></td>
                                                        <td>{{ $order->created_at->format('M d, Y') }}</td>
                                                        <td>
                                                            <span class="badge bg-primary ">
                                                                {{ $order->orderItems->count() }} items
                                                            </span>
                                                        </td>
                                                        <td><strong>{{ number_format($order->total_amount, 2) }}
                                                                {{ $config->currancy }}</strong></td>
                                                        <td>
                                                            @php
                                                                $paymentClass = match ($order->payment_status) {
                                                                    'paid' => 'success',
                                                                    'pending' => 'warning',
                                                                    'failed' => 'danger',
                                                                    default => 'secondary',
                                                                };
                                                            @endphp
                                                            <span class="badge bg-{{ $paymentClass }} ">
                                                                {{ ucfirst($order->payment_status ?? 'N/A') }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            @php
                                                                $statusClass = match ($order->order_status) {
                                                                    'completed' => 'success',
                                                                    'pending' => 'warning',
                                                                    'processing' => 'info',
                                                                    'cancelled' => 'danger',
                                                                    default => 'secondary',
                                                                };
                                                            @endphp
                                                            <span class="badge bg-{{ $statusClass }} ">
                                                                {{ ucfirst($order->order_status) }}
                                                            </span>
                                                        </td>
                                                        <td class="text-right text-nowrap justify-content-end "
                                                            style="display: table-cell !important;text-align: right !important;">
                                                            {{ ucwords(str_replace('_', ' ', $order->payment_option) ?? 'N/A') }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <div class="text-center py-5">
                                        <i class="fas fa-shopping-cart fa-3x text-muted mb-3"></i>
                                        <h5 class="text-muted">No Orders Found</h5>
                                        <p class="text-muted">This customer hasn't placed any orders yet.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
    <script>
        $("#success-alert").fadeTo(5000, 500).slideUp(500, function() {
            $("#success-alert").slideUp(500);
        });
    </script>
</x-app-layout>