@extends('layouts.app')

@section('title', 'Salary Details - ' . $salary->user->full_name)

@section('content')
<div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="py-6">
            <!-- Breadcrumb -->
            <nav class="flex mb-6" aria-label="Breadcrumb">
                <ol class="flex items-center space-x-2">
                    <li>
                        <a href="{{ route('payroll.index') }}" class="text-gray-500 hover:text-gray-700">
                            Payroll
                        </a>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 text-gray-400 mx-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-900 font-medium">Salary Details</span>
                    </li>
                </ol>
            </nav>

            <!-- Employee Info -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
                <div class="bg-indigo-600 text-white px-6 py-4 rounded-t-lg">
                    <h5 class="text-lg font-semibold mb-0">Employee Information</h5>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div>
                            <span class="text-sm font-medium text-gray-500">Employee Code:</span>
                            <p class="mt-1 text-gray-900">{{ $salary->employee_code }}</p>
                        </div>
                        <div>
                            <span class="text-sm font-medium text-gray-500">Name:</span>
                            <p class="mt-1 text-gray-900">{{ $salary->user->full_name }}</p>
                        </div>
                        <div>
                            <span class="text-sm font-medium text-gray-500">Company:</span>
                            <p class="mt-1 text-gray-900">{{ $salary->company_name }}</p>
                        </div>
                        <div>
                            <span class="text-sm font-medium text-gray-500">Payroll Period:</span>
                            <p class="mt-1 text-gray-900">{{ $salary->payrollPeriod->name }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Salary Breakdown -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Earnings -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="bg-green-600 text-white px-6 py-4 rounded-t-lg">
                        <h5 class="text-lg font-semibold mb-0">Earnings</h5>
                    </div>
                    <div class="p-6">
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Monthly Salary:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->monthly_salary, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Days Paid:</span>
                                <span class="text-gray-900 font-medium">{{ $salary->days_paid }} / {{ $salary->month_days }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Salary Per Day:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->salary_per_day, 2) }}</span>
                            </div>
                            <div class="border-t pt-3">
                                <div class="flex justify-between">
                                    <span class="font-semibold text-gray-900">Basic:</span>
                                    <span class="font-semibold text-gray-900">₹{{ number_format($salary->basic, 2) }}</span>
                                </div>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold text-gray-900">VDA:</span>
                                <span class="font-semibold text-gray-900">₹{{ number_format($salary->vda, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold text-gray-900">HRA:</span>
                                <span class="font-semibold text-gray-900">₹{{ number_format($salary->hra, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Skill Allowances:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->skill_allowances, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Performance Allowance:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->performance_allowance, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Additional 4 Hours:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->additional_4hrs, 2) }}</span>
                            </div>
                            @if($salary->total_addition > 0)
                            <div class="flex justify-between">
                                <span class="font-semibold text-gray-900">Other Additions:</span>
                                <span class="font-semibold text-gray-900">₹{{ number_format($salary->total_addition, 2) }}</span>
                            </div>
                            @endif
                            <div class="border-t-2 border-gray-300 pt-3">
                                <div class="flex justify-between">
                                    <h5 class="text-lg font-semibold text-gray-900 mb-0">Gross Wages:</h5>
                                    <h5 class="text-lg font-semibold text-green-600 mb-0">₹{{ number_format($salary->gross_wages, 2) }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Deductions -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="bg-red-600 text-white px-6 py-4 rounded-t-lg">
                        <h5 class="text-lg font-semibold mb-0">Deductions</h5>
                    </div>
                    <div class="p-6">
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">ESI Employee Share:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->esi_employee_share, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">ESI Employer Share:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->esi_employer_share, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">ESI Wages:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->esi_wages, 2) }}</span>
                            </div>
                            <div class="border-t pt-3">
                                <div class="flex justify-between">
                                    <span class="font-semibold text-gray-900">PF Employee (12%):</span>
                                    <span class="font-semibold text-gray-900">₹{{ number_format($salary->epf_employee_12_percent, 2) }}</span>
                                </div>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">PF Employer (13%):</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->epf_employer_13_percent, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Professional Tax:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->professional_tax, 2) }}</span>
                            </div>
                            @if($salary->advance > 0)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Advance:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->advance, 2) }}</span>
                            </div>
                            @endif
                            @if($salary->food_snacks > 0)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Food/Snacks:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->food_snacks, 2) }}</span>
                            </div>
                            @endif
                            @if($salary->uniform_deduction > 0)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Uniform Deduction:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->uniform_deduction, 2) }}</span>
                            </div>
                            @endif
                            @if($salary->rental > 0)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Rental:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->rental, 2) }}</span>
                            </div>
                            @endif
                            @if($salary->training_fees > 0)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Training Fees:</span>
                                <span class="text-gray-900 font-medium">₹{{ number_format($salary->training_fees, 2) }}</span>
                            </div>
                            @endif
                            <div class="border-t-2 border-gray-300 pt-3">
                                <div class="flex justify-between">
                                    <h5 class="text-lg font-semibold text-gray-900 mb-0">Total Deductions:</h5>
                                    <h5 class="text-lg font-semibold text-red-600 mb-0">₹{{ number_format($salary->total_deduction, 2) }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Net Salary Summary -->
            <div class="mt-6">
                <div class="bg-blue-600 text-white rounded-lg p-8 text-center">
                    <h4 class="text-xl font-semibold mb-4">Net Salary</h4>
                    <h1 class="text-4xl font-bold mb-2">₹{{ number_format($salary->net_salary, 2) }}</h1>
                    <p class="text-blue-100">Gross: ₹{{ number_format($salary->gross_wages, 2) }} - Deductions: ₹{{ number_format($salary->total_deduction, 2) }}</p>
                </div>
            </div>

            <!-- Remarks and Actions -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Remarks</h5>
                        </div>
                        <div class="p-6">
                            <p class="text-gray-900">{{ $salary->remarks ?: 'No remarks' }}</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Actions</h5>
                        </div>
                        <div class="p-6">
                            <div class="space-y-3">
                                <a href="{{ route('payroll.edit', $salary->id) }}" class="w-full inline-flex items-center justify-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors">
                                    <i class="fas fa-edit mr-2"></i> Edit Salary
                                </a>
                                <button class="w-full inline-flex items-center justify-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors" onclick="window.print()">
                                    <i class="fas fa-print mr-2"></i> Print Payslip
                                </button>
                                <a href="{{ route('payroll.index') }}" class="w-full inline-flex items-center justify-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                                    <i class="fas fa-arrow-left mr-2"></i> Back to List
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Add print-specific styling
    window.addEventListener('beforeprint', function() {
        document.body.classList.add('printing');
    });
    
    window.addEventListener('afterprint', function() {
        document.body.classList.remove('printing');
    });
});
</script>

<style>
@media print {
    .btn, .breadcrumb, nav, .card-header .btn-group, form {
        display: none !important;
    }
    
    .bg-white {
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }
    
    .min-w-full {
        font-size: 12px;
    }
    
    .p-6 {
        padding: 0.5rem;
    }
}
</style>
@endsection