@extends('layouts.admin')

@section('header', 'Client Details: ' . $client->name)

@section('content')
<div class="space-y-6">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Client Information</h2>
            <div class="flex items-center">
                @if($client->is_active)
                    <span class="px-3 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100 mr-2">Active</span>
                @else
                    <span class="px-3 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100 mr-2">Inactive</span>
                @endif
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Client ID</p>
                <p class='text-gray-900 dark:text-white'>{{ $client->id }}</p>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Name</p>
                <p class='text-gray-900 dark:text-white'>{{ $client->name }}</p>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Contact Name</p>
                <p class='text-gray-900 dark:text-white'>{{ $client->contact_name ?? 'N/A' }}</p>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Contact Email</p>
                <p class='text-gray-900 dark:text-white'>{{ $client->contact_email ?? 'N/A' }}</p>
            </div>
            <div class="col-span-1 md:col-span-2 lg:col-span-3">
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Branding Details</p>
                <div class='prose prose-sm max-w-none dark:prose-invert mt-1 text-gray-900 dark:text-white'>
                    {!! $client->branding_details ?? 'No branding details available.' !!}
                </div>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Created At</p>
                <p class='text-gray-900 dark:text-white'>{{ $client->created_at && $client->created_at instanceof \DateTime ? $client->created_at->format('Y-m-d H:i:s') : 'N/A' }}</p>
            </div>
            <div>
                <p class='text-sm font-medium text-gray-500 dark:text-gray-400'>Updated At</p>
                <p class='text-gray-900 dark:text-white'>{{ $client->updated_at && $client->updated_at instanceof \DateTime ? $client->updated_at->format('Y-m-d H:i:s') : 'N/A' }}</p>
            </div>
        </div>
        <div class='flex items-center space-x-4 pt-4 border-t border-gray-200 dark:border-gray-700'>
            <a href='{{ route("admin.clients.edit", $client->id) }}' class='text-white bg-yellow-600 hover:bg-yellow-700 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-yellow-500 dark:hover:bg-yellow-600 focus:outline-none dark:focus:ring-yellow-700'>Edit Client</a>
            <a href='{{ route("admin.clients.index") }}' class='py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'>Back to Clients List</a>
        </div>
    </div>

    <!-- Learning Modules Section -->
    <div class='mt-8 bg-white dark:bg-gray-800 shadow-md rounded-lg p-6'>
        <div class="flex justify-between items-center mb-4">
            <h2 class='text-xl font-semibold text-gray-900 dark:text-white'>Learning Modules</h2>
            @can('admin')
            <a href='{{ route("admin.clients.modules", $client->id) }}' class='text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none dark:focus:ring-blue-700'>
                Manage Modules
            </a>
            @endcan
        </div>
        
        @if($client->modules && $client->modules->count() > 0)
            <div class="space-y-4">
                @php
                    $modulesByTier = $client->modules->groupBy(function($module) {
                        return $module->tier->name ?? 'Uncategorized';
                    });
                @endphp
                
                @foreach($modulesByTier as $tierName => $modules)
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">{{ $tierName }}</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($modules as $module)
                                <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
                                    <h4 class="font-medium text-gray-900 dark:text-white">{{ $module->name }}</h4>
                                    @if($module->description)
                                        <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">{!! $module->description !!}</div>
                                    @endif
                                    <!-- Placeholder for future pricing information -->
                                    <div class="hidden">
                                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Pricing: TBD</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class='text-gray-500 dark:text-gray-400'>No learning modules assigned to this client.</p>
        @endif
    </div>

    <!-- Tiers Section -->
    <div class='mt-8 bg-white dark:bg-gray-800 shadow-md rounded-lg p-6'>
        <div class="flex justify-between items-center mb-4">
            <h2 class='text-xl font-semibold text-gray-900 dark:text-white'>Assigned Tiers</h2>
            @can('admin')
            <a href='{{ route("admin.clients.tiers", $client->id) }}' class='text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none dark:focus:ring-blue-700'>
                Manage Tiers
            </a>
            @endcan
        </div>
        
        @if($client->tiers && $client->tiers->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($client->tiers as $tier)
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
                        <h3 class="font-medium text-gray-900 dark:text-white">{{ $tier->name }}</h3>
                        @if($tier->description)
                            <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">{!! $tier->description !!}</div>
                        @endif
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Level: {{ $tier->level }}</p>
                        <!-- Placeholder for future pricing information -->
                        <div class="hidden">
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Pricing: TBD</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class='text-gray-500 dark:text-gray-400'>No tiers assigned to this client.</p>
        @endif
    </div>

    <!-- Events Section -->
    <div class='mt-8 bg-white dark:bg-gray-800 shadow-md rounded-lg p-6'>
        <h2 class='text-xl font-semibold text-gray-900 dark:text-white mb-4'>Events for this Client</h2>
        @if($client->events && $client->events->count() > 0)
            <div class='overflow-x-auto'>
                <table class='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
                    <thead class='bg-gray-50 dark:bg-gray-700'>
                        <tr>
                            <th scope='col' class='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider'>ID</th>
                            <th scope='col' class='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider'>Event Name</th>
                            <th scope='col' class='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider'>Start Date</th>
                            <th scope='col' class='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider'>End Date</th>
                            <th scope='col' class='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider'>Active</th>
                            <th scope='col' class='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider'>Actions</th>
                        </tr>
                    </thead>
                    <tbody class='bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700'>
                        @foreach ($client->events as $event)
                        <tr>
                            <td class='px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100'>{{ $event->id }}</td>
                            <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>{{ $event->name }}</td>
                            <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>{{ $event->start_datetime && $event->start_datetime instanceof \DateTime ? $event->start_datetime->format('Y-m-d H:i') : 'N/A' }}</td>
                            <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>{{ $event->end_datetime && $event->end_datetime instanceof \DateTime ? $event->end_datetime->format('Y-m-d H:i') : 'N/A' }}</td>
                            <td class='px-6 py-4 whitespace-nowrap text-sm'>
                                @if($event->is_active)
                                    <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100'>Yes</span>
                                @else
                                    <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100'>No</span>
                                @endif
                            </td>
                            <td class='px-6 py-4 whitespace-nowrap text-sm font-medium'>
                                <a href='{{ route("admin.events.show", $event->id) }}' class='text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200'>View Event</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class='text-gray-500 dark:text-gray-400'>No events found for this client.</p>
        @endif
    </div>
</div>
@endsection