138 lines
9.8 KiB
PHP
138 lines
9.8 KiB
PHP
<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>
|