@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">

    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
        <div>
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                Customers Overview
            </h1>
            <p class="mt-1 text-sm text-gray-600">
                Manage registered customers and subscription status
            </p>
        </div>

        <a href="{{ route('admin.customers.create') }}"
           class="w-full sm:w-auto text-center px-5 py-3 bg-indigo-600 text-white font-medium rounded-xl shadow hover:bg-indigo-700 transition">
            + Add New Customer
        </a>
    </div>

    {{-- Stats Cards (Same Style as Dashboard) --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">

        <div class="bg-white rounded-xl shadow p-5 border">
            <p class="text-sm text-gray-500">Total Customers</p>
            <h2 class="text-2xl font-bold mt-1">{{ $customers->count() }}</h2>
        </div>

        <div class="bg-white rounded-xl shadow p-5 border">
            <p class="text-sm text-gray-500">Premium Customers</p>
            <h2 class="text-2xl font-bold mt-1 text-indigo-600">
                {{ $customers->where('customer_type','premium')->count() }}
            </h2>
        </div>

        <div class="bg-white rounded-xl shadow p-5 border">
            <p class="text-sm text-gray-500">Active Subscriptions</p>
            <h2 class="text-2xl font-bold mt-1 text-green-600">
                {{ $customers->where('subscription_active',1)->count() }}
            </h2>
        </div>

        <div class="bg-white rounded-xl shadow p-5 border">
            <p class="text-sm text-gray-500">Expired Accounts</p>
            <h2 class="text-2xl font-bold mt-1 text-red-600">
                {{ $customers->whereNotNull('subscription_expiry')->where('subscription_active',0)->count() }}
            </h2>
        </div>

    </div>

    {{-- Main Card Container --}}
    <div class="bg-white rounded-2xl shadow border">

        {{-- Table (Desktop) --}}
        <div class="hidden md:block overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600">Customer</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600">Type</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600">Subscription</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y">
                    @forelse ($customers as $customer)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 font-semibold">
                                {{ $customer->name }}
                            </td>

                            <td class="px-6 py-4 text-sm text-gray-600">
                                {{ $customer->email ?? '—' }}
                            </td>

                            {{-- Type Badge --}}
                            <td class="px-6 py-4">
                                @if($customer->customer_type === 'premium')
                                    <span class="px-3 py-1 text-xs font-semibold bg-indigo-100 text-indigo-700 rounded-full">
                                        Premium
                                    </span>
                                @else
                                    <span class="px-3 py-1 text-xs font-semibold bg-blue-100 text-blue-700 rounded-full">
                                        Normal
                                    </span>
                                @endif
                            </td>

                            {{-- Subscription --}}
                            <td class="px-6 py-4">
                                @if($customer->subscription_active)
                                    <span class="px-3 py-1 text-xs font-semibold bg-green-100 text-green-700 rounded-full">
                                        Active
                                    </span>
                                @elseif($customer->subscription_expiry)
                                    <span class="px-3 py-1 text-xs font-semibold bg-red-100 text-red-700 rounded-full">
                                        Expired
                                    </span>
                                @else
                                    <span class="px-3 py-1 text-xs font-semibold bg-yellow-100 text-yellow-700 rounded-full">
                                        Not Subscribed
                                    </span>
                                @endif
                            </td>

                            {{-- Actions --}}
                            <td class="px-6 py-4">
                                <div class="flex gap-2">
                                    <a href="{{route('admin.customers.show', $customer->id)}}" class="px-3 py-1.5 bg-gray-100 rounded hover:bg-gray-200">
                                        View
                                    </a>
                                    <a href="{{route('admin.customers.show', $customer->id)}}" class="px-3 py-1.5 bg-indigo-600 text-white rounded hover:bg-indigo-700">
                                        Ship
                                    </a>
                                </div>
                            </td>
                        </tr>

                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-6 text-center text-gray-500">
                                No customers found
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Mobile Card Layout --}}
        <div class="md:hidden divide-y">
            @foreach($customers as $customer)
                <div class="p-4">
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold">{{ $customer->name }}</h3>

                        @if($customer->customer_type === 'premium')
                            <span class="px-2 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full">
                                Premium
                            </span>
                        @else
                            <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full">
                                Normal
                            </span>
                        @endif
                    </div>

                    <p class="text-sm text-gray-600 mt-1">{{ $customer->email ?? '—' }}</p>

                    <div class="flex justify-between mt-3">

                        {{-- Subscription --}}
                        @if($customer->subscription_active)
                            <span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">
                                Active
                            </span>
                        @elseif($customer->subscription_expiry)
                            <span class="px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full">
                                Expired
                            </span>
                        @else
                            <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full">
                                Not Subscribed
                            </span>
                        @endif

                        <div class="flex gap-2">
                            <a href="{{route('admin.customers.show', $customer->id)}}" class="px-3 py-1 bg-gray-100 rounded">View</a>
                            <a href="#" class="px-3 py-1 bg-indigo-600 text-white rounded">Ship</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    </div>

</div>
@endsection