205 lines
11 KiB
PHP
205 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Data Kantor')
|
|
|
|
@section('style')
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css" />
|
|
<style>
|
|
#map-create,
|
|
#map-edit {
|
|
height: 300px !important;
|
|
width: 100% !important;
|
|
border-radius: 0.75rem;
|
|
z-index: 1;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
|
<script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.js"></script>
|
|
<script>
|
|
window.kantorUpdateUrl = "{{ route('kantor.update', ':id') }}";
|
|
</script>
|
|
<script src="{{ asset('js/kantor-map.js') }}"></script>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="space-y-6">
|
|
<x-page-header title="Data Kantor" subtitle="Kelola lokasi kantor, koordinat, dan radius absensi.">
|
|
<button x-data @click="$dispatch('open-modal', 'create-kantor')"
|
|
class="px-5 py-2.5 bg-primary text-white text-sm font-semibold rounded-xl hover:bg-primary/90 transition shadow-lg flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
</svg>
|
|
Tambah Kantor
|
|
</button>
|
|
</x-page-header>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<x-table>
|
|
<x-slot:header>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase text-left">Nama Kantor</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase text-left">Koordinat</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase text-center">Radius</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase text-right">Aksi</th>
|
|
</x-slot:header>
|
|
|
|
@forelse($kantor as $k)
|
|
<tr class="hover:bg-slate-50 border-b border-slate-50 last:border-b-0">
|
|
<td class="px-6 py-4 text-left">
|
|
<div class="font-bold text-slate-800">{{ $k->nama_kantor }}</div>
|
|
<div class="mt-1">
|
|
<x-badge color="{{ $k->tipe == 'Pusat' ? 'navy' : 'gray' }}">
|
|
{{ $k->tipe }}
|
|
</x-badge>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-left">
|
|
<code
|
|
class="text-[11px] font-mono bg-slate-100 px-2 py-1 rounded border border-slate-200 text-slate-600">
|
|
{{ number_format($k->latitude, 5) }}, {{ number_format($k->longitude, 5) }}
|
|
</code>
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<x-badge color="blue">
|
|
{{ $k->radius }} m
|
|
</x-badge>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button onclick="openDetailModal(this)"
|
|
data-id="{{ $k->id_kantor }}"
|
|
data-nama="{{ $k->nama_kantor }}"
|
|
data-tipe="{{ $k->tipe }}"
|
|
data-alamat="{{ $k->alamat }}"
|
|
data-lat="{{ $k->latitude }}"
|
|
data-long="{{ $k->longitude }}"
|
|
data-radius="{{ $k->radius }}"
|
|
class="p-2 bg-slate-100 text-slate-600 rounded-lg hover:bg-slate-200 transition"
|
|
title="Detail">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
</svg>
|
|
</button>
|
|
<x-button-edit onclick="openEditModal(this)" data-id="{{ $k->id_kantor }}"
|
|
data-nama="{{ $k->nama_kantor }}" data-tipe="{{ $k->tipe }}" data-alamat="{{ $k->alamat }}"
|
|
data-lat="{{ $k->latitude }}" data-long="{{ $k->longitude }}"
|
|
data-radius="{{ $k->radius }}" />
|
|
|
|
<form id="delete-form-{{ $k->id_kantor }}" action="{{ route('kantor.destroy', $k->id_kantor) }}" method="POST" class="hidden">
|
|
@csrf
|
|
@method('DELETE')
|
|
</form>
|
|
<x-delete-button :id="$k->id_kantor" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<x-empty-state colspan="4" message="Belum ada data kantor" />
|
|
@endforelse
|
|
</x-table>
|
|
<x-pagination :paginator="$kantor" />
|
|
</div>
|
|
</div>
|
|
|
|
<x-modal name="create-kantor" title="Tambah Lokasi Kantor">
|
|
<form action="{{ route('kantor.store') }}" method="POST">
|
|
@csrf
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-slate-700 mb-2">Tentukan Lokasi</label>
|
|
<div id="map-create"></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<x-input label="Nama Kantor" name="nama_kantor" placeholder="Cth: Cabang Malang" required />
|
|
<x-select label="Tipe" name="tipe" required>
|
|
<option value="Cabang">Cabang</option>
|
|
<option value="Pusat">Pusat</option>
|
|
</x-select>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<x-input label="Lat" name="latitude" id="create-lat" readonly required />
|
|
<x-input label="Long" name="longitude" id="create-long" readonly required />
|
|
<x-input type="number" label="Radius (m)" name="radius" id="create-radius" value="50" required />
|
|
</div>
|
|
<x-textarea label="Alamat" name="alamat" rows="2" />
|
|
<div class="flex justify-end gap-3 pt-4 border-t border-slate-100 mt-2">
|
|
<button type="button" x-data @click="$dispatch('close-modal', 'create-kantor')"
|
|
class="px-4 py-2 text-sm border rounded-xl hover:bg-slate-50">Batal</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 text-sm bg-primary text-white rounded-xl hover:bg-primary/90">Simpan</button>
|
|
</div>
|
|
</form>
|
|
</x-modal>
|
|
|
|
<x-modal name="edit-kantor" title="Edit Data Kantor">
|
|
<form id="form-edit" action="#" method="POST">
|
|
@csrf @method('PUT')
|
|
<div class="mb-4">
|
|
<div id="map-edit"></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<x-input label="Nama" name="nama_kantor" id="edit-nama" required />
|
|
<x-select label="Tipe" name="tipe" id="edit-tipe" required>
|
|
<option value="Cabang">Cabang</option>
|
|
<option value="Pusat">Pusat</option>
|
|
</x-select>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<x-input label="Lat" name="latitude" id="edit-lat" readonly required />
|
|
<x-input label="Long" name="longitude" id="edit-long" readonly required />
|
|
<x-input type="number" label="Radius" name="radius" id="edit-radius" required />
|
|
</div>
|
|
<x-textarea label="Alamat" name="alamat" id="edit-alamat" rows="2" />
|
|
<div class="flex justify-end gap-3 pt-4 border-t border-slate-100 mt-2">
|
|
<button type="button" x-data @click="$dispatch('close-modal', 'edit-kantor')"
|
|
class="px-4 py-2 text-sm border rounded-xl hover:bg-slate-50">Batal</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 text-sm bg-amber-500 text-white rounded-xl hover:bg-amber-600">Update</button>
|
|
</div>
|
|
</form>
|
|
</x-modal>
|
|
<x-modal name="detail-kantor" title="Detail Lokasi Kantor">
|
|
<div class="p-1 space-y-4">
|
|
<div id="map-detail" class="h-64 rounded-xl border border-slate-200 mb-4"></div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Nama Kantor</label>
|
|
<p id="detail-nama" class="text-slate-800 font-bold"></p>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Tipe</label>
|
|
<p id="detail-tipe" class="text-slate-800"></p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Latitude</label>
|
|
<p id="detail-lat" class="text-slate-800 font-mono text-xs"></p>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Longitude</label>
|
|
<p id="detail-long" class="text-slate-800 font-mono text-xs"></p>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Radius</label>
|
|
<p id="detail-radius" class="text-slate-800"></p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Alamat</label>
|
|
<p id="detail-alamat" class="text-slate-700 text-sm leading-relaxed"></p>
|
|
</div>
|
|
<div class="flex justify-end pt-4 border-t border-slate-100">
|
|
<button type="button" x-data @click="$dispatch('close-modal', 'detail-kantor')"
|
|
class="px-5 py-2 text-sm bg-slate-800 text-white rounded-xl hover:bg-slate-700 transition shadow-sm">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</x-modal>
|
|
@endsection
|