@extends('layouts.goberdata')

@section('title', 'Mis Horas')
@section('page_title', 'Mis Horas')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<script>
        // Role guard: only volunteers should stay here
        (function () {
            try {
                const user = JSON.parse(localStorage.getItem('user') || '{}');
                const roles = user.roles || (user.role ? [user.role] : []);
                if (roles.includes('admin') || roles.includes('candidate')) {
                    window.location.replace('/admin/dashboard');
                    return;
                }
                if (roles.includes('coordinator')) {
                    window.location.replace('/dashboard');
                    return;
                }
            } catch (_) {
                window.location.replace('/login');
            }
        })();
    </script>
@endpush

@section('content')
<!-- Top Bar -->
    <div class="gd-header text-white p-4">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <a href="{{ url('/volunteer/dashboard') }}" class="text-white hover:text-teal-200">← Volver</a>
                <h1 class="text-xl font-bold">⏰ Mis Horas Trabajadas</h1>
            </div>
            <a href="{{ url('/logout') }}" class="bg-white text-teal-700 px-4 py-2 rounded-lg font-semibold">Salir</a>
        </div>
    </div>

    <div class="container mx-auto p-6 max-w-6xl">
        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-blue-100 rounded-lg">
                        <span class="text-blue-600 text-xl">⏰</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-500">Total Horas</p>
                        <p class="text-lg font-semibold text-gray-900" id="totalHours">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-green-100 rounded-lg">
                        <span class="text-green-600 text-xl">✅</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-500">Horas Verificadas</p>
                        <p class="text-lg font-semibold text-gray-900" id="verifiedHours">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-yellow-100 rounded-lg">
                        <span class="text-yellow-600 text-xl">⏳</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-500">Pendientes</p>
                        <p class="text-lg font-semibold text-gray-900" id="pendingHours">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-purple-100 rounded-lg">
                        <span class="text-purple-600 text-xl">📊</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-500">Promedio/Día</p>
                        <p class="text-lg font-semibold text-gray-900" id="avgHoursPerDay">-</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Hours Form -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">➕ Registrar Nuevas Horas</h3>
            <form id="addHoursForm" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fecha</label>
                    <input type="date" id="hoursDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Horas Trabajadas</label>
                    <input type="number" id="hoursWorked" step="0.5" min="0.5" max="12" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="2.5" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Actividad</label>
                    <select id="activityType" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                        <option value="">Seleccionar...</option>
                        <option value="canvassing">Volanteo</option>
                        <option value="phone_calls">Llamadas</option>
                        <option value="event_support">Apoyo Eventos</option>
                        <option value="data_entry">Registro Datos</option>
                        <option value="social_media">Redes Sociales</option>
                        <option value="other">Otros</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>
                    <input type="text" id="description" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Describe la actividad realizada..." required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Ubicación</label>
                    <input type="text" id="location" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Barrio Norte">
                </div>
                <div class="md:col-span-3">
                    <button type="submit" class="bg-teal-600 text-white px-6 py-2 rounded-lg hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
                        Registrar Horas
                    </button>
                </div>
            </form>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <div class="flex flex-wrap gap-4">
                <select id="activityFilter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">
                    <option value="">Todos los tipos</option>
                    <option value="canvassing">Volanteo</option>
                    <option value="phone_calls">Llamadas</option>
                    <option value="event_support">Eventos</option>
                    <option value="data_entry">Datos</option>
                    <option value="social_media">Redes</option>
                    <option value="other">Otros</option>
                </select>
                <input type="date" id="dateFrom" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Desde">
                <input type="date" id="dateTo" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Hasta">
                <button onclick="applyFilters()" class="bg-teal-600 text-white px-4 py-2 rounded-md hover:bg-teal-700">Filtrar</button>
            </div>
        </div>

        <!-- Hours Table -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Historial de Horas</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actividad</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Horas</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ubicación</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
                        </tr>
                    </thead>
                    <tbody id="hoursTableBody" class="bg-white divide-y divide-gray-200">
                        <!-- Hours will be loaded here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        let hours = [];
        let filteredHours = [];

        // Load hours data
        async function loadHours() {
            try {
                const response = await fetch('/api/volunteer/hours');
                const data = await response.json();
                hours = data.hours || [];
                filteredHours = [...hours];
                updateStats();
                renderHours();
            } catch (error) {
                console.error('Error loading hours:', error);
                loadFallbackData();
            }
        }

        function loadFallbackData() {
            hours = [
                {
                    id: 1,
                    date: '2025-10-23',
                    hours_worked: 5.5,
                    activity_type: 'event_support',
                    description: 'Apoyo en evento comunitario',
                    location: 'Plaza Principal',
                    verified_at: '2025-10-23T18:00:00Z'
                },
                {
                    id: 2,
                    date: '2025-10-22',
                    hours_worked: 3.0,
                    activity_type: 'canvassing',
                    description: 'Volanteo en barrio norte',
                    location: 'Barrio Norte',
                    verified_at: null
                },
                {
                    id: 3,
                    date: '2025-10-21',
                    hours_worked: 2.0,
                    activity_type: 'phone_calls',
                    description: 'Llamadas de confirmación',
                    location: 'Oficina de Campaña',
                    verified_at: '2025-10-21T16:30:00Z'
                }
            ];
            filteredHours = [...hours];
            updateStats();
            renderHours();
        }

        function updateStats() {
            const totalHours = hours.reduce((sum, h) => sum + h.hours_worked, 0);
            const verifiedHours = hours.filter(h => h.verified_at).reduce((sum, h) => sum + h.hours_worked, 0);
            const pendingHours = hours.filter(h => !h.verified_at).reduce((sum, h) => sum + h.hours_worked, 0);

            // Calculate average hours per day
            const uniqueDays = new Set(hours.map(h => h.date)).size;
            const avgHoursPerDay = uniqueDays > 0 ? (totalHours / uniqueDays).toFixed(1) : 0;

            document.getElementById('totalHours').textContent = totalHours.toFixed(1);
            document.getElementById('verifiedHours').textContent = verifiedHours.toFixed(1);
            document.getElementById('pendingHours').textContent = pendingHours.toFixed(1);
            document.getElementById('avgHoursPerDay').textContent = avgHoursPerDay;
        }

        function renderHours() {
            const tbody = document.getElementById('hoursTableBody');
            tbody.innerHTML = '';

            filteredHours.forEach(hour => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        ${new Date(hour.date).toLocaleDateString()}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">${hour.description}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium rounded-full ${getTypeBadgeClass(hour.activity_type)}">
                            ${getTypeLabel(hour.activity_type)}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        ${hour.hours_worked}h
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        ${hour.location || '-'}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium rounded-full ${hour.verified_at ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">
                            ${hour.verified_at ? 'Verificado' : 'Pendiente'}
                        </span>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        function getTypeBadgeClass(type) {
            const classes = {
                'canvassing': 'bg-blue-100 text-blue-800',
                'phone_calls': 'bg-green-100 text-green-800',
                'event_support': 'bg-purple-100 text-purple-800',
                'data_entry': 'bg-yellow-100 text-yellow-800',
                'social_media': 'bg-pink-100 text-pink-800',
                'other': 'bg-gray-100 text-gray-800'
            };
            return classes[type] || 'bg-gray-100 text-gray-800';
        }

        function getTypeLabel(type) {
            const labels = {
                'canvassing': 'Volanteo',
                'phone_calls': 'Llamadas',
                'event_support': 'Eventos',
                'data_entry': 'Datos',
                'social_media': 'Redes',
                'other': 'Otros'
            };
            return labels[type] || type;
        }

        // Add hours form submission
        document.getElementById('addHoursForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const formData = {
                date: document.getElementById('hoursDate').value,
                hours_worked: parseFloat(document.getElementById('hoursWorked').value),
                activity_type: document.getElementById('activityType').value,
                description: document.getElementById('description').value,
                location: document.getElementById('location').value
            };

            try {
                const response = await fetch('/api/volunteer/hours', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData)
                });

                if (response.ok) {
                    // Reset form
                    document.getElementById('addHoursForm').reset();
                    // Reload data
                    loadHours();
                    alert('Horas registradas exitosamente');
                } else {
                    alert('Error al registrar las horas');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Error al registrar las horas');
            }
        });

        // Filter functions
        function applyFilters() {
            const activityFilter = document.getElementById('activityFilter').value;
            const dateFrom = document.getElementById('dateFrom').value;
            const dateTo = document.getElementById('dateTo').value;

            filteredHours = hours.filter(hour => {
                const activityMatch = !activityFilter || hour.activity_type === activityFilter;
                const dateMatch = (!dateFrom || hour.date >= dateFrom) && (!dateTo || hour.date <= dateTo);
                return activityMatch && dateMatch;
            });

            renderHours();
        }

        // Set default date to today
        document.getElementById('hoursDate').value = new Date().toISOString().split('T')[0];

        // Load data on page load
        document.addEventListener('DOMContentLoaded', loadHours);
    </script>
@endpush