<div class="pg-modal-inner">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line-light);">
        <div style="display: flex; align-items: center; gap: 16px;">
            <div style="width: 52px; height: 52px; background: var(--primary-light); color: var(--primary); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px;">
                <i class="fas fa-file-invoice-dollar"></i>
            </div>
            <div>
                <h5 style="margin: 0; font-size: 18px; font-weight: 800; color: var(--t1);">Slip Gaji Teknisi</h5>
                <div style="font-size: 13px; color: var(--t3); font-weight: 600;">
                    Periode: <span style="color: var(--primary-dark);">{{ \App\Models\Penggajian::getNamaBulan($penggajian->periode_bulan) }} {{ $penggajian->periode_tahun }}</span>
                </div>
            </div>
        </div>
        <div style="text-align: right;">
            <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--t3); font-weight: 700; margin-bottom: 4px;">Status</div>
            @if($penggajian->isPaid())
                <span class="pg-badge pg-badge-ok" style="font-size: 12px; padding: 6px 14px;">LUNAS</span>
            @else
                <span class="pg-badge pg-badge-warn" style="font-size: 12px; padding: 6px 14px;">BELUM DIBAYAR</span>
            @endif
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">
        <!-- Keterangan Teknisi -->
        <div style="background: #f8fafc; padding: 20px; border-radius: 16px; border: 1px solid var(--line-light);">
            <h6 style="font-size: 11px; text-transform: uppercase; color: var(--t3); letter-spacing: 0.05em; font-weight: 800; margin: 0 0 16px 0;">Data Personel</h6>
            <div style="display: flex; flex-direction: column; gap: 12px;">
                <div style="display: flex; justify-content: space-between;">
                    <span style="font-size: 13px; color: var(--t3);">Nama Lengkap</span>
                    <span style="font-size: 13px; color: var(--t1); font-weight: 700;">{{ $penggajian->teknisi->nama }}</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="font-size: 13px; color: var(--t3);">ID Teknisi</span>
                    <span style="font-size: 13px; color: var(--t1); font-weight: 700;">#{{ str_pad($penggajian->id_teknisi, 4, '0', STR_PAD_LEFT) }}</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="font-size: 13px; color: var(--t3);">Tgl. Hitung</span>
                    <span style="font-size: 13px; color: var(--t1); font-weight: 700;">{{ $penggajian->tanggal_penggajian->format('d M Y') }}</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="font-size: 13px; color: var(--t3);">Absensi Hadir</span>
                    <span style="font-size: 13px; color: var(--primary-dark); font-weight: 800;">{{ $penggajian->jumlah_hari_kerja }} Hari</span>
                </div>
            </div>
        </div>

        <!-- Ringkasan Perhitungan -->
        <div style="background: #f8fafc; padding: 20px; border-radius: 16px; border: 1px solid var(--line-light);">
            <h6 style="font-size: 11px; text-transform: uppercase; color: var(--t3); letter-spacing: 0.05em; font-weight: 800; margin: 0 0 16px 0;">Summary Borongan</h6>
            <div style="display: flex; flex-direction: column; gap: 12px;">
                <div style="display: flex; justify-content: space-between;">
                    <span style="font-size: 13px; color: var(--t3);">Jumlah Tugas</span>
                    <span style="font-size: 13px; color: var(--t1); font-weight: 700;">{{ $penggajian->detailPenggajian->count() }} Tugas</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="font-size: 13px; color: var(--t3);">Gaji Kotor</span>
                    <span style="font-size: 13px; color: var(--t1); font-weight: 700;">Rp {{ number_format($penggajian->total_ongkos_pekerjaan, 0, ',', '.') }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-size: 13px; color: var(--t3);">Potongan Makan</span>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <span style="font-size: 13px; color: var(--danger); font-weight: 700;">- Rp {{ number_format($penggajian->biaya_makan, 0, ',', '.') }}</span>
                        @if(!$penggajian->isPaid())
                        <button onclick="editPotonganMakan({{ $penggajian->id_penggajian }}, {{ $penggajian->biaya_makan }})" style="background: none; border: none; color: var(--amber); cursor: pointer; padding: 0; font-size: 14px;" title="Ubah Potongan Makan">
                            <i class="fas fa-edit"></i>
                        </button>
                        @endif
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-size: 13px; color: var(--t3);">Potongan Kasbon</span>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <span style="font-size: 13px; color: var(--danger); font-weight: 700;">- Rp {{ number_format($penggajian->total_potongan ?? $penggajian->total_kasbon, 0, ',', '.') }}</span>
                        @if(!$penggajian->isPaid())
                        <button onclick="editPotongan({{ $penggajian->id_penggajian }}, {{ $penggajian->total_kasbon }})" style="background: none; border: none; color: var(--amber); cursor: pointer; padding: 0; font-size: 14px;" title="Ubah Potongan">
                            <i class="fas fa-edit"></i>
                        </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Rincian Tugas -->
    <div style="background: #fff; border: 1.5px solid var(--line-light); border-radius: 16px; overflow: hidden; margin-bottom: 24px;">
        <div style="padding: 14px 20px; background: #f8fafc; border-bottom: 1px solid var(--line-light); font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--t3); letter-spacing: 0.05em;">
            Rincian Pembagian Ongkos Penugasan
        </div>
        <div style="max-height: 200px; overflow-y: auto;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="border-bottom: 1px solid var(--line-light);">
                        <th style="padding: 12px 20px; text-align: left; font-size: 10px; color: var(--t3);">Tugas / Lokasi</th>
                        <th style="padding: 12px 20px; text-align: center; font-size: 10px; color: var(--t3);">Tim</th>
                        <th style="padding: 12px 20px; text-align: right; font-size: 10px; color: var(--t3);">Bagian Anda</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($penggajian->detailPenggajian as $item)
                    <tr style="border-bottom: 1px solid var(--line-light);">
                        <td style="padding: 12px 20px;">
                            <div style="font-size: 13px; font-weight: 700; color: var(--t1);">{{ $item->penugasan->label_jenis_pekerjaan ?? 'Tugas #'.$item->id_penugasan }}</div>
                            <div style="font-size: 11px; color: var(--t3); margin-top: 2px;">{{ \Illuminate\Support\Str::limit($item->lokasi, 40) }}</div>
                            @if($item->rincian_pekerjaan)
                            <div style="font-size: 10px; color: var(--primary-dark); font-weight: 700; margin-top: 6px; background: var(--primary-light); display: inline-block; padding: 3px 8px; border-radius: 6px;">
                                {{ $item->rincian_pekerjaan }}
                            </div>
                            @endif
                        </td>
                        <td style="padding: 12px 20px; text-align: center;">
                            <span style="background: var(--line-light); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;">{{ $item->jumlah_tim }} Org</span>
                        </td>
                        <td style="padding: 12px 20px; text-align: right; font-weight: 700; color: var(--primary-dark); font-family: var(--mono);">
                            Rp {{ number_format($item->bagian_ongkos, 0, ',', '.') }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Final Total -->
    <div style="background: linear-gradient(135deg, var(--t1), #1e293b); padding: 24px; border-radius: 20px; display: flex; align-items: center; justify-content: space-between; color: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);">
        <div>
            <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; font-weight: 700; margin-bottom: 4px;">Take Home Pay</div>
            <div style="font-size: 14px; font-weight: 600;">Total Gaji Bersih Terakhir</div>
        </div>
        <div style="text-align: right;">
            <div style="font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-family: var(--mono);">
                Rp {{ number_format($penggajian->gaji_bersih, 0, ',', '.') }}
            </div>
        </div>
    </div>
</div>
