104 lines
4.1 KiB
PHP
104 lines
4.1 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Tambah Ongkir Kota - INUFA')
|
|
@section('header', 'Tambah Ongkir Kota')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4 py-6">
|
|
<div class="bg-white rounded-lg shadow-lg p-6 max-w-4xl mx-auto">
|
|
<form action="{{ route('admin.ongkir-kota.store') }}" method="POST" id="ongkirForm">
|
|
@csrf
|
|
|
|
<div id="kota-container">
|
|
<!-- Template untuk form kota -->
|
|
<div class="kota-form mb-6 p-4 border rounded-lg bg-gray-50">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-gray-700 font-medium mb-2">Nama Kabupaten <span class="text-red-500">*</span></label>
|
|
<input type="text" name="kotas[0][nama_Kabupaten]" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-gray-700 font-medium mb-2">Biaya Ongkir (Rp) <span class="text-red-500">*</span></label>
|
|
<input type="number" name="kotas[0][biaya_ongkir]" min="0" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="mt-2 text-red-600 hover:text-red-800 delete-kota" style="display: none;">
|
|
<i class="fas fa-trash mr-1"></i> Hapus Kota
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<button type="button" id="tambahKota" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md">
|
|
<i class="fas fa-plus mr-1"></i> Tambah Kota Lain
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-4">
|
|
<a href="{{ route('admin.ongkir-kota.index') }}" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400">
|
|
Batal
|
|
</a>
|
|
<button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
|
|
Simpan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const container = document.getElementById('kota-container');
|
|
const tambahKotaBtn = document.getElementById('tambahKota');
|
|
let kotaCount = 1;
|
|
|
|
// Fungsi untuk menambah form kota baru
|
|
tambahKotaBtn.addEventListener('click', function() {
|
|
const template = container.children[0].cloneNode(true);
|
|
|
|
// Update nama field
|
|
const inputs = template.querySelectorAll('input');
|
|
inputs.forEach(input => {
|
|
input.name = input.name.replace('[0]', `[${kotaCount}]`);
|
|
input.value = '';
|
|
});
|
|
|
|
// Tampilkan tombol hapus
|
|
const deleteBtn = template.querySelector('.delete-kota');
|
|
deleteBtn.style.display = 'inline-flex';
|
|
|
|
// Tambahkan event listener untuk tombol hapus
|
|
deleteBtn.addEventListener('click', function() {
|
|
template.remove();
|
|
});
|
|
|
|
container.appendChild(template);
|
|
kotaCount++;
|
|
});
|
|
|
|
// Tampilkan tombol hapus jika ada lebih dari satu form
|
|
const updateDeleteButtons = () => {
|
|
const forms = container.children;
|
|
const deleteButtons = container.querySelectorAll('.delete-kota');
|
|
|
|
deleteButtons.forEach((btn, index) => {
|
|
if (forms.length > 1) {
|
|
btn.style.display = 'inline-flex';
|
|
} else {
|
|
btn.style.display = 'none';
|
|
}
|
|
});
|
|
};
|
|
|
|
// Event delegation untuk tombol hapus
|
|
container.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('delete-kota')) {
|
|
e.target.closest('.kota-form').remove();
|
|
updateDeleteButtons();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|