@extends('layouts.app')

@section('title', 'Payroll: ' . $period->name)

@section('content')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-2">
    <div>
        <a href="{{ route('payroll.index') }}" class="text-secondary text-decoration-none small">&larr; Back to Payroll</a>
        <h4 class="fw-bold mt-1 mb-0">{{ $period->name }} Payroll Register</h4>
        <div class="small text-secondary">
            Dates: {{ $period->start_date->format('d M Y') }} - {{ $period->end_date->format('d M Y') }} &bull; 
            Payment: {{ $period->payment_date->format('d M Y') }}
        </div>
    </div>
    <div class="d-flex gap-2">
        @if($period->status !== 'finalized')
            <form action="{{ route('payroll.finalize', $period->id) }}" method="POST" onsubmit="return confirm('Finalize this payroll cycle? This will lock salaries and disburse payslips to employees.');">
                @csrf
                <button type="submit" class="btn btn-success btn-sm shadow-sm">
                    <i class="bi bi-check2-circle me-1"></i> Finalize & Disburse Payslips
                </button>
            </form>
        @else
            <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2">
                <i class="bi bi-shield-check me-1"></i> Payroll Finalized & Paid
            </span>
        @endif
    </div>
</div>

<!-- Financial Summary Banner -->
<div class="row g-3 mb-4">
    <div class="col-12 col-md-4">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Total Gross Earnings</span>
            <h4 class="fw-bold text-dark mt-1 mb-0">৳ {{ number_format($period->total_gross, 2) }}</h4>
            <span class="text-muted small">Basic + HRA + Medical + Conveyance + OT</span>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Total Deductions & Tax</span>
            <h4 class="fw-bold text-danger mt-1 mb-0">৳ {{ number_format($period->total_deductions, 2) }}</h4>
            <span class="text-muted small">Statutory deductions & income tax</span>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Net Take-Home Disbursed</span>
            <h4 class="fw-bold text-success mt-1 mb-0">৳ {{ number_format($period->total_net, 2) }}</h4>
            <span class="text-muted small">{{ $period->items->count() }} Employees Processed</span>
        </div>
    </div>
</div>

<!-- Employee Item Breakdown -->
<div class="card shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold">Individual Employee Salary Slips</h6>
        <span class="badge bg-light text-secondary border">{{ $period->items->count() }} Slips</span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 small">
            <thead class="table-light text-secondary">
                <tr>
                    <th>Employee</th>
                    <th>Basic</th>
                    <th>House Rent</th>
                    <th>Medical + Conv</th>
                    <th>Overtime (Hrs/Pay)</th>
                    <th>Tax & Deductions</th>
                    <th>Net Salary (BDT)</th>
                    <th>Status</th>
                    <th class="text-end">Payslip</th>
                </tr>
            </thead>
            <tbody>
                @foreach($period->items as $item)
                    <tr>
                        <td>
                            <div class="fw-semibold text-dark">{{ $item->employee->full_name ?? 'Staff' }}</div>
                            <span class="text-muted text-xs">{{ $item->employee->employee_code ?? '' }} &bull; {{ $item->employee->department->name ?? '' }}</span>
                        </td>
                        <td>৳ {{ number_format($item->basic_salary, 2) }}</td>
                        <td>৳ {{ number_format($item->house_rent, 2) }}</td>
                        <td>৳ {{ number_format($item->medical + $item->conveyance, 2) }}</td>
                        <td>
                            @if($item->overtime_hours > 0)
                                <span class="text-primary fw-semibold">{{ $item->overtime_hours }}h (৳{{ number_format($item->overtime_pay, 0) }})</span>
                            @else
                                <span class="text-muted">0h</span>
                            @endif
                        </td>
                        <td class="text-danger fw-semibold">
                            ৳ {{ number_format($item->deductions, 2) }}
                        </td>
                        <td class="fw-bold text-success fs-6">
                            ৳ {{ number_format($item->net_salary, 2) }}
                        </td>
                        <td>
                            @if($item->payment_status === 'paid')
                                <span class="badge badge-soft-success">Paid</span>
                            @else
                                <span class="badge badge-soft-warning">Pending</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <a href="{{ route('payroll.payslip', $item->id) }}" class="btn btn-xs btn-outline-secondary py-1 px-2 text-xs" target="_blank">
                                <i class="bi bi-file-earmark-text me-1"></i> Payslip
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection