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

{% block title %}Dashboard | Xtra{% endblock %}

{% block body %}
<div class="flex h-full">
    <!-- Main Content -->
    <div class="flex-1 p-8 overflow-y-auto">
        <!-- Top Stats Row 1 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <!-- Offres actives -->
            <div class="bg-emerald-100 rounded-xl p-6 border border-emerald-200 shadow-sm">
                <h3 class="text-sm font-medium text-slate-600 mb-2">Offres actives</h3>
                <p class="text-4xl font-bold text-slate-900">{{ job_offers|length }}</p>
            </div>

            <!-- Employés en mission -->
            <div class="bg-white rounded-xl p-6 border border-slate-200 shadow-sm">
                <h3 class="text-sm font-medium text-slate-600 mb-2">Employés en mission</h3>
                <p class="text-4xl font-bold text-slate-900">14</p>
            </div>

            <!-- Contrat à signer -->
            <div class="bg-orange-100 rounded-xl p-6 border border-orange-200 shadow-sm">
                <h3 class="text-sm font-medium text-slate-600 mb-2">Contrat à signer</h3>
                <p class="text-4xl font-bold text-slate-900">47</p>
            </div>
        </div>

        <!-- Stats Row 2 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 max-w-4xl">
            <!-- Candidats -->
            <div class="bg-cyan-50 rounded-xl p-6 border border-cyan-100 shadow-sm">
                <h3 class="text-sm font-medium text-slate-600 mb-2">Candidats qui ont postulé</h3>
                <p class="text-4xl font-bold text-slate-900">{{ candidates|length }}</p>
            </div>

            <!-- Matching -->
            <div class="bg-cyan-50 rounded-xl p-6 border border-cyan-100 shadow-sm">
                <h3 class="text-sm font-medium text-slate-600 mb-2">Matching automatique</h3>
                <p class="text-4xl font-bold text-slate-900">127</p>
            </div>
        </div>

        <!-- Action Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Poster une offre -->
            <a href="{{ path('app_job_offer_new') }}" class="group block bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                <div class="h-48 bg-slate-100 overflow-hidden relative">
                    <img src="{{ asset('images/xtra banner.png') }}" alt="Tracteur" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-8 text-center">
                    <h3 class="text-2xl font-bold text-slate-900 mb-2">Poster une offre</h3>
                    <p class="text-slate-500">Publiez une mission et recevez des candidatures.</p>
                </div>
            </a>

            <!-- Embaucher directement -->
            <a href="#" class="group block bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                <div class="h-48 bg-slate-100 overflow-hidden relative">
                    <img src="{{ asset('images/saisonnier.png') }}" alt="Agriculteur" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-8 text-center">
                    <h3 class="text-2xl font-bold text-slate-900 mb-2">Embaucher directement</h3>
                    <p class="text-slate-500">Créez un contrat pour un ouvrier déjà trouvé.</p>
                </div>
            </a>
        </div>
    </div>

    <!-- Right Sidebar: Notifications -->
    <div class="w-80 bg-white border-l border-slate-200 p-6 hidden xl:block overflow-y-auto">
        <h3 class="text-lg font-bold text-slate-900 mb-6">Notifications</h3>
        
        <div class="space-y-6">
            <!-- Notif 1 -->
            <div class="flex gap-3">
                <div class="flex-shrink-0 mt-1">
                    <div class="h-8 w-8 rounded-full bg-slate-100 flex items-center justify-center">
                        <svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <p class="text-sm text-slate-900 font-medium">Un contrat est prêt à être si...</p>
                    <p class="text-xs text-slate-400 mt-0.5">Aujourd'hui</p>
                </div>
                <div class="h-2 w-2 rounded-full bg-red-500 mt-2"></div>
            </div>

            <!-- Notif 2 -->
            <div class="flex gap-3">
                <div class="flex-shrink-0 mt-1">
                    <div class="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center">
                        <svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <p class="text-sm text-slate-900 font-medium">Le contrat de travail pour M...</p>
                    <p class="text-xs text-slate-400 mt-0.5">Aujourd'hui</p>
                </div>
                <div class="h-2 w-2 rounded-full bg-red-500 mt-2"></div>
            </div>

             <!-- Notif 3 -->
            <div class="flex gap-3">
                <div class="flex-shrink-0 mt-1">
                    <div class="h-8 w-8 rounded-full bg-slate-100 flex items-center justify-center">
                        <svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <p class="text-sm text-slate-900 font-medium">Un contrat est prêt à être si...</p>
                    <p class="text-xs text-slate-400 mt-0.5">Aujourd'hui</p>
                </div>
                <div class="h-2 w-2 rounded-full bg-red-500 mt-2"></div>
            </div>

            <!-- Notif 4 -->
            <div class="flex gap-3">
                <div class="flex-shrink-0 mt-1">
                    <div class="h-8 w-8 rounded-full bg-red-100 flex items-center justify-center">
                        <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <p class="text-sm text-slate-900 font-medium">Le justificatif d'identité de P...</p>
                    <p class="text-xs text-slate-400 mt-0.5">Aujourd'hui</p>
                </div>
                <div class="h-2 w-2 rounded-full bg-red-500 mt-2"></div>
            </div>

             <!-- Notif 5 -->
            <div class="flex gap-3">
                <div class="flex-shrink-0 mt-1">
                    <div class="h-8 w-8 rounded-full bg-slate-100 flex items-center justify-center">
                        <svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <p class="text-sm text-slate-900 font-medium">Un contrat est prêt à être si...</p>
                    <p class="text-xs text-slate-400 mt-0.5">Il y a 6 jours</p>
                </div>
            </div>
        </div>
        
        <div class="mt-8 text-right">
            <a href="#" class="text-sm font-medium text-slate-500 hover:text-slate-900">Voir plus</a>
        </div>
    </div>
</div>
{% endblock %}