@extends('layouts.app')

@section('title', 'HRD & Payroll')

@section('breadcrumb')
    <span>HRD</span>
    <i class="bi bi-chevron-right"></i>
    <span>Payroll</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-people-fill me-2 text-primary-pf"></i>HRD & Payroll</h1>
        <p class="pf-page-subtitle">Kelola data karyawan, absensi, dan penggajian</p>
    </div>
    <div class="d-flex gap-2">
        <select class="form-select form-select-sm" id="selPeriode" style="width:160px" onchange="gantiBulan()">
            @for($i = 0; $i < 12; $i++)
                @php $m = now()->subMonths($i); @endphp
                <option value="{{ $m->format('Y-m') }}" {{ $i === 0 ? 'selected' : '' }}>
                    {{ $m->isoFormat('MMMM YYYY') }}
                </option>
            @endfor
        </select>
        <button class="btn btn-outline-success btn-sm" onclick="exportPayroll()">
            <i class="bi bi-download"></i> Export
        </button>
        <button class="btn btn-primary btn-sm" onclick="prosesGaji()" id="btnProsesGaji">
            <i class="bi bi-play-fill"></i> Proses Gaji Bulan Ini
        </button>
    </div>
</div>

{{-- Summary Stats --}}
<div class="row g-3 mb-4">
    @php
    $hrdStats = [
        ['label'=>'Total Karyawan', 'val'=>$stats['total']   ?? 48, 'icon'=>'bi-people-fill',     'color'=>'#1B4FD8','bg'=>'#EEF3FF'],
        ['label'=>'Karyawan Tetap', 'val'=>$stats['tetap']   ?? 35, 'icon'=>'bi-person-badge-fill','color'=>'#059669','bg'=>'#D1FAE5'],
        ['label'=>'Kontrak',        'val'=>$stats['kontrak']  ?? 10, 'icon'=>'bi-person-lines-fill','color'=>'#D97706','bg'=>'#FEF3C7'],
        ['label'=>'Total Gaji/Bln', 'val'=>'Rp '.number_format($stats['total_gaji'] ?? 285000000, 0, ',', '.'), 'icon'=>'bi-cash-stack','color'=>'#7C3AED','bg'=>'#EDE9FE'],
    ];
    @endphp
    @foreach($hrdStats as $s)
    <div class="col-6 col-md-3">
        <div class="pf-stat-card" style="--pf-stat-color:{{ $s['color'] }};--pf-stat-bg:{{ $s['bg'] }}">
            <div class="pf-stat-icon"><i class="{{ $s['icon'] }}"></i></div>
            <div class="pf-stat-body">
                <div class="pf-stat-label">{{ $s['label'] }}</div>
                <div class="pf-stat-value" style="font-size:{{ strlen((string)$s['val']) > 12 ? '15px' : '22px' }}">{{ $s['val'] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Tab Navigation --}}
<ul class="nav nav-tabs mb-4" id="hrdTabs" style="border-bottom:2px solid var(--pf-border)">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabPayroll">
            <i class="bi bi-cash-stack me-1"></i> Payroll Bulan Ini
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabKaryawan">
            <i class="bi bi-people me-1"></i> Data Karyawan
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabAbsensi">
            <i class="bi bi-calendar-check me-1"></i> Rekapitulasi Absensi
        </button>
    </li>
</ul>

