@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Payroll Details"
                    description="Review payroll totals, staff records, and compensation status for the selected payroll period.">
                    @if ($payrollRun)
                        <span class="ui-pill ui-pill--success">
                            Run for {{ \Carbon\Carbon::create()->month($month)->format('F') }} {{ $year }}
                        </span>
                    @else
                        <span class="ui-pill ui-pill--neutral">
                            Not run for {{ \Carbon\Carbon::create()->month($month)->format('F') }} {{ $year }}
                        </span>
                    @endif
                </x-page-title>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-card__label">Total Gross Salaries</div>
                        <div class="stat-card__value stat-card__value--primary">
                            {{ number_format($totalGross, 2) }}
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-card__label">Total Net Salaries</div>
                        <div class="stat-card__value stat-card__value--success">
                            {{ number_format($totalNet, 2) }}
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-card__label">Total Bonuses</div>
                        <div class="stat-card__value stat-card__value--success">
                            {{ number_format($bonuses_total, 2) }}
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-card__label">Total Penalties</div>
                        <div class="stat-card__value stat-card__value--danger">
                            {{ number_format($penalties_total, 2) }}
                        </div>
                    </div>
                </div>

                <div class="ui-card ui-card--table" style="border-radius: 20px 20px 0px 0px;">
                    <div class="ui-card__header">

                        <div class="d-flex align-items-center gap-3 flex-nowrap">

                            {{-- Title --}}
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap me-auto">
                                Filters
                            </h6>

                            <x-table-controls formId="payroll-table-controls" :action="route('payroll.saff')" searchName="search"
                                searchPlaceholder="search e.g. Jelani" :export="true" :exportRoute="route('payroll.saff.export')" :saveRoute="route('payroll.saff.saveFilteredTable')"
                                :filters="[
                                    'month' => [
                                        1 => 'January',
                                        2 => 'February',
                                        3 => 'March',
                                        4 => 'April',
                                        5 => 'May',
                                        6 => 'June',
                                        7 => 'July',
                                        8 => 'August',
                                        9 => 'September',
                                        10 => 'October',
                                        11 => 'November',
                                        12 => 'December',
                                    ],
                                    'year' => [
                                        2024 => 2024,
                                        2025 => 2025,
                                        2026 => 2026,
                                    ],
                                    'department_id' => $departments->pluck('name', 'id')->toArray(),
                                    'job_title_id' => collect($job_titles)->pluck('name', 'slug')->toArray(),
                                ]" :filterLabels="[
                                    'month' => 'Month',
                                    'year' => 'Year',
                                    'department_id' => 'Department',
                                    'job_title_id' => 'Category',
                                ]" />
                        </div>

                    </div>
                </div>

                <div class="ui-card ui-card--table" style="border-radius: 0px;">

                    <x-table :headers="[
                        'Staff',
                        'Pay Period',
                        'Pay Date',
                        'Gross Salary',
                        'Net Salary',
                        'Bonuses',
                        'Penalties',
                        'Notes',
                        'Viewed',
                        'Action',
                    ]" :paginator="$rows" emptyMessage="No payroll staff data found.">
                        @foreach ($rows as $row)
                            @php
                                $staffName =
                                    $row->full_name ?: trim(($row->first_name ?? '') . ' ' . ($row->last_name ?? ''));
                            @endphp

                            <tr>
                                <td class="ui-title text-center">
                                    {{ $staffName ?: '—' }}
                                </td>

                                <td class="ui-muted text-center">
                                    @if (!empty($row->run_date))
                                        {{ $row->from_date }} to {{ $row->to_date }}
                                    @else
                                        —
                                    @endif
                                </td>

                                <td class="ui-muted text-center">
                                    @if (!empty($row->run_date))
                                        {{ \Illuminate\Support\Carbon::parse($row->run_date)->format('Y-m-d') }}
                                    @else
                                        —
                                    @endif
                                </td>

                                <td class="ui-muted text-center">
                                    {{ number_format($row->gross_salary, 2) }}
                                </td>

                                <td class="ui-muted text-center">
                                    {{ number_format($row->net_salary, 2) }}
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--success">
                                        {{ number_format($row->bonuses, 2) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--danger">
                                        {{ number_format($row->penalties, 2) }}
                                    </span>
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $row->notes ?: '—' }}
                                </td>

                                <td class="text-center">
                                    @if ($row->in_compensation_log)
                                        <span class="ui-pill ui-pill--success">Viewed</span>
                                    @else
                                        <span class="ui-pill ui-pill--warn">Not Viewed</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if (!empty($row->user_id))
                                        @if (!$payrollRun)
                                            <a href="{{ route('compensations.user.index', ['user_id' => $row->user_id, 'from_date' => $from_date, 'to_date' => $to_date]) }}"
                                                class="asset-btn {{ $row->in_compensation_log ? 'asset-btn--secondary' : 'asset-btn--primary' }} payroll-action-btn">
                                                Add Variable
                                            </a>
                                        @else
                                            <span class="ui-muted">—</span>
                                        @endif
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-3 {
            grid-column: span 3 / span 3;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-actions {
            display: flex;
            justify-content: end;
            gap: 0.75rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
            margin: 10px;
        }

        .stat-card {
            border: 1px solid #eef2f7;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
            padding: 1.1rem 1.15rem;
        }

        .stat-card__label {
            color: #6b7280;
            font-size: 0.9rem;
            margin-bottom: 0.45rem;
        }

        .stat-card__value {
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .stat-card__value--primary {
            color: #2563eb;
        }

        .stat-card__value--success {
            color: #16a34a;
        }

        .stat-card__value--danger {
            color: #dc2626;
        }

        .payroll-action-btn {
            padding: 0.5rem 0.85rem;
            font-size: 0.85rem;
            white-space: nowrap;
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-container .select2-selection--single {
            height: 44px !important;
            border: 1px solid #dbe2ea !important;
            border-radius: 12px !important;
            background: #fff !important;
            display: flex !important;
            align-items: center !important;
            padding: 0 0.75rem !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #111827 !important;
            line-height: 44px !important;
            padding-left: 0 !important;
            padding-right: 24px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 44px !important;
            right: 8px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__clear {
            margin-right: 10px !important;
        }

        .select2-dropdown {
            border: 1px solid #dbe2ea !important;
            border-radius: 12px !important;
            overflow: hidden;
        }

        .select2-search--dropdown .select2-search__field {
            border: 1px solid #dbe2ea !important;
            border-radius: 10px !important;
            padding: 0.55rem 0.75rem !important;
        }

        @media (max-width: 1199.98px) {
            .asset-col-3 {
                grid-column: span 6 / span 6;
            }

            .stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .asset-col-3 {
                grid-column: span 12 / span 12;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#staff_id').select2({
                placeholder: 'Search staff name...',
                allowClear: true,
                width: '100%',
                ajax: {
                    url: "{{ route('payroll.staff.search') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            department_id: $('#department_id').val()
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                }
            });

            $('#department_id').on('change', function() {
                $('#staff_id').val(null).trigger('change');
            });

            const $fromDate = $('#from_date');
            const $toDate = $('#to_date');

            $fromDate.on('change', function() {
                const fDate = new Date($(this).val());

                if (!isNaN(fDate.getTime())) {
                    if (fDate.getDate() !== 15) {
                        alert('Start date must be the 15th.');
                        fDate.setDate(15);
                        $(this).val(fDate.toISOString().split('T')[0]);
                    }

                    const tDate = new Date(fDate);
                    tDate.setMonth(tDate.getMonth() + 1);
                    tDate.setDate(14);

                    $toDate.val(tDate.toISOString().split('T')[0]);
                }
            });

            $toDate.on('change', function() {
                const tDate = new Date($(this).val());

                if (!isNaN(tDate.getTime())) {
                    if (tDate.getDate() !== 14) {
                        alert('End date must be the 14th.');
                        tDate.setDate(14);
                        $(this).val(tDate.toISOString().split('T')[0]);
                    }

                    const fDate = new Date(tDate);
                    fDate.setMonth(fDate.getMonth() - 1);
                    fDate.setDate(15);

                    $fromDate.val(fDate.toISOString().split('T')[0]);
                }
            });
        });
    </script>
@endpush