@extends('layouts.frontend')

@section('page-title', __('Dashboard'))
@section('page-heading', __('Dashboard'))

@section('content')

    @include('partials.messages')
             <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
    <div class="max-w-xl w-full mx-4">
        <!-- Personnel Tracker -->
        <div class="bg-white rounded-lg shadow-2xl overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-r from-military-dark to-military-green text-white p-6 text-center">
                <div class="w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-key text-3xl text-military-dark"></i>
                </div>
                <h1 class="text-2xl font-bold mb-2">Personnel Tracker</h1>
                <p class="text-gray-300">Enter your Service Number to track personnel</p>
            </div>

            <!-- Login Form -->
            <div class="p-6">
                
                
               <form id="trackerForm" class="space-y-6">
                @csrf
                <div>
                    <label for="service_code" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-id-card mr-2 text-military-green"></i>
                        Enter Service Number
                    </label>
                    <input type="text" id="service_code" name="service_code" 
                        placeholder="Enter service number (e.g., SVC-001)"
                        required class="w-full px-4 py-3 border border-gray-300 rounded-lg text-center text-lg font-mono">
                </div>

                <button type="submit" id="submitBtn" class="w-full bg-gradient-to-r from-military-green to-military-dark text-white py-3 px-4 rounded-lg font-bold">
                    <span id="btnText">Track Personnel</span>
                </button>
            </form>


                
            </div>

            <div id="personnel-result" class="mt-6 p-4 border-t border-gray-200 hidden">
                </div>
        </div>

        <!-- Example Service Numbers (for demo purposes - remove in production) -->
        
    </div>
</div>

@stop
@push('scripts')
<script>
document.getElementById('trackerForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const serviceCode = document.getElementById('service_code').value;
    const resultDiv = document.getElementById('personnel-result');
    const btnText = document.getElementById('btnText');
    
    // UI Feedback: Reset display and show loading state
    btnText.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Searching...';
    resultDiv.classList.add('hidden');
    resultDiv.innerHTML = ''; 

    fetch("{{ route('trackpersonnel') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({ service_code: serviceCode })
    })
    .then(async response => {
        const data = await response.json();
        if (!response.ok) {
            // Throw the error data to the .catch() block
            throw new Error(data.message || 'An unexpected error occurred.');
        }
        return data;
    })
    .then(res => {
        btnText.innerText = 'Track Personnel';
        resultDiv.classList.remove('hidden');

        const person = res.data;
        const passportUrl = `{{ url('/') }}/public/upload/users/${person.passport}`;

resultDiv.innerHTML = `
    <div class="bg-white rounded-2xl border border-gray-200 shadow-2xl overflow-hidden animate__animated animate__zoomIn">
        <div class="bg-military-dark p-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                <span class="text-white text-xs font-bold uppercase tracking-widest">Official Record: ${person.service_code}</span>
            </div>
            <i class="fas fa-shield-alt text-yellow-400"></i>
        </div>

        <div class="p-8">
            <div class="flex flex-col items-center mb-8">
                <div class="relative">
                    <img src="${passportUrl}" 
                         alt="${person.name}" 
                         class="w-40 h-40 md:w-48 md:h-48 object-cover rounded-full border-4 border-military-green shadow-xl"
                         onerror="this.src='https://ui-avatars.com/api/?name=${person.name}&background=1b4332&color=fff&size=200'">
                    <div class="absolute bottom-2 right-2 bg-military-green text-white p-2 rounded-full border-2 border-white">
                        <i class="fas fa-check text-xs"></i>
                    </div>
                </div>
                <h4 class="mt-4 text-3xl font-extrabold text-military-dark text-center uppercase tracking-tight">${person.name}</h4>
                <p class="text-military-green font-semibold tracking-wide">${person.position} • ${person.rank}</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 bg-gray-50 rounded-xl p-6 border border-gray-100">
                <div class="space-y-1">
                    <span class="text-gray-400 text-xxs font-bold uppercase">Email Address</span>
                    <p class="text-gray-800 font-medium break-all">${person.email}</p>
                </div>
                <div class="space-y-1">
                    <span class="text-gray-400 text-xxs font-bold uppercase">Passport Number</span>
                    <p class="text-gray-800 font-mono font-bold">${person.passport_number}</p>
                </div>
                <div class="space-y-1">
                    <span class="text-gray-400 text-xxs font-bold uppercase">Personnel Age</span>
                    <p class="text-gray-800 font-bold">${person.age} Years Old</p>
                </div>
                <div class="space-y-1">
                    <span class="text-gray-400 text-xxs font-bold uppercase">Service Duration</span>
                    <p class="text-gray-800 font-bold">${person.years_of_service} Years Active</p>
                </div>
            </div>

            <div class="mt-8">
                <div class="flex items-center space-x-2 mb-3">
                    <span class="h-px flex-1 bg-gray-200"></span>
                    <span class="text-gray-400 text-xxs font-bold uppercase px-2">Professional Biography</span>
                    <span class="h-px flex-1 bg-gray-200"></span>
                </div>
                <p class="text-gray-600 text-sm leading-relaxed text-center italic px-4">
                    "${person.biography}"
                </p>
            </div>
        </div>

        <div class="bg-gray-50 px-8 py-4 border-t border-gray-100 flex justify-center">
            <button onclick="window.print()" class="text-military-dark hover:text-military-green text-xs font-bold transition-colors">
                <i class="fas fa-print mr-1"></i> PRINT VERIFICATION
            </button>
        </div>
    </div>
`;
    })
    .catch(error => {
        btnText.innerText = 'Track Personnel';
        resultDiv.classList.remove('hidden');
        
        // Display the Error in a red alert div
        resultDiv.innerHTML = `
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-sm animate__animated animate__shakeX" role="alert">
                <div class="flex">
                    <div class="py-1"><i class="fas fa-exclamation-circle mr-3"></i></div>
                    <div>
                        <p class="font-bold">Entry Error</p>
                        <p class="text-sm">${error.message}</p>
                    </div>
                </div>
            </div>
        `;
    });
});
</script>
@endpush