<div class="tab-content">

    {{-- ===== PAYROLL TAB ===== --}}
    <div class="tab-pane fade show active" id="tabPayroll">
        <div class="pf-card">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-receipt"></i> Slip Gaji — {{ now()->isoFormat('MMMM YYYY') }}</h6>
                <div class="d-flex gap-2">
                    <span id="statusPayroll" class="pf-status {{ $payrollStatus === 'done' ? 'pf-status-selesai' : 'pf-status-pending' }}">
                        {{ $payrollStatus === 'done' ? 'Sudah Diproses' : 'Belum Diproses' }}
                    </span>
                </div>
            </div>
            <div class="pf-card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="tblPayroll">
                        <thead>
                            <tr>
                                <th>Karyawan</th>
                                <th>Jabatan</th>
                                <th>Gaji Pokok</th>
                                <th>Tunjangan</th>
                                <th>Lembur</th>
                                <th>Bonus</th>
                                <th>Potongan</th>
                                <th>BPJS TK</th>
                                <th>BPJS KS</th>
                                <th>PPh 21</th>
                                <th>Gaji Bersih</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($payrollData as $p)
                            @php
                                $totalPendapatan = $p->gaji_pokok + $p->tunjangan + ($p->lembur ?? 0) + ($p->bonus ?? 0);
                                $totalPotongan   = ($p->potongan ?? 0) + ($p->bpjs_tk ?? 0) + ($p->bpjs_ks ?? 0) + ($p->pph21 ?? 0);
                                $gajiBersih      = $totalPendapatan - $totalPotongan;
                            @endphp
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div style="width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#1B4FD8,#6366F1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;flex-shrink:0">
                                            {{ strtoupper(substr($p->employee->name ?? 'U', 0, 2)) }}
                                        </div>
                                        <div>
                                            <div style="font-weight:500;font-size:13px">{{ $p->employee->name ?? '-' }}</div>
                                            <div style="font-size:11px;color:var(--pf-text-muted)">{{ $p->employee->nip ?? '-' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td style="font-size:12.5px">{{ $p->employee->jabatan ?? '-' }}</td>
                                <td class="font-mono" style="font-size:12.5px">{{ number_format($p->gaji_pokok, 0, ',', '.') }}</td>
                                <td class="font-mono" style="font-size:12.5px">{{ number_format($p->tunjangan, 0, ',', '.') }}</td>
                                <td class="font-mono text-primary" style="font-size:12.5px">{{ number_format($p->lembur ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-success" style="font-size:12.5px">{{ number_format($p->bonus ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-danger" style="font-size:12.5px">{{ number_format($p->potongan ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-danger" style="font-size:12.5px">{{ number_format($p->bpjs_tk ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-danger" style="font-size:12.5px">{{ number_format($p->bpjs_ks ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-danger" style="font-size:12.5px">{{ number_format($p->pph21 ?? 0, 0, ',', '.') }}</td>
                                <td>
                                    <span class="font-mono fw-600" style="color:#059669">
                                        Rp {{ number_format($gajiBersih, 0, ',', '.') }}
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-xs btn-outline-primary" title="Edit"
                                                onclick="editPayroll({{ $p->id }})">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-xs btn-outline-secondary" title="Cetak Slip"
                                                onclick="cetakSlip({{ $p->id }})">
                                            <i class="bi bi-printer"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr style="background:var(--pf-bg);font-weight:600">
                                <td colspan="2" style="font-size:13px;padding:12px 14px">TOTAL</td>
                                <td class="font-mono">{{ number_format($totals['gaji_pokok'] ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono">{{ number_format($totals['tunjangan'] ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-primary">{{ number_format($totals['lembur'] ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-success">{{ number_format($totals['bonus'] ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-danger">{{ number_format($totals['potongan'] ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-danger">{{ number_format($totals['bpjs_tk'] ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-danger">{{ number_format($totals['bpjs_ks'] ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono text-danger">{{ number_format($totals['pph21'] ?? 0, 0, ',', '.') }}</td>
                                <td class="font-mono fw-600" style="color:#059669;font-size:14px">
                                    Rp {{ number_format($totals['bersih'] ?? 0, 0, ',', '.') }}
                                </td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== KARYAWAN TAB ===== --}}
    <div class="tab-pane fade" id="tabKaryawan">
        <div class="row g-3">
            <div class="col-12">
                <div class="d-flex justify-content-end mb-3">
                    <a href="{{ route('employees.create') }}" class="btn btn-primary btn-sm">
                        <i class="bi bi-person-plus-fill"></i> Tambah Karyawan
                    </a>
                </div>
            </div>
            @foreach($employees as $emp)
            <div class="col-12 col-md-6 col-xl-4">
                <div class="pf-card">
                    <div class="pf-card-body">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div style="width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#1B4FD8,#6366F1);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#fff;flex-shrink:0">
                                {{ strtoupper(substr($emp->name, 0, 2)) }}
                            </div>
                            <div>
                                <div style="font-weight:600;font-size:14px">{{ $emp->name }}</div>
                                <div style="font-size:12px;color:var(--pf-text-muted)">{{ $emp->jabatan }} • {{ $emp->departemen }}</div>
                                <div class="font-mono" style="font-size:11px;color:var(--pf-text-muted)">{{ $emp->nip }}</div>
                            </div>
                            <div class="ms-auto">
                                <span class="pf-status {{ $emp->status === 'aktif' ? 'pf-status-selesai' : 'pf-status-batal' }}">
                                    {{ ucfirst($emp->status) }}
                                </span>
                            </div>
                        </div>
                        <div class="row g-2" style="font-size:12.5px">
                            <div class="col-6 text-muted">Tgl Masuk</div>
                            <div class="col-6">{{ $emp->tgl_masuk?->format('d/m/Y') }}</div>
                            <div class="col-6 text-muted">Status</div>
                            <div class="col-6">{{ ucfirst($emp->tipe_karyawan) }}</div>
                            <div class="col-6 text-muted">Gaji Pokok</div>
                            <div class="col-6 font-mono fw-500">Rp {{ number_format($emp->gaji_pokok, 0, ',', '.') }}</div>
                        </div>
                        <div class="d-flex gap-2 mt-3">
                            <a href="{{ route('employees.show', $emp->id) }}" class="btn btn-sm btn-outline-secondary flex-fill">Detail</a>
                            <a href="{{ route('employees.edit', $emp->id) }}" class="btn btn-sm btn-outline-primary flex-fill">Edit</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- ===== ABSENSI TAB ===== --}}
    <div class="tab-pane fade" id="tabAbsensi">
        <div class="pf-card">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-calendar-check"></i> Rekap Absensi</h6>
                <div>
                    <input type="month" class="form-control form-control-sm" id="absensiMonth" value="{{ now()->format('Y-m') }}" style="width:160px">
                </div>
            </div>
            <div class="pf-card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0" id="tblAbsensi">
                        <thead>
                            <tr>
                                <th>Karyawan</th>
                                <th>Departemen</th>
                                <th class="text-center">Hari Kerja</th>
                                <th class="text-center">Hadir</th>
                                <th class="text-center">Sakit</th>
                                <th class="text-center">Izin</th>
                                <th class="text-center">Alpha</th>
                                <th class="text-center">Lembur (Jam)</th>
                                <th class="text-center">Kehadiran</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($absensiRekap as $absensi)
                            @php
                                $pct   = $absensi->hari_kerja > 0 ? round($absensi->hadir / $absensi->hari_kerja * 100) : 0;
                                $color = $pct >= 90 ? '#059669' : ($pct >= 75 ? '#D97706' : '#DC2626');
                            @endphp
                            <tr>
                                <td>
                                    <div style="font-weight:500">{{ $absensi->employee->name ?? '-' }}</div>
                                    <div style="font-size:11px;color:var(--pf-text-muted)">{{ $absensi->employee->jabatan ?? '-' }}</div>
                                </td>
                                <td style="font-size:12.5px">{{ $absensi->employee->departemen ?? '-' }}</td>
                                <td class="text-center font-mono">{{ $absensi->hari_kerja }}</td>
                                <td class="text-center font-mono text-success fw-600">{{ $absensi->hadir }}</td>
                                <td class="text-center font-mono text-warning">{{ $absensi->sakit }}</td>
                                <td class="text-center font-mono text-info">{{ $absensi->izin }}</td>
                                <td class="text-center font-mono text-danger">{{ $absensi->alpha }}</td>
                                <td class="text-center font-mono text-primary">{{ $absensi->lembur_jam }}</td>
                                <td class="text-center">
                                    <div style="font-size:12px;font-weight:600;color:{{ $color }};margin-bottom:2px">{{ $pct }}%</div>
                                    <div style="height:4px;background:var(--pf-border);border-radius:2px;overflow:hidden;width:80px;margin:0 auto">
                                        <div style="width:{{ $pct }}%;height:100%;background:{{ $color }};border-radius:2px"></div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#tblPayroll').DataTable({ pageLength: 50, searching: false, paging: false, info: false });
    $('#tblKaryawan').DataTable({ pageLength: 25 });
    $('#tblAbsensi').DataTable({ pageLength: 50 });
});

function prosesGaji() {
    const periode = document.getElementById('selPeriode').value;
    Swal.fire({
        title: 'Proses Gaji?',
        html: `Gaji bulan <b>${periode}</b> akan diproses untuk semua karyawan aktif. Data absensi dan lembur harus sudah final.`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#1B4FD8',
        confirmButtonText: '<i class="bi bi-play-fill me-1"></i> Proses Sekarang',
        cancelButtonText: 'Batal'
    }).then(r => {
        if (r.isConfirmed) {
            PF.loading('Memproses penggajian...');
            fetch('/payroll/proses', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
                body: JSON.stringify({ periode })
            })
            .then(r => r.json())
            .then(d => {
                PF.closeLoading();
                if (d.success) {
                    PF.success(`Gaji untuk ${d.count} karyawan berhasil diproses`);
                    setTimeout(() => location.reload(), 1500);
                } else { PF.error(d.message); }
            })
            .catch(() => { PF.closeLoading(); PF.error('Koneksi gagal'); });
        }
    });
}

function cetakSlip(payrollId) {
    window.open(`/payroll/${payrollId}/slip`, '_blank');
}

function editPayroll(payrollId) {
    window.location.href = `/payroll/${payrollId}/edit`;
}

function exportPayroll() {
    const p = document.getElementById('selPeriode').value;
    window.location.href = `/payroll/export?periode=${p}`;
}

function gantiBulan() {
    const p = document.getElementById('selPeriode').value;
    window.location.href = `/payroll?periode=${p}`;
}
</script>
@endpush