@extends('layouts.app')

@section('title', 'Group Details - ' . $clientGroup->name)

@section('content')
<div class="container-fluid">
    <!-- Navigation Bar -->
    <div class="navigation-bar">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="page-title">
                    <h1><i class="fas fa-users me-2"></i>{{ $clientGroup->name }}</h1>
                    <p class="text-muted mb-0">Group Code: {{ $clientGroup->code }}</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('client-groups.index') }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left me-1"></i>Back to Groups
                    </a>
                    <a href="{{ route('client-groups.members', $clientGroup) }}" class="btn btn-primary me-2">
                        <i class="fas fa-user-plus me-1"></i>Manage Members
                    </a>
                    <a href="{{ route('client-groups.edit', $clientGroup) }}" class="btn btn-info">
                        <i class="fas fa-edit me-1"></i>Edit Group
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Group Information -->
        <div class="col-lg-4 mb-4">
            <div class="form-card card">
                <div class="card-body text-center">
                    <div class="group-avatar mb-3">
                        <div class="client-avatar-placeholder rounded-circle d-flex align-items-center justify-content-center mx-auto bg-primary" style="width: 80px; height: 80px;">
                            <i class="fas fa-users text-white fa-2x"></i>
                        </div>
                    </div>

                    <h3 class="fw-bold mb-2">{{ $clientGroup->name }}</h3>
                    <p class="text-muted mb-3">{{ $clientGroup->code }}</p>

                    <div class="mb-4">
                        @if($clientGroup->status == 'active')
                            <span class="status-badge badge bg-success">
                                <i class="fas fa-circle me-1"></i>Active
                            </span>
                        @else
                            <span class="status-badge badge bg-secondary">
                                <i class="fas fa-circle me-1"></i>Inactive
                            </span>
                        @endif
                    </div>

                    <!-- Quick Stats -->
                    <div class="stats-grid mb-4">
                        <div class="stat-item">
                            <div class="stat-icon members">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">{{ $clientGroup->activeMembers->count() }}</div>
                                <div class="stat-label">Members</div>
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-icon savings">
                                <i class="fas fa-piggy-bank"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">${{ number_format($clientGroup->minimum_savings, 2) }}</div>
                                <div class="stat-label">Min Savings</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Group Details -->
            <div class="form-card card mt-4">
                <div class="card-body">
                    <div class="section-header">
                        <div class="icon-wrapper">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <h5>Group Details</h5>
                    </div>
                    <div class="info-grid">
                        <div class="info-item">
                            <label>Group Name</label>
                            <div class="info-value">{{ $clientGroup->name }}</div>
                        </div>
                        <div class="info-item">
                            <label>Group Code</label>
                            <div class="info-value">{{ $clientGroup->code }}</div>
                        </div>
                        <div class="info-item">
                            <label>Status</label>
                            <div class="info-value">
                                @if($clientGroup->status == 'active')
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </div>
                        </div>
                        <div class="info-item">
                            <label>Minimum Savings</label>
                            <div class="info-value">${{ number_format($clientGroup->minimum_savings, 2) }}</div>
                        </div>
                        <div class="info-item">
                            <label>Created By</label>
                            <div class="info-value">{{ $clientGroup->creator->name }}</div>
                        </div>
                        <div class="info-item">
                            <label>Created Date</label>
                            <div class="info-value">{{ $clientGroup->created_at->format('M d, Y') }}</div>
                        </div>
                    </div>

                    @if($clientGroup->description)
                    <div class="mt-3">
                        <label class="form-label">Description</label>
                        <div class="description-content">
                            {{ $clientGroup->description }}
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Members & Activity -->
        <div class="col-lg-8">
            <!-- Recent Members -->
            <div class="form-card card">
                <div class="card-body">
                    <div class="section-header">
                        <div class="icon-wrapper">
                            <i class="fas fa-users"></i>
                        </div>
                        <h5>Group Members ({{ $clientGroup->activeMembers->count() }})</h5>
                    </div>

                    @if($clientGroup->activeMembers->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>MEMBER</th>
                                        <th>CLIENT ID</th>
                                        <th>PHONE</th>
                                        <th>ROLE</th>
                                        <th>JOINED DATE</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($clientGroup->activeMembers->take(10) as $member)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($member->photo)
                                                    <img src="{{ asset('storage/' . $member->photo) }}" alt="{{ $member->full_name }}" class="client-avatar rounded-circle me-3">
                                                @else
                                                    <div class="client-avatar-placeholder rounded-circle d-flex align-items-center justify-content-center me-3">
                                                        <i class="fas fa-user text-white"></i>
                                                    </div>
                                                @endif
                                                <div>
                                                    <div class="fw-semibold">{{ $member->full_name }}</div>
                                                    <small class="text-muted">{{ $member->email }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="text-muted">{{ $member->client_number }}</div>
                                        </td>
                                        <td>
                                            <div class="text-muted">{{ $member->phone }}</div>
                                        </td>
                                        <td>
                                            @if($member->pivot->role == 'leader')
                                                <span class="badge bg-danger">
                                                    <i class="fas fa-crown me-1"></i>Leader
                                                </span>
                                            @elseif($member->pivot->role == 'secretary')
                                                <span class="badge bg-info">
                                                    <i class="fas fa-file-alt me-1"></i>Secretary
                                                </span>
                                            @elseif($member->pivot->role == 'treasurer')
                                                <span class="badge bg-success">
                                                    <i class="fas fa-money-bill-wave me-1"></i>Treasurer
                                                </span>
                                            @else
                                                <span class="badge bg-secondary">
                                                    <i class="fas fa-user me-1"></i>Member
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="text-muted">{{ \Carbon\Carbon::parse($member->pivot->joined_date)->format('M d, Y') }}</div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        @if($clientGroup->activeMembers->count() > 10)
                            <div class="text-center mt-3">
                                <a href="{{ route('client-groups.members', $clientGroup) }}" class="btn btn-outline-primary">
                                    <i class="fas fa-eye me-1"></i>View All Members
                                </a>
                            </div>
                        @endif
                    @else
                        <div class="empty-state text-center py-5">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No members yet</h4>
                            <p class="text-muted mb-3">Add members to this group to get started.</p>
                            <a href="{{ route('client-groups.members', $clientGroup) }}" class="btn btn-primary">
                                <i class="fas fa-user-plus me-1"></i>Add Members
                            </a>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Group Loans & Savings Summary -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="form-card card">
                        <div class="card-body text-center">
                            <div class="stat-icon loan mb-3">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                            <h3 class="fw-bold text-primary mb-1">
                                ${{ number_format($clientGroup->activeMembers->sum(function($client) {
                                    return $client->loans->where('status', 'approved')->sum('amount');
                                }), 2) }}
                            </h3>
                            <p class="text-muted mb-0">Total Group Loans</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-card card">
                        <div class="card-body text-center">
                            <div class="stat-icon savings mb-3">
                                <i class="fas fa-piggy-bank"></i>
                            </div>
                            <h3 class="fw-bold text-success mb-1">
                                ${{ number_format($clientGroup->activeMembers->sum(function($client) {
                                    return $client->savingsAccounts->sum('current_balance');
                                }), 2) }}
                            </h3>
                            <p class="text-muted mb-0">Total Group Savings</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    :root {
        --primary-green: #198754;
        --primary-green-dark: #146c43;
        --accent-yellow: #fbbf24;
        --accent-yellow-light: #fef3c7;
        --success-green: #198754;
        --white: #ffffff;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-900: #111827;
        --danger: #ef4444;
    }

    .navigation-bar {
        background: white;
        padding: 1.5rem 0;
        margin-bottom: 2rem;
        border-bottom: 2px solid var(--gray-200);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .page-title h1 {
        color: var(--gray-900);
        font-weight: 700;
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
    }

    .page-title p {
        color: var(--gray-600);
        margin-bottom: 0;
    }

    .form-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        border: none;
        overflow: hidden;
    }

    .form-card .card-body {
        padding: 2rem;
    }

    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 3px solid transparent;
        background: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        border-image: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
        border-image-slice: 1;
        border-bottom: 3px solid;
    }

    .section-header h5 {
        margin: 0;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--primary-green);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .section-header .icon-wrapper {
        width: 36px;
        height: 36px;
        background: var(--primary-green);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
    }

    .stats-grid {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.25rem;
    }

    .stat-icon.members {
        background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    }

    .stat-icon.savings {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    }

    .stat-icon.loan {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    }

    .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1;
    }

    .stat-label {
        font-size: 0.875rem;
        color: var(--gray-600);
        margin-top: 0.25rem;
    }

    .info-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .info-item label {
        font-weight: 600;
        color: var(--gray-600);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
        display: block;
    }

    .info-value {
        color: var(--gray-900);
        font-weight: 500;
    }

    .description-content {
        background: var(--gray-50);
        padding: 1rem;
        border-radius: 8px;
        border-left: 4px solid var(--primary-green);
        color: var(--gray-700);
    }

    .client-avatar {
        width: 40px;
        height: 40px;
        object-fit: cover;
    }

    .client-avatar-placeholder {
        width: 40px;
        height: 40px;
        background: var(--gray-400);
        font-size: 0.875rem;
    }

    .empty-state {
        padding: 2rem 0;
    }

    .empty-state i {
        opacity: 0.5;
    }

    @media (max-width: 768px) {
        .navigation-bar {
            padding: 1rem 0;
        }

        .page-title h1 {
            font-size: 1.5rem;
        }

        .form-card .card-body {
            padding: 1.5rem;
        }

        .stats-grid {
            flex-direction: column;
        }
    }
</style>
@endsection