Siopas Inventory PETI for ISTW Website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

195 lines
8.6 KiB

@extends('layouts.main')
@section('title', 'Tambah Peminjaman')
@section('content')
@include('layouts.components.alert-prompt')
<!-- Cara Baru -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<div class="row">
<div class="col-6">
<h5 class="m-0 font-weight-bold text-primary mt-2">Tambah Peminjaman</h5>
</div>
</div>
</div>
<div class="card-body">
<form action="{{ route('dashboard.peminjaman.store') }}" method="POST" enctype="multipart/form-data"
id="peminjamanForm">
@csrf
<div class="form-group">
<label for="peti_id" class="col-form-label">Pilih Detail Peti: <span
class="text-danger">*</span></label>
<select class="form-control" id="searchPeti" name="peti_id"></select>
<label for="customer_id" class="col-form-label">Customer:<span class="text-danger">*</span></label>
<select class="form-control" id="searchCustomer" name="customer_id"></select>
<label for="exit_at" class="col-form-label">Tanggal Peminjaman: <span
class="text-danger">*</span></label>
<input class="form-control" name="exit_at" type="date" id="exit_at" value="{{ old('exit_at') }}"
required>
<label for="est_pengembalian" class="col-form-label">Estimasi Tanggal Pengembalian: <span
class="text-danger">*</span></label>
<input class="form-control" name="est_pengembalian" type="date" id="est_pengembalian" required>
<label for="warehouse_id" class="col-form-label">Asal Gudang:</label>
<select class="form-control" id="searchWarehouse" name="warehouse_id"></select>
<label for="exit_warehouse" class="col-form-label">Tujuan Gudang: <span
class="text-danger">*</span></label>
<select class="form-control" name="exit_warehouse" type="text" id="exit_warehouse" required>
<option disabled selected>Pilih Tujuan Gudang</option>
@foreach ($warehouse as $data)
<option value="{{ $data->id }}">{{ $data->name }}</option>
@endforeach
</select>
</div>
<div class="modal-footer d-flex justify-content-center">
<a href="{{ route('dashboard.peminjaman.index') }}" class="btn btn-secondary">Kembali</a>
<button type="submit" class="btn btn-primary" id="submitButton">Simpan</button>
</div>
</form>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
<script type="text/javascript">
var path = "{{ route('dashboard.peminjaman.autoCompleteSearch') }}";
var searchCustomersPath = "{{ route('dashboard.peminjaman.searchCustomers') }}";
var searchWarehousesPath = "{{ route('dashboard.peminjaman.searchWarehouses') }}";
// Inisialisasi dropdown peti
$('#searchPeti').select2({
placeholder: 'Pilih Detail Peti',
ajax: {
url: path,
dataType: 'json',
delay: 250,
processResults: function(data) {
return {
results: $.map(data.peti, function(item) {
return {
text: item.fix_lot,
id: item.id
}
})
};
},
cache: true
}
});
// Inisialisasi dropdown pelanggan dengan Select2
$('#searchCustomer').select2({
placeholder: 'Cari atau Pilih Pelanggan',
ajax: {
url: searchCustomersPath,
dataType: 'json',
delay: 250,
processResults: function(data) {
return {
results: $.map(data.customers, function(customer) {
return {
text: customer.name,
id: customer.id
}
})
};
},
cache: true
}
});
// Inisialisasi dropdown gudang
$('#searchWarehouse').select2({
placeholder: 'Pilih data gudang',
ajax: {
url: searchWarehousesPath,
dataType: 'json',
delay: 250,
processResults: function(data) {
return {
results: $.map(data.warehouses, function(warehouse) {
return {
text: warehouse.name,
id: warehouse.id
}
})
};
},
cache: true
}
});
// Tambahkan listener perubahan pada dropdown peti
$('#searchPeti').on('change', function() {
var selectedPetiId = $(this).val();
// Bersihkan dan reset dropdown pelanggan dan gudang
$('#searchCustomer').empty().val(null).trigger('change');
$('#searchWarehouse').empty().val(null).trigger('change');
// Ambil dan perbarui data pelanggan dan gudang berdasarkan peti yang dipilih
$.ajax({
url: "{{ route('dashboard.peminjaman.getCustomerAndWarehouseByPeti') }}",
type: 'GET',
data: {
peti_id: selectedPetiId
},
dataType: 'json',
success: function(data) {
$.each(data.customers, function(index, customer) {
// Tambahkan opsi ke dropdown pelanggan
$('#searchCustomer').append('<option value="' + customer.id + '">' +
customer.name + '</option>');
});
$.each(data.warehouses, function(index, warehouse) {
// Tambahkan opsi ke dropdown gudang
$('#searchWarehouse').append('<option value="' + warehouse.id + '">' +
warehouse.name + '</option>');
});
// Pilih pelanggan dan gudang berdasarkan data yang diterima
$('#searchCustomer').val(data.selectedCustomer).trigger('change');
$('#searchWarehouse').val(data.selectedWarehouse).trigger('change');
},
error: function(error) {
console.error('Error fetching customer and warehouse data:', error);
}
});
});
</script>
<!-- auto disable form pada saat sudah di simpan-->
<script>
document.getElementById('peminjamanForm').addEventListener('submit', function() {
document.getElementById('submitButton').setAttribute('disabled', 'true');
});
</script>
<!-- otomatis tgl otomatis 1 minggu setelah pembuatan peminjaman -->
<script>
// Mendapatkan elemen input tanggal peminjaman
const exitDateInput = document.getElementById('exit_at');
// Mendapatkan elemen input estimasi tanggal pengembalian
const estimatedReturnDateInput = document.getElementById('est_pengembalian');
// Menambahkan event listener ke input tanggal peminjaman
exitDateInput.addEventListener('input', function() {
// Mendapatkan tanggal peminjaman dalam format tanggal JavaScript
const exitDate = new Date(this.value);
// Menghitung tanggal estimasi pengembalian (7 hari setelah tanggal peminjaman)
const estimatedReturnDate = new Date(exitDate);
estimatedReturnDate.setDate(exitDate.getDate() + 7);
// Mengisi nilai estimasi tanggal pengembalian
estimatedReturnDateInput.valueAsDate = estimatedReturnDate;
});
</script>
@endsection