@extends('layouts.app')

@section('title', 'Réconciliation AD / Microsoft 365')
@section('header', 'Réconciliation AD vs Microsoft 365')

@section('content')
<div class="bg-white rounded shadow p-6 max-w-xl">
    <p class="text-sm text-gray-600 mb-4">
        Compare les utilisateurs et groupes importés depuis l'Active Directory avec ceux
        présents dans Microsoft 365 (Entra ID). La réconciliation se fait par :
        SID (onPremisesSecurityIdentifier), login SAM, UPN ou email.
    </p>

    @if($connecteurs->isEmpty())
        <p class="text-amber-700 bg-amber-50 px-4 py-3 rounded">Aucun connecteur Microsoft 365 actif. Créez-en un depuis <a href="{{ route('admin.connecteurs.index') }}" class="underline">Connecteurs</a>.</p>
    @else
        <form method="POST" action="{{ route('admin.reconciliation.comparer') }}" class="space-y-4" x-data="{ loading: false }" @submit="loading = true">
            @csrf
            <div>
                <label class="block text-sm font-medium mb-1">Connecteur Microsoft 365</label>
                <select name="connecteur_id" class="w-full px-3 py-2 border rounded" required>
                    @foreach($connecteurs as $c)
                    <option value="{{ $c->id }}">{{ $c->nom }} ({{ $c->configuration['tenant_id'] ?? '?' }})</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" :disabled="loading" class="px-4 py-2 rounded flex items-center gap-2" :class="loading ? 'bg-blue-400 text-white cursor-not-allowed' : 'bg-blue-600 text-white hover:bg-blue-700'">
                <span x-show="loading"><svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg></span>
                <span x-show="!loading">Lancer la réconciliation</span>
                <span x-show="loading">Réconciliation en cours...</span>
            </button>
        </form>
    @endif
</div>
@endsection