@extends('layouts.app')

@section('title', 'Salary Breakdown Details')
@section('subtitle', 'View salary components and deductions for an employee')

@section('content')
<div class="max-w-6xl 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.salary-breakdown') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Salary Breakdown
        </a>
    </div>

    <!-- Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-4 mb-6">
        <a href="{{ route('hr.salary-breakdown.edit', $salaryBreakdown) }}" 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 Breakdown
        </a>
        <button onclick="toggleStatus({{ $salaryBreakdown->id }})" class="inline-flex items-center px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors">
            <i class="fas fa-{{ $salaryBreakdown->is_active ? 'pause' : 'play' }} mr-2"></i>
            {{ $salaryBreakdown->is_active ? 'Deactivate' : 'Activate' }}
        </button>
        <button onclick="duplicate({{ $salaryBreakdown->id }})" 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-copy mr-2"></i>
            Duplicate
        </button>
    </div>

    <!-- Salary Breakdown 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-calculator text-blue-600 mr-2"></i>
                    Salary Breakdown Details
                </h3>
                <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full 
                    {{ $salaryBreakdown->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                    {{ $salaryBreakdown->is_active ? 'Active' : 'Inactive' }}
                </span>
            </div>
        </div>
        
        <div class="p-6">
            <div class="grid grid-cols-1 lg: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">{{ $salaryBreakdown->user->initials }}</span>
                            </div>
                            <div>
                                <p class="text-lg font-medium text-gray-900">{{ $salaryBreakdown->user->full_name }}</p>
                                <p class="text-sm text-gray-500">Employee ID: {{ $salaryBreakdown->user->employee_id }}</p>
                                <p class="text-sm text-gray-500">Position: {{ $salaryBreakdown->user->position }}</p>
                                <p class="text-sm text-gray-500">Department: {{ $salaryBreakdown->user->department->name ?? 'N/A' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Basic Information -->
                <div>
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-4">Basic Information</h4>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Basic Salary:</span>
                            <span class="font-medium">TZS {{ number_format($salaryBreakdown->basic_salary, 0) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Hourly Rate:</span>
                            <span class="font-medium">TZS {{ number_format($salaryBreakdown->calculateHourlyRate(), 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Working Days/Month:</span>
                            <span class="font-medium">{{ $salaryBreakdown->working_days_per_month }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Working Hours/Day:</span>
                            <span class="font-medium">{{ $salaryBreakdown->working_hours_per_day }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Overtime Multiplier:</span>
                            <span class="font-medium">{{ $salaryBreakdown->overtime_rate_multiplier }}x</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Effective Date:</span>
                            <span class="font-medium">{{ $salaryBreakdown->effective_date->format('M d, Y') }}</span>
                        </div>
                    </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 lg: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($salaryBreakdown->basic_salary, 0) }}</span>
                            </div>
                            @if($salaryBreakdown->bonus_amount > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Bonus:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->bonus_amount, 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->transport_allowance > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Transport Allowance:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->transport_allowance, 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->housing_allowance > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Housing Allowance:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->housing_allowance, 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->meal_allowance > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Meal Allowance:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->meal_allowance, 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->medical_allowance > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Medical Allowance:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->medical_allowance, 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->other_allowances > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Other Allowances:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->other_allowances, 0) }}</span>
                                </div>
                            @endif
                            <div class="border-t pt-2">
                                <div class="flex justify-between font-semibold text-green-600">
                                    <span>Total Allowances:</span>
                                    <span>TZS {{ number_format($salaryBreakdown->total_allowances, 0) }}</span>
                                </div>
                                <div class="flex justify-between font-semibold text-green-600">
                                    <span>Gross Salary:</span>
                                    <span>TZS {{ number_format($salaryBreakdown->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($salaryBreakdown->tax_rate > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Tax ({{ $salaryBreakdown->tax_rate }}%):</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->basic_salary * ($salaryBreakdown->tax_rate / 100), 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->social_security_rate > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Social Security ({{ $salaryBreakdown->social_security_rate }}%):</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->basic_salary * ($salaryBreakdown->social_security_rate / 100), 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->pension_rate > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Pension ({{ $salaryBreakdown->pension_rate }}%):</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->basic_salary * ($salaryBreakdown->pension_rate / 100), 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->loan_deduction > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Loan Deduction:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->loan_deduction, 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->advance_deduction > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Advance Deduction:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->advance_deduction, 0) }}</span>
                                </div>
                            @endif
                            @if($salaryBreakdown->other_deductions > 0)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Other Deductions:</span>
                                    <span class="font-medium">TZS {{ number_format($salaryBreakdown->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($salaryBreakdown->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($salaryBreakdown->net_salary, 0) }}</span>
                    </div>
                </div>
            </div>

            <!-- Overtime Calculation Example -->
            <div class="mt-8">
                <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-4">Overtime Calculation</h4>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="text-sm text-gray-600 mb-2">Example: If employee works 5 hours overtime</p>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Overtime Pay:</span>
                        <span class="font-medium">TZS {{ number_format($salaryBreakdown->calculateOvertimePay(5), 0) }}</span>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">
                        Calculation: 5 hours × TZS {{ number_format($salaryBreakdown->calculateHourlyRate(), 2) }} × {{ $salaryBreakdown->overtime_rate_multiplier }}x
                    </p>
                </div>
            </div>

            <!-- Notes -->
            @if($salaryBreakdown->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">{{ $salaryBreakdown->notes }}</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Toggle Status Form -->
<form id="toggleForm" method="POST" style="display: none;">
    @csrf
    @method('PATCH')
</form>

<script>
    function toggleStatus(breakdownId) {
        if (confirm('Are you sure you want to toggle the status of this salary breakdown?')) {
            document.getElementById('toggleForm').action = `/hr/salary-breakdown/${breakdownId}/toggle-status`;
            document.getElementById('toggleForm').submit();
        }
    }

    function duplicate(breakdownId) {
        if (confirm('Are you sure you want to duplicate this salary breakdown?')) {
            window.location.href = `/hr/salary-breakdown/${breakdownId}/duplicate`;
        }
    }
</script>
@endsection