@extends('dashboard.layouts.app')

@section('title', 'Marquer ma présence - UAC eservices')

@section('page-title', 'Marquer ma présence')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tableau de bord</a></li>
    <li class="breadcrumb-item active" aria-current="page">Ma présence</li>
@endsection

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Marquage de présence - {{ $dateFormatee ?? \Carbon\Carbon::now()->locale('fr')->isoFormat('dddd D MMMM YYYY') }}</h4>
            </div>
            
                                <small id="geo-info" class="text-muted">Localisation en cours...</small>

                                <script>
                                navigator.geolocation.getCurrentPosition(pos => {
                                    document.getElementById('geo-info').innerText =
                                        `Latitude : ${pos.coords.latitude.toFixed(6)}, Longitude : ${pos.coords.longitude.toFixed(6)} (±${pos.coords.accuracy}m)`;
                                });
                                </script>
            <div class="card-body">
                <!-- Alerte géolocalisation -->
                <div class="alert alert-warning d-flex align-items-center mb-3">
                    <i class="mdi mdi-map-marker-alert fs-3 me-3"></i>
                    <div>
                        <strong><i class="mdi mdi-information"></i> Vérification géographique activée</strong>
                        <p class="mb-0 small">
                            Vous devez être dans une zone autorisée pour marquer votre présence. 
                            Votre navigateur vous demandera l'autorisation d'accéder à votre position GPS.
                        </p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <div class="text-center">
                            @if($etat === 'aucune')
                                <div class="mb-4">
                                    <h5 id="statusMessage" class="text-muted">Vous n'avez pas encore marqué votre arrivée aujourd'hui</h5>
                                    <p id="statusDescription" class="text-muted">Cliquez sur le bouton ci-dessous pour enregistrer votre heure d'arrivée</p>
                                </div>
                                <button id="btnPresence" class="btn btn-success btn-lg" onclick="marquerPresence()">
                                    <i class="mdi mdi-clock-in"></i>
                                    <span id="btnText">Marquer mon arrivée</span>
                                </button>
                            @elseif($etat === 'arrivee')
                                <div class="mb-4">
                                    <h5 id="statusMessage" class="text-success">Arrivée enregistrée à {{ $presence->heure_arrivee }}</h5>
                                    <p id="statusDescription" class="text-muted">Cliquez sur le bouton ci-dessous pour enregistrer votre heure de départ</p>
                                </div>
                                <button id="btnPresence" class="btn btn-warning btn-lg" onclick="marquerPresence()">
                                    <i class="mdi mdi-clock-out"></i>
                                    <span id="btnText">Marquer mon départ</span>
                                </button>
                            @else
                                <div class="mb-4">
                                    <h5 id="statusMessage" class="text-success">Présence complète pour aujourd'hui</h5>
                                    <p id="statusDescription" class="text-muted">Votre arrivée et départ ont été enregistrés</p>
                                </div>
                                <button id="btnPresence" class="btn btn-secondary btn-lg" disabled>
                                    <i class="mdi mdi-lock"></i>
                                    <span id="btnText">Présence verrouillée</span>
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-info">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0">
                                    <i class="mdi mdi-information"></i>
                                    Informations du jour
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <strong>Heure actuelle :</strong>
                                    <span id="heureActuelle" class="text-primary">{{ $heureActuelle ?? date('H:i:s') }}</span>
                                </div>
                                @if($presence)
                                    <div id="arrivalInfo" class="mb-2">
                                        <strong>Heure d'arrivée :</strong>
                                        <span class="{{ $presence->estEnRetard() ? 'text-warning' : 'text-success' }}">
                                            {{ $presence->heure_arrivee ?? 'Non enregistrée' }}
                                            @if($presence->estEnRetard())
                                                <i class="mdi mdi-alert"></i>
                                            @endif
                                        </span>
                                    </div>
                                    <div id="departureInfo" class="mb-2">
                                        <strong>Heure de départ :</strong>
                                        <span class="text-{{ $presence->heure_depart ? 'success' : 'muted' }}">
                                            {{ $presence->heure_depart ?? 'Non enregistrée' }}
                                        </span>
                                    </div>
                                    @if($presence->heure_arrivee && $presence->heure_depart)
                                        <div class="mb-2">
                                            <strong>Durée de travail :</strong>
                                            <span class="text-info">{{ number_format($presence->getDureeTravail(), 1) }} heures</span>
                                        </div>
                                    @endif
                                    <div id="statusInfo" class="mb-2">
                                        <strong>Statut :</strong>
                                        <span class="badge bg-{{ $presence->statut === 'Présent' ? 'success' : 'danger' }}">
                                            {{ $presence->statut }}
                                        </span>
                                        @if($presence->estEnRetard())
                                            <span class="badge bg-warning text-dark">En retard</span>
                                        @endif
                                    </div>
                                @else
                                    <div id="arrivalInfo" class="mb-2" style="display: none;">
                                        <strong>Heure d'arrivée :</strong>
                                        <span class="text-success"></span>
                                    </div>
                                    <div id="departureInfo" class="mb-2" style="display: none;">
                                        <strong>Heure de départ :</strong>
                                        <span class="text-muted"></span>
                                    </div>
                                    <div id="statusInfo" class="mb-2" style="display: none;">
                                        <strong>Statut :</strong>
                                        <span class="badge"></span>
                                    </div>
                                    <div id="noPresenceInfo">
                                        <p class="text-muted mb-0">Aucune présence enregistrée aujourd'hui</p>
                                    </div>
                                @endif

                                <small id="geo-info" class="text-muted">Localisation en cours...</small>

                                <script>
                                navigator.geolocation.getCurrentPosition(pos => {
                                    document.getElementById('geo-info').innerText =
                                        `Latitude : ${pos.coords.latitude.toFixed(6)}, Longitude : ${pos.coords.longitude.toFixed(6)} (±${pos.coords.accuracy}m)`;
                                });
                                </script>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->
