@extends('layouts.app')

@section('title', 'Maelezo ya Ombi')
@section('page-title', 'Maelezo ya Ombi')

@section('content')
<!-- Main Container with proper width alignment -->
<div class="max-w-12xl mx-auto px-4 sm:px-6 lg:px-12 space-y-6">
    <!-- Header Section -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <!-- Back Button & Title -->
            <div class="flex items-center space-x-4">
                <a href="{{ route('deductions.index') }}" 
                   class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
                    <span class="material-icons">arrow_back</span>
                </a>
                <div>
                    <h1 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Maelezo ya Ombi</h1>
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ $application->application_type }}</p>
                </div>
            </div>
            
            <!-- Status & Action Buttons -->
            <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
                <!-- Status Badge -->
                <span class="inline-flex items-center px-3 py-2 rounded-full text-sm 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-sm mr-1">
                        {{ $application->status === 'pending' ? 'pending' : '' }}
                        {{ $application->status === 'approved' ? 'check_circle' : '' }}
                        {{ $application->status === 'rejected' ? 'cancel' : '' }}
                    </span>
                    {{ $application->status_text }}
                </span>
                
                @php
                    $user = Auth::user();
                    $isManagerOrAdmin = $user && ($user->hasAnyRole(['manager', 'admin']) || in_array($user->role, ['manager', 'admin']));
                @endphp

                <!-- Action Buttons -->
                <div class="flex items-center gap-2">
                    @if($application->canApprove())
                    <button onclick="{{ $isManagerOrAdmin ? 'approveApplication(' . $application->id . ')' : '' }}"
                            class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors
                            {{ $isManagerOrAdmin ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed' }}"
                            {{ $isManagerOrAdmin ? '' : 'disabled' }}
                            title="{{ $isManagerOrAdmin ? 'Idhinisha' : 'Hauruhusiwi kuidhinisha - Manager/Admin pekee' }}">
                        <span class="material-icons mr-1 text-sm">check_circle</span>
                        Idhinisha
                    </button>
                    @endif
                    
                    @if($application->canReject())
                    <button onclick="{{ $isManagerOrAdmin ? 'rejectApplication(' . $application->id . ')' : '' }}"
                            class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors
                            {{ $isManagerOrAdmin ? 'bg-red-600 hover:bg-red-700 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed' }}"
                            {{ $isManagerOrAdmin ? '' : 'disabled' }}
                            title="{{ $isManagerOrAdmin ? 'Kataa' : 'Hauruhusiwi kukataa - Manager/Admin pekee' }}">
                        <span class="material-icons mr-1 text-sm">cancel</span>
                        Kataa
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- Main Details Column -->
        <div class="xl:col-span-2 space-y-6">
            <!-- Employee & Contribution Information -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div class="p-6">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        <!-- Employee Information -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center mr-3">
                                    <span class="material-icons text-blue-600 text-sm">person</span>
                                </div>
                                Taarifa za Mfanyakazi
                            </h2>
                            
                            <div class="space-y-4">
                                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Namba ya Cheki</label>
                                    <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $application->check_number }}</p>
                                </div>
                                @if($application->names)
                                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Jina la Mfanyakazi</label>
                                    <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">{{ $application->names }}</p>
                                </div>
                                @endif
                                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Jina la Idara</label>
                                    <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">{{ $application->dept_name }}</p>
                                </div>
                                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Namba ya Simu</label>
                                    <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">{{ $application->phone_number ?? 'Haijawekwa' }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Contribution Information -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                                <div class="w-8 h-8 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center mr-3">
                                    <span class="material-icons text-green-600 text-sm">trending_up</span>
                                </div>
                                Mabadiliko ya Mchango
                            </h2>
                            
                            <div class="space-y-4">
                                <!-- Current vs New Contribution -->
                                <div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                                    <div class="flex items-center justify-between">
                                        <div class="text-center">
                                            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Mchango wa Sasa</p>
                                            <p class="text-lg font-bold text-gray-900 dark:text-white">Tsh {{ $application->formatted_current_contribution }}</p>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="material-icons text-gray-400 mx-2">arrow_forward</span>
                                        </div>
                                        <div class="text-center">
                                            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Mchango Mpya</p>
                                            <p class="text-lg font-bold text-blue-600 dark:text-blue-400">Tsh {{ $application->formatted_new_contribution }}</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Difference Amount -->
                                <div class="text-center p-4 {{ $application->difference_amount > 0 ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800' }} rounded-lg">
                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Utofauti</p>
                                    <p class="text-2xl font-bold {{ $application->difference_amount > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                        {{ $application->difference_amount > 0 ? '+' : '' }}Tsh {{ $application->formatted_difference }}
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        {{ $application->difference_amount > 0 ? 'Ongezeko' : 'Kupungua' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Vote Information -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center mr-3">
                        <span class="material-icons text-purple-600 text-sm">how_to_vote</span>
                    </div>
                    Taarifa za Vote
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Msimbo wa Vote</label>
                        <p class="mt-1 text-sm font-bold text-gray-900 dark:text-white">{{ $application->vote_code }}</p>
                    </div>
                    <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Jina la Vote</label>
                        <p class="mt-1 text-sm font-bold text-gray-900 dark:text-white">{{ $application->vote_name }}</p>
                    </div>
                </div>
            </div>

            <!-- Rejection Reason (if exists) -->
            @if($application->rejection_reason)
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6">
                <h2 class="text-lg font-semibold text-red-800 dark:text-red-400 mb-3 flex items-center">
                    <div class="w-8 h-8 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center mr-3">
                        <span class="material-icons text-red-600 text-sm">info</span>
                    </div>
                    Sababu za Kukataa
                </h2>
                <div class="p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg">
                    <p class="text-red-700 dark:text-red-300">{{ $application->rejection_reason }}</p>
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Timeline -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <div class="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/20 rounded-lg flex items-center justify-center mr-3">
                        <span class="material-icons text-indigo-600 text-sm">timeline</span>
                    </div>
                    Mtiririko wa Wakati
                </h3>
                
                <div class="space-y-4">
                    <!-- Submitted -->
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="material-icons text-blue-600 text-sm">add</span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">Ombi Liliwasilishwa</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $application->created_at->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                    
                    <!-- Status Update -->
                    @if($application->status === 'approved')
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="material-icons text-green-600 text-sm">check_circle</span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">Ombi Limeidhinishwa</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $application->updated_at->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                    @elseif($application->status === 'rejected')
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="material-icons text-red-600 text-sm">cancel</span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">Ombi Limekataliwa</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $application->updated_at->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Application Period -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <div class="w-8 h-8 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center mr-3">
                        <span class="material-icons text-yellow-600 text-sm">calendar_month</span>
                    </div>
                    Kipindi
                </h3>
                
                <div class="text-center p-4 bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-900/20 dark:to-orange-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ DateTime::createFromFormat('!m', $application->month)->format('F') }}
                    </p>
                    <p class="text-lg font-semibold text-gray-600 dark:text-gray-400">{{ $application->year }}</p>
                </div>
            </div>

            <!-- Enhanced Document Attachment with FIXED URLs -->
            @if($application->document_path)
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <div class="w-8 h-8 bg-cyan-100 dark:bg-cyan-900/20 rounded-lg flex items-center justify-center mr-3">
                        <span class="material-icons text-cyan-600 text-sm">attachment</span>
                    </div>
                    Kiambatanisho
                </h3>
                
                @if($application->documentExists())
                <div class="space-y-3">
                    <!-- Document Info -->
                    <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-cyan-100 dark:bg-cyan-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
                                <span class="material-icons text-cyan-600">description</span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ $application->document_name }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ strtoupper($application->document_extension) }} faili
                                    @if($application->document_size)
                                        ({{ $application->document_size }} KB)
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="grid grid-cols-2 gap-2">
                        <!-- View Button -->
                        <button onclick="viewDocument('{{ route('deductions.view-document', $application) }}', '{{ $application->document_extension }}')"
                                class="flex items-center justify-center px-3 py-2 text-blue-600 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:hover:bg-blue-900/40 rounded-lg transition-colors">
                            <span class="material-icons mr-1 text-sm">visibility</span>
                            Tazama
                        </button>
                        
                        <!-- Download Button -->
                        <a href="{{ route('deductions.download-document', $application) }}" 
                           class="flex items-center justify-center px-3 py-2 text-cyan-600 bg-cyan-50 hover:bg-cyan-100 dark:bg-cyan-900/20 dark:hover:bg-cyan-900/40 rounded-lg transition-colors">
                            <span class="material-icons mr-1 text-sm">file_download</span>
                            Pakua
                        </a>
                    </div>
                </div>
                @else
                <div class="text-center py-4">
                    <div class="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-3">
                        <span class="material-icons text-red-600">error</span>
                    </div>
                    <p class="text-sm text-red-600 dark:text-red-400">Hati haijapatikana kwenye server</p>
                </div>
                @endif
            </div>
            @endif

            <!-- Quick Actions -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Vitendo vya Haraka</h3>
                
                <div class="space-y-3">
                    <button onclick="window.print()" 
                            class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <span class="material-icons mr-2 text-sm">print</span>
                        Chapisha Ombi
                    </button>
                    
                    <a href="{{ route('deductions.index') }}" 
                       class="w-full flex items-center justify-center px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <span class="material-icons mr-2 text-sm">list</span>
                        Rudi Orodhani
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- FIXED Document Viewer Modal -->
<div id="documentModal" class="hidden fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-6xl w-full max-h-[90vh] overflow-hidden">
            <!-- Modal Header -->
            <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                    <span class="material-icons mr-2 text-blue-600">description</span>
                    Hati ya Ombi
                </h3>
                <div class="flex items-center space-x-2">
                    <!-- Download in modal -->
                    <a href="{{ route('deductions.download-document', $application) }}" 
                       id="modalDownloadBtn"
                       class="p-2 text-cyan-600 hover:text-cyan-700 hover:bg-cyan-50 dark:hover:bg-cyan-900/20 rounded-lg transition-colors"
                       title="Pakua Hati">
                        <span class="material-icons">file_download</span>
                    </a>
                    <!-- Close button -->
                    <button onclick="closeDocumentModal()" 
                            class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                        <span class="material-icons">close</span>
                    </button>
                </div>
            </div>
            
            <!-- Modal Content -->
            <div class="p-6 max-h-[calc(90vh-120px)] overflow-auto">
                <!-- Loading State -->
                <div id="documentLoading" class="flex items-center justify-center py-12">
                    <div class="flex flex-col items-center">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                        <p class="mt-4 text-gray-600 dark:text-gray-400">Inapakia hati...</p>
                    </div>
                </div>
                
                <!-- PDF Viewer -->
                <div id="pdfViewer" class="hidden">
                    <iframe id="pdfFrame" 
                            src="" 
                            class="w-full h-[70vh] border border-gray-200 dark:border-gray-600 rounded-lg"
                            frameborder="0">
                        <p class="p-4 text-center text-gray-500">
                            Kivinjari chako hakiwezi kuonyesha PDF. 
                            <a href="{{ route('deductions.download-document', $application) }}" class="text-blue-600 hover:underline">Bonyeza hapa kupakua</a>
                        </p>
                    </iframe>
                </div>
                
                <!-- Image Viewer -->
                <div id="imageViewer" class="hidden text-center">
                    <img id="imageDisplay" 
                         src="" 
                         alt="Document Image" 
                         class="max-w-full max-h-[70vh] mx-auto rounded-lg shadow-lg object-contain">
                </div>
                
                <!-- Error State -->
                <div id="errorViewer" class="hidden text-center py-12">
                    <div class="flex flex-col items-center">
                        <div class="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-4">
                            <span class="material-icons text-red-500 text-2xl">error</span>
                        </div>
                        <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Hitilafu ya Kupakia</h4>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">Haikuwezekana kupakia hati. Jaribu kupakua moja kwa moja.</p>
                        <a href="{{ route('deductions.download-document', $application) }}" 
                           class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                            <span class="material-icons mr-2">file_download</span>
                            Pakua Faili
                        </a>
                    </div>
                </div>
                
                <!-- Unsupported File Type -->
                <div id="unsupportedViewer" class="hidden text-center py-12">
                    <div class="flex flex-col items-center">
                        <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-4">
                            <span class="material-icons text-gray-400 text-2xl">description</span>
                        </div>
                        <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Aina ya Faili Haitumiki</h4>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">Faili hili haliwezi kuonyeshwa kwenye kivinjari. Tafadhali pakua ili kuangalia.</p>
                        <a href="{{ route('deductions.download-document', $application) }}" 
                           class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                            <span class="material-icons mr-2">file_download</span>
                            Pakua Faili
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div id="rejectModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <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" onclick="closeRejectModal()"></div>
        
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white dark:bg-gray-800 px-6 pt-6 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-red-100 dark:bg-red-900/20 sm:mx-0 sm:h-10 sm:w-10">
                        <span class="material-icons text-red-600">warning</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-semibold text-gray-900 dark:text-white">
                            Kataa Ombi
                        </h3>
                        <div class="mt-3">
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                                Je, una uhakika unataka kukataa ombi hili? Tafadhali toa sababu za kukataa.
                            </p>
                            <textarea id="rejectionReason" 
                                      rows="4" 
                                      class="w-full px-4 py-3 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-red-500 focus:border-transparent resize-none"
                                      placeholder="Andika sababu za kukataa ombi..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 sm:flex sm:flex-row-reverse gap-3">
                <button onclick="submitRejection()" 
                        class="w-full sm:w-auto inline-flex justify-center items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors">
                    <span class="material-icons mr-2 text-sm">cancel</span>
                    Kataa Ombi
                </button>
                <button onclick="closeRejectModal()" 
                        class="mt-3 sm:mt-0 w-full sm:w-auto inline-flex justify-center items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                    Ghairi
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let rejectModalData = {
    reason: '',
    applicationId: null
};

