@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb modern-breadcrumb-payroll">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}" class="breadcrumb-link">
                    <i class="bx bx-home"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('payroll.upload') }}" class="breadcrumb-link">
                    <i class="bx bx-money"></i>
                    <span>Payroll</span>
                </a>
            </li>
            <li class="breadcrumb-item active">
                <i class="bx bx-show"></i>
                <span>View Record</span>
            </li>
        </ol>
    </nav>

    <div class="page-header-modern mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <div class="header-icon me-3">
                    <i class="bx bx-show"></i>
                </div>
                <div>
                    <h1 class="page-title mb-0">Payroll Record Details</h1>
                    <p class="page-subtitle mb-0">View complete payroll information</p>
                </div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('payroll.edit', $payroll->id) }}" class="btn btn-warning">
                    <i class="bx bx-edit"></i> Edit
                </a>
                <a href="{{ route('payroll.upload') }}" class="btn btn-secondary">
                    <i class="bx bx-arrow-back"></i> Back
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card detail-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bx bx-user"></i> Employee Information</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Check Number</label>
                                <div class="info-value">
                                    <span class="badge bg-primary">{{ $payroll->check_number }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Full Name</label>
                                <div class="info-value">{{ $payroll->full_name }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Account Number</label>
                                <div class="info-value">{{ $payroll->account_number ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Bank Name</label>
                                <div class="info-value">{{ $payroll->bank_name ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <h6 class="mb-3"><i class="bx bx-money"></i> Salary Breakdown</h6>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Basic Salary</label>
                                <div class="info-value text-success">UGX {{ number_format($payroll->basic_salary, 0) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Allowance</label>
                                <div class="info-value text-info">UGX {{ number_format($payroll->allowance, 0) }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Gross Amount</label>
                                <div class="info-value text-primary">UGX {{ number_format($payroll->gross_amount, 0) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Net Amount</label>
                                <div class="info-value text-danger fw-bold">UGX {{ number_format($payroll->net_amount, 0) }}</div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Created At</label>
                                <div class="info-value">{{ $payroll->created_at->format('d M Y, H:i A') }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-group">
                                <label class="info-label">Last Updated</label>
                                <div class="info-value">{{ $payroll->updated_at->format('d M Y, H:i A') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.modern-breadcrumb-payroll {
    background: white; padding: 14px 20px; border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 0; border: 1px solid #e5e7eb;
}
.modern-breadcrumb-payroll .breadcrumb-item { display: flex; align-items: center; font-size: 14px; }
.modern-breadcrumb-payroll .breadcrumb-link {
    display: inline-flex; align-items: center; gap: 8px; color: #6b7280;
    text-decoration: none; transition: color 0.2s;
}
.modern-breadcrumb-payroll .breadcrumb-link:hover { color: #3b82f6; }
.page-header-modern {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); padding: 36px; border-radius: 6px;
    color: white; box-shadow: 0 2px 6px rgba(23, 71, 158, 0.15); position: relative; overflow: hidden;
}
.header-icon {
    width: 70px; height: 70px; background: rgba(255,255,255,0.25); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.page-title { font-size: 28px; font-weight: 700; color: white; }
.page-subtitle { color: rgba(255,255,255,0.9); font-size: 14px; }
.detail-card { border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.card-header { background: #f8f9fa; border-bottom: 2px solid #e5e7eb; padding: 16px 20px; }
.card-header h5 { font-weight: 700; color: #374151; }
.info-group { margin-bottom: 20px; }
.info-label {
    font-size: 12px; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block;
}
.info-value {
    font-size: 16px; font-weight: 500; color: #374151;
    padding: 10px 12px; background: #f9fafb; border-radius: 4px; border-left: 3px solid #17479E;
}
.btn { border-radius: 6px; font-weight: 600; transition: all 0.3s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-primary { background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); border: none; color: white; }
.btn-warning { background: linear-gradient(135deg, #ffce00 0%, #ffa500 100%); border: none; color: #333; }
.btn-secondary { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); border: none; color: white; }
hr { border-top: 2px dashed #e5e7eb; }
</style>
@endpush
@endsection