@extends('layouts.app')
@section('title', __('ui.groups_title').' — Coaster World')

@section('content')
<section class="groups-hero">
    <div class="container groups-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.groups_kicker') }}</span>
            <h1>{{ __('ui.groups_title') }}</h1>
            <p>{{ __('ui.groups_intro') }}</p>
        </div>
        <div class="groups-hero-stats">
            <div><strong>{{ $ownedGroups->count() + $memberGroups->count() }}</strong><span>{{ __('ui.groups_count') }}</span></div>
            <div><strong>{{ $invitations->count() }}</strong><span>{{ __('ui.groups_invitations_count') }}</span></div>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        @if(session('group_status'))<div class="admin-success">{{ session('group_status') }}</div>@endif
        @if(session('group_error'))<div class="admin-error">{{ session('group_error') }}</div>@endif

        <div class="groups-create-card">
            <div>
                <span class="eyebrow">{{ __('ui.groups_create_kicker') }}</span>
                <h2>{{ __('ui.groups_create_title') }}</h2>
                <p>{{ __('ui.groups_create_intro') }}</p>
            </div>
            <form method="post" action="{{ route('groups.store') }}" class="groups-create-form">
                @csrf
                <label>
                    <span>{{ __('ui.groups_name') }}</span>
                    <input name="name" value="{{ old('name') }}" maxlength="120" required>
                </label>
                <label>
                    <span>{{ __('ui.groups_description') }}</span>
                    <textarea name="description" maxlength="1200" rows="3">{{ old('description') }}</textarea>
                </label>
                <div class="groups-form-row">
                    <label>
                        <span>{{ __('ui.groups_type') }}</span>
                        <select name="group_type">
                            <option value="permanent" @selected(old('group_type') === 'permanent')>{{ __('ui.groups_type_permanent') }}</option>
                            <option value="trip" @selected(old('group_type') === 'trip')>{{ __('ui.groups_type_trip') }}</option>
                        </select>
                    </label>
                    <label>
                        <span>{{ __('ui.groups_visibility') }}</span>
                        <select name="visibility">
                            <option value="private" @selected(old('visibility') === 'private')>{{ __('ui.groups_visibility_private') }}</option>
                            <option value="friends" @selected(old('visibility') === 'friends')>{{ __('ui.groups_visibility_friends') }}</option>
                        </select>
                    </label>
                </div>
                @if($errors->any())
                    <div class="admin-error">{{ $errors->first() }}</div>
                @endif
                <button class="button button-primary" type="submit">{{ __('ui.groups_create_button') }}</button>
            </form>
        </div>
    </div>
</section>

@if($invitations->isNotEmpty())
<section class="section section-soft">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">{{ __('ui.groups_invites_kicker') }}</span>
            <h2>{{ __('ui.groups_invites_title') }}</h2>
        </div>
        <div class="groups-invite-grid">
            @foreach($invitations as $invitation)
                <article class="groups-invite-card">
                    <div>
                        <span>{{ $invitation->group?->group_type === 'trip' ? __('ui.groups_type_trip') : __('ui.groups_type_permanent') }}</span>
                        <strong>{{ $invitation->group?->name }}</strong>
                        <small>{{ __('ui.groups_invited_by', ['name' => '@'.($invitation->inviter?->username ?: $invitation->inviter?->name)]) }}</small>
                    </div>
                    <div class="groups-inline-actions">
                        <form method="post" action="{{ route('groups.respond', $invitation) }}">
                            @csrf
                            <input type="hidden" name="decision" value="accept">
                            <button class="button button-primary" type="submit">{{ __('ui.groups_accept') }}</button>
                        </form>
                        <form method="post" action="{{ route('groups.respond', $invitation) }}">
                            @csrf
                            <input type="hidden" name="decision" value="decline">
                            <button class="button button-ghost" type="submit">{{ __('ui.groups_decline') }}</button>
                        </form>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>
@endif

<section class="section">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">{{ __('ui.groups_yours_kicker') }}</span>
            <h2>{{ __('ui.groups_yours_title') }}</h2>
            <p>{{ __('ui.groups_yours_intro') }}</p>
        </div>

        @if($ownedGroups->isNotEmpty() || $memberGroups->isNotEmpty())
            <div class="groups-card-grid">
                @foreach($ownedGroups as $group)
                    <a href="{{ route('groups.show', $group) }}" class="groups-card is-owner">
                        <div class="groups-card-top"><span>{{ __('ui.groups_owner_badge') }}</span><em>{{ $group->group_type === 'trip' ? __('ui.groups_type_trip') : __('ui.groups_type_permanent') }}</em></div>
                        <strong>{{ $group->name }}</strong>
                        <p>{{ $group->description ?: __('ui.groups_no_description') }}</p>
                        <small>{{ trans_choice('ui.groups_members_count', $group->active_members_count, ['count' => $group->active_members_count]) }}</small>
                    </a>
                @endforeach
                @foreach($memberGroups as $group)
                    <a href="{{ route('groups.show', $group) }}" class="groups-card">
                        <div class="groups-card-top"><span>{{ __('ui.groups_member_badge') }}</span><em>{{ $group->group_type === 'trip' ? __('ui.groups_type_trip') : __('ui.groups_type_permanent') }}</em></div>
                        <strong>{{ $group->name }}</strong>
                        <p>{{ $group->description ?: __('ui.groups_no_description') }}</p>
                        <small>{{ trans_choice('ui.groups_members_count', $group->active_members_count, ['count' => $group->active_members_count]) }}</small>
                    </a>
                @endforeach
            </div>
        @else
            <div class="friends-empty">
                <strong>{{ __('ui.groups_empty_title') }}</strong>
                <p>{{ __('ui.groups_empty_text') }}</p>
            </div>
        @endif
    </div>
</section>
@endsection