809 lines
46 KiB
PHP
809 lines
46 KiB
PHP
<x-app-layout>
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="{{ asset('css/tugas.css') }}">
|
|
@endpush
|
|
<div class="pug-wrap">
|
|
<div class="pug-inner">
|
|
|
|
{{-- ── PAGE HEADER ── --}}
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
|
|
<div style="display:flex; align-items:center; gap:12px;">
|
|
<div class="pug-icon-wrap">
|
|
<i class="fas fa-tasks"></i>
|
|
</div>
|
|
<div>
|
|
<div class="pug-page-title">Data Penugasan</div>
|
|
<div class="pug-page-sub">Manajemen penugasan teknisi lapangan</div>
|
|
</div>
|
|
</div>
|
|
<button onclick="openCreateModal()" class="pug-btn-primary">
|
|
<i class="fas fa-plus"></i> Tambah Penugasan
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div class="pug-wrap">
|
|
<div class="pug-inner">
|
|
|
|
@if(session('success'))
|
|
<div class="pug-alert pug-alert-ok" role="alert">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>{{ session('success') }}</span>
|
|
</div>
|
|
@endif
|
|
@if(session('error'))
|
|
<div class="pug-alert pug-alert-err" role="alert">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
<span>{{ session('error') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ── ABANDONED TASKS ALERT ── --}}
|
|
@if(isset($abandonedTasks) && $abandonedTasks->count() > 0)
|
|
<div class="alert alert-danger" style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 15px;">
|
|
<div style="color: #ef4444; font-size: 24px; margin-top: 2px;">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<h4 style="color: #991b1b; font-size: 15px; font-weight: 700; margin: 0 0 5px 0;">PERHATIAN: Ada Personel Tim yang Sakit/Izin Hari Ini!</h4>
|
|
<p style="color: #7f1d1d; font-size: 13px; margin: 0 0 10px 0;">
|
|
Terdapat <strong>{{ $abandonedTasks->count() }} Penugasan</strong> (Belum Mulai / Dalam Proses) yang anggotanya hari ini berstatus <strong>Sakit / Izin</strong>. Segera cek dan sesuaikan formasi tim berikut:
|
|
</p>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
@foreach($abandonedTasks as $task)
|
|
<div style="background: #fff; border: 1px solid #fca5a5; padding: 8px 12px; border-radius: 8px; font-size: 12px; display: flex; flex-direction: column; gap: 4px;">
|
|
<span style="font-weight: 700; color: #991b1b;"><i class="fas fa-clipboard-list"></i> {{ \Illuminate\Support\Str::limit($task->jenis_pekerjaan, 20) }}</span>
|
|
<span style="color: #64748b;"><i class="fas fa-map-marker-alt"></i> {{ \Illuminate\Support\Str::limit($task->alamat_lokasi, 25) }}</span>
|
|
<button onclick="editPenugasan({{ $task->id_penugasan }})" style="margin-top: 4px; background: #ef4444; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600;">
|
|
<i class="fas fa-exchange-alt"></i> Sesuaikan Tim
|
|
</button>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Stats -->
|
|
<div class="pug-stats">
|
|
<div class="pug-stat pug-stat-total" onclick="setStatus('')" style="cursor: pointer;" title="Klik untuk melihat semua">
|
|
<div class="pug-stat-icon"><i class="fas fa-clipboard-list"></i></div>
|
|
<div class="pug-stat-label">Total</div>
|
|
<div class="pug-stat-val">{{ $totalPenugasan ?? 0 }}</div>
|
|
<div style="font-size:11px;color:var(--t3);">Semua penugasan</div>
|
|
</div>
|
|
<div class="pug-stat pug-stat-belum" onclick="setStatus('belum_mulai')" style="cursor: pointer;" title="Klik untuk filter: Belum Mulai">
|
|
<div class="pug-stat-icon"><i class="fas fa-clock"></i></div>
|
|
<div class="pug-stat-label">Belum Mulai</div>
|
|
<div class="pug-stat-val">{{ $belumMulai ?? 0 }}</div>
|
|
<div style="font-size:11px;color:var(--t3);">Menunggu eksekusi</div>
|
|
</div>
|
|
<div class="pug-stat pug-stat-proses" onclick="setStatus('dalam_proses')" style="cursor: pointer;" title="Klik untuk filter: Dalam Proses">
|
|
<div class="pug-stat-icon"><i class="fas fa-spinner"></i></div>
|
|
<div class="pug-stat-label">Dalam Proses</div>
|
|
<div class="pug-stat-val">{{ $dalamProses ?? 0 }}</div>
|
|
<div style="font-size:11px;color:var(--t3);">Sedang dikerjakan</div>
|
|
</div>
|
|
<div class="pug-stat pug-stat-selesai" onclick="setStatus('selesai')" style="cursor: pointer;" title="Klik untuk filter: Selesai">
|
|
<div class="pug-stat-icon"><i class="fas fa-check-circle"></i></div>
|
|
<div class="pug-stat-label">Selesai</div>
|
|
<div class="pug-stat-val">{{ $selesai ?? 0 }}</div>
|
|
<div style="font-size:11px;color:var(--t3);">Pekerjaan rampung</div>
|
|
</div>
|
|
<div class="pug-stat pug-stat-batal" onclick="setStatus('dibatalkan')" style="cursor: pointer;" title="Klik untuk filter: Dibatalkan">
|
|
<div class="pug-stat-icon"><i class="fas fa-times-circle"></i></div>
|
|
<div class="pug-stat-label">Dibatalkan</div>
|
|
<div class="pug-stat-val">{{ $dibatalkan ?? 0 }}</div>
|
|
<div style="font-size:11px;color:var(--t3);">Penugasan dibatalkan</div>
|
|
</div>
|
|
<div class="pug-stat pug-stat-garansi" onclick="setStatus('garansi_aktif')" style="cursor: pointer;" title="Filter Pekerjaan Selesai (Garansi)">
|
|
<div class="pug-stat-icon"><i class="fas fa-shield-alt"></i></div>
|
|
<div class="pug-stat-label">Garansi Aktif</div>
|
|
<div class="pug-stat-val">{{ $garansiAktif ?? 0 }}</div>
|
|
<div style="font-size:11px;color:var(--t3);">Dalam periode garansi</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content layout -->
|
|
<div class="pug-main-content">
|
|
|
|
<!-- Toolbar Filter -->
|
|
<div class="pug-toolbar">
|
|
<form method="GET" action="{{ route('pekerjaan.penugasan.index') }}" id="filterForm" class="pug-toolbar-form">
|
|
|
|
<!-- Date Range -->
|
|
<div class="pug-toolbar-item" style="flex: 0 0 auto; min-width: 340px;">
|
|
<label class="pug-field-label">Rentang Tanggal</label>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<input type="date" name="start_date" class="pug-input" value="{{ request('start_date') }}" onchange="this.form.submit()" style="width: 145px; padding: 10px 10px;">
|
|
<span style="font-size: 10px; color: var(--pug-t3); font-weight: 800;">S/D</span>
|
|
<input type="date" name="end_date" class="pug-input" value="{{ request('end_date') }}" onchange="this.form.submit()" style="width: 145px; padding: 10px 10px;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Technician (Direct Select like Monitoring) -->
|
|
<div class="pug-toolbar-item" style="flex: 1; min-width: 240px;">
|
|
<label class="pug-field-label">Pilih Teknisi (Cari Langsung)</label>
|
|
<div class="pug-input-icon">
|
|
<i class="fas fa-user-tie"></i>
|
|
<select name="id_teknisi" class="pug-input" onchange="this.form.submit()">
|
|
<option value="">Semua Teknisi</option>
|
|
@foreach($teknisis as $t)
|
|
<option value="{{ $t->id_teknisi }}" {{ request('id_teknisi') == $t->id_teknisi ? 'selected' : '' }}>{{ $t->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden Status (digunakan oleh filter card di atas) -->
|
|
<input type="hidden" name="status" id="hiddenStatus" value="{{ request('status') }}">
|
|
|
|
<!-- Buttons -->
|
|
<div class="pug-toolbar-item item-btn d-flex align-items-end gap-2" style="flex: 0 0 auto;">
|
|
<button type="button" class="pug-reset-btn" onclick="window.location.href='{{ route('pekerjaan.penugasan.index') }}'" style="height: 44px; white-space: nowrap;">
|
|
<i class="fas fa-redo"></i> Reset Filter
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="pug-panel">
|
|
<div class="pug-panel-head">
|
|
<div class="pug-panel-head-left">
|
|
<i class="fas fa-list-ul" style="color:var(--green);margin-right:8px;"></i>
|
|
Daftar Penugasan
|
|
</div>
|
|
<div class="pug-panel-head-right">
|
|
{{ isset($penugasan) ? $penugasan->total() : 0 }} data ditemukan
|
|
</div>
|
|
</div>
|
|
|
|
<div style="overflow-x:auto;">
|
|
<table class="pug-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Teknisi</th>
|
|
<th>Surat</th>
|
|
<th>Tanggal</th>
|
|
<th>Status Pekerjaan</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($penugasan ?? [] as $index => $item)
|
|
<tr>
|
|
<td>
|
|
<span class="pug-rownum">{{ str_pad($penugasan->firstItem() + $index, 2, '0', STR_PAD_LEFT) }}</span>
|
|
</td>
|
|
<td>
|
|
<div style="display:flex; flex-wrap:wrap; gap:4px; max-width:280px;">
|
|
@foreach($item->timTeknisi as $tt)
|
|
<span class="pug-tech-badge">
|
|
<i class="fas fa-user"></i> {{ $tt->teknisi->nama ?? 'N/A' }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</td>
|
|
<td>
|
|
@if($item->foto_surat)
|
|
<img src="{{ 'https://ta.myhost.id/E31230906/laravel/public/storage/'.$item->foto_surat }}" class="pug-thumb"
|
|
alt="Surat" onclick="previewFoto('{{ 'https://ta.myhost.id/E31230906/laravel/public/storage/'.$item->foto_surat }}')">
|
|
@else
|
|
<span style="color:var(--t3);font-size:11px;">N/A</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
<div class="pug-date">{{ \Carbon\Carbon::parse($item->tanggal_diberikan)->format('d/m/Y') }}</div>
|
|
</td>
|
|
|
|
|
|
<td>
|
|
@php
|
|
$bMap = [
|
|
'belum_mulai' => ['class'=>'pug-badge-muted', 'icon'=>'fa-clock', 'label'=>'Belum Mulai'],
|
|
'dalam_proses'=> ['class'=>'pug-badge-violet', 'icon'=>'fa-spinner', 'label'=>'Dalam Proses'],
|
|
'selesai' => ['class'=>'pug-badge-green', 'icon'=>'fa-check-circle', 'label'=>'Selesai'],
|
|
'dibatalkan' => ['class'=>'pug-badge-rose', 'icon'=>'fa-times-circle', 'label'=>'Dibatalkan'],
|
|
];
|
|
$bCfg = $bMap[$item->status_pekerjaan] ?? $bMap['belum_mulai'];
|
|
@endphp
|
|
<span class="pug-badge {{ $bCfg['class'] }}">
|
|
<i class="fas {{ $bCfg['icon'] }}"></i> {{ $bCfg['label'] }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="pug-actions">
|
|
<button class="pug-action-btn pug-action-view" onclick="viewDetail({{ $item->id_penugasan }})" title="Lihat Detail">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="pug-action-btn pug-action-edit" onclick="editPenugasan({{ $item->id_penugasan }})" title="Edit Info Tugas">
|
|
<i class="fas fa-pen"></i>
|
|
</button>
|
|
<button class="pug-action-btn pug-action-del" onclick="deletePenugasan({{ $item->id_penugasan }})" title="Hapus">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="7">
|
|
<div class="pug-empty">
|
|
<div class="pug-empty-icon"><i class="fas fa-inbox"></i></div>
|
|
<div class="pug-empty-title">Belum ada penugasan</div>
|
|
<div class="pug-empty-sub">Klik "Tambah Penugasan" untuk membuat penugasan baru</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if(isset($penugasan) && $penugasan->hasPages())
|
|
<div class="pug-pag">{{ $penugasan->links() }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
</div><!-- /content-layout -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Modal Tambah/Edit ── -->
|
|
<div id="createModal" class="pug-overlay">
|
|
<div class="pug-modal pug-modal-sm">
|
|
<div class="pug-modal-header">
|
|
<div class="pug-modal-title"><i class="fas fa-user-plus"></i><span id="modalTitle">Tambah Penugasan Baru</span></div>
|
|
<button class="pug-close-btn" onclick="closeModal('createModal')"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
|
|
<div class="pug-info-box">
|
|
<i class="fas fa-info-circle"></i>
|
|
<p><strong>Metode Foto:</strong> Silakan unggah foto daftar tugas/surat tugas dari kantor. Teknisi akan melihat foto ini di aplikasi mereka.</p>
|
|
</div>
|
|
|
|
<form id="penugasanForm" method="POST" action="{{ route('pekerjaan.penugasan.store') }}" enctype="multipart/form-data">
|
|
@csrf
|
|
<input type="hidden" id="formMethod" name="_method" value="POST">
|
|
<input type="hidden" id="penugasanId" name="id">
|
|
|
|
<div class="pug-form-grid">
|
|
<!-- Teknisi -->
|
|
<div class="pug-form-field pug-form-full">
|
|
<label class="pug-form-label"><i class="fas fa-user-tie"></i> Pilih Tim Teknisi <span class="req">*</span></label>
|
|
|
|
<div class="pug-tag-select">
|
|
<div class="pug-tag-input-wrapper" id="tagWrapper">
|
|
<div id="selectedTags" class="pug-tags-container"></div>
|
|
<input type="text" id="techSearch" placeholder="Ketik nama teknisi..." class="pug-tag-input">
|
|
</div>
|
|
|
|
<div class="pug-tag-dropdown" id="techDropdown">
|
|
@foreach($teknisiList ?? [] as $teknisi)
|
|
<div class="pug-tag-option"
|
|
data-id="{{ $teknisi->id_teknisi }}"
|
|
data-name="{{ $teknisi->nama }}"
|
|
data-sub="{{ $teknisi->spesialisasi }}">
|
|
<strong>{{ $teknisi->nama }}</strong>
|
|
<span>{{ $teknisi->spesialisasi }}</span>
|
|
</div>
|
|
@endforeach
|
|
<div class="pug-tag-no-results">Tidak ada hasil</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden inputs for actual form submission -->
|
|
<div id="hiddenTechInputs"></div>
|
|
</div>
|
|
|
|
<!-- Tanggal -->
|
|
<div class="pug-form-field">
|
|
<label class="pug-form-label"><i class="fas fa-calendar-alt"></i> Tanggal <span class="req">*</span></label>
|
|
<input type="date" name="tanggal_diberikan" id="tanggal_diberikan" required class="pug-text-input">
|
|
</div>
|
|
|
|
<!-- Jenis Pekerjaan -->
|
|
<div class="pug-form-field">
|
|
<label class="pug-form-label"><i class="fas fa-tools"></i> Jenis Pekerjaan <span class="req">*</span></label>
|
|
<select name="jenis_pekerjaan" id="jenis_pekerjaan_modal" required class="pug-select">
|
|
<option value="">Pilih Jenis Pekerjaan</option>
|
|
<option value="sr">SR (Sambungan Rumah)</option>
|
|
<option value="pengembangan_jaringan_pipa">Pengembangan Jaringan Pipa</option>
|
|
<option value="pengangkatan">Pengangkatan</option>
|
|
<option value="pemasangan_gate_valve">Pemasangan Gate Valve</option>
|
|
<option value="perbaikan_jaringan_pipa">Perbaikan Jaringan Pipa</option>
|
|
<option value="pengecatan_pipa_besi">Pengecatan Pipa Besi</option>
|
|
<option value="penyempurnaan_jaringan_pipa">Penyempurnaan Jaringan Pipa</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- No Sambungan -->
|
|
<div class="pug-form-field">
|
|
<label class="pug-form-label"><i class="fas fa-hashtag"></i> No. Sambungan <span class="opt">(opsional)</span></label>
|
|
<input type="text" name="no_sambungan" id="no_sambungan" class="pug-text-input" placeholder="Contoh: 0032 atau -">
|
|
</div>
|
|
|
|
<!-- Nama Pelanggan -->
|
|
<div class="pug-form-field pug-form-full">
|
|
<label class="pug-form-label"><i class="fas fa-user"></i> Nama Pelanggan <span class="opt">(opsional)</span></label>
|
|
<input type="text" name="nama_pelanggan" id="nama_pelanggan" class="pug-text-input" placeholder="Contoh: Bpk. Slamet atau Nama Gedung">
|
|
</div>
|
|
|
|
<!-- Alamat -->
|
|
<div class="pug-form-field pug-form-full">
|
|
<label class="pug-form-label"><i class="fas fa-map-marked-alt"></i> Alamat Lengkap <span class="req">*</span></label>
|
|
<input type="text" name="alamat_lokasi" id="alamat_lokasi" required class="pug-text-input" placeholder="Contoh: Jl. Merdeka No. 123, Desa Sukamaju">
|
|
</div>
|
|
|
|
<!-- Foto Surat -->
|
|
<div class="pug-form-field pug-form-full">
|
|
<label class="pug-form-label"><i class="fas fa-camera"></i> Unggah Foto Denah / Surat <span class="opt">(opsional)</span></label>
|
|
<div class="pug-upload-zone" onclick="document.getElementById('foto_surat').click()">
|
|
<input type="file" name="foto_surat" id="foto_surat" accept="image/*" style="display:none" onchange="previewSelectedFile(this)">
|
|
<div id="filePlaceholder">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<p>Klik untuk unggah denah lokasi atau surat tugas</p>
|
|
<span>Format: JPG, PNG, WEBP (Boleh dikosongkan)</span>
|
|
</div>
|
|
<img id="filePreview" class="pug-preview-img" src="" style="display:none;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Catatan Admin -->
|
|
<div class="pug-form-field pug-form-full">
|
|
<label class="pug-form-label"><i class="fas fa-sticky-note"></i> Instruksi Tambahan <span class="opt">(opsional)</span></label>
|
|
<textarea name="catatan_admin" id="catatan_admin" class="pug-text-input" rows="2" placeholder="Contoh: Pipa bocor di bawah pohon mangga, dst..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pug-modal-footer">
|
|
<button type="button" class="pug-btn-cancel" onclick="closeModal('createModal')">
|
|
<i class="fas fa-times"></i> Batal
|
|
</button>
|
|
<button type="submit" class="pug-btn-submit">
|
|
<i class="fas fa-paper-plane"></i> Kirim Penugasan ke Teknisi
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Modal Detail ── -->
|
|
<div id="detailModal" class="pug-overlay">
|
|
<div class="pug-modal pug-modal-lg">
|
|
<div class="pug-modal-header">
|
|
<div class="pug-modal-title"><i class="fas fa-info-circle"></i> Detail Penugasan</div>
|
|
<button class="pug-close-btn" onclick="closeModal('detailModal')"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div id="detailContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Preview Foto ── -->
|
|
<div id="previewModal" class="pug-preview-overlay" onclick="closeModal('previewModal')">
|
|
<img id="previewImg" src="" alt="Preview">
|
|
<button class="pug-preview-x" onclick="closeModal('previewModal')"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
|
|
<script>
|
|
const appUrl = "{{ url('/') }}";
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.getElementById('tanggal_diberikan').value = new Date().toISOString().split('T')[0];
|
|
|
|
let t;
|
|
const searchInput = document.getElementById('searchInput');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function () {
|
|
clearTimeout(t);
|
|
t = setTimeout(() => document.getElementById('filterForm').submit(), 600);
|
|
});
|
|
}
|
|
|
|
document.getElementById('tanggal_diberikan').addEventListener('change', function () {
|
|
updateTechDropdown(this.value);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
document.querySelectorAll('[role="alert"]').forEach(el => {
|
|
el.style.transition = 'opacity .5s'; el.style.opacity = '0';
|
|
setTimeout(() => el.style.display = 'none', 500);
|
|
});
|
|
}, 5000);
|
|
});
|
|
|
|
function setStatus(val) {
|
|
document.getElementById('hiddenStatus').value = val;
|
|
document.getElementById('filterForm').submit();
|
|
}
|
|
|
|
function openCreateModal() {
|
|
document.getElementById('modalTitle').textContent = 'Tambah Penugasan';
|
|
document.getElementById('penugasanForm').action = "{{ route('pekerjaan.penugasan.store') }}";
|
|
document.getElementById('formMethod').value = 'POST';
|
|
document.getElementById('penugasanForm').reset();
|
|
|
|
// Reset preview
|
|
document.getElementById('filePreview').style.display = 'none';
|
|
document.getElementById('filePlaceholder').style.display = 'block';
|
|
|
|
const todayDate = new Date().toISOString().split('T')[0];
|
|
document.getElementById('tanggal_diberikan').value = todayDate;
|
|
updateTechDropdown(todayDate);
|
|
|
|
document.getElementById('createModal').classList.add('show');
|
|
}
|
|
|
|
function previewSelectedFile(input) {
|
|
const preview = document.getElementById('filePreview');
|
|
const placeholder = document.getElementById('filePlaceholder');
|
|
if (input.files && input.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
preview.src = e.target.result;
|
|
preview.style.display = 'block';
|
|
placeholder.style.display = 'none';
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
|
|
function closeModal(id) {
|
|
const el = document.getElementById(id);
|
|
el.classList.remove('show');
|
|
if (id === 'previewModal') el.style.display = 'none'; // fallback for preview overlay
|
|
}
|
|
|
|
function previewFoto(url) {
|
|
document.getElementById('previewImg').src = url;
|
|
document.getElementById('previewModal').style.display = 'flex';
|
|
document.getElementById('previewModal').classList.add('show');
|
|
}
|
|
|
|
function viewDetail(id) {
|
|
fetch(`${appUrl}/pekerjaan/penugasan/${id}`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data.success) return alert('Gagal memuat detail');
|
|
const d = data.data;
|
|
const formatRp = v => 'Rp ' + parseInt(v||0).toLocaleString('id-ID');
|
|
const formatDate = v => v ? new Date(v).toLocaleDateString('id-ID',{day:'2-digit',month:'long',year:'numeric'}) : '';
|
|
|
|
let html = `
|
|
<div class="pug-detail-section">
|
|
<div class="pug-detail-section-title"><i class="fas fa-users" style="color:var(--cyan);"></i> Tim Teknisi Lapangan</div>
|
|
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-top:10px;">
|
|
${d.tim_teknisi.map(tt => `
|
|
<div style="display:flex; align-items:center; gap:8px; background:var(--bg); padding:8px 12px; border-radius:8px; border:1px solid var(--line);">
|
|
<div class="pug-av" style="width:28px;height:28px;font-size:11px;flex-shrink:0;">${(tt.teknisi?.nama||'NA').substring(0,2).toUpperCase()}</div>
|
|
<div style="overflow:hidden;">
|
|
<div style="font-size:12px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${tt.teknisi?.nama || 'N/A'}</div>
|
|
<div style="font-size:10px; color:var(--t3);">${tt.teknisi?.spesialisasi || '—'}</div>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<div style="margin-top:20px; padding-top:16px; border-top:1px solid var(--line);">
|
|
<div style="color:var(--t3); font-size:11px; font-weight:700; text-transform:uppercase; margin-bottom:12px;">Informasi Lokasi & Pelanggan</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
|
|
<div>
|
|
<div class="pug-detail-item-label"><i class="fas fa-user" style="margin-right:4px;"></i> Nama Pelanggan</div>
|
|
<div class="pug-detail-item-val">${d.nama_pelanggan || ''}</div>
|
|
</div>
|
|
<div>
|
|
<div class="pug-detail-item-label"><i class="fas fa-hashtag" style="margin-right:4px;"></i> No. Sambungan</div>
|
|
<div class="pug-detail-item-val">${d.no_sambungan || ''}</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<div class="pug-detail-item-label"><i class="fas fa-map-marker-alt" style="margin-right:4px;"></i> Alamat Lokasi</div>
|
|
<div class="pug-detail-item-val" style="color:var(--pug-green);">${d.alamat_lokasi || ''}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${d.foto_surat_url ? `
|
|
<div style="margin-bottom:14px;">
|
|
<div class="pug-detail-item-label" style="margin-bottom:8px;"><i class="fas fa-camera" style="color:var(--green);margin-right:5px;"></i>Denah / Surat Tugas</div>
|
|
<img src="${d.foto_surat_url}" style="width:100%;max-height:260px;object-fit:contain;border-radius:10px;border:1px solid var(--line2);cursor:pointer;" onclick="previewFoto('${d.foto_surat_url}')">
|
|
<div style="font-size:11px;color:var(--t3);text-align:center;margin-top:5px;">Klik untuk perbesar</div>
|
|
</div>` : ''}
|
|
|
|
${d.catatan_admin ? `
|
|
<div style="background:var(--amber-dim);border:1px solid rgba(255,181,71,.2);border-radius:12px;padding:14px 16px;margin-bottom:14px;">
|
|
<div style="color:var(--amber);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px;">
|
|
<i class="fas fa-map-marker-alt" style="margin-right:5px;"></i>Instruksi Mandor
|
|
</div>
|
|
<div style="color:var(--t1);font-size:13.5px;font-weight:600;line-height:1.5;">${d.catatan_admin}</div>
|
|
</div>` : ''}`;
|
|
|
|
if (d.items && d.items.length > 0) {
|
|
html += `
|
|
<div class="pug-detail-section">
|
|
<div class="pug-detail-section-title"><i class="fas fa-tools" style="color:var(--violet);"></i> Rincian Pekerjaan (${d.items.length} Item)</div>
|
|
<table class="pug-table" style="margin-bottom:14px; font-size:12px;">
|
|
<thead>
|
|
<tr style="background:var(--line);">
|
|
<th style="padding:8px;">Jenis Pekerjaan</th>
|
|
<th style="padding:8px;">Detail</th>
|
|
<th style="padding:8px; text-align:right;">Subtotal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${d.items.map(it => `
|
|
<tr>
|
|
<td style="padding:8px;">
|
|
<strong>${it.label_jenis_pekerjaan || it.jenis_pekerjaan}</strong>
|
|
</td>
|
|
<td style="padding:8px; color:var(--t3);">
|
|
${it.dimensi_pipa ? `Dim: ${it.dimensi_pipa}<br>` : ''}
|
|
${it.jarak_meter ? `Jarak: ${it.jarak_meter}m<br>` : ''}
|
|
${it.jumlah_unit ? `Unit: ${it.jumlah_unit}<br>` : ''}
|
|
${it.jumlah_titik ? `Titik: ${it.jumlah_titik}<br>` : ''}
|
|
${it.jenis_pengangkatan ? `Tipe: ${it.jenis_pengangkatan}<br>` : ''}
|
|
${it.pakai_pipa_besi !== null ? `Pipa Besi: ${it.pakai_pipa_besi ? 'Ya' : 'Tidak'}` : ''}
|
|
</td>
|
|
<td style="padding:8px; text-align:right; font-weight:700; color:var(--green);">
|
|
${formatRp(it.total_nilai_pekerjaan)}
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr style="background:var(--pug-green-l);">
|
|
<td colspan="2" style="padding:8px; text-align:right; font-weight:700;">TOTAL NILAI</td>
|
|
<td style="padding:8px; text-align:right; font-weight:800; color:var(--green); font-size:14px;">${formatRp(d.total_nilai_pekerjaan)}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<div style="font-size:11px; color:var(--t3); margin-bottom:5px;">Status Pekerjaan: <strong>${(d.status_pekerjaan||'').replace(/_/g,' ').toUpperCase()}</strong></div>
|
|
${d.detail_pekerjaan?`<div style="margin-top:14px;padding-top:14px;border-top:1px solid var(--line);"><div class="pug-detail-item-label" style="margin-bottom:7px;">Catatan Teknisi</div><div style="color:var(--t1);font-size:13px;background:var(--bg);padding:12px;border-radius:9px;border:1px solid var(--line);line-height:1.6;">${d.detail_pekerjaan}</div></div>`:''}
|
|
</div>`;
|
|
|
|
if (d.tanggal_garansi_mulai) {
|
|
html += `<div class="pug-garansi-box">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<div>
|
|
<div style="color:var(--violet);font-size:12px;font-weight:700;margin-bottom:3px;">Garansi Aktif</div>
|
|
<div style="color:var(--t2);font-size:12px;">${new Date(d.tanggal_garansi_mulai).toLocaleDateString('id-ID')} s/d ${new Date(d.tanggal_garansi_selesai).toLocaleDateString('id-ID')}</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
if (d.foto_sebelum_url || d.foto_sesudah_url) {
|
|
html += `
|
|
<div class="pug-detail-section" style="background:var(--bg); border:1px dashed var(--line);">
|
|
<div class="pug-detail-section-title"><i class="fas fa-camera" style="color:var(--green);"></i> Dokumentasi Pekerjaan</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;">
|
|
${d.foto_sebelum_url ? `
|
|
<div class="pug-photo-container">
|
|
<div class="pug-photo-label"><i class="fas fa-history"></i> Sebelum Pekerjaan</div>
|
|
<img src="${d.foto_sebelum_url}" class="pug-photo-item" onclick="window.open('${d.foto_sebelum_url}', '_blank')">
|
|
</div>
|
|
` : `
|
|
<div class="pug-photo-empty">Belum ada foto sebelum</div>
|
|
`}
|
|
|
|
${d.foto_sesudah_url ? `
|
|
<div class="pug-photo-container">
|
|
<div class="pug-photo-label"><i class="fas fa-check-double"></i> Sesudah Pekerjaan</div>
|
|
<img src="${d.foto_sesudah_url}" class="pug-photo-item" onclick="window.open('${d.foto_sesudah_url}', '_blank')">
|
|
</div>
|
|
` : `
|
|
<div class="pug-photo-empty">Belum ada foto sesudah</div>
|
|
`}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
} else {
|
|
html += `<div class="pug-waiting-box">
|
|
<i class="fas fa-hourglass-half"></i>
|
|
<div style="color:var(--t2);font-size:13px;"><strong style="color:var(--amber);">Menunggu:</strong> Teknisi belum mengisi detail pekerjaan via aplikasi mobile.</div>
|
|
</div>`;
|
|
}
|
|
|
|
document.getElementById('detailContent').innerHTML = html;
|
|
document.getElementById('detailModal').classList.add('show');
|
|
})
|
|
.catch(() => alert('Gagal memuat detail penugasan'));
|
|
}
|
|
|
|
function editPenugasan(id) {
|
|
fetch(`${appUrl}/pekerjaan/penugasan/${id}/edit`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data.success) return alert(data.message || 'Gagal memuat data');
|
|
const item = data.data;
|
|
document.getElementById('modalTitle').textContent = 'Edit Penugasan';
|
|
document.getElementById('penugasanForm').action = `/pekerjaan/penugasan/${id}`;
|
|
document.getElementById('formMethod').value = 'PUT';
|
|
document.getElementById('penugasanId').value = id;
|
|
|
|
// Handle Tag Selection for Team
|
|
clearTags();
|
|
item.tim_teknisi.forEach(tt => {
|
|
addTag(tt.id_teknisi, tt.teknisi.nama);
|
|
});
|
|
|
|
const targetDate = item.tanggal_diberikan || '';
|
|
document.getElementById('tanggal_diberikan').value = targetDate;
|
|
updateTechDropdown(targetDate);
|
|
|
|
document.getElementById('catatan_admin').value = item.catatan_admin || '';
|
|
document.getElementById('alamat_lokasi').value = item.alamat_lokasi || '';
|
|
document.getElementById('nama_pelanggan').value = item.nama_pelanggan || '';
|
|
document.getElementById('no_sambungan').value = item.no_sambungan || '';
|
|
document.getElementById('jenis_pekerjaan_modal').value = item.jenis_pekerjaan || '';
|
|
|
|
// Show existing image preview if available
|
|
const preview = document.getElementById('filePreview');
|
|
const placeholder = document.getElementById('filePlaceholder');
|
|
if (item.foto_surat_url) {
|
|
preview.src = item.foto_surat_url;
|
|
preview.style.display = 'block';
|
|
placeholder.style.display = 'none';
|
|
} else {
|
|
preview.style.display = 'none';
|
|
placeholder.style.display = 'block';
|
|
}
|
|
|
|
document.getElementById('createModal').classList.add('show');
|
|
})
|
|
.catch(() => alert('Gagal memuat data penugasan'));
|
|
}
|
|
|
|
function deletePenugasan(id) {
|
|
if (!confirm('Apakah Anda yakin ingin menghapus penugasan ini?')) return;
|
|
fetch(`${appUrl}/pekerjaan/penugasan/${id}`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'Accept': 'application/json' }
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => { data.success ? (alert(data.message), location.reload()) : alert('Gagal: '+(data.message||'Terjadi kesalahan')); })
|
|
.catch(() => alert('Terjadi kesalahan saat menghapus'));
|
|
}
|
|
|
|
document.getElementById('penugasanForm').addEventListener('submit', function (e) {
|
|
if (document.getElementById('formMethod').value === 'PUT') {
|
|
e.preventDefault();
|
|
const id = document.getElementById('penugasanId').value;
|
|
const formData = new FormData(this);
|
|
fetch(`${appUrl}/pekerjaan/penugasan/${id}`, {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'Accept': 'application/json' },
|
|
body: formData
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => { data.success ? (alert(data.message), location.reload()) : alert('Gagal: '+(data.message||'Terjadi kesalahan')); })
|
|
.catch(() => alert('Terjadi kesalahan saat menyimpan'));
|
|
}
|
|
});
|
|
|
|
function resetFilter() { window.location.href = "{{ route('pekerjaan.penugasan.index') }}"; }
|
|
|
|
window.addEventListener('click', e => {
|
|
['createModal','detailModal'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (e.target === el) closeModal(id);
|
|
});
|
|
if (e.target === document.getElementById('previewModal')) closeModal('previewModal');
|
|
});
|
|
|
|
// ── Logic Searchable Tag Multi-Select ──
|
|
const techSearch = document.getElementById('techSearch');
|
|
const techDropdown = document.getElementById('techDropdown');
|
|
const selectedTags = document.getElementById('selectedTags');
|
|
const hiddenInputs = document.getElementById('hiddenTechInputs');
|
|
let selectedIds = new Set();
|
|
|
|
function addTag(id, name) {
|
|
if (selectedIds.has(id.toString())) return;
|
|
selectedIds.add(id.toString());
|
|
|
|
// Create Tag UI
|
|
const tag = document.createElement('div');
|
|
tag.className = 'pug-tag';
|
|
tag.innerHTML = `${name} <i class="fas fa-times" onclick="removeTag('${id}', this)"></i>`;
|
|
selectedTags.appendChild(tag);
|
|
|
|
// Create Hidden Input
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'id_teknisi[]';
|
|
input.value = id;
|
|
input.id = `input-tech-${id}`;
|
|
hiddenInputs.appendChild(input);
|
|
|
|
techSearch.value = '';
|
|
techDropdown.classList.remove('show');
|
|
}
|
|
|
|
window.removeTag = function(id, el) {
|
|
selectedIds.delete(id.toString());
|
|
el.parentElement.remove();
|
|
const input = document.getElementById(`input-tech-${id}`);
|
|
if (input) input.remove();
|
|
};
|
|
|
|
function clearTags() {
|
|
selectedIds.clear();
|
|
selectedTags.innerHTML = '';
|
|
hiddenInputs.innerHTML = '';
|
|
}
|
|
|
|
techSearch.addEventListener('focus', () => {
|
|
techDropdown.classList.add('show');
|
|
});
|
|
|
|
techSearch.addEventListener('input', (e) => {
|
|
const q = e.target.value.toLowerCase();
|
|
let hasResults = false;
|
|
document.querySelectorAll('.pug-tag-option').forEach(opt => {
|
|
const match = opt.dataset.name.toLowerCase().includes(q);
|
|
opt.style.display = match ? 'block' : 'none';
|
|
if (match) hasResults = true;
|
|
});
|
|
document.querySelector('.pug-tag-no-results').style.display = hasResults ? 'none' : 'block';
|
|
techDropdown.classList.add('show');
|
|
});
|
|
|
|
document.querySelectorAll('.pug-tag-option').forEach(opt => {
|
|
opt.addEventListener('click', function() {
|
|
addTag(this.dataset.id, this.dataset.name);
|
|
});
|
|
});
|
|
|
|
function updateTechDropdown(date) {
|
|
const dropdown = document.getElementById('techDropdown');
|
|
dropdown.innerHTML = '<div style="padding: 12px; text-align: center; color: var(--pug-t3); font-size: 11.5px;"><i class="fas fa-spinner fa-spin" style="color: #10b981; margin-right: 5px;"></i> Memuat teknisi...</div>';
|
|
|
|
fetch(`${appUrl}/pekerjaan/penugasan/get-teknisi?date=${date}`)
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
let html = '';
|
|
if (res.data.length === 0) {
|
|
html = '<div style="padding: 12px; text-align: center; color: #ef4444; font-size: 11.5px; font-weight: 600;"><i class="fas fa-exclamation-circle"></i> Tidak ada teknisi yang Hadir hari ini!</div>';
|
|
} else {
|
|
res.data.forEach(t => {
|
|
html += `
|
|
<div class="pug-tag-option"
|
|
data-id="${t.id_teknisi}"
|
|
data-name="${t.nama}"
|
|
data-sub="${t.spesialisasi || 'Teknisi'}">
|
|
<strong>${t.nama}</strong>
|
|
<span>${t.spesialisasi || 'Teknisi'}</span>
|
|
</div>
|
|
`;
|
|
});
|
|
html += '<div class="pug-tag-no-results" style="display:none;">Tidak ada hasil</div>';
|
|
}
|
|
dropdown.innerHTML = html;
|
|
|
|
// Re-bind click event to newly created elements
|
|
document.querySelectorAll('#techDropdown .pug-tag-option').forEach(opt => {
|
|
opt.addEventListener('click', function() {
|
|
addTag(this.dataset.id, this.dataset.name);
|
|
});
|
|
});
|
|
} else {
|
|
dropdown.innerHTML = '<div style="padding: 12px; text-align: center; color: #ef4444; font-size: 11.5px;"><i class="fas fa-times-circle"></i> Gagal memuat data</div>';
|
|
}
|
|
})
|
|
.catch(() => {
|
|
dropdown.innerHTML = '<div style="padding: 12px; text-align: center; color: #ef4444; font-size: 11.5px;"><i class="fas fa-exclamation-triangle"></i> Terjadi kesalahan koneksi</div>';
|
|
});
|
|
}
|
|
|
|
// Close dropdown on outside click
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.pug-tag-select')) {
|
|
techDropdown.classList.remove('show');
|
|
}
|
|
});
|
|
</script>
|
|
</x-app-layout> |