@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
        <div>
            <h2 class="fw-bold mb-2" style="color: #17479E;">
                <i class="fas fa-file-invoice-dollar me-2"></i>Salary Deduction Details
            </h2>
        
        </div>
        <div class="d-flex align-items-center gap-2">
            <div class="dropdown">
                <button class="btn btn-sm dropdown-toggle rounded-pill shadow-sm" style="background: #17479E; color: white;" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-download me-1"></i>Export Options
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 rounded-3">
                    <li>
                        <a class="dropdown-item rounded-2" href="{{ route('salary_detail.export.csv', ['checkNumber' => $checkNumber]) }}">
                            <i class="fas fa-file-csv me-2 text-success"></i>Export to CSV
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item rounded-2" href="{{ route('exportSalaryDetailPdf', ['checkNumber' => $checkNumber]) }}" target="_blank">
                            <i class="fas fa-file-pdf me-2 text-danger"></i>Export to PDF
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<h5 class="text-primary mb-0">{{ $firstName }} {{ $middleName }} {{ $lastName }} (Check: {{ $checkNumber }})</h5>
    <!-- Salary Details Table -->
    <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
        <div class="card-header" style="background:#4781CC; border: none; padding: 1.25rem 1.5rem;">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0 text-white fw-bold">
                    <i class="fas fa-table me-2"></i>Deduction History & Balance Summary
                </h5>
                <span class="badge bg-white px-3 py-2 fw-bold" style="color: #17479E;">{{ count($deductionTypes) }} Types</span>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0 modern-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            @foreach($deductionTypes as $type)
                                <th>{{ strtoupper($type) }} DEDUCTION</th>
                                <th>{{ strtoupper($type) }} BALANCE</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $columnTotals = array_fill_keys($deductionTypes, 0);
                            $balanceTotals = array_fill_keys($deductionTypes, 0);
                        @endphp

                        @foreach($formattedData as $year => $months)
                            <tr>
                                <td colspan="{{ count($deductionTypes) * 2 + 1 }}" class="fw-bold py-3 px-4">{{ $year }}</td>
                            </tr>
                            @foreach($months as $month => $deductions)
                                <tr>
                                    <td class="align-middle px-4">{{ $month }}</td>
                                    @foreach($deductionTypes as $type)
                                        @php
                                            $amount = $deductions[$type] ?? 0;
                                            $balance = $deductions[$type . '_balance'] ?? 0;
                                            $columnTotals[$type] += $amount;
                                            $balanceTotals[$type] += $balance;
                                        @endphp
                                        <td class="align-middle px-4">{{ number_format($amount, 2) }}</td>
                                        <td class="align-middle px-4">{{ number_format($balance, 2) }}</td>
                                    @endforeach
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                    <tfoot style="background-color: #f8f9fa;">
                        <tr>
                            <th class="py-3 px-4">TOTAL</th>
                            @foreach($deductionTypes as $type)
                                <th class="py-3 px-4">TZS {{ number_format($columnTotals[$type], 2) }}</th>
                                <th class="py-3 px-4">N/A</th>
                            @endforeach
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
/* Reference Table Style from bulk-sms.blade.php */
.table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    width: 100%;
    margin: 0;
    border: 1px solid #dee2e6;
}

.table thead th {
    background: #CEEDF5 !important;
    color: #17479E !important;
    font-weight: 600;
    border: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.table thead th:hover {
    background: #B8E2F0 !important;
}

.table tbody tr {
    transition: all 0.2s ease;
    background: white;
}

.table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.table tbody tr:hover {
    background: #e3f2fd !important;
}

.table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
    color: #495057;
}

.table-responsive {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

/* Legacy modern-table class support */
.modern-table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    width: 100%;
    margin: 0;
    border: 1px solid #dee2e6;
}

.modern-table thead th {
    background: #4781CC !important;
    color: #17479E !important;
    font-weight: 600;
    border: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.modern-table thead th:hover {
    background: #B8E2F0 !important;
}

.modern-table tbody tr {
    transition: all 0.2s ease;
    background: white;
}

.modern-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.modern-table tbody tr:hover {
    background: #e3f2fd !important;
}

.modern-table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
    color: #495057;
}

.dropdown-item:hover {
    background-color: rgba(23, 71, 158, 0.1);
}
</style>

@endsection