@extends('dashboard.layouts.app')

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

    <style>
        .payroll-staff-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .payroll-staff-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .payroll-filter-card {
            padding: 1.25rem;
        }

        .payroll-filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
            flex-wrap: wrap;
        }

        .payroll-filter-head__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .payroll-filter-head__icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .payroll-filter-head__title {
            font-size: 1.05rem !important;
            font-weight: 800;
            color: #111827;
        }

        .payroll-filter-head__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .payroll-run-status {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

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

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

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

        .asset-select {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .asset-select:disabled {
            background: #f8fafc;
            color: #64748b;
            cursor: not-allowed;
        }

        .payroll-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
        }

        .payroll-summary-card {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            padding: 1rem;
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
            min-width: 0;
        }

        .payroll-summary-card__icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1.25rem;
        }

        .payroll-summary-card--primary .payroll-summary-card__icon {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .payroll-summary-card--success .payroll-summary-card__icon {
            background: #f0fdf4;
            color: #166534;
        }

        .payroll-summary-card--info .payroll-summary-card__icon {
            background: #eef2ff;
            color: #4338ca;
        }

        .payroll-summary-card--danger .payroll-summary-card__icon {
            background: #fef2f2;
            color: #b91c1c;
        }

        .payroll-summary-card__label {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 0.2rem;
        }

        .payroll-summary-card__value {
            color: #111827;
            font-size: 1.25rem;
            font-weight: 900;
            line-height: 1.15;
            overflow-wrap: anywhere;
        }

        .payroll-table-card {
            padding: 0 !important;
        }

        .payroll-table-title {
            color: #111827;
            font-size: 1.05rem !important;
            font-weight: 800;
        }

        .payroll-table-sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .payroll-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .payroll-staff-page table {
            min-width: 1050px;
            width: 100%;
            vertical-align: middle;
        }

        .payroll-staff-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .payroll-staff-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .payroll-staff-page table tbody tr {
            transition: 0.16s ease;
        }

        .payroll-staff-page table tbody tr:hover {
            background: #f8fafc;
        }

        .payroll-staff {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 220px;
        }

        .payroll-staff__avatar {
            width: 38px;
            height: 38px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 0.78rem;
            font-weight: 900;
            flex-shrink: 0;
        }

        .payroll-staff__name {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 800;
            line-height: 1.35;
            max-width: 190px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .payroll-staff__sub {
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 650;
            margin-top: 0.1rem;
        }

        .payroll-period {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: #334155;
            font-size: 0.82rem;
            font-weight: 750;
            white-space: nowrap;
        }

        .payroll-period small {
            color: #94a3b8;
            font-weight: 700;
        }

        .payroll-money {
            font-weight: 900;
        }

        .payroll-money--gross {
            color: #1d4ed8;
        }

        .payroll-money--net {
            color: #166534;
        }

        .payroll-pay-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            min-height: 34px;
            border-radius: 999px;
            padding: 0.45rem 0.8rem;
            border: 1px solid #dbeafe;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 0.78rem;
            font-weight: 900;
            transition: 0.18s ease;
            white-space: nowrap;
        }

        .payroll-pay-btn:hover {
            background: #2563eb;
            border-color: #2563eb;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
        }

        .payroll-pay-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .payroll-total-row td {
            background: #f8fafc !important;
            color: #111827 !important;
            border-top: 1px solid #e5e7eb !important;
            font-weight: 850 !important;
        }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .table-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .ui-pill--warn {
            background: #fffbeb;
            color: #92400e;
        }

        .ui-pill--danger {
            background: #fef2f2;
            color: #b91c1c;
        }

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        @media (max-width: 1199.98px) {
            .payroll-summary-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

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

            .payroll-filter-head__main {
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .payroll-filter-card,
            .payroll-staff-page .ui-card__header {
                padding: 1rem;
            }

            .payroll-summary-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    @php
        $currentMonth = now()->month;
        $currentYear = now()->year;

        $monthParam = request('month');
        $yearParam = request('year');

        $isAllMonth = ($monthParam === 'all');
        $isAllYear = ($yearParam === 'all');

        $selectedMonth = $isAllMonth ? null : (int) ($monthParam ?: $currentMonth);
        $selectedYear = $isAllYear ? null : (int) ($yearParam ?: $currentYear);

        $selectedMonthName = $selectedMonth ? date('F', mktime(0, 0, 0, $selectedMonth, 10)) : 'All months';
        $selectedYearLabel = $selectedYear ? (string) $selectedYear : 'All years';

        $canCheckRun = !is_null($selectedMonth) && !is_null($selectedYear);

        $runExistsForSelected = $canCheckRun
            ? DB::table('payroll_runs')->where('month', $selectedMonth)->where('year', $selectedYear)->exists()
            : null;

        $payrollRowsCount = !empty($rows) ? collect($rows)->count() : 0;
    @endphp

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

                <x-page-title
                    title="Payroll Details"
                    description="Review payroll details per staff, pay periods, gross salaries, net salaries, payment methods, and payment status.">
                </x-page-title>

                <div class="ui-card payroll-filter-card">
                    <div class="payroll-filter-head">
                        <div class="payroll-filter-head__main">
                            <div class="payroll-filter-head__icon">
                                <i class="fas fa-filter"></i>
                            </div>

                            <div>
                                <h5 class="payroll-filter-head__title mb-0">Payroll Period</h5>
                                <p class="payroll-filter-head__sub mb-0">
                                    Current payroll view is filtered by the selected month and year.
                                </p>
                            </div>
                        </div>

                        <div class="payroll-run-status">
                            @if (!$canCheckRun)
                                <span class="ui-pill ui-pill--info">
                                    <i class="fas fa-calendar-alt"></i>
                                    Showing {{ $selectedMonthName }} {{ $selectedYearLabel }}
                                </span>
                            @else
                                <span class="ui-pill {{ $runExistsForSelected ? 'ui-pill--success' : 'ui-pill--neutral' }}">
                                    <i class="fas {{ $runExistsForSelected ? 'fa-check-circle' : 'fa-clock' }}"></i>
                                    {{ $runExistsForSelected ? 'Run' : 'Not run' }} for {{ $selectedMonthName }} {{ $selectedYearLabel }}
                                </span>
                            @endif
                        </div>
                    </div>

                    <form action="" method="GET" class="payroll-period-form">
                        <div class="asset-form-grid">
                            <div class="asset-col-6">
                                <label for="month" class="asset-label">Select Month</label>
                                <select disabled name="month" id="month" class="asset-select">
                                    <option value="all" {{ $isAllMonth ? 'selected' : '' }}>All months</option>

                                    @for ($m = 1; $m <= 12; $m++)
                                        @php $mName = date('F', mktime(0, 0, 0, $m, 10)); @endphp

                                        <option value="{{ $m }}" {{ (!$isAllMonth && (int) request('month', $selectedMonth ?? 0) === $m) ? 'selected' : '' }}>
                                            {{ $mName }}
                                        </option>
                                    @endfor
                                </select>
                            </div>

                            <div class="asset-col-6">
                                <label for="year" class="asset-label">Select Year</label>
                                <select disabled name="year" id="year" class="asset-select">
                                    @php $thisYear = (int) now()->year; @endphp

                                    <option value="all" {{ $isAllYear ? 'selected' : '' }}>All years</option>

                                    @for ($y = $thisYear + 1; $y >= $thisYear - 5; $y--)
                                        <option value="{{ $y }}" {{ (!$isAllYear && (int) request('year', $selectedYear ?? 0) === (int) $y) ? 'selected' : '' }}>
                                            {{ $y }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="payroll-summary-grid" style="margin-bottom: 10px; margin-top:10px;">
                    <div class="payroll-summary-card payroll-summary-card--primary">
                        <div class="payroll-summary-card__icon">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>

                        <div>
                            <div class="payroll-summary-card__label">Total Gross Salaries</div>
                            <div class="payroll-summary-card__value">
                                {{ number_format($totalGross, 2) }}
                            </div>
                        </div>
                    </div>

                    <div class="payroll-summary-card payroll-summary-card--success">
                        <div class="payroll-summary-card__icon">
                            <i class="fas fa-wallet"></i>
                        </div>

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

                    <div class="payroll-summary-card payroll-summary-card--info">
                        <div class="payroll-summary-card__icon">
                            <i class="fas fa-plus-circle"></i>
                        </div>

                        <div>
                            <div class="payroll-summary-card__label">Total Bonuses</div>
                            <div class="payroll-summary-card__value">
                                {{ number_format($bonuses_total ?? 0, 2) }}
                            </div>
                        </div>
                    </div>

                    <div class="payroll-summary-card payroll-summary-card--danger">
                        <div class="payroll-summary-card__icon">
                            <i class="fas fa-minus-circle"></i>
                        </div>

                        <div>
                            <div class="payroll-summary-card__label">Total Penalties</div>
                            <div class="payroll-summary-card__value">
                                {{ number_format($penalties_total ?? 0, 2) }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card ui-card--table payroll-table-card">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap w-100">
                            <div>
                                <h5 class="payroll-table-title mb-0">Payroll Details Per Staff</h5>
                                <p class="payroll-table-sub mb-0">
                                    Staff payroll records with pay period, run date, salary values, payment method, and payment status.
                                </p>
                            </div>

                            <span class="ui-pill ui-pill--info">
                                <i class="fas fa-users"></i>
                                {{ $payrollRowsCount }} Staff Record(s)
                            </span>
                        </div>
                    </div>

                    <div class="payroll-table-wrap">
                        <x-table :headers="[
                            'Staff',
                            'Pay Period',
                            'Pay Roll Run Date',
                            'Gross Salary',
                            'Net Salary',
                            'Payment Method',
                            'Status'
                        ]">
                            @if (!empty($rows))
                                @forelse ($rows as $row)
                                    @php
                                        $staffName = $row->full_name ?: trim(($row->first_name ?? '') . ' ' . ($row->last_name ?? ''));

                                        $staffInitials = strtoupper(
                                            substr($row->first_name ?? 'S', 0, 1) .
                                            substr($row->last_name ?? '', 0, 1)
                                        );

                                        $hasRunDate = !empty($row->run_date);
                                    @endphp

                                    <tr>
                                        <td>
                                            <div class="payroll-staff">
                                                <div class="payroll-staff__avatar">
                                                    {{ $staffInitials ?: 'ST' }}
                                                </div>

                                                <div>
                                                    <div class="payroll-staff__name">
                                                        {{ $staffName ?: '—' }}
                                                    </div>
                                                    <div class="payroll-staff__sub">
                                                        Staff Member
                                                    </div>
                                                </div>
                                            </div>
                                        </td>

                                        <td class="text-center">
                                            @if ($hasRunDate)
                                                <div class="payroll-period">
                                                    <span>{{ \Carbon\Carbon::createFromDate($row->run_date)->firstOfMonth()->format('d-m-y') }}</span>
                                                    <small>to</small>
                                                    <span>{{ \Carbon\Carbon::createFromDate($row->run_date)->endOfMonth()->format('d-m-y') }}</span>
                                                </div>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>

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

                                        <td class="text-center">
                                            <strong class="payroll-money payroll-money--gross">
                                                {{ number_format($row->gross_salary, 2) }}
                                            </strong>
                                        </td>

                                        <td class="text-center">
                                            <strong class="payroll-money payroll-money--net">
                                                {{ number_format($row->net_salary, 2) }}
                                            </strong>
                                        </td>

                                        <td class="text-center">
                                            <span class="ui-pill ui-pill--primary">
                                                {{ $row->payment_type ?: '—' }}
                                            </span>
                                        </td>

                                        <td class="text-center">
                                            @if (isset($row->paid_at))
                                                <span class="ui-pill ui-pill--success">
                                                    <i class="fas fa-check-circle"></i>
                                                    Paid
                                                </span>
                                            @else
                                                <button type="button"
                                                        class="payroll-pay-btn btn-pay"
                                                        data-id="{{ $row->id }}">
                                                    <i class="fas fa-credit-card"></i>
                                                    Pay
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7">
                                            <div class="table-empty-state">
                                                <i class="fas fa-wallet"></i>
                                                <h6>No payroll staff data found.</h6>
                                                <p>There are no payroll records matching the current period.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            @else
                                <tr>
                                    <td colspan="7">
                                        <div class="table-empty-state">
                                            <i class="fas fa-wallet"></i>
                                            <h6>No payroll staff data found.</h6>
                                            <p>There are no payroll records matching the current period.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endif

                            <x-slot name="footer">
                                <tr class="payroll-total-row">
                                    <td colspan="3">
                                        <strong>Total</strong>
                                    </td>

                                    <td class="text-center">
                                        <strong>{{ number_format($totalGross, 2) }}</strong>
                                    </td>

                                    <td class="text-center">
                                        <strong>{{ number_format($totalNet, 2) }}</strong>
                                    </td>

                                    <td colspan="2"></td>
                                </tr>
                            </x-slot>
                        </x-table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        $(document).on('click', '.btn-pay', function (e) {
            e.preventDefault();

            let rowId = $(this).data('id');
            let button = $(this);
            let payment_method = $(this).closest('tr').find('select[name="payment_method"]').val();

            $.ajax({
                url: "{{ route('payroll_invoices.update') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: rowId,
                    is_paid: 1,
                    payment_method: payment_method
                },
                beforeSend: function () {
                    button.prop('disabled', true).html(`
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Processing...
                    `);
                },
                success: function (res) {
                    button.closest('td').html(`
                        <span class="ui-pill ui-pill--success">
                            <i class="fas fa-check-circle"></i>
                            Paid
                        </span>
                    `);
                },
                error: function () {
                    alert("Error: Something went wrong");

                    button.prop('disabled', false).html(`
                        <i class="fas fa-credit-card"></i>
                        Pay
                    `);
                }
            });
        });
    </script>
@endsection