@extends('layout.app')

@section('title', __('Dashboard'))
@section('data_col', "2-columns")
@section('body_class', "2-columns")
@section('active_dashboard', "active")

@push('styles')
<style>
    .org-chart {
        padding: 20px;
    }
    .org-node {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        margin: 10px 0;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .org-node:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transform: translateY(-2px);
    }
    .org-node.current-user {
        border-left: 4px solid #28a745;
        background: #f8fff9;
    }
    .org-node.superior {
        border-left: 4px solid #007bff;
        background: #f8f9ff;
    }
    .org-node.subordinate {
        border-left: 4px solid #ffc107;
        background: #fffcf0;
    }
    .org-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }
    .org-avatar i {
        font-size: 24px;
        color: #6c757d;
    }
    .org-info {
        flex: 1;
    }
    .org-name {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 5px;
    }
    .org-function {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 3px;
    }
    .org-organisation {
        font-size: 12px;
        color: #28a745;
    }
    .org-children {
        margin-left: 40px;
        border-left: 2px dashed #dee2e6;
        padding-left: 20px;
        display: none;
    }
    .org-children.show {
        display: block;
    }
    .org-toggle {
        margin-left: auto;
        padding: 5px 10px;
        color: #6c757d;
        transition: transform 0.3s ease;
    }
    .org-toggle.rotated {
        transform: rotate(90deg);
    }
    .employee-reference {
        position: absolute;
        top: 10px;
        right: 15px;
        background: rgba(255,255,255,0.2);
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }
    .employee-avatar-lg {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .employee-avatar-lg i {
        font-size: 48px;
    }
    .info-row {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .info-row:last-child {
        border-bottom: none;
    }
    .info-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }
    .info-icon i {
        font-size: 18px;
    }
    .info-content {
        flex: 1;
    }
    .info-label {
        font-size: 12px;
        color: #6c757d;
        margin-bottom: 2px;
    }
    .info-value {
        font-weight: 500;
        color: #343a40;
    }
    .badge-active {
        background: #28a745;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
    }
    .badge-inactive {
        background: #dc3545;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
    }
    .badge-mediateur {
        background: #17a2b8;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
    }
    .badge-non-mediateur {
        background: #6c757d;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
    }
    .toggle-all-btn {
        margin-bottom: 15px;
    }
</style>
@endpush

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Dashboard') }}</h3>
            </div>
            <div class="content-header-right col-md-6 col-12"></div>
        </div>
        
        <div class="content-body pb-5">
            @if($employe)
                <div class="row">
                    <div class="col-md-4">
                        <div class="card employee-card">
                            <div class="card-header text-center bg-dark text-white">
                                <span class="employee-reference">
                                    <i class="fas fa-id-card"></i> {{ $employe->reference ?? 'N/A' }}
                                </span>
                                <div class="employee-avatar-lg text-dark">
                                    <i class="fas fa-user-tie"></i>
                                </div>
                                <h4 class="mb-0 text-white">{{ $employe->first_name }} {{ $employe->last_name }}</h4>
                                <p class="mb-0">{{ $employe->fonction->name ?? 'N/A' }}</p>
                                <div class="mt-2">
                                    <span class="badge-{{ $employe->is_active ? 'active' : 'inactive' }} d-inline-block mr-1">
                                        {{ $employe->is_active ? __('Actif') : __('Inactif') }}
                                    </span>
                                    <span class="badge-{{ $employe->mediateur ? 'mediateur' : 'non-mediateur' }} d-inline-block">
                                        @if($employe->mediateur)
                                            <i class="fas fa-handshake"></i> {{ __('Médiateur') }}
                                        @else
                                            <i class="fas fa-user"></i> {{ __('Non médiateur') }}
                                        @endif
                                    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="info-row">
                                    <div class="info-icon dark">
                                        <i class="fas fa-briefcase"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{{ __('Fonction') }}</div>
                                        <div class="info-value">{{ $employe->fonction->name ?? 'N/A' }}</div>
                                        @if($employe->fonction && $employe->fonction->description)
                                            <small class="text-muted">{{ $employe->fonction->description }}</small>
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="info-row">
                                    <div class="info-icon dark">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{{ __('Email') }}</div>
                                        <div class="info-value">{{ $employe->email ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                
                                <div class="info-row">
                                    <div class="info-icon dark">
                                        <i class="fas fa-phone"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{{ __('Téléphone') }}</div>
                                        <div class="info-value">{{ $employe->phone ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                
                                <div class="info-row">
                                    <div class="info-icon dark">
                                        <i class="fas fa-building"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{{ __('Organisation') }}</div>
                                        <div class="info-value">{{ $employe->organisation->name ?? 'N/A' }}</div>
                                        @if($employe->organisation && $employe->organisation->description)
                                            <small class="text-muted">{{ $employe->organisation->description }}</small>
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="info-row">
                                    <div class="info-icon dark">
                                        <i class="fas fa-user-tag"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{{ __('Chauffeur') }}</div>
                                        <div class="info-value">
                                            @if($employe->is_driver)
                                                <span class="badge badge-success">{{ __('Oui') }}</span>
                                            @else
                                                <span class="badge badge-secondary">{{ __('Non') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                
                                @if($employe->superior)
                                <div class="info-row">
                                    <div class="info-icon dark">
                                        <i class="fas fa-user-tie"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{{ __('Supérieur hiérarchique') }}</div>
                                        <div class="info-value">
                                            {{ $employe->superior->first_name }} {{ $employe->superior->last_name }}
                                            <small class="d-block text-muted">{{ $employe->superior->fonction->name ?? '' }}</small>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                @if($employe->mediateur)
                                <div class="info-row">
                                    <div class="info-icon dark">
                                        <i class="fas fa-handshake"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{{ __('Médiateur') }}</div>
                                        <div class="info-value">
                                            {{ $employe->mediateur->reference ?? 'N/A' }}
                                            <small class="d-block text-muted">{{ __('Médiateur actif') }}</small>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <!-- Organigramme avec collapse -->
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <div>
                                    <h4 class="card-title mb-1">{{ __('Organigramme') }} ({{ $subordinates->count() }} {{ __('Sous-employés') }})</h4>
                                    <p class="card-subtitle text-muted">{{ __('Structure hiérarchique des employés') }}</p>
                                </div>
                                @if($subordinates->count() > 0)
                                    <button class="btn btn-sm btn-outline-primary toggle-all-btn" id="toggleAll">
                                        <i class="fas fa-expand-alt"></i> {{ __('Tout déplier') }}
                                    </button>
                                @endif
                            </div>
                            <div class="card-body org-chart">
                                @if($employe->superior)
                                    <!-- Supérieur hiérarchique -->
                                    <div class="org-node superior d-flex align-items-center" data-level="superior">
                                        <div class="org-avatar">
                                            <i class="fas fa-user-tie"></i>
                                        </div>
                                        <div class="org-info">
                                            <div class="org-name">
                                                {{ $employe->superior->first_name }} {{ $employe->superior->last_name }}
                                                <small class="text-muted">({{ __('Supérieur') }})</small>
                                            </div>
                                            <div class="org-function">{{ $employe->superior->fonction->name ?? 'N/A' }}</div>
                                            <div class="org-organisation">
                                                <i class="fas fa-building"></i> {{ $employe->superior->organisation->name ?? 'N/A' }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                
                                <!-- Employé actuel -->
                                <div class="org-node current-user d-flex align-items-center" data-level="current" data-id="{{ $employe->id }}">
                                    <div class="org-avatar">
                                        <i class="fas fa-user-circle"></i>
                                    </div>
                                    <div class="org-info">
                                        <div class="org-name">
                                            {{ $employe->first_name }} {{ $employe->last_name }}
                                            <small class="text-muted">({{ __('Vous') }})</small>
                                        </div>
                                        <div class="org-function">{{ $employe->fonction->name ?? 'N/A' }}</div>
                                        <div class="org-organisation">
                                            <i class="fas fa-building"></i> {{ $employe->organisation->name ?? 'N/A' }}
                                        </div>
                                    </div>
                                    @if($subordinates->count() > 0)
                                        <div class="org-toggle" data-toggle="children">
                                            <i class="fas fa-chevron-right"></i>
                                        </div>
                                    @endif
                                </div>
                                
                                <!-- Sous-employés avec structure collapse -->
                                @if($subordinates->count() > 0)
                                    <div class="org-children" id="children-{{ $employe->id }}">
                                        @foreach($subordinates as $index => $subordinate)
                                            <div class="org-node subordinate d-flex align-items-center" data-level="subordinate" data-id="{{ $subordinate->id }}">
                                                <div class="org-avatar">
                                                    <i class="fas fa-user"></i>
                                                </div>
                                                <div class="org-info">
                                                    <div class="org-name">
                                                        {{ $subordinate->first_name }} {{ $subordinate->last_name }}
                                                        @if(!$subordinate->is_active)
                                                            <span class="badge badge-danger ml-2">{{ __('Inactif') }}</span>
                                                        @endif
                                                    </div>
                                                    <div class="org-function">{{ $subordinate->fonction->name ?? 'N/A' }}</div>
                                                    <div class="org-organisation">
                                                        <i class="fas fa-building"></i> {{ $subordinate->organisation->name ?? 'N/A' }}
                                                    </div>
                                                </div>
                                                @if($subordinate->fils->count() > 0)
                                                    <div class="org-toggle" data-toggle="children" data-target="children-{{ $subordinate->id }}">
                                                        <i class="fas fa-chevron-right"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            
                                            <!-- Sous-sous employés (récursif) -->
                                            @if($subordinate->fils->count() > 0)
                                                <div class="org-children" id="children-{{ $subordinate->id }}">
                                                    @foreach($subordinate->fils as $grandchild)
                                                        <div class="org-node subordinate d-flex align-items-center" data-level="subordinate" data-id="{{ $grandchild->id }}">
                                                            <div class="org-avatar">
                                                                <i class="fas fa-user"></i>
                                                            </div>
                                                            <div class="org-info">
                                                                <div class="org-name">
                                                                    {{ $grandchild->first_name }} {{ $grandchild->last_name }}
                                                                    @if(!$grandchild->is_active)
                                                                        <span class="badge badge-danger ml-2">{{ __('Inactif') }}</span>
                                                                    @endif
                                                                </div>
                                                                <div class="org-function">{{ $grandchild->fonction->name ?? 'N/A' }}</div>
                                                                <div class="org-organisation">
                                                                    <i class="fas fa-building"></i> {{ $grandchild->organisation->name ?? 'N/A' }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                @else
                                    <div class="text-center text-muted py-4">
                                        <i class="fas fa-sitemap fa-3x mb-3"></i>
                                        <p>{{ __('Aucun sous-employé trouvé') }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    {{ __('Aucun employé associé à votre compte') }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Gestion des toggles pour chaque nœud
            document.querySelectorAll('[data-toggle="children"]').forEach(toggle => {
                toggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const targetId = this.dataset.target;
                    const childrenDiv = targetId ? 
                        document.getElementById(targetId) : 
                        this.closest('.org-node').nextElementSibling;
                    
                    if (childrenDiv && childrenDiv.classList.contains('org-children')) {
                        childrenDiv.classList.toggle('show');
                        this.classList.toggle('rotated');
                    }
                });
            });

            // Bouton tout déplier/replier
            const toggleAllBtn = document.getElementById('toggleAll');
            if (toggleAllBtn) {
                toggleAllBtn.addEventListener('click', function() {
                    const allChildren = document.querySelectorAll('.org-children');
                    const allToggles = document.querySelectorAll('[data-toggle="children"]');
                    const isAnyHidden = Array.from(allChildren).some(child => !child.classList.contains('show'));
                    
                    allChildren.forEach(child => {
                        if (isAnyHidden) {
                            child.classList.add('show');
                        } else {
                            child.classList.remove('show');
                        }
                    });
                    
                    allToggles.forEach(toggle => {
                        if (isAnyHidden) {
                            toggle.classList.add('rotated');
                        } else {
                            toggle.classList.remove('rotated');
                        }
                    });
                    
                    this.innerHTML = isAnyHidden ? 
                        '<i class="fas fa-compress-alt"></i> {{ __('Tout replier') }}' : 
                        '<i class="fas fa-expand-alt"></i> {{ __('Tout déplier') }}';
                });
            }

            // Cliquer sur un nœud pour afficher plus de détails (optionnel)
            document.querySelectorAll('.org-node').forEach(node => {
                node.addEventListener('click', function(e) {
                    if (!e.target.closest('[data-toggle="children"]')) {
                        // Ajoutez ici une action si nécessaire (ex: redirection vers la fiche de l'employé)
                        console.log('Node cliqué:', this.dataset.id);
                    }
                });
            });
        });
    </script>
@endpush