// FIXED Document viewer functions
function viewDocument(documentUrl, fileExtension) {
    const modal = document.getElementById('documentModal');
    const loading = document.getElementById('documentLoading');
    const pdfViewer = document.getElementById('pdfViewer');
    const imageViewer = document.getElementById('imageViewer');
    const unsupportedViewer = document.getElementById('unsupportedViewer');
    const errorViewer = document.getElementById('errorViewer');
    
    // Show modal and loading state
    modal.classList.remove('hidden');
    loading.classList.remove('hidden');
    pdfViewer.classList.add('hidden');
    imageViewer.classList.add('hidden');
    unsupportedViewer.classList.add('hidden');
    errorViewer.classList.add('hidden');
    
    // Determine file type and show appropriate viewer
    const ext = fileExtension ? fileExtension.toLowerCase() : '';
    
    setTimeout(() => {
        loading.classList.add('hidden');
        
        try {
            if (ext === 'pdf') {
                // Show PDF viewer
                const pdfFrame = document.getElementById('pdfFrame');
                pdfFrame.onload = function() {
                    pdfViewer.classList.remove('hidden');
                };
                pdfFrame.onerror = function() {
                    showErrorViewer();
                };
                pdfFrame.src = documentUrl;
            } else if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
                // Show image viewer
                const img = document.getElementById('imageDisplay');
                img.onload = function() {
                    imageViewer.classList.remove('hidden');
                };
                img.onerror = function() {
                    showErrorViewer();
                };
                img.src = documentUrl;
            } else {
                // Show unsupported file viewer
                showUnsupportedViewer();
            }
        } catch (error) {
            console.error('Error loading document:', error);
            showErrorViewer();
        }
    }, 300);
}