@endsection

@push('scripts')
<script>

    fetch('/marquer-presence', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
    },
    body: JSON.stringify({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        device_id: localStorage.getItem('device_id') // identifiant FingerprintJS
    })
})

function marquerPresence() {
    const btn = document.getElementById('btnPresence');
    const btnText = document.getElementById('btnText');
    const originalText = btnText.textContent;

    btn.disabled = true;
    btnText.textContent = 'Récupération de la position...';

    if (!navigator.geolocation) {
        toastr.error('La géolocalisation n\'est pas supportée par votre navigateur');
        btn.disabled = false;
        btnText.textContent = originalText;
        return;
    }

    const options = {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 0
    };

    console.log("📡 Tentative de géolocalisation avec haute précision...");

    // Fonction récursive pour retenter jusqu’à précision acceptable
    function getAccuratePosition(attempt = 1) {
        navigator.geolocation.getCurrentPosition(
            function (position) {
                const lat = position.coords.latitude.toFixed(8);
                const lon = position.coords.longitude.toFixed(8);
                const accuracy = position.coords.accuracy;

                console.log(`✅ Position tentative ${attempt}:`, lat, lon, `(${accuracy} m)`);

                // Si précision trop faible, on réessaie (jusqu’à 3 fois)
                if (accuracy > 50 && attempt < 3) {
                    toastr.info(`Précision ${Math.round(accuracy)} m — nouvelle tentative...`, 'Localisation');
                    setTimeout(() => getAccuratePosition(attempt + 1), 2000);
                    return;
                }

                // Assez précis → on envoie au backend
                btnText.textContent = 'Enregistrement...';

                $.ajax({
                    url: '{{ route("employee.presence.marquer") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        latitude: lat,
                        longitude: lon
                    },
                    success: function (data) {
                        console.log('Réponse reçue:', data);
                        if (data.success) {
                            toastr.success(data.message);
                            location.reload(); // ou ta logique de mise à jour
                        } else {
                            toastr.error(data.message);
                            btn.disabled = false;
                            btnText.textContent = originalText;
                        }
                    },
                    error: function (xhr) {
                        console.error('Erreur AJAX:', xhr);
                        let msg = 'Erreur inconnue.';
                        if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;
                        else if (xhr.status === 403) msg = "Vous n'êtes pas dans une zone autorisée.";
                        toastr.error(msg);
                        btn.disabled = false;
                        btnText.textContent = originalText;
                    }
                });
            },
            function (error) {
                console.warn('Erreur géolocalisation:', error);
                if (attempt < 3) {
                    toastr.info('Nouvelle tentative de localisation...', 'Info');
                    setTimeout(() => getAccuratePosition(attempt + 1), 2000);
                } else {
                    toastr.error('Impossible d’obtenir votre position avec précision suffisante.');
                    btn.disabled = false;
                    btnText.textContent = originalText;
                }
            },
            options
        );
    }

    getAccuratePosition();
}


// Affiche l'heure actuelle en temps réel (optionnel)
function afficherHeureActuelle() {
    const heureElement = document.getElementById('heureActuelle');
    if (heureElement) {
        const maintenant = new Date();
        const heureFormatee = maintenant.toLocaleTimeString('fr-FR', {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
        heureElement.textContent = heureFormatee;
    }
}

// Met à jour l'heure toutes les secondes
setInterval(afficherHeureActuelle, 1000);
afficherHeureActuelle();
</script>
@endpush