@extends('layouts.app')
@section('title','Payslip')
@section('page-title','Payroll')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1>Payslip</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('payroll.index') }}">Payroll</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('payroll.show',$record->period) }}">{{ $record->period->name }}</a></li>
                    <li class="breadcrumb-item active">Payslip</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex gap-2">
            <button onclick="window.print()" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-printer me-1"></i>Print
            </button>
            <a href="{{ route('payroll.show',$record->period) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>Back
            </a>
        </div>
    </div>
</div>

<div style="max-width:640px;margin:0 auto;">
    <!-- Payslip Header -->
    <div style="background:linear-gradient(135deg,#001122,#003366);color:#fff;border-radius:20px 20px 0 0;padding:2rem;">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
                <div class="fw-black" style="font-size:1.15rem;color:#D4AF37;">{{ config('app.company', 'My Company') }}</div>
                <div style="color:rgba(255,255,255,.55);font-size:.78rem;">Human Resource Department</div>
            </div>
            <div class="text-end">
                <div style="font-size:.7rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;">PAYSLIP</div>
                <div style="font-size:.85rem;color:#D4AF37;font-weight:700;">{{ $record->period->name }}</div>
                <div style="font-size:.72rem;color:rgba(255,255,255,.5);">
                    {{ \Carbon\Carbon::parse($record->period->start_date)->format('M j') }} — {{ \Carbon\Carbon::parse($record->period->end_date)->format('M j, Y') }}
                </div>
            </div>
        </div>
        <div class="row g-2">
            <div class="col-6">
                <div style="font-size:.65rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;">Employee</div>
                <div style="color:#fff;font-weight:700;">{{ $record->employee->full_name }}</div>
            </div>
            <div class="col-6">
                <div style="font-size:.65rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;">Employee No.</div>
                <div style="color:#fff;font-weight:700;">{{ $record->employee->employee_number }}</div>
            </div>
            <div class="col-6">
                <div style="font-size:.65rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;">Position</div>
                <div style="color:rgba(255,255,255,.8);font-size:.85rem;font-weight:600;">{{ $record->employee->position }}</div>
            </div>
            <div class="col-6">
                <div style="font-size:.65rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;">Department</div>
                <div style="color:rgba(255,255,255,.8);font-size:.85rem;font-weight:600;">{{ $record->employee->department->name ?? '—' }}</div>
            </div>
        </div>
    </div>

    <!-- Payslip Body -->
    <div style="border:1px solid #e8ecf0;border-top:none;border-radius:0 0 20px 20px;padding:1.5rem;background:#fff;">
        <div class="row g-4">
            <div class="col-12 col-sm-6">
                <div class="fw-bold mb-2" style="font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;">Earnings</div>
                <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Basic Salary</span><span class="fw-semibold">${{ number_format($record->basic_salary,2) }}</span></div>
                @if($record->housing_allowance > 0)
                <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Housing Allowance</span><span class="fw-semibold">${{ number_format($record->housing_allowance,2) }}</span></div>
                @endif
                @if($record->transport_allowance > 0)
                <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Transport Allowance</span><span class="fw-semibold">${{ number_format($record->transport_allowance,2) }}</span></div>
                @endif
                @if($record->other_earnings > 0)
                <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Other Earnings</span><span class="fw-semibold">${{ number_format($record->other_earnings,2) }}</span></div>
                @endif
                <div class="d-flex justify-content-between p-2 rounded-2 mt-2 fw-bold" style="background:#d1fae5;font-size:.88rem;">
                    <span>Gross Pay</span><span class="text-success">${{ number_format($record->gross_pay,2) }}</span>
                </div>
            </div>
            <div class="col-12 col-sm-6">
                <div class="fw-bold mb-2" style="font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;">Deductions</div>
                <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Income Tax</span><span class="fw-semibold text-danger">-${{ number_format($record->tax_deduction,2) }}</span></div>
                <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Pension</span><span class="fw-semibold text-danger">-${{ number_format($record->pension_deduction,2) }}</span></div>
                @if($record->other_deductions > 0)
                <div class="d-flex justify-content-between py-2 border-bottom" style="font-size:.85rem;"><span>Other</span><span class="fw-semibold text-danger">-${{ number_format($record->other_deductions,2) }}</span></div>
                @endif
                <div class="d-flex justify-content-between p-2 rounded-2 mt-2 fw-bold" style="background:#fee2e2;font-size:.88rem;">
                    <span>Total Deductions</span><span class="text-danger">-${{ number_format($record->total_deductions,2) }}</span>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mt-4 p-4 rounded-3" style="background:linear-gradient(135deg,#003366,#0055b3);">
            <div>
                <div style="color:rgba(255,255,255,.65);font-size:.78rem;font-weight:600;">NET PAY (USD)</div>
                <div style="font-size:2rem;font-weight:900;color:#D4AF37;">${{ number_format($record->net_pay,2) }}</div>
            </div>
            @if($record->net_pay_lrd)
            <div class="text-end">
                <div style="color:rgba(255,255,255,.65);font-size:.78rem;font-weight:600;">LRD EQUIVALENT</div>
                <div style="font-size:1.1rem;font-weight:700;color:rgba(255,255,255,.8);">L${{ number_format($record->net_pay_lrd,2) }}</div>
            </div>
            @endif
        </div>

        <div class="text-center mt-3" style="font-size:.72rem;color:#94a3b8;">
            This is a computer-generated payslip. No signature required. · Payment Date: {{ \Carbon\Carbon::parse($record->period->payment_date)->format('F j, Y') }}
        </div>
    </div>
</div>

@push('styles')
<style>
@media print {
  .topbar, .sidebar, .page-header, .sidebar-overlay { display: none !important; }
  .main-content { margin: 0 !important; padding: 1rem !important; }
}
</style>
@endpush
@endsection
