<x-guest-layout>
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <h1 class="text-2xl font-bold text-gray-900 mb-6">
            {{ __('Welcome, :name', ['name' => auth()->user()->name]) }}
        </h1>
       
        <div class="grid gap-6 mb-8">
            <div class="lg:col-span-3">
                <div class="rounded-lg border border-gray-200 bg-white p-6">
                    <h2 class="text-lg font-medium text-gray-900 mb-4">
                        {{ __('My Active Projects') }}
                    </h2>
                   
                    <livewire:client-projects />
                </div>
            </div>
           
            <div class="lg:col-span-1">
                <div class="rounded-lg border border-gray-200 bg-white p-6">
                    <h2 class="text-lg font-medium text-gray-900 mb-4">
                        {{ __('Notifications') }}
                    </h2>
                   
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.483l1.227.614a1 1 0 001.216-.483l1.227-.614a1 1 0 00.483-1.216l-.614-1.227a1 1 0 00-.483-1.216l-.614-1.227a1 1 0 00-1.216-.483l-1.227.614a1 1 0 00-.483 1.216l.614 1.227zm1.11-5.656a1 1 0 10-1.414 1.414l1.293 1.293a1 1 0 001.414 0l1.293-1.293a1 1 0 00-1.414-1.414l-1.293-1.293z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <div class="min-w-0 flex-1">
                                <h3 class="text-sm font-medium text-gray-900">
                                    {{ __('Project updated') }}
                                </h3>
                                <p class="text-sm text-gray-500">
                                    {{ __('New photos added to project ":name"', ['name' => 'Centro Comercial Norte']) }}
                                </p>
                                <p class="text-xs text-gray-400">
                                    {{ __('2 hours ago') }}
                                </p>
                            </div>
                        </div>
                       
                        <div class="flex items-start space-x-3">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-green-600" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <div class="min-w-0 flex-1">
                                <h3 class="text-sm font-medium text-gray-900">
                                    {{ __('Change order approved') }}
                                </h3>
                                <p class="text-sm text-gray-500">
                                    {{ __('Change order #:id has been approved', ['id' => '123']) }}
                                </p>
                                <p class="text-xs text-gray-400">
                                    {{ __('1 day ago') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
        <div class="grid gap-6">
            <div class="lg:col-span-6">
                <div class="rounded-lg border border-gray-200 bg-white p-6">
                    <h2 class="text-lg font-medium text-gray-900 mb-4">
                        {{ __('Progress Gallery') }}
                    </h2>
                   
                    <div class="gallery-grid">
                        <!-- Placeholder for gallery items -->
                        <div class="gallery-item bg-gray-100 flex items-center justify-center h-48">
                            <span class="text-gray-500">{{ __('Coming soon: Progress photos') }}</span>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="lg:col-span-6">
                <div class="rounded-lg border border-gray-200 bg-white p-6">
                    <h2 class="text-lg font-medium text-gray-900 mb-4">
                        {{ __('Pending Change Orders') }}
                    </h2>
                   
                    <div class="space-y-4">
                        <div class="change-order-card change-order-pending">
                            <h3 class="text-sm font-medium text-gray-900 mb-2">
                                {{ __('Change order #:id', ['id' => '124']) }}
                            </h3>
                            <p class="text-sm text-gray-500 mb-2">
                                {{ __('Storage area expansion request') }}
                            </p>
                            <div class="flex items-center space-x-3 mt-2">
                                <button class="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700">
                                    {{ __('Approve') }}
                                </button>
                                <button class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700">
                                    {{ __('Reject') }}
                                </button>
                            </div>
                        </div>
                       
                        <div class="change-order-card change-order-pending">
                            <h3 class="text-sm font-medium text-gray-900 mb-2">
                                {{ __('Change order #:id', ['id' => '125']) }}
                            </h3>
                            <p class="text-sm text-gray-500 mb-2">
                                {{ __('Interior finish material change') }}
                            </p>
                            <div class="flex items-center space-x-3 mt-2">
                                <button class="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700">
                                    {{ __('Approve') }}
                                </button>
                                <button class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700">
                                    {{ __('Reject') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>
