175 lines
9.2 KiB
PHP
175 lines
9.2 KiB
PHP
@extends('layout.layout')
|
|
|
|
@php
|
|
$title = 'Pemasangan Meteran';
|
|
$subTitle = 'Daftar Pelanggan Siap Pasang';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="grid grid-cols-12 gap-6">
|
|
<div class="col-span-12">
|
|
<div class="card border-0 overflow-hidden">
|
|
<div class="card-header flex justify-between items-center px-6 py-4 border-b">
|
|
<div>
|
|
<h6 class="card-title mb-0 text-lg font-semibold">Daftar Pemasangan Meteran</h6>
|
|
<p class="text-sm text-neutral-500 mt-1">
|
|
Area Tugas: <strong class="text-primary-600">{{ $dusunPetugas ?? 'Semua Dusun' }}</strong>
|
|
</p>
|
|
</div>
|
|
<span class="bg-info-100 text-info-600 px-3 py-1 rounded-full text-sm font-medium">
|
|
{{ $pelanggan->total() }} Menunggu
|
|
</span>
|
|
</div>
|
|
|
|
<div class="card-body p-6">
|
|
@if(session('success'))
|
|
<div class="alert alert-success mb-4">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
@if($pelanggan->count() == 0)
|
|
<div class="flex flex-col items-center justify-center py-16">
|
|
<iconify-icon icon="mdi:check-circle" class="text-5xl block mx-auto mb-2 text-success-400"></iconify-icon>
|
|
<p class="font-semibold">Semua pelanggan di {{ $dusunPetugas }} sudah terpasang!</p>
|
|
</div>
|
|
@else
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border border-neutral-200 dark:border-neutral-600 rounded-lg">
|
|
<thead>
|
|
<tr class="bg-neutral-50 dark:bg-neutral-700">
|
|
<th class="px-4 py-3 text-left font-bold">No.</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Nama</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Alamat</th>
|
|
<th class="px-4 py-3 text-left font-semibold">No. Telp</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Tgl Disetujui</th>
|
|
<th class="px-4 py-3 text-center font-semibold">Lokasi</th>
|
|
<th class="px-4 py-3 text-center font-semibold">Pasang Meteran</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($pelanggan as $index => $p)
|
|
<tr class="border-b border-neutral-200 hover:bg-neutral-50 transition">
|
|
<td class="px-4 py-3 text-sm">{{ $pelanggan->firstItem() + $index }}</td>
|
|
<td class="px-4 py-3 font-medium">{{ $p->name }}</td>
|
|
<td class="px-4 py-3 text-sm">{{ $p->profile->address ?? '-' }}</td>
|
|
<td class="px-4 py-3 text-sm">{{ $p->profile->phone_number ?? '-' }}</td>
|
|
<td class="px-4 py-3 text-sm">{{ $p->updated_at->format('d M Y') }}</td>
|
|
<td class="px-4 py-3 text-center">
|
|
@if($p->profile->latitude && $p->profile->longitude)
|
|
<a href="https://maps.google.com/?q={{ $p->profile->latitude }},{{ $p->profile->longitude }}"
|
|
target="_blank"
|
|
class="w-9 h-9 bg-primary-50 text-primary-600 rounded-lg inline-flex items-center justify-center hover:bg-primary-600 hover:text-white transition"
|
|
title="Buka di Google Maps">
|
|
<iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon>
|
|
</a>
|
|
@else
|
|
<span class="text-xs text-neutral-400">-</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<button type="button"
|
|
onclick="openModal('{{ $p->id }}', '{{ $p->name }}')"
|
|
class="px-4 py-2 bg-success-600 text-white rounded-lg text-sm hover:bg-success-700 transition flex items-center gap-2 mx-auto">
|
|
<iconify-icon icon="mdi:check-circle"></iconify-icon> Pasang
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-6">{{ $pelanggan->links() }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- MODAL PASANG METERAN --}}
|
|
<div id="modalPasang" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99999; display: none; align-items: center; justify-content: center;">
|
|
<div style="background: white; border-radius: 16px; padding: 24px; width: 100%; max-width: 480px; margin: 0 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative;">
|
|
|
|
{{-- Close Button --}}
|
|
<button onclick="closeModal()" style="position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #f3f4f6; cursor: pointer; display: flex; align-items: center; justify-content: center;">
|
|
✕
|
|
</button>
|
|
|
|
{{-- Header --}}
|
|
<div style="margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">
|
|
<h6 style="font-size: 18px; font-weight: bold; color: #1f2937;">Pasang Meteran</h6>
|
|
</div>
|
|
|
|
{{-- Body --}}
|
|
<div style="margin-bottom: 16px; padding: 12px; background: #eff6ff; border-radius: 8px; border: 1px solid #dbeafe;">
|
|
<p style="font-size: 14px; color: #6b7280; margin-bottom: 4px;">Pelanggan</p>
|
|
<p style="font-size: 18px; font-weight: bold; color: #1f2937;" id="namaPelanggan">-</p>
|
|
<div id="linkMaps" style="margin-top: 8px;"></div>
|
|
</div>
|
|
|
|
{{-- ✅ FORM DENGAN DATA-ACTION --}}
|
|
<form id="formPasang" method="POST" data-action="{{ route('DataPetugas.pasang', ['user' => 0]) }}">
|
|
@csrf
|
|
|
|
{{-- Dropdown --}}
|
|
<div style="margin-bottom: 16px;">
|
|
<label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; color: #374151;">
|
|
Pilih ID Meteran <span style="color: #dc2626;">*</span>
|
|
</label>
|
|
<select name="nomor_seri"
|
|
style="width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; outline: none;"
|
|
required>
|
|
<option value="">-- Pilih Meteran --</option>
|
|
@foreach($meteranTersedia as $m)
|
|
<option value="{{ $m->nomor_seri }}">{{ $m->nomor_seri }}</option>
|
|
@endforeach
|
|
</select>
|
|
@if($meteranTersedia->count() == 0)
|
|
<small style="color: #dc2626; display: block; margin-top: 4px;">⚠ Tidak ada stok!</small>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Info --}}
|
|
<div style="margin-bottom: 16px; padding: 8px 12px; background: #f9fafb; border-radius: 8px;">
|
|
<p style="font-size: 12px; color: #6b7280;">
|
|
Stok tersedia: <strong>{{ $meteranTersedia->count() }}</strong> meteran
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Buttons --}}
|
|
<div style="display: flex; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
|
|
<button type="button"
|
|
onclick="closeModal()"
|
|
style="padding: 10px 20px; border: 1px solid #d1d5db; border-radius: 8px; background: white; color: #374151; font-size: 14px; cursor: pointer;">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
style="padding: 10px 20px; background: #16a34a; color: white; border: none; border-radius: 8px; font-size: 14px; cursor: pointer;"
|
|
{{ $meteranTersedia->count() == 0 ? 'disabled' : '' }}>
|
|
Pasang & Aktifkan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
{{-- ✅ SCRIPT KOMPATIBEL LOCAL & HOSTING --}}
|
|
<script>
|
|
function openModal(userId, nama) {
|
|
document.getElementById('namaPelanggan').textContent = nama;
|
|
|
|
// ✅ Ambil base URL dari data-action form
|
|
var form = document.getElementById('formPasang');
|
|
var baseAction = form.getAttribute('data-action');
|
|
form.action = baseAction.replace('/0', '/' + userId);
|
|
|
|
document.getElementById('modalPasang').style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('modalPasang').style.display = 'none';
|
|
document.body.style.overflow = '';
|
|
}
|
|
</script> |