@extends('layouts.app')

@section('title', 'Payroll Details')
@section('subtitle', 'View payroll information and download receipt')

@section('content')
<div class="max-w-4xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('hr.payroll') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Payroll
        </a>
    </div>

    <!-- Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-4 mb-6">
        <a href="{{ route('hr.payroll.edit', $payroll) }}" class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
            <i class="fas fa-edit mr-2"></i>
            Edit Payroll
        </a>
        <a href="{{ route('hr.payroll.download', $payroll) }}" class="inline-flex items-center px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
            <i class="fas fa-download mr-2"></i>
            Download Receipt
        </a>
        @if($payroll->status !== 'paid')
            <button onclick="markAsPaid({{ $payroll->id }})" class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                <i class="fas fa-check mr-2"></i>
                Mark as Paid
            </button>
        @endif
    </div>

    <!-- Payroll Details -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-file-invoice-dollar text-blue-600 mr-2"></i>
                    Payroll Details
                </h3>
                <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full 
                    {{ $payroll->status === 'paid' ? 'bg-green-100 text-green-800' : 
                       ($payroll->status === 'approved' ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800') }}">
                    {{ ucfirst($payroll->status) }}
                </span>
            </div>
        </div>
        
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Employee Information -->
                <div>
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-4">Employee Information</h4>
                    <div class="space-y-3">
                        <div class="flex items-center">
                            <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mr-4">
                                <span class="text-white font-semibold text-lg">{{ $payroll->user->initials }}</span>
                            </div>
                            <div>
                                <p class="text-lg font-medium text-gray-900">{{ $payroll->user->full_name }}</p>
                                <p class="text-sm text-gray-500">Employee ID: {{ $payroll->user->employee_id }}</p>
                                <p class="text-sm text-gray-500">Position: {{ $payroll->user->position }}</p>
                                <p class="text-sm text-gray-500">Department: {{ $payroll->user->department->name ?? 'N/A' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payroll Information -->
                <div>
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-4">Payroll Information</h4>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Period:</span>
                            <span class="font-medium">{{ $payroll->formatted_period }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Payroll Date:</span>
                            <span class="font-medium">{{ $payroll->payroll_date->format('M d, Y') }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Working Days:</span>
                            <span class="font-medium">{{ $payroll->working_days }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Days Worked:</span>
                            <span class="font-medium">{{ $payroll->days_worked }}</span>
                        </div>
                        @if($payroll->hourly_rate)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Hourly Rate:</span>
                                <span class="font-medium">TZS {{ number_format($payroll->hourly_rate, 2) }}</span>
                            </div>
                        @endif
                        @if($payroll->overtime_hours)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Overtime Hours:</span>
                                <span class="font-medium">{{ $payroll->overtime_hours }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Salary Breakdown -->
            <div class="mt-8">
                <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-4">Salary Breakdown</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Earnings -->
                    <div>
                        <h5 class="text-md font-medium text-green-600 mb-3">Earnings</h5>
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Basic Salary:</span>
                                <span class="font-medium">TZS {{ number_format($payroll->basic_salary, 0) }}</span>
                            </div>
                            @if($payroll->overtime_pay > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Overtime Pay:</span>
                                    <span class="font-medium">TZS {{ number_format($payroll->overtime_pay, 0) }}</span>
                                </div>
                            @endif
                            @if($payroll->bonus > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Bonus:</span>
                                    <span class="font-medium">TZS {{ number_format($payroll->bonus, 0) }}</span>
                                </div>
                            @endif
                            @if($payroll->allowances > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Allowances:</span>
                                    <span class="font-medium">TZS {{ number_format($payroll->allowances, 0) }}</span>
                                </div>
                            @endif
                            @if($payroll->advance_salary > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Advance Salary:</span>
                                    <span class="font-medium">TZS {{ number_format($payroll->advance_salary, 0) }}</span>
                                </div>
                            @endif
                            <div class="border-t pt-2">
                                <div class="flex justify-between font-semibold text-green-600">
                                    <span>Gross Salary:</span>
                                    <span>TZS {{ number_format($payroll->gross_salary, 0) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Deductions -->
                    <div>
                        <h5 class="text-md font-medium text-red-600 mb-3">Deductions</h5>
                        <div class="space-y-2">
                            @if($payroll->tax_deduction > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Tax Deduction:</span>
                                    <span class="font-medium">TZS {{ number_format($payroll->tax_deduction, 0) }}</span>
                                </div>
                            @endif
                            @if($payroll->social_security > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Social Security:</span>
                                    <span class="font-medium">TZS {{ number_format($payroll->social_security, 0) }}</span>
                                </div>
                            @endif
                            @if($payroll->pension_contribution > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Pension Contribution:</span>
                                    <span class="font-medium">TZS {{ number_format($payroll->pension_contribution, 0) }}</span>
                                </div>
                            @endif
                            @if($payroll->other_deductions > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Other Deductions:</span>
                                    <span class="font-medium">TZS {{ number_format($payroll->other_deductions, 0) }}</span>
                                </div>
                            @endif
                            <div class="border-t pt-2">
                                <div class="flex justify-between font-semibold text-red-600">
                                    <span>Total Deductions:</span>
                                    <span>TZS {{ number_format($payroll->total_deductions, 0) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Net Salary -->
                <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                    <div class="flex justify-between items-center">
                        <span class="text-lg font-semibold text-blue-900">Net Salary:</span>
                        <span class="text-2xl font-bold text-blue-900">TZS {{ number_format($payroll->net_salary, 0) }}</span>
                    </div>
                </div>
            </div>

            <!-- Payment Information -->
            @if($payroll->status === 'paid')
                <div class="mt-8">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-4">Payment Information</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Payment Method:</span>
                            <span class="font-medium">{{ $payroll->payment_method }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Paid Date:</span>
                            <span class="font-medium">{{ $payroll->paid_at->format('M d, Y H:i') }}</span>
                        </div>
                        @if($payroll->transaction_reference)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Transaction Reference:</span>
                                <span class="font-medium">{{ $payroll->transaction_reference }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            <!-- Notes -->
            @if($payroll->notes)
                <div class="mt-8">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-4">Notes</h4>
                    <p class="text-gray-700">{{ $payroll->notes }}</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Mark as Paid Modal -->
<div id="paidModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Mark as Paid</h3>
            <form method="POST" action="{{ route('hr.payroll.mark-paid', $payroll) }}">
                @csrf
                @method('PATCH')
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                    <select name="payment_method" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select Method</option>
                        <option value="Bank Transfer">Bank Transfer</option>
                        <option value="Cash">Cash</option>
                        <option value="Mobile Money">Mobile Money</option>
                        <option value="Check">Check</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Transaction Reference</label>
                    <input type="text" name="transaction_reference" placeholder="Optional"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closePaidModal()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                        Mark as Paid
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function markAsPaid(payrollId) {
        document.getElementById('paidModal').classList.remove('hidden');
    }

    function closePaidModal() {
        document.getElementById('paidModal').classList.add('hidden');
    }

    // Close modal when clicking outside
    window.onclick = function(event) {
        const modal = document.getElementById('paidModal');
        if (event.target === modal) {
            closePaidModal();
        }
    }
</script>
@endsection