@extends('layouts.app')

@section('title', 'Manage Group Members - ' . $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-user-plus me-2"></i>Manage Group Members</h1>
                    <p class="text-muted mb-0">{{ $clientGroup->name }} ({{ $clientGroup->code }})</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('client-groups.show', $clientGroup) }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left me-1"></i>Back to Group
                    </a>
                    <a href="{{ route('client-groups.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-users me-1"></i>All Groups
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Add Member Form -->
        <div class="col-lg-4 mb-4">
            <div class="form-card card">
                <div class="card-body">
                    <div class="section-header">
                        <div class="icon-wrapper">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <h5>Add Member to Group</h5>
                    </div>

                    <form method="POST" action="{{ route('client-groups.members.add', $clientGroup) }}">
                        @csrf
                        <div class="mb-3">
                            <label for="client_id" class="form-label">
                                Select Client
                                <span class="required-indicator">*</span>
                            </label>
                            <div class="input-icon-wrapper">
                                <i class="fas fa-user"></i>
                                <select name="client_id" id="client_id" class="form-select" required>
                                    <option value="">Choose a client...</option>
                                    @foreach($availableClients as $client)
                                        <option value="{{ $client->id }}">
                                            {{ $client->full_name }} ({{ $client->client_number }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="role" class="form-label">
                                Role in Group
                                <span class="required-indicator">*</span>
                            </label>
                            <div class="input-icon-wrapper">
                                <i class="fas fa-user-tag"></i>
                                <select name="role" id="role" class="form-select" required>
                                    <option value="member">Member</option>
                                    <option value="leader">Group Leader</option>
                                    <option value="secretary">Secretary</option>
                                    <option value="treasurer">Treasurer</option>
                                </select>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-user-plus me-2"></i>Add Member to Group
                        </button>
                    </form>
                </div>
            </div>

            <!-- Group Information -->
            <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 Information</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>Total Members</label>
                            <div class="info-value">{{ $members->count() }}</div>
                        </div>
                        <div class="info-item">
                            <label>Minimum Savings</label>
                            <div class="info-value">${{ number_format($clientGroup->minimum_savings, 2) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Members List -->
        <div class="col-lg-8">
            <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 ({{ $members->count() }})</h5>
                    </div>

                    @if($members->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>
                                        <th>ACTIONS</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($members 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>
                                        <td>
                                            <form method="POST" action="{{ route('client-groups.members.remove', [$clientGroup, $member]) }}" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger"
                                                        onclick="return confirm('Are you sure you want to remove {{ $member->full_name }} from this group?')">
                                                    <i class="fas fa-user-minus"></i> Remove
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @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 using the form on the left.</p>
                        </div>
                    @endif
                </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;
    }

    .form-label {
        font-weight: 700;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .required-indicator {
        color: var(--danger);
        font-size: 0.9rem;
    }

    .input-icon-wrapper {
        position: relative;
    }

    .input-icon-wrapper i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-green);
        font-size: 1rem;
        z-index: 1;
    }

    .input-icon-wrapper .form-control,
    .input-icon-wrapper .form-select {
        padding-left: 2.75rem;
    }

    .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;
    }

    .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;
        }
    }
</style>
@endsection