@extends('layouts.app')

@section('title', 'CBO Details')

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Page Header -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold flex items-center">
                    <i class="fas fa-sitemap mr-2"></i> CBO Details
                </h2>
                <a href="{{ route('cbos.index') }}" class="inline-flex items-center px-4 py-2 bg-white text-indigo-600 border border-transparent rounded-md font-semibold text-xs uppercase tracking-widest hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <i class="fas fa-arrow-left mr-2"></i> Back to CBO List
                </a>
            </div>
        </div>
    </div>

    <!-- CBO Information -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                <i class="fas fa-info-circle mr-2 text-indigo-600"></i> CBO Information
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-medium text-gray-700 mb-2">Basic Information</h4>
                    <dl class="space-y-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">CBO Code:</dt>
                            <dd class="text-sm text-gray-900">{{ $cbo->cbo_code }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">CBO Name:</dt>
                            <dd class="text-sm text-gray-900">{{ $cbo->cbo_name }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Formation Date:</dt>
                            <dd class="text-sm text-gray-900">{{ $cbo->formation_date->format('Y-m-d') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Status:</dt>
                            <dd class="text-sm">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                                    {{ $cbo->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                    {{ ucfirst($cbo->status) }}
                                </span>
                            </dd>
                        </div>
                    </dl>
                </div>
                
                <div>
                    <h4 class="font-medium text-gray-700 mb-2">Branch & Officer</h4>
                    <dl class="space-y-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Branch:</dt>
                            <dd class="text-sm text-gray-900">{{ $cbo->branch->branch_name ?? 'N/A' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Credit Officer:</dt>
                            <dd class="text-sm text-gray-900">{{ $cbo->creditOfficer->name ?? 'N/A' }}</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Location Information -->
    @if($cbo->address || $cbo->province || $cbo->district)
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                <i class="fas fa-map-marker-alt mr-2 text-indigo-600"></i> Location Information
            </h3>
        </div>
        <div class="p-6">
            <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @if($cbo->address)
                <div>
                    <dt class="text-sm font-medium text-gray-500">Address:</dt>
                    <dd class="text-sm text-gray-900">{{ $cbo->address }}</dd>
                </div>
                @endif
                
                @if($cbo->province)
                <div>
                    <dt class="text-sm font-medium text-gray-500">Province:</dt>
                    <dd class="text-sm text-gray-900">{{ $cbo->province }}</dd>
                </div>
                @endif
                
                @if($cbo->district)
                <div>
                    <dt class="text-sm font-medium text-gray-500">District:</dt>
                    <dd class="text-sm text-gray-900">{{ $cbo->district }}</dd>
                </div>
                @endif
                
                @if($cbo->ds_division)
                <div>
                    <dt class="text-sm font-medium text-gray-500">DS Division:</dt>
                    <dd class="text-sm text-gray-900">{{ $cbo->ds_division }}</dd>
                </div>
                @endif
                
                @if($cbo->gs_division)
                <div>
                    <dt class="text-sm font-medium text-gray-500">GS Division:</dt>
                    <dd class="text-sm text-gray-900">{{ $cbo->gs_division }}</dd>
                </div>
                @endif
            </dl>
        </div>
    </div>
    @endif

    <!-- Meeting Information -->
    @if($cbo->meeting_day || $cbo->meeting_time || $cbo->meeting_frequency)
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                <i class="fas fa-calendar-alt mr-2 text-indigo-600"></i> Meeting Information
            </h3>
        </div>
        <div class="p-6">
            <dl class="grid grid-cols-1 md:grid-cols-3 gap-4">
                @if($cbo->meeting_day)
                <div>
                    <dt class="text-sm font-medium text-gray-500">Meeting Day:</dt>
                    <dd class="text-sm text-gray-900">{{ $cbo->meeting_day }}</dd>
                </div>
                @endif
                
                @if($cbo->meeting_time)
                <div>
                    <dt class="text-sm font-medium text-gray-500">Meeting Time:</dt>
                    <dd class="text-sm text-gray-900">{{ $cbo->meeting_time }}</dd>
                </div>
                @endif
                
                @if($cbo->meeting_frequency)
                <div>
                    <dt class="text-sm font-medium text-gray-500">Frequency:</dt>
                    <dd class="text-sm text-gray-900">{{ $cbo->meeting_frequency }}</dd>
                </div>
                @endif
            </dl>
        </div>
    </div>
    @endif

    <!-- Members List -->
    @if($cbo->members->count() > 0)
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                <i class="fas fa-users mr-2 text-indigo-600"></i> CBO Members ({{ $cbo->members->count() }})
            </h3>
        </div>
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NIC</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($cbo->members as $member)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $member->full_name }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $member->nic }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $member->phone }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                                    {{ $member->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                    {{ ucfirst($member->status) }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    <!-- Actions -->
    <div class="flex flex-col sm:flex-row justify-end gap-3">
        <a href="{{ route('cbos.edit', $cbo) }}" class="inline-flex items-center px-6 py-3 bg-yellow-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition ease-in-out duration-150">
            <i class="fas fa-edit mr-2"></i> Edit CBO
        </a>
        <a href="{{ route('cbos.index') }}" class="inline-flex items-center px-6 py-3 bg-gray-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
            <i class="fas fa-list mr-2"></i> Back to List
        </a>
    </div>
</div>
@endsection