@extends('layouts.modern')

@section('title', 'Nájemníci - MARKOVI')
@section('breadcrumb-section', 'Správa')
@section('breadcrumb-page', 'Nájemníci')

@push('styles')
<style>
    /* View Toggle Styles */
    .view-controls {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    .view-toggle {
        display: flex;
        background: var(--gray-100);
        border-radius: var(--radius-md);
        padding: 2px;
        border: 1px solid var(--gray-200);
    }

    .toggle-btn {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: none;
        background: transparent;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-600);
    }

    .toggle-btn:hover {
        color: var(--primary-600);
    }

    .toggle-btn.active {
        background: white;
        box-shadow: var(--shadow-sm);
        color: var(--primary-600);
    }

    .action-buttons {
        display: flex;
        gap: var(--space-2);
    }

    /* View Containers */
    .view-container {
        display: none;
    }

    .view-container.active {
        display: block;
    }

    /* Mobile Cards Styles */
    .tenants-grid {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: 1fr;
    }

    .tenant-card {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        transition: all 0.2s ease;
        box-shadow: var(--shadow-sm);
    }

    .tenant-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

    .tenant-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--space-3);
    }

    .tenant-name {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0;
    }

    .tenant-status {
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .tenant-status.active {
        background: var(--success-500);
        color: white;
    }

    .tenant-status.inactive {
        background: var(--gray-400);
        color: white;
    }

    .tenant-card-body {
        margin-bottom: var(--space-4);
    }

    .info-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-2);
        font-size: 0.875rem;
        color: var(--gray-600);
    }

    .info-row:last-child {
        margin-bottom: 0;
    }

    .info-row i {
        width: 16px;
        text-align: center;
        color: var(--gray-400);
    }

    .rent-amount {
        background: var(--primary-50);
        color: var(--primary-700);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-weight: 600;
        text-align: center;
        margin: var(--space-3) 0;
        border: 1px solid var(--primary-200);
    }

    .tenant-card-actions {
        display: flex;
        gap: var(--space-2);
        justify-content: flex-end;
    }

    .card-action-btn {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--gray-300);
        background: white;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-700);
        text-decoration: none;
        min-height: 44px; /* Touch-friendly */
    }

    .card-action-btn:hover {
        background: var(--gray-50);
        border-color: var(--primary-300);
        color: var(--primary-600);
    }

    .card-action-btn.primary {
        background: var(--primary-500);
        border-color: var(--primary-500);
        color: white;
    }

    .card-action-btn.primary:hover {
        background: var(--primary-600);
        border-color: var(--primary-600);
    }

    /* Responsive Behavior */
    @media (min-width: 1025px) {
        /* Desktop - defaultně tabulka */
        .view-toggle {
            display: flex;
        }
        
        .tenants-grid {
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        }
    }

    @media (max-width: 1024px) and (min-width: 769px) {
        /* Tablet - defaultně karty, ale možnost tabulky */
        .view-toggle {
            display: flex;
        }
        
        #table-view .modern-table {
            overflow-x: auto;
            display: block;
            white-space: nowrap;
        }
        
        #table-view .modern-table thead,
        #table-view .modern-table tbody,
        #table-view .modern-table tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        
        .tenants-grid {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
    }

    @media (max-width: 768px) {
        /* Mobil - pouze karty */
        .view-toggle .toggle-btn[data-view="table"] {
            display: none;
        }
        
        #table-view {
            display: none !important;
        }
        
        #cards-view {
            display: block !important;
        }
        
        .view-controls {
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-3);
        }
        
        .action-buttons {
            justify-content: center;
        }
        
        .action-buttons .btn span {
            display: none;
        }
        
        .action-buttons .btn {
            flex: 1;
            justify-content: center;
            min-height: 44px;
        }
        
        .tenant-card {
            margin-bottom: var(--space-4);
        }
        
        .tenant-card-actions {
            justify-content: stretch;
        }
        
        .card-action-btn {
            flex: 1;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .tenant-card-header {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-2);
        }
        
        .tenant-status {
            align-self: flex-end;
        }
    }

    /* Empty State Improvements */
    .empty-state {
        text-align: center;
        padding: var(--space-8);
    }

    .empty-state-icon {
        font-size: 4rem;
        color: var(--gray-300);
        margin-bottom: var(--space-4);
    }

    .empty-state-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: var(--space-2);
    }

    .empty-state-description {
        color: var(--gray-600);
        margin-bottom: var(--space-6);
    }

    /* Loading State */
    .loading-skeleton {
        background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <h1 class="page-title">Nájemníci</h1>
    <p class="page-subtitle">Evidence a správa nájemníků</p>
</div>

<div class="card">
    <div class="card-header">
        <div class="flex justify-between items-center">
            <h2 class="card-title">Seznam nájemníků</h2>
            
            <div class="view-controls">
                <!-- View Toggle -->
                <div class="view-toggle">
                    <button class="toggle-btn active" data-view="table" id="table-toggle">
                        <i class="fas fa-table"></i>
                        <span class="hidden md:inline">Tabulka</span>
                    </button>
                    <button class="toggle-btn" data-view="cards" id="cards-toggle">
                        <i class="fas fa-th-large"></i>
                        <span class="hidden md:inline">Karty</span>
                    </button>
                </div>
                
                <!-- Action Buttons -->
                <div class="action-buttons">
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i>
                        <span>Přidat nájemníka</span>
                    </button>
                    <button class="btn btn-secondary">
                        <i class="fas fa-search"></i>
                        <span>Vyhledat</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card-body">
        @if($tenants->count() > 0)
            <!-- Table View -->
            <div id="table-view" class="view-container active">
                <table class="modern-table">
                    <thead>
                        <tr>
                            <th>Jméno</th>
                            <th>Jednotka</th>
                            <th>Adresa</th>
                            <th>Kontakt</th>
                            <th>Nájem</th>
                            <th>Stav</th>
                            <th>Akce</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($tenants as $tenant)
                        <tr>
                            <td>
                                <div class="font-semibold">{{ $tenant->full_name }}</div>
                            </td>
                            <td>
                                <div class="text-sm">
                                    {{ $tenant->unit ? $tenant->unit->unit_name : 'Nepřiřazeno' }}
                                </div>
                            </td>
                            <td>
                                <div class="text-sm text-gray-600">
                                    {{ $tenant->unit && $tenant->unit->building ? $tenant->unit->building->full_address : '-' }}
                                </div>
                            </td>
                            <td>
                                <div class="text-sm">
                                    @if($tenant->Email)
                                        <div>{{ $tenant->Email }}</div>
                                    @endif
                                    @if($tenant->Telefon)
                                        <div class="text-gray-600">{{ $tenant->Telefon }}</div>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div class="font-semibold">
                                    {{ number_format($tenant->total_rent) }} Kč
                                </div>
                            </td>
                            <td>
                                <span class="px-2 py-1 rounded text-xs font-semibold
                                    {{ $tenant->Pronajem === 'ANO' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ $tenant->Pronajem === 'ANO' ? 'Aktivní' : 'Neaktivní' }}
                                </span>
                            </td>
                            <td>
                                <div class="flex gap-2">
                                    <button class="btn btn-secondary text-xs" title="Upravit">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-secondary text-xs" title="Zobrazit detail">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Cards View -->
            <div id="cards-view" class="view-container">
                <div class="tenants-grid">
                    @foreach($tenants as $tenant)
                    <div class="tenant-card">
                        <div class="tenant-card-header">
                            <h3 class="tenant-name">{{ $tenant->full_name }}</h3>
                            <span class="tenant-status {{ $tenant->Pronajem === 'ANO' ? 'active' : 'inactive' }}">
                                {{ $tenant->Pronajem === 'ANO' ? 'Aktivní' : 'Neaktivní' }}
                            </span>
                        </div>
                        
                        <div class="tenant-card-body">
                            @if($tenant->unit)
                            <div class="info-row">
                                <i class="fas fa-home"></i>
                                <span>{{ $tenant->unit->unit_name }}</span>
                            </div>
                            @endif
                            
                            @if($tenant->unit && $tenant->unit->building)
                            <div class="info-row">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>{{ $tenant->unit->building->full_address }}</span>
                            </div>
                            @endif
                            
                            @if($tenant->Email)
                            <div class="info-row">
                                <i class="fas fa-envelope"></i>
                                <span>{{ $tenant->Email }}</span>
                            </div>
                            @endif
                            
                            @if($tenant->Telefon)
                            <div class="info-row">
                                <i class="fas fa-phone"></i>
                                <span>{{ $tenant->Telefon }}</span>
                            </div>
                            @endif
                            
                            <div class="rent-amount">
                                <i class="fas fa-coins"></i>
                                {{ number_format($tenant->total_rent) }} Kč / měsíc
                            </div>
                        </div>
                        
                        <div class="tenant-card-actions">
                            <button class="card-action-btn" title="Upravit nájemníka">
                                <i class="fas fa-edit"></i>
                                <span>Upravit</span>
                            </button>
                            <button class="card-action-btn primary" title="Zobrazit detail">
                                <i class="fas fa-eye"></i>
                                <span>Detail</span>
                            </button>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        @else
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3 class="empty-state-title">Žádní nájemníci</h3>
                <p class="empty-state-description">Zatím nejsou evidováni žádní nájemníci. Začněte přidáním prvního nájemníka.</p>
                <button class="btn btn-primary">
                    <i class="fas fa-plus"></i>
                    Přidat prvního nájemníka
                </button>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // View toggle functionality
    const toggleButtons = document.querySelectorAll('.toggle-btn');
    const viewContainers = document.querySelectorAll('.view-container');
    
    // Load saved preference or set default based on screen size
    function getDefaultView() {
        const saved = localStorage.getItem('tenants-view-preference');
        if (saved) return saved;
        
        // Default based on screen size
        if (window.innerWidth <= 768) return 'cards';
        if (window.innerWidth <= 1024) return 'cards';
        return 'table';
    }
    
    // Initialize view
    const defaultView = getDefaultView();
    switchView(defaultView);
    
    // Add click handlers
    toggleButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const view = this.dataset.view;
            switchView(view);
            saveViewPreference(view);
        });
    });
    
    function switchView(view) {
        console.log('Switching to view:', view);
        
        // Update toggle buttons
        toggleButtons.forEach(btn => {
            btn.classList.toggle('active', btn.dataset.view === view);
        });
        
        // Update view containers
        viewContainers.forEach(container => {
            const isActive = container.id === view + '-view';
            container.classList.toggle('active', isActive);
        });
    }
    
    function saveViewPreference(view) {
        localStorage.setItem('tenants-view-preference', view);
        console.log('Saved view preference:', view);
    }
    
    // Handle window resize
    window.addEventListener('resize', function() {
        // On mobile, force cards view
        if (window.innerWidth <= 768) {
            switchView('cards');
        }
    });
    
    // Add smooth transitions
    viewContainers.forEach(container => {
        container.style.transition = 'opacity 0.3s ease';
    });
    
    console.log('Tenants view toggle initialized');
});
</script>
@endpush