@extends('dashboard.layouts.app')

@section('content')
    <div class="container-fluid">
        <!-- User Information Header -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header border-bottom bg-base py-3 px-4 d-flex align-items-center justify-content-between flex-wrap gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="avatar-md bg-info-focus text-info rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <iconify-icon icon="mdi:account-details" style="font-size: 1.5rem;"></iconify-icon>
                    </div>
                    <div>
                        <h5 class="mb-0">{{ $staff->full_name ?? 'Staff Member' }}</h5>
                        <p class="mb-0 text-muted small">{{ $staff->role->name ?? 'Staff' }} | {{ $staff->staff_no ?? 'No ID' }}</p>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-success-focus text-success-600 px-3 py-2 rounded-pill">
                        <iconify-icon icon="mdi:check-decagram" class="me-1"></iconify-icon>
                        {{ $payrollGenerate->payroll_status ?? 'Generated' }}
                    </span>
                    <a href="{{ route('payrolls.index') }}" class="btn btn-outline-secondary btn-sm px-3 ms-2">
                        <iconify-icon icon="mdi:arrow-left" class="me-1"></iconify-icon> Back
                    </a>
                </div>
            </div>
            <div class="card-body p-4 bg-light-focus">
                <div class="row g-4">
                    <div class="col-md-3">
                        <div class="d-flex flex-column gap-2">
                            <span class="text-muted small text-uppercase fw-bold">Department</span>
                            <span class="fw-bold">{{ $staff->department->name ?? '—' }}</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex flex-column gap-2">
                            <span class="text-muted small text-uppercase fw-bold">Designation</span>
                            <span class="fw-bold">{{ $staff->designation->title ?? '—' }}</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex flex-column gap-2">
                            <span class="text-muted small text-uppercase fw-bold">Mobile</span>
                            <span class="fw-bold">{{ $staff->mobile ?? '—' }}</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex flex-column gap-2">
                            <span class="text-muted small text-uppercase fw-bold">Joining Date</span>
                            <span class="fw-bold">{{ $staff->date_of_joining ?? '—' }}</span>
                        </div>
                    </div>
                </div>
                <div class="row g-4 mt-1 pt-3 border-top">
                    <div class="col-md-3">
                        <div class="d-flex flex-column gap-2">
                            <span class="text-muted small text-uppercase fw-bold">Email</span>
                            <span class="fw-bold">{{ $staff->email ?? '—' }}</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex flex-column gap-2">
                            <span class="text-muted small text-uppercase fw-bold">Period</span>
                            <span class="badge bg-primary-focus text-primary-600 align-self-start">{{ $payrollGenerate->payroll_month }} / {{ $payrollGenerate->payroll_year }}</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex flex-column gap-2">
                            <span class="text-muted small text-uppercase fw-bold">Payment Mode</span>
                            <span class="fw-bold"><iconify-icon icon="mdi:bank-transfer" class="me-1"></iconify-icon> {{ $payrollGenerate->payment_mode ?? '—' }}</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex flex-column gap-2">
                            <span class="text-muted small text-uppercase fw-bold">Generated At</span>
                            <span class="fw-bold small text-muted">{{ $payrollGenerate->created_at->format('M d, Y H:i') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- Summary Card -->
            <div class="col-12">
                <div class="card border-0 shadow-sm mb-4 border-start border-primary border-4">
                    <div class="card-header border-bottom bg-base py-3 px-4">
                        <h6 class="mb-0 d-flex align-items-center gap-2">
                            <iconify-icon icon="mdi:calculator" class="text-primary"></iconify-icon>
                            Financial Summary
                        </h6>
                    </div>
                    <div class="card-body p-4">
                        <div class="row g-4 text-center">
                            <div class="col-md-2 border-end">
                                <span class="text-muted small text-uppercase mb-2 d-block">Basic Salary</span>
                                <h5 class="mb-0">${{ number_format($payrollGenerate->basic_salary, 2) }}</h5>
                            </div>
                            <div class="col-md-2 border-end">
                                <span class="text-muted small text-uppercase mb-2 d-block">Total Earnings</span>
                                <h5 class="mb-0 text-success">+${{ number_format($payrollGenerate->total_earning, 2) }}</h5>
                            </div>
                            <div class="col-md-2 border-end">
                                <span class="text-muted small text-uppercase mb-2 d-block">Total Deductions</span>
                                <h5 class="mb-0 text-danger">-${{ number_format($payrollGenerate->total_deduction, 2) }}</h5>
                            </div>
                            <div class="col-md-2 border-end">
                                <span class="text-muted small text-uppercase mb-2 d-block">Gross Salary</span>
                                <h5 class="mb-0 text-dark">${{ number_format($payrollGenerate->gross_salary, 2) }}</h5>
                            </div>
                            <div class="col-md-2 border-end">
                                <span class="text-muted small text-uppercase mb-2 d-block">Tax</span>
                                <h5 class="mb-0 text-warning">${{ number_format($payrollGenerate->tax, 2) }}</h5>
                            </div>
                            <div class="col-md-2">
                                <span class="text-primary small text-uppercase fw-bold mb-2 d-block">Net Payable</span>
                                <h4 class="mb-0 text-primary fw-bold">${{ number_format($payrollGenerate->net_salary, 2) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detailed Breakdown -->
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header border-bottom bg-base py-3 px-4 d-flex align-items-center gap-2">
                        <iconify-icon icon="mdi:cash-plus" class="text-success"></iconify-icon>
                        <h6 class="mb-0">Earnings Breakdown</h6>
                    </div>
                    <div class="card-body p-0">
                        @if ($earnings->isNotEmpty())
                            <div class="table-responsive">
                                <table class="table table-hover mb-0 align-middle">
                                    <thead class="bg-light">
                                        <tr>
                                            <th class="ps-4">Description</th>
                                            <th class="text-end pe-4">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($earnings as $earning)
                                            <tr>
                                                <td class="ps-4">{{ $earning->type_name }}</td>
                                                <td class="text-end pe-4 fw-bold text-success">${{ number_format($earning->amount, 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="p-5 text-center text-muted">
                                <iconify-icon icon="mdi:cash-off" class="mb-2" style="font-size: 2rem;"></iconify-icon>
                                <p class="mb-0">No earnings recorded for this period.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header border-bottom bg-base py-3 px-4 d-flex align-items-center gap-2">
                        <iconify-icon icon="mdi:cash-minus" class="text-danger"></iconify-icon>
                        <h6 class="mb-0">Deductions Breakdown</h6>
                    </div>
                    <div class="card-body p-0">
                        @if ($deductions->isNotEmpty())
                            <div class="table-responsive">
                                <table class="table table-hover mb-0 align-middle">
                                    <thead class="bg-light">
                                        <tr>
                                            <th class="ps-4">Description</th>
                                            <th class="text-end pe-4">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($deductions as $deduction)
                                            <tr>
                                                <td class="ps-4">{{ $deduction->type_name }}</td>
                                                <td class="text-end pe-4 fw-bold text-danger">${{ number_format($deduction->amount, 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="p-5 text-center text-muted">
                                <iconify-icon icon="mdi:cash-remove" class="mb-2" style="font-size: 2rem;"></iconify-icon>
                                <p class="mb-0">No deductions recorded for this period.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection