@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>

@php
    $bd       = $record->components_breakdown ?? [];
    $att      = $bd['attendance'] ?? [];
    $earnings = $bd['earnings']   ?? [];
    $deds     = $bd['deductions'] ?? [];
    $summary  = $bd['summary']    ?? [];
    $cfg      = $bd['configuration'] ?? [];
    $currency = $cfg['currency'] ?? $record->currency ?? 'USD';
    $basis    = $cfg['salary_basis'] ?? 'monthly';

    $hasSecondary = !empty($summary['net_pay_secondary'])
                 && $summary['net_pay_secondary'] != ($summary['net_pay'] ?? 0);
@endphp

<div style="max-width:680px;margin:0 auto;">

    {{-- ── 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 style="font-size:1.1rem;font-weight:800;color:#D4AF37;">{{ config('hrms.company','My Company') }}</div>
                <div style="color:rgba(255,255,255,.5);font-size:.78rem;">{{ config('hrms.hr_dept','Human Resources') }}</div>
                @if(!empty($cfg['country']))
                <div style="color:rgba(255,255,255,.38);font-size:.7rem;margin-top:.2rem;">
                    {{ $cfg['country'] }} · {{ ucfirst($basis) }} basis
                </div>
                @endif
            </div>
            <div class="text-end">
                <div style="font-size:.65rem;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.07em;">PAYSLIP</div>
                <div style="font-size:.88rem;color:#D4AF37;font-weight:700;">{{ $record->period->name }}</div>
                <div style="font-size:.7rem;color:rgba(255,255,255,.45);">
                    {{ $record->period->start_date->format('M j') }} — {{ $record->period->end_date->format('M j, Y') }}
                </div>
            </div>
        </div>
        <div class="row g-2">
            <div class="col-6">
                <div style="font-size:.62rem;color:rgba(255,255,255,.38);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:.62rem;color:rgba(255,255,255,.38);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:.62rem;color:rgba(255,255,255,.38);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:.62rem;color:rgba(255,255,255,.38);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>

    <div style="border:1px solid #e8ecf0;border-top:none;border-radius:0 0 20px 20px;background:#fff;overflow:hidden;">

        {{-- ── Attendance Summary ── --}}
        @if(!empty($att))
        <div style="background:#f8fafc;border-bottom:1px solid #e8ecf0;padding:1rem 1.5rem;">
            <div style="font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:.6rem;">
                Attendance Summary
            </div>
            <div class="row g-2 text-center">
                <div class="col">
                    <div style="font-size:1.2rem;font-weight:800;color:#059669;">{{ number_format($att['days_present'] ?? 0, 1) }}</div>
                    <div style="font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;">Present</div>
                </div>
                <div class="col">
                    <div style="font-size:1.2rem;font-weight:800;color:#3b82f6;">{{ number_format($att['days_on_leave'] ?? 0, 1) }}</div>
                    <div style="font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;">On Leave</div>
                </div>
                <div class="col">
                    <div style="font-size:1.2rem;font-weight:800;color:#ef4444;">{{ number_format($att['days_absent'] ?? 0, 1) }}</div>
                    <div style="font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;">Absent</div>
                </div>
                <div class="col">
                    <div style="font-size:1.2rem;font-weight:800;color:#6b7280;">{{ number_format($att['expected_days'] ?? 0) }}</div>
                    <div style="font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;">Expected</div>
                </div>
                @if($basis !== 'daily')
                <div class="col">
                    <div style="font-size:1.2rem;font-weight:800;color:#7c3aed;">{{ number_format($att['hours_worked'] ?? 0, 1) }}</div>
                    <div style="font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;">Hours</div>
                </div>
                @endif
            </div>
            @if(!($att['has_records'] ?? true))
            @php $attMode = $att['attendance_mode'] ?? 'required'; @endphp
            @if($attMode === 'not_required')
            <div style="font-size:.72rem;color:#059669;margin-top:.5rem;text-align:center;">
                <i class="bi bi-shield-check me-1"></i>Clock-in not required — full salary paid.
            </div>
            @else
            <div style="font-size:.72rem;color:#f59e0b;margin-top:.5rem;text-align:center;">
                <i class="bi bi-exclamation-triangle me-1"></i>No attendance records found — full period assumed.
            </div>
            @endif
            @endif
            @if($basis === 'monthly' && isset($att['daily_rate']))
            <div style="font-size:.72rem;color:#64748b;margin-top:.4rem;text-align:center;">
                Daily rate: {{ $currency }} {{ number_format($att['daily_rate'], 4) }}
                · Paid days: {{ number_format($att['paid_days'] ?? 0, 1) }} / {{ $att['expected_days'] ?? '—' }}
                @if(isset($att['absence_deduction']) && $att['absence_deduction'] > 0)
                · Absence deduction: {{ $currency }} {{ number_format($att['absence_deduction'], 2) }}
                @endif
            </div>
            @elseif($basis === 'hourly' && isset($att['hourly_rate']))
            <div style="font-size:.72rem;color:#64748b;margin-top:.4rem;text-align:center;">
                Hourly rate: {{ $currency }} {{ number_format($att['hourly_rate'], 4) }}
                · {{ number_format($att['hours_worked'] ?? 0, 2) }} hours worked
            </div>
            @elseif($basis === 'daily' && isset($att['daily_rate']))
            <div style="font-size:.72rem;color:#64748b;margin-top:.4rem;text-align:center;">
                Daily rate: {{ $currency }} {{ number_format($att['daily_rate'], 4) }}
                · {{ number_format($att['paid_days'] ?? 0, 1) }} paid days
            </div>
            @endif
        </div>
        @endif

        {{-- ── Earnings & Deductions ── --}}
        <div class="row g-0">
            <div class="col-12 col-sm-6" style="padding:1.25rem 1.5rem;border-right:1px solid #f0f0f0;">
                <div style="font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:.75rem;">Earnings</div>
                @foreach($earnings as $line)
                <div class="d-flex justify-content-between align-items-baseline py-2" style="font-size:.84rem;border-bottom:1px solid #f5f5f5;">
                    <span style="color:#374151;">
                        {{ $line['name'] }}
                        @if(!($line['is_taxable'] ?? true))
                        <span style="font-size:.65rem;color:#9ca3af;">(non-taxable)</span>
                        @endif
                    </span>
                    <span class="fw-semibold">{{ $currency }} {{ number_format($line['amount'],2) }}</span>
                </div>
                @endforeach
                <div class="d-flex justify-content-between align-items-center mt-3 px-2 py-2 rounded-2 fw-bold" style="background:#d1fae5;font-size:.88rem;">
                    <span>Gross Pay</span>
                    <span class="text-success">{{ $currency }} {{ number_format($summary['gross_pay'] ?? $record->gross_pay, 2) }}</span>
                </div>
            </div>
            <div class="col-12 col-sm-6" style="padding:1.25rem 1.5rem;">
                <div style="font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:.75rem;">Deductions</div>
                @foreach($deds as $line)
                <div class="d-flex justify-content-between align-items-baseline py-2" style="font-size:.84rem;border-bottom:1px solid #f5f5f5;">
                    <span style="color:#374151;">{{ $line['name'] }}</span>
                    <span class="fw-semibold text-danger">- {{ $currency }} {{ number_format($line['amount'],2) }}</span>
                </div>
                @endforeach
                <div class="d-flex justify-content-between align-items-center mt-3 px-2 py-2 rounded-2 fw-bold" style="background:#fee2e2;font-size:.88rem;">
                    <span>Total Deductions</span>
                    <span class="text-danger">- {{ $currency }} {{ number_format($summary['total_deductions'] ?? $record->total_deductions, 2) }}</span>
                </div>
            </div>
        </div>

        {{-- ── Net Pay ── --}}
        <div class="d-flex justify-content-between align-items-center mx-3 mb-3 p-4 rounded-3"
             style="background:linear-gradient(135deg,#003366,#0055b3);">
            <div>
                <div style="color:rgba(255,255,255,.6);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Net Pay ({{ $currency }})</div>
                <div style="font-size:2rem;font-weight:900;color:#D4AF37;line-height:1.1;">
                    {{ $currency }} {{ number_format($summary['net_pay'] ?? $record->net_pay, 2) }}
                </div>
            </div>
            @if($hasSecondary)
            <div class="text-end">
                <div style="color:rgba(255,255,255,.6);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Equivalent</div>
                <div style="font-size:1.1rem;font-weight:700;color:rgba(255,255,255,.85);">
                    {{ $record->configuration?->secondary_currency_code ?? '' }}
                    {{ number_format($summary['net_pay_secondary'],2) }}
                </div>
            </div>
            @endif
        </div>

        <div class="text-center pb-4" style="font-size:.7rem;color:#94a3b8;">
            Computer-generated payslip — no signature required
            &nbsp;·&nbsp; Payment date: {{ $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