function showUnsupportedViewer() {
    document.getElementById('unsupportedViewer').classList.remove('hidden');
}

function showErrorViewer() {
    document.getElementById('errorViewer').classList.remove('hidden');
}

function closeDocumentModal() {
    const modal = document.getElementById('documentModal');
    modal.classList.add('hidden');
    
    // Clear iframe src to stop loading
    document.getElementById('pdfFrame').src = '';
    document.getElementById('imageDisplay').src = '';
}

function approveApplication(applicationId) {
    Swal.fire({
        title: 'Idhinisha Ombi?',
        text: 'Je, una uhakika unataka kuidhinisha ombi hili?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#10B981',
        cancelButtonColor: '#6B7280',
        confirmButtonText: 'Ndio, Idhinisha',
        cancelButtonText: 'Ghairi',
        customClass: {
            popup: 'rounded-xl',
            confirmButton: 'rounded-lg',
            cancelButton: 'rounded-lg'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/deductions/${applicationId}/approve`;
            
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            document.body.appendChild(form);
            form.submit();
        }
    });
}

function rejectApplication(applicationId) {
    rejectModalData.reason = '';
    rejectModalData.applicationId = applicationId;
    document.getElementById('rejectionReason').value = '';
    document.getElementById('rejectModal').classList.remove('hidden');
    
    // Focus on textarea
    setTimeout(() => {
        document.getElementById('rejectionReason').focus();
    }, 100);
}

function closeRejectModal() {
    document.getElementById('rejectModal').classList.add('hidden');
    rejectModalData.reason = '';
    rejectModalData.applicationId = null;
}

function submitRejection() {
    const reason = document.getElementById('rejectionReason').value.trim();
    
    if (!reason) {
        if (typeof showToast === 'function') {
            showToast('Tafadhali andika sababu za kukataa', 'error');
        } else {
            alert('Tafadhali andika sababu za kukataa');
        }
        return;
    }
    
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/deductions/{{ $application->id }}/reject`;
    
    const csrfToken = document.createElement('input');
    csrfToken.type = 'hidden';
    csrfToken.name = '_token';
    csrfToken.value = '{{ csrf_token() }}';
    form.appendChild(csrfToken);
    
    const reasonInput = document.createElement('input');
    reasonInput.type = 'hidden';
    reasonInput.name = 'rejection_reason';
    reasonInput.value = reason;
    form.appendChild(reasonInput);
    
    document.body.appendChild(form);
    form.submit();
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    // Close modals with Escape key
    if (e.key === 'Escape') {
        if (!document.getElementById('rejectModal').classList.contains('hidden')) {
            closeRejectModal();
        } else if (!document.getElementById('documentModal').classList.contains('hidden')) {
            closeDocumentModal();
        }
    }
});

// Close document modal when clicking outside
document.getElementById('documentModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDocumentModal();
    }
});
</script>

@endsection