@extends('layouts.app')

@push('style')
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        .payslip-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 16px;
        }

        .table-slim td,
        .table-slim th {
            padding: .45rem .55rem;
        }

        .totals-row th,
        .totals-row td {
            font-weight: 700;
            background: #fafafa;
        }

        /* Make header section adapt */
        .emp-head {
            display: flex;
            gap: 14px;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .emp-head .meta {
            color: #6b7280;
            font-size: .925rem;
        }

        .emp-head .right {
            text-align: right;
        }

        @media (max-width: 576px) {
            .emp-head .right {
                text-align: left;
                width: 100%;
            }
        }

        /* Table responsive: normal on >=sm, card-list on <sm */
        .table-wrap {
            overflow: auto;
        }

        @media (max-width: 576px) {
            .table-responsive-mobile {
                border: 0;
            }

            .table-responsive-mobile thead {
                display: none;
            }

            .table-responsive-mobile tbody tr {
                display: block;
                margin-bottom: 10px;
                border: 1px solid #e5e7eb;
                border-radius: 10px;
                overflow: hidden;
            }

            .table-responsive-mobile tbody td {
                display: flex;
                justify-content: space-between;
                gap: 10px;
                padding: .6rem .8rem !important;
                border: 0 !important;
                border-bottom: 1px dashed #eee !important;
            }

            .table-responsive-mobile tbody tr td:last-child {
                border-bottom: 0 !important;
            }

            .table-responsive-mobile tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: #6b7280;
            }
        }
    </style>
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php($page_name = 'HR > Payslips')
                    @include('layouts.table_top')
                </div>

                <div class="col-md-12">
                    <div class="left-card">

                        {{-- Filters --}}
                        <form method="get" action="{{ route('payslips.index') }}" class="row g-2 mb-3 align-items-end">
                            <div class="col-12 col-md-6">
                                <label class="form-label">Employee</label>
                                <select class="form-control selectpicker w-100" name="employee_id" data-live-search="true"
                                    required>
                                    <option value="">Select or search</option>
                                    @foreach ($employees as $e)
                                        <option value="{{ $e->id }}"
                                            {{ (string) $e->id === (string) ($employeeId ?? '') ? 'selected' : '' }}>
                                            {{ $e->employee_id }} — {{ $e->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="form-label">Month</label>
                                <input type="month" class="form-control" name="month"
                                    value="{{ $monthToken ?? date('Y-m') }}" required>
                            </div>
                            <div class="col-6 col-md-3 d-grid">
                                <button class="btn primary-button">Load Payslip</button>
                            </div>
                            @if ($payslip)
                                <div class="col-12 col-md-3 mt-2 mt-md-0 d-grid">
                                    <a class="btn btn-outline-secondary" target="_blank"
                                        href="{{ route('payslips.print', ['employee_id' => $payslip['employee']->id, 'month' => $payslip['month_token']]) }}">
                                        Print
                                    </a>
                                </div>
                            @endif
                        </form>

                        @if ($payslip)
                            <div class="payslip-card">
                                <div class="emp-head mb-3">
                                    <div>
                                        <h5 class="mb-1">{{ $payslip['employee']->name }}
                                            ({{ $payslip['employee']->employee_id }})</h5>
                                        <div class="meta">
                                            {{ optional($payslip['employee']->designation)->name }} ·
                                            {{ optional($payslip['employee']->department)->name }}<br>
                                            Joining:
                                            {{ optional($payslip['employee']->joining_date) ? \Carbon\Carbon::parse($payslip['employee']->joining_date)->format('d M Y') : '-' }}
                                        </div>
                                    </div>
                                    <div class="right">
                                        <div><strong>Month:</strong>
                                            {{ \Carbon\Carbon::parse($payslip['month_token'] . '-01')->format('F Y') }}</div>
                                        <div><strong>Financial Year:</strong> {{ $payslip['financial_year'] }}</div>
                                    </div>
                                </div>

                                <div class="row g-3">
                                    <div class="col-12 col-lg-6">
                                        <h6 class="mb-2">Additions</h6>
                                        <div class="table-wrap">
                                            <table class="table table-bordered table-slim table-responsive-mobile mb-3">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>Head</th>
                                                        <th class="text-end">Amount</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($payslip['additions'] as $h)
                                                        <tr>
                                                            <td data-label="Head">{{ $h->head_name }}</td>
                                                            <td class="text-end" data-label="Amount">
                                                                {{ number_format($h->amount, 2) }}</td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="2" class="text-center text-muted">No additions
                                                            </td>
                                                        </tr>
                                                    @endforelse
                                                    <tr class="totals-row">
                                                        <td data-label="Total Additions">Total Additions</td>
                                                        <td class="text-end" data-label="Total">
                                                            {{ number_format($payslip['total_add'], 2) }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-6">
                                        <h6 class="mb-2">Deductions</h6>
                                        <div class="table-wrap">
                                            <table class="table table-bordered table-slim table-responsive-mobile mb-3">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>Head</th>
                                                        <th class="text-end">Amount</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($payslip['deductions'] as $h)
                                                        <tr>
                                                            <td data-label="Head">{{ $h->head_name }}</td>
                                                            <td class="text-end" data-label="Amount">
                                                                {{ number_format($h->amount, 2) }}</td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="2" class="text-center text-muted">No deductions
                                                            </td>
                                                        </tr>
                                                    @endforelse
                                                    <tr class="totals-row">
                                                        <td data-label="Total Deductions">Total Deductions</td>
                                                        <td class="text-end" data-label="Total">
                                                            {{ number_format($payslip['total_ded'], 2) }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="table-wrap">
                                    <table class="table table-bordered table-slim table-responsive-mobile">
                                        <tbody>
                                            <tr>
                                                <th data-label="Label">Net Salary</th>
                                                <td class="text-end" data-label="Amount">
                                                    {{ number_format($payslip['net'], 2) }}</td>
                                            </tr>
                                            <tr>
                                                <th data-label="Label">Paid</th>
                                                <td class="text-end" data-label="Amount">
                                                    {{ number_format($payslip['paid'], 2) }}</td>
                                            </tr>
                                            <tr class="totals-row">
                                                <th data-label="Label">Balance Due</th>
                                                <td class="text-end" data-label="Amount">
                                                    {{ number_format($payslip['due'], 2) }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        @else
                            <div class="alert alert-info">Select an employee and month to view the payslip.</div>
                        @endif

                    </div>
                </div>

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