@extends('layouts.admin')
@section('title', $church->name)
@section('page-title', $church->name)
@section('page-subtitle', 'Branch Details')

@section('content')
<div class="space-y-6">
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="card-royal p-6">
                <div class="flex items-start gap-6">
                    @if($church->logo)
                        <img src="{{ asset('storage/' . $church->logo) }}" alt="{{ $church->name }}" class="w-24 h-24 rounded-lg object-cover">
                    @else
                        <div class="w-24 h-24 rounded-lg bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center">
                            <i class="fas fa-church text-white text-4xl"></i>
                        </div>
                    @endif
                    <div class="flex-1">
                        <div class="flex items-center gap-3">
                            <h2 class="text-2xl font-bold text-[var(--text-primary)]">{{ $church->name }}</h2>
                            <span class="px-3 py-1 text-sm rounded-full {{ $church->status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                {{ ucfirst($church->status) }}
                            </span>
                        </div>
                        <p class="text-[var(--text-secondary)] mt-1">{{ $church->tagline ?? 'No tagline set' }}</p>
                        
                        <div class="flex gap-4 mt-4">
                            <a href="{{ route('admin.churches.edit', $church) }}" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                                <i class="fas fa-edit mr-2"></i> Edit
                            </a>
                            <a href="{{ route('admin.churches.users', $church) }}" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                                <i class="fas fa-users mr-2"></i> Manage Users
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-royal p-6 mt-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Contact Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @if($church->email)
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                                <i class="fas fa-envelope text-blue-600"></i>
                            </div>
                            <div>
                                <p class="text-sm text-[var(--text-secondary)]">Email</p>
                                <p class="text-[var(--text-primary)]">{{ $church->email }}</p>
                            </div>
                        </div>
                    @endif
                    
                    @if($church->phone)
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
                                <i class="fas fa-phone text-green-600"></i>
                            </div>
                            <div>
                                <p class="text-sm text-[var(--text-secondary)]">Phone</p>
                                <p class="text-[var(--text-primary)]">{{ $church->phone }}</p>
                            </div>
                        </div>
                    @endif
                    
                    @if($church->address)
                        <div class="flex items-center gap-3 md:col-span-2">
                            <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center">
                                <i class="fas fa-map-marker-alt text-purple-600"></i>
                            </div>
                            <div>
                                <p class="text-sm text-[var(--text-secondary)]">Address</p>
                                <p class="text-[var(--text-primary)]">{{ $church->address }}</p>
                            </div>
                        </div>
                    @endif
                    
                    @if($church->service_times)
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-orange-100 flex items-center justify-center">
                                <i class="fas fa-clock text-orange-600"></i>
                            </div>
                            <div>
                                <p class="text-sm text-[var(--text-secondary)]">Service Times</p>
                                <p class="text-[var(--text-primary)]">{{ $church->service_times }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div>
            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Statistics</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-4 bg-gradient-to-r from-gold-500/10 to-transparent rounded-lg">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-gold-500/20 flex items-center justify-center">
                                <i class="fas fa-users text-gold-500"></i>
                            </div>
                            <span class="text-[var(--text-primary)]">Members</span>
                        </div>
                        <span class="text-xl font-bold text-[var(--text-primary)]">{{ $stats['members'] }}</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-500/10 to-transparent rounded-lg">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                                <i class="fas fa-user-friends text-blue-500"></i>
                            </div>
                            <span class="text-[var(--text-primary)]">Visitors</span>
                        </div>
                        <span class="text-xl font-bold text-[var(--text-primary)]">{{ $stats['visitors'] }}</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-4 bg-gradient-to-r from-green-500/10 to-transparent rounded-lg">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
                                <i class="fas fa-user-cog text-green-500"></i>
                            </div>
                            <span class="text-[var(--text-primary)]">Users</span>
                        </div>
                        <span class="text-xl font-bold text-[var(--text-primary)]">{{ $stats['users'] }}</span>
                    </div>
                </div>
            </div>

            <div class="card-royal p-6 mt-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Quick Actions</h3>
                <div class="space-y-2">
                    <a href="{{ route('admin.members.index', ['church_id' => $church->id]) }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <i class="fas fa-users w-5 text-[var(--text-secondary)]"></i>
                        <span>View Members</span>
                    </a>
                    <a href="{{ route('admin.churches.users', $church) }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <i class="fas fa-user-plus w-5 text-[var(--text-secondary)]"></i>
                        <span>Manage Users</span>
                    </a>
                    @if($church->members()->count() > 0)
                        <form action="{{ route('admin.churches.destroy', $church) }}" method="POST" onsubmit="return confirm('Are you sure? Members must be reassigned first.')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="w-full flex items-center gap-3 p-3 rounded-lg hover:bg-red-100 text-red-600">
                                <i class="fas fa-trash w-5"></i>
                                <span>Delete Church</span>
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection