@extends('layouts.dashboard')

@section('title', 'Client Organizations')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Client Organizations</h4>
        <p class="text-muted mb-0">Manage client organizations and their subscriptions</p>
    </div>
    <div>
        <a href="{{ route('dashboard.clients.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-2"></i>Add Client
        </a>
    </div>
</div>

<!-- Stats Row -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-primary mb-0">{{ $stats['total'] }}</h3>
                <small class="text-muted">Total Clients</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-success mb-0">{{ $stats['active'] }}</h3>
                <small class="text-muted">Active</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-warning mb-0">{{ $stats['trial'] }}</h3>
                <small class="text-muted">On Trial</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-danger mb-0">{{ $stats['expired'] }}</h3>
                <small class="text-muted">Expired</small>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('dashboard.clients') }}" class="row g-3">
            <div class="col-md-4">
                <input type="text" class="form-control" name="search" placeholder="Search by name, email, or slug..." value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <select class="form-select" name="subscription_type">
                    <option value="">All Plans</option>
                    <option value="trial" {{ request('subscription_type') === 'trial' ? 'selected' : '' }}>Trial</option>
                    <option value="basic" {{ request('subscription_type') === 'basic' ? 'selected' : '' }}>Basic</option>
                    <option value="premium" {{ request('subscription_type') === 'premium' ? 'selected' : '' }}>Premium</option>
                    <option value="enterprise" {{ request('subscription_type') === 'enterprise' ? 'selected' : '' }}>Enterprise</option>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" name="status">
                    <option value="">All Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    <option value="expired" {{ request('status') === 'expired' ? 'selected' : '' }}>Expired</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-primary w-100">
                    <i class="bi bi-funnel me-1"></i>Filter
                </button>
            </div>
            @if(request()->hasAny(['search', 'subscription_type', 'status']))
            <div class="col-md-2">
                <a href="{{ route('dashboard.clients') }}" class="btn btn-outline-secondary w-100">
                    <i class="bi bi-x-circle me-1"></i>Clear
                </a>
            </div>
            @endif
        </form>
    </div>
</div>

<!-- Clients Table -->
<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead class="bg-light">
                <tr>
                    <th>Organization</th>
                    <th>Subscription</th>
                    <th>Users / Admins</th>
                    <th>Status</th>
                    <th>Expires</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($clients as $client)
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                {{ strtoupper(substr($client->name, 0, 1)) }}
                            </div>
                            <div>
                                <div class="fw-medium">{{ $client->name }}</div>
                                <small class="text-muted">{{ $client->email }}</small>
                            </div>
                        </div>
                    </td>
                    <td>
                        @php
                        $badgeClass = match($client->subscription_type) {
                        'trial' => 'bg-warning',
                        'basic' => 'bg-info',
                        'premium' => 'bg-danger',
                        'enterprise' => 'bg-purple',
                        default => 'bg-secondary'
                        };
                        @endphp
                        <span class="badge {{ $badgeClass }}">{{ ucfirst($client->subscription_type) }}</span>
                    </td>
                    <td>
                        <span class="badge bg-light text-dark">
                            <i class="bi bi-people me-1"></i>{{ $client->users_count ?? 0 }} / {{ $client->max_users }}
                        </span>
                        <span class="badge bg-light text-dark">
                            <i class="bi bi-person-gear me-1"></i>{{ $client->client_admins_count ?? 0 }} / {{ $client->max_client_admins }}
                        </span>
                    </td>
                    <td>
                        @if(!$client->is_active)
                        <span class="badge bg-secondary">Inactive</span>
                        @elseif($client->isSubscriptionExpired())
                        <span class="badge bg-danger">Expired</span>
                        @elseif($client->isOnTrial())
                        <span class="badge bg-warning">Trial ({{ $client->getDaysRemaining() }}d)</span>
                        @else
                        <span class="badge bg-success">Active</span>
                        @endif
                    </td>
                    <td>
                        @php
                        $effectiveEndDate = $client->isOnTrial() ? $client->trial_ends_at : $client->subscription_ends_at;
                        @endphp
                        @if($effectiveEndDate)
                        <small class="{{ $client->getDaysRemaining() <= 7 ? 'text-danger fw-bold' : 'text-muted' }}">
                            {{ $effectiveEndDate->format('M d, Y') }}
                        </small>
                        @else
                        <small class="text-muted">N/A</small>
                        @endif
                    </td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                Actions
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="{{ route('dashboard.clients.show', $client->id) }}">
                                        <i class="bi bi-eye me-2"></i>View Details
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{{ route('dashboard.clients.edit', $client->id) }}">
                                        <i class="bi bi-pencil me-2"></i>Edit
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#extendModal{{ $client->id }}">
                                        <i class="bi bi-calendar-plus me-2"></i>Extend Subscription
                                    </button>
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('dashboard.clients.toggle-status', $client->id) }}">
                                        @csrf
                                        <button type="submit" class="dropdown-item {{ $client->is_active ? 'text-warning' : 'text-success' }}">
                                            <i class="bi bi-{{ $client->is_active ? 'pause' : 'play' }} me-2"></i>
                                            {{ $client->is_active ? 'Deactivate' : 'Activate' }}
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>

                <!-- Extend Subscription Modal -->
                <div class="modal fade" id="extendModal{{ $client->id }}" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form method="POST" action="{{ route('dashboard.clients.extend-subscription', $client->id) }}">
                                @csrf
                                <div class="modal-header">
                                    <h5 class="modal-title">Extend Subscription - {{ $client->name }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label class="form-label">Days to Add</label>
                                        <input type="number" class="form-control" name="days" value="30" min="1" max="365" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Change Plan (Optional)</label>
                                        <select class="form-select" name="subscription_type">
                                            <option value="">Keep Current ({{ ucfirst($client->subscription_type) }})</option>
                                            <option value="basic">Basic</option>
                                            <option value="premium">Premium</option>
                                            <option value="enterprise">Enterprise</option>
                                        </select>
                                    </div>
                                    <div class="alert alert-info small mb-0">
                                        Current end date: {{ ($client->isOnTrial() ? $client->trial_ends_at : $client->subscription_ends_at)?->format('M d, Y') ?? 'N/A' }}
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Extend Subscription</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-5">
                        <div class="text-muted mb-3">
                            <i class="bi bi-building" style="font-size: 3rem;"></i>
                        </div>
                        <p class="mb-2">No clients found</p>
                        <a href="{{ route('dashboard.clients.create') }}" class="btn btn-sm btn-primary">
                            <i class="bi bi-plus-lg me-2"></i>Add First Client
                        </a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($clients->hasPages())
    <div class="card-footer bg-transparent">
        {{ $clients->withQueryString()->links() }}
    </div>
    @endif
</div>
@endsection

@push('styles')
<style>
    .bg-purple {
        background-color: #8b5cf6 !important;
    }
</style>
@endpush