@extends('layouts.app')
@section('title', $payroll->name)
@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 class="d-flex align-items-center gap-2">
            <a href="{{ route('payroll.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
            <div>
                <h1>{{ $payroll->name }}</h1>
                <nav aria-label="breadcrumb"><ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('payroll.index') }}">Payroll</a></li>
                    <li class="breadcrumb-item active">{{ $payroll->name }}</li>
                </ol></nav>
            </div>
        </div>
        <div class="d-flex gap-2 align-items-center">
            <span class="badge bg-{{ $payroll->status==='approved'?'success':'warning' }} fs-6">{{ ucfirst($payroll->status) }}</span>
            @if($payroll->status === 'draft' && auth()->user()->hasRole('super_admin','president'))
            <form method="POST" action="{{ route('payroll.approve', $payroll) }}">
                @csrf
                <button class="btn btn-success btn-sm" onclick="return confirm('Approve and finalise this payroll?')">
                    <i class="bi bi-check-circle me-1"></i>Approve Payroll
                </button>
            </form>
            @endif
        </div>
    </div>
</div>

{{-- Summary cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card sc-primary"><div class="stat-icon"><i class="bi bi-people"></i></div>
            <div class="stat-value">{{ $records->total() }}</div><div class="stat-label">Employees</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-gold"><div class="stat-icon"><i class="bi bi-cash-stack"></i></div>
            <div class="stat-value">${{ number_format($totals->total_gross ?? 0) }}</div><div class="stat-label">Total Gross</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-success"><div class="stat-icon"><i class="bi bi-cash"></i></div>
            <div class="stat-value">${{ number_format($totals->total_net ?? 0) }}</div><div class="stat-label">Total Net Pay</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-warning"><div class="stat-icon"><i class="bi bi-percent"></i></div>
            <div class="stat-value">${{ number_format($totals->total_deductions ?? 0) }}</div><div class="stat-label">Total Deductions</div></div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body py-2 d-flex gap-3" style="font-size:.82rem;color:var(--text-2);">
        <span><i class="bi bi-calendar3 me-1"></i>{{ \Carbon\Carbon::parse($payroll->start_date)->format('M j') }} – {{ \Carbon\Carbon::parse($payroll->end_date)->format('M j, Y') }}</span>
        <span><i class="bi bi-credit-card me-1"></i>Payment: {{ \Carbon\Carbon::parse($payroll->payment_date)->format('M j, Y') }}</span>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Payroll Records</span>
        <button class="btn btn-sm btn-outline-success"><i class="bi bi-file-earmark-excel me-1"></i>Export</button>
    </div>
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Employee</th>
                    <th class="d-none d-md-table-cell">Department</th>
                    <th>Basic Salary</th>
                    <th class="d-none d-lg-table-cell">Gross Pay</th>
                    <th class="d-none d-lg-table-cell">Deductions</th>
                    <th style="color:#059669;">Net Pay</th>
                    <th class="text-end">Payslip</th>
                </tr>
            </thead>
            <tbody>
            @forelse($records as $rec)
            <tr>
                <td>
                    <div class="d-flex align-items-center gap-2">
                        <div class="avatar avatar-sm" style="background:linear-gradient(135deg,var(--ul-primary),var(--ul-accent));color:#fff;flex-shrink:0;">
                            {{ strtoupper(substr($rec->employee->first_name??'?',0,1)) }}
                        </div>
                        <div class="d-none d-sm-block">
                            <div class="fw-semibold" style="font-size:.83rem;">{{ $rec->employee->full_name ?? '—' }}</div>
                            <div style="font-size:.71rem;color:var(--text-2);">{{ $rec->employee->position ?? '' }}</div>
                        </div>
                    </div>
                </td>
                <td class="d-none d-md-table-cell" style="font-size:.82rem;color:var(--text-2);">{{ $rec->employee->department->name ?? '—' }}</td>
                <td style="font-size:.83rem;">${{ number_format($rec->basic_salary, 2) }}</td>
                <td class="d-none d-lg-table-cell" style="font-size:.83rem;">${{ number_format($rec->gross_pay, 2) }}</td>
                <td class="d-none d-lg-table-cell" style="font-size:.83rem;color:#dc2626;">-${{ number_format($rec->total_deductions, 2) }}</td>
                <td class="fw-bold" style="color:#059669;">${{ number_format($rec->net_pay, 2) }}</td>
                <td class="text-end">
                    <a href="{{ route('payroll.payslip', $rec) }}" class="btn btn-sm btn-icon btn-outline-primary" title="View Payslip">
                        <i class="bi bi-receipt"></i>
                    </a>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="text-center py-4" style="color:var(--text-2);">No records found</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($records->hasPages())
    <div class="card-body pt-0">{{ $records->links('pagination::bootstrap-5') }}</div>
    @endif
</div>
@endsection