{% extends 'base_app.html.twig' %}

{% block title %}Gestion des employés | Xtra{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <style>
        .view-hidden { display: none; }
        .view-active { display: block; }
        /* Calendar Grid */
        .calendar-grid {
            display: grid;
            grid-template-columns: 200px repeat(7, 1fr);
            border: 1px solid #e2e8f0;
        }
        .calendar-header {
            font-weight: 600;
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #e2e8f0;
            background-color: #f8fafc;
        }
        .calendar-cell {
            padding: 10px;
            border-bottom: 1px solid #e2e8f0;
            border-right: 1px solid #e2e8f0;
            min-height: 80px;
            position: relative;
        }
        .calendar-event {
            font-size: 0.75rem;
            padding: 4px 8px;
            border-radius: 4px;
            margin-bottom: 4px;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
{% endblock %}

{% block body %}
<div class="flex flex-col h-full p-8" x-data="{ view: 'table' }">
    
    <!-- Header -->
    <div class="flex justify-between items-center mb-8">
        <div class="flex items-center gap-4">
            <h1 class="text-2xl font-bold text-slate-900">Gestion des employés</h1>
            
            <!-- View Switcher -->
            <div class="flex bg-slate-100 p-1 rounded-lg">
                <button @click="view = 'table'" :class="{'bg-white shadow-sm text-slate-900': view === 'table', 'text-slate-500 hover:text-slate-700': view !== 'table'}" class="p-2 rounded-md transition-all">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                    </svg>
                </button>
                <button @click="view = 'calendar'" :class="{'bg-white shadow-sm text-slate-900': view === 'calendar', 'text-slate-500 hover:text-slate-700': view !== 'calendar'}" class="p-2 rounded-md transition-all">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </button>
                <button @click="view = 'map'; setTimeout(() => map.invalidateSize(), 100)" :class="{'bg-white shadow-sm text-slate-900': view === 'map', 'text-slate-500 hover:text-slate-700': view !== 'map'}" class="p-2 rounded-md transition-all">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0121 18.382V7.618a1 1 0 01-.553-.894L15 7m0 13V7" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="flex gap-4">
            <div class="relative">
                <input type="text" placeholder="Search" class="pl-10 pr-4 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 w-64">
                <svg class="w-4 h-4 text-slate-400 absolute left-3 top-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
            </div>
            <button class="bg-white border border-slate-300 text-slate-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-2">
                Embaucher un employé
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </button>
        </div>
    </div>

    <!-- VIEW 1: TABLE -->
    <div x-show="view === 'table'" class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <table class="min-w-full divide-y divide-slate-200">
            <thead class="bg-slate-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Nom & Prénom</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Poste/Mission</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Dates de la mission</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Statut</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Heures pointées</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-slate-200">
                {% for employee in employees %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-slate-900">{{ employee.firstName }} {{ employee.lastName }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-slate-500">{{ employee.jobTitle }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-slate-500">{{ employee.missionStart|date('d/m/y') }} - {{ employee.missionEnd|date('d/m/y') }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if employee.status == 'En mission' %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800">En mission</span>
                        {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Terminé</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
                        {{ employee.hoursWorked }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">
                            <svg class="w-4 h-4 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
                        </a>
                        <a href="#" class="text-red-600 hover:text-red-900">
                            <svg class="w-4 h-4 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- VIEW 2: CALENDAR -->
    <div x-show="view === 'calendar'" class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 overflow-x-auto">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-semibold text-slate-900">< Juin 2025 ></h2>
        </div>
        
        <div class="calendar-grid rounded-lg overflow-hidden">
            <!-- Header -->
            <div class="calendar-header bg-slate-50">Employé</div>
            <div class="calendar-header">Lun 27</div>
            <div class="calendar-header">Mar 28</div>
            <div class="calendar-header">Mer 29</div>
            <div class="calendar-header">Jeu 30</div>
            <div class="calendar-header">Ven 31</div>
            <div class="calendar-header">Sam 01</div>
            <div class="calendar-header">Dim 02</div>

            <!-- Rows -->
            {% for employee in employees|slice(0, 5) %}
            <div class="calendar-cell font-medium text-sm text-slate-700 flex items-center pl-4 bg-slate-50 border-r">
                {{ employee.firstName }} {{ employee.lastName }}
            </div>
            {% for i in 1..7 %}
                <div class="calendar-cell">
                    {% if random(0, 2) > 0 %}
                    <div class="calendar-event bg-indigo-600">
                        {{ employee.jobTitle }}
                    </div>
                    {% endif %}
                </div>
            {% endfor %}
            {% endfor %}
        </div>
    </div>

    <!-- VIEW 3: MAP -->
    <div x-show="view === 'map'" class="bg-white rounded-xl shadow-sm border border-slate-200 p-1 h-[600px]">
        <div id="map" class="w-full h-full rounded-lg z-0"></div>
    </div>

</div>

<!-- Scripts -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="//unpkg.com/alpinejs" defer></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Map
        var map = L.map('map').setView([44.8378, -0.5795], 13); // Bordeaux center

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Add markers for employees
        const employees = [
            {% for employee in employees %}
            {
                name: "{{ employee.firstName }} {{ employee.lastName }}",
                lat: {{ employee.latitude|default(44.8378) }},
                lng: {{ employee.longitude|default(-0.5795) }},
                job: "{{ employee.jobTitle }}"
            },
            {% endfor %}
        ];

        employees.forEach(emp => {
            L.marker([emp.lat, emp.lng])
                .addTo(map)
                .bindPopup(`<b>${emp.name}</b><br>${emp.job}`);
        });

        // Expose map to window so Alpine can access it to invalidateSize
        window.map = map;
    });
</script>
{% endblock %}