@extends('layouts.vending')

@section('title', 'Mandanten-Übersicht')

@section('content')
<div class="max-w-7xl mx-auto px-4">
    <div class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Mandanten-Übersicht</h1>
        <p class="text-gray-600 text-lg">Wählen Sie einen Mandanten aus, um dessen Snackautomaten zu erkunden.</p>
    </div>

    @if($tenants->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($tenants as $tenant)
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                    @if($tenant->logo)
                        <div class="h-48 bg-gray-100 flex items-center justify-center">
                            <img src="{{ asset('storage/' . $tenant->logo) }}" 
                                 alt="{{ $tenant->name }} Logo" 
                                 class="max-h-full max-w-full object-contain">
                        </div>
                    @else
                        <div class="h-48 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                            <div class="text-white text-6xl font-bold">
                                {{ strtoupper(substr($tenant->name, 0, 1)) }}
                            </div>
                        </div>
                    @endif
                    
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ $tenant->name }}</h3>
                        
                        @if($tenant->description)
                            <p class="text-gray-600 mb-4 line-clamp-3">{{ $tenant->description }}</p>
                        @endif
                        
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-500">
                                <span class="inline-flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                    </svg>
                                    {{ $tenant->vending_machines_count }} Automat{{ $tenant->vending_machines_count !== 1 ? 'en' : '' }}
                                </span>
                            </div>
                            
                            @if($tenant->public_slug)
                                <a href="{{ route('vending.public.tenant', $tenant->public_slug) }}" 
                                   class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors mr-2">
                                    QR-Code Ansicht
                                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h2m-6 0h-2m0 0h-3m-1 0h-1m-1 0H9m3 0h.01m0 0H12m0 0h3m6 0h2M4 4h5L4 9"></path>
                                    </svg>
                                </a>
                            @endif
                            
                            <a href="{{ route('vending.tenant', $tenant->slug) }}" 
                               class="inline-flex items-center px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-md hover:bg-gray-700 transition-colors">
                                Admin Ansicht
                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="text-center py-16">
            <div class="bg-gray-100 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
                <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                </svg>
            </div>
            <h2 class="text-2xl font-bold text-gray-600 mb-4">Keine Mandanten verfügbar</h2>
            <p class="text-gray-500">Derzeit sind keine aktiven Mandanten im System verfügbar.</p>
        </div>
    @endif
    
    <!-- Navigation Links -->
    <div class="mt-12 pt-8 border-t border-gray-200">
        <div class="flex justify-center space-x-6">
            <a href="{{ route('vending.index') }}" 
               class="text-gray-600 hover:text-gray-900 transition-colors">
                ← Zurück zur Hauptseite
            </a>
        </div>
    </div>
</div>
@endsection

@section('head')
<style>
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
@endsection