@extends('layouts.app')

@section('title', 'Maombi Yangu')
@section('page-title', 'Maombi Yangu')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Maombi Yangu</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Angalia maombi yako ya kuongeza makato</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ route('deductions.create') }}" 
               class="inline-flex items-center px-4 py-2 bg-primary-600 border border-transparent rounded-lg font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-colors">
                <span class="material-icons mr-2">add</span>
                Ombi Jipya
            </a>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-2xl">pending</span>
                </div>
                <div class="ml-4">
                    <p class="text-yellow-100">Inasubiri</p>
                    <p class="text-2xl font-bold">{{ $applications->where('status', 'pending')->count() }}</p>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-green-400 to-green-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-2xl">check_circle</span>
                </div>
                <div class="ml-4">
                    <p class="text-green-100">Imeidhinishwa</p>
                    <p class="text-2xl font-bold">{{ $applications->where('status', 'approved')->count() }}</p>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-red-400 to-red-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-2xl">cancel</span>
                </div>
                <div class="ml-4">
                    <p class="text-red-100">Imekataliwa</p>
                    <p class="text-2xl font-bold">{{ $applications->where('status', 'rejected')->count() }}</p>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-blue-400 to-blue-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-2xl">description</span>
                </div>
                <div class="ml-4">
                    <p class="text-blue-100">Jumla</p>
                    <p class="text-2xl font-bold">{{ $applications->total() ?? $applications->count() }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- User Info Card -->
    @if(Auth::user()->employee)
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Taarifa Zangu</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="flex items-center">
                <span class="material-icons text-gray-400 mr-2">person</span>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Jina</p>
                    <p class="font-medium text-gray-900 dark:text-white">{{ Auth::user()->name }}</p>
                </div>
            </div>
            @if(Auth::user()->employee->district->branch)
            <div class="flex items-center">
                <span class="material-icons text-gray-400 mr-2">business</span>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Tawi</p>
                    <p class="font-medium text-gray-900 dark:text-white">{{ Auth::user()->employee->district->branch->name }}</p>
                </div>
            </div>
            @endif
            @if(Auth::user()->employee->district)
            <div class="flex items-center">
                <span class="material-icons text-gray-400 mr-2">location_city</span>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Wilaya</p>
                    <p class="font-medium text-gray-900 dark:text-white">{{ Auth::user()->employee->district->name }}</p>
                </div>
            </div>
            @endif
        </div>
    </div>
    @endif

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
            <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                <select id="statusFilter" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                    <option value="">Hali Zote</option>
                    <option value="pending">Inasubiri</option>
                    <option value="approved">Imeidhinishwa</option>
                    <option value="rejected">Imekataliwa</option>
                </select>
                
                <select id="periodFilter" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                    <option value="">Vipindi Vyote</option>
                    @php
                        $currentYear = now()->year;
                        $months = [
                            1 => 'Januari', 2 => 'Februari', 3 => 'Machi', 4 => 'Aprili',
                            5 => 'Mei', 6 => 'Juni', 7 => 'Julai', 8 => 'Agosti',
                            9 => 'Septemba', 10 => 'Oktoba', 11 => 'Novemba', 12 => 'Desemba'
                        ];
                    @endphp
                    @for($year = $currentYear; $year >= $currentYear - 2; $year--)
                        @foreach($months as $monthNum => $monthName)
                            <option value="{{ $monthNum }}-{{ $year }}">{{ $monthName }} {{ $year }}</option>
                        @endforeach
                    @endfor
                </select>
            </div>
            
            <div class="flex space-x-2">
                <button onclick="resetFilters()" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                    <span class="material-icons">refresh</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Applications List -->
    <div class="space-y-4" id="applicationsList">
        @forelse($applications as $application)
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover-lift application-card" 
             data-status="{{ $application->status }}" 
             data-period="{{ $application->month }}-{{ $application->year }}">
            <div class="p-6">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
                    <!-- Left side - Main info -->
                    <div class="flex-1">
                        <div class="flex items-start justify-between mb-3">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                    Ombi la {{ DateTime::createFromFormat('!m', $application->month)->format('F') }} {{ $application->year }}
                                </h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    Namba ya Cheki: {{ $application->check_number }}
                                </p>
                            </div>
                            
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                {{ $application->status === 'pending' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400' : '' }}
                                {{ $application->status === 'approved' ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400' : '' }}
                                {{ $application->status === 'rejected' ? 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400' : '' }}">
                                <span class="material-icons text-xs mr-1">
                                    {{ $application->status === 'pending' ? 'pending' : '' }}
                                    {{ $application->status === 'approved' ? 'check_circle' : '' }}
                                    {{ $application->status === 'rejected' ? 'cancel' : '' }}
                                </span>
                                {{ $application->status_text }}
                            </span>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                                <p class="text-xs text-gray-500 dark:text-gray-400">Mchango wa Sasa</p>
                                <p class="text-sm font-semibold text-gray-900 dark:text-white">
                                    Tsh {{ $application->formatted_current_contribution }}
                                </p>
                            </div>
                            <div class="bg-primary-50 dark:bg-primary-900/20 rounded-lg p-3">
                                <p class="text-xs text-gray-500 dark:text-gray-400">Kiasi Kipya</p>
                                <p class="text-sm font-semibold text-primary-600">
                                    Tsh {{ $application->formatted_new_contribution }}
                                </p>
                            </div>
                            <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-3">
                                <p class="text-xs text-gray-500 dark:text-gray-400">Utofauti</p>
                                <p class="text-sm font-semibold text-green-600">
                                    +Tsh {{ $application->formatted_difference }}
                                </p>
                            </div>
                        </div>

                        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                            <span class="material-icons text-sm mr-1">schedule</span>
                            Imewasilishwa {{ $application->created_at->diffForHumans() }}
                            @if($application->updated_at != $application->created_at)
                            <span class="mx-2">•</span>
                            <span>Imebadilishwa {{ $application->updated_at->diffForHumans() }}</span>
                            @endif
                        </div>
                    </div>

                    <!-- Right side - Actions -->
                    <div class="mt-4 lg:mt-0 lg:ml-6">
                        <div class="flex flex-col sm:flex-row lg:flex-col space-y-2 sm:space-y-0 sm:space-x-2 lg:space-x-0 lg:space-y-2">
                            <a href="{{ route('deductions.show', $application) }}" 
                               class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <span class="material-icons mr-1 text-sm">visibility</span>
                                Ona Maelezo
                            </a>
                            
                            @if($application->document_path)
                            <a href="{{ $application->document_url }}" 
                               target="_blank"
                               class="inline-flex items-center justify-center px-4 py-2 border border-primary-300 dark:border-primary-600 rounded-lg text-sm font-medium text-primary-700 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-colors">
                                <span class="material-icons mr-1 text-sm">attachment</span>
                                Kiambatanisho
                            </a>
                            @endif
                        </div>
                    </div>
                </div>

                @if($application->status === 'rejected' && $application->rejection_reason)
                <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                    <div class="flex items-start">
                        <span class="material-icons text-red-500 mr-2 text-sm mt-0.5">info</span>
                        <div>
                            <p class="text-sm font-medium text-red-800 dark:text-red-400">Sababu za Kukataa:</p>
                            <p class="text-sm text-red-700 dark:text-red-300 mt-1">{{ $application->rejection_reason }}</p>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @empty
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-12 text-center">
            <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                <span class="material-icons text-gray-400 text-2xl">description</span>
            </div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Hakuna Maombi</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6">Bado hujawasilisha ombi lolote la kuongeza makato.</p>
            <a href="{{ route('deductions.create') }}" 
               class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
                <span class="material-icons mr-2">add</span>
                Wasilisha Ombi la Kwanza
            </a>
        </div>
        @endforelse
    </div>

    <!-- Load More Button (if needed) -->
    @if($applications->hasPages())
    <div class="text-center">
        <div class="inline-block">
            {{ $applications->links() }}
        </div>
    </div>
    @endif
</div>

<!-- Help Modal -->
<div id="helpModal" class="hidden fixed inset-0 z-50 overflow-y-auto" x-data="{ show: false }">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
            <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/20 sm:mx-0 sm:h-10 sm:w-10">
                        <span class="material-icons text-blue-600">help</span>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                            Maelezo ya Hali za Maombi
                        </h3>
                        <div class="mt-4 space-y-4">
                            <div class="flex items-start space-x-3">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400">
                                    <span class="material-icons text-xs mr-1">pending</span>
                                    Inasubiri
                                </span>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    Ombi lako limewasilishwa na linasubiri uidhinishaji wa maafisa husika.
                                </p>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
                                    <span class="material-icons text-xs mr-1">check_circle</span>
                                    Imeidhinishwa
                                </span>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    Ombi lako limeidhinishwa na mabadiliko yataanza kutumika mwezi ujao.
                                </p>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400">
                                    <span class="material-icons text-xs mr-1">cancel</span>
                                    Imekataliwa
                                </span>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    Ombi lako limekataliwa. Ona sababu na unaweza kuwasilisha ombi jipya.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button @click="closeHelpModal()" 
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm">
                    Nimeelewa
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Floating Help Button -->
<div class="fixed bottom-20 right-4 z-40">
    <button onclick="showHelpModal()" 
            class="w-12 h-12 bg-blue-600 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center text-white hover:scale-105 transition-all duration-200" 
            title="Msaada">
        <span class="material-icons">help</span>
    </button>
</div>

<script>
// Filter functionality
function filterApplications() {
    const statusFilter = document.getElementById('statusFilter').value;
    const periodFilter = document.getElementById('periodFilter').value;
    const cards = document.querySelectorAll('.application-card');
    
    cards.forEach(card => {
        let showCard = true;
        
        // Status filter
        if (statusFilter && card.dataset.status !== statusFilter) {
            showCard = false;
        }
        
        // Period filter
        if (periodFilter && card.dataset.period !== periodFilter) {
            showCard = false;
        }
        
        if (showCard) {
            card.style.display = 'block';
            // Add animation
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            setTimeout(() => {
                card.style.transition = 'all 0.3s ease';
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 50);
        } else {
            card.style.display = 'none';
        }
    });
    
    // Check if any cards are visible
    const visibleCards = Array.from(cards).filter(card => card.style.display !== 'none');
    if (visibleCards.length === 0) {
        showNoResultsMessage();
    } else {
        hideNoResultsMessage();
    }
}

function resetFilters() {
    document.getElementById('statusFilter').value = '';
    document.getElementById('periodFilter').value = '';
    filterApplications();
}

function showNoResultsMessage() {
    let noResultsDiv = document.getElementById('noResults');
    if (!noResultsDiv) {
        noResultsDiv = document.createElement('div');
        noResultsDiv.id = 'noResults';
        noResultsDiv.className = 'bg-white dark:bg-gray-800 rounded-xl shadow-lg p-12 text-center';
        noResultsDiv.innerHTML = `
            <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                <span class="material-icons text-gray-400 text-2xl">search_off</span>
            </div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Hakuna Matokeo</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6">Hakuna maombi yanayolingana na vichujio vilivyochaguliwa.</p>
            <button onclick="resetFilters()" class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
                <span class="material-icons mr-2">refresh</span>
                Ondoa Vichujio
            </button>
        `;
        document.getElementById('applicationsList').appendChild(noResultsDiv);
    }
}

function hideNoResultsMessage() {
    const noResultsDiv = document.getElementById('noResults');
    if (noResultsDiv) {
        noResultsDiv.remove();
    }
}

function showHelpModal() {
    document.getElementById('helpModal').classList.remove('hidden');
}

function closeHelpModal() {
    document.getElementById('helpModal').classList.add('hidden');
}

// Event listeners
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('statusFilter').addEventListener('change', filterApplications);
    document.getElementById('periodFilter').addEventListener('change', filterApplications);
});

// Auto-refresh every 30 seconds for pending applications
setInterval(() => {
    const pendingCards = document.querySelectorAll('.application-card[data-status="pending"]');
    if (pendingCards.length > 0) {
        // You can add logic to check for updates via AJAX here
        console.log('Checking for updates...');
    }
}, 30000);
</script>

@push('styles')
<style>
.application-card {
    transition: all 0.3s ease;
}

.application-card:hover {
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .application-card .grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush
@endsection