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.
270 lines
13 KiB
270 lines
13 KiB
@extends('layouts.main') |
|
@section('title', 'Tambah Peminjaman') |
|
@section('content') |
|
@include('layouts.components.alert-prompt') |
|
<!-- Cara Lama --> |
|
{{-- <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" name="peti_id" id="peti_id" required> |
|
<option disabled selected>Pilih Detail Peti</option> |
|
@foreach ($peti_block as $data_peti) |
|
<option value="{{ $data_peti->id }}" data-warehouse-id="{{ $data_peti->warehouse_id }}" |
|
data-customer-id="{{ $data_peti->customer->id }}" |
|
data-warehouse-name="{{ $data_peti->warehouse->name }}"> |
|
{{ $data_peti->fix_lot }} |
|
</option> |
|
@endforeach |
|
</select> |
|
|
|
<label for="customer_id" class="col-form-label">Customer:<span class="text-danger">*</span></label> |
|
<select class="form-control" name="customer_id" type="text" id="customer_id" required> |
|
<option disabled selected>Pilih Nama Customer</option> |
|
@foreach ($customer as $data) |
|
<option value="{{ $data->id }}">{{ $data->name }}</option> |
|
@endforeach |
|
</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" name="warehouse_id" type="text" id="warehouse_id" required> |
|
<option disabled selected>Pilih Asal Gudang</option> |
|
@foreach ($warehouse as $data) |
|
<option value="{{ $data->id }}">{{ $data->name }}</option> |
|
@endforeach |
|
</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> --}} |
|
|
|
<!-- 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" name="customer_id" type="text" id="customer_id" required> |
|
<option disabled selected>Pilih Nama Customer</option> |
|
@foreach ($customer as $data) |
|
<option value="{{ $data->id }}">{{ $data->name }}</option> |
|
@endforeach |
|
</select> |
|
{{-- <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" name="warehouse_id" type="text" id="warehouse_id" required> |
|
<option disabled selected>Pilih Asal Gudang</option> |
|
@foreach ($warehouse as $data) |
|
<option value="{{ $data->id }}">{{ $data->name }}</option> |
|
@endforeach |
|
</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') }}"; |
|
|
|
$('#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 select2 untuk customer |
|
// $('#searchCustomer').select2({ |
|
// placeholder: 'Pilih Detail Customer', |
|
// ajax: { |
|
// url: path, |
|
// dataType: 'json', |
|
// delay: 250, |
|
// processResults: function(data) { |
|
// return { |
|
// results: $.map(data.customer, function(item) { |
|
// return { |
|
// text: item.name, |
|
// id: item.id |
|
// } |
|
// }) |
|
// }; |
|
// }, |
|
// cache: true |
|
// } |
|
// }); |
|
</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> |
|
|
|
<!-- otomatis asal gudang dan Customer berdasarkan detail peti --> |
|
{{-- <script> |
|
// Mendapatkan elemen select detail peti |
|
const petiSelect = document.getElementById('peti_id'); |
|
|
|
// Mendapatkan elemen select customer |
|
const customerSelect = document.getElementById('customer_id'); |
|
|
|
// Mendapatkan elemen select asal gudang |
|
const warehouseSelect = document.getElementById('warehouse_id'); |
|
|
|
// Menambahkan event listener ke select detail peti |
|
petiSelect.addEventListener('change', function() { |
|
// Mendapatkan data-warehouse-id dari option yang dipilih |
|
const selectedOption = this.options[this.selectedIndex]; |
|
const warehouseId = selectedOption.getAttribute('data-warehouse-id'); |
|
const customerId = selectedOption.getAttribute('data-customer-id'); |
|
const warehouseName = selectedOption.getAttribute('data-warehouse-name'); |
|
|
|
// Memilih asal gudang berdasarkan data-warehouse-id |
|
warehouseSelect.value = warehouseId; |
|
|
|
// Memilih customer berdasarkan data-customer-id |
|
customerSelect.value = customerId; |
|
}); |
|
</script> --}} |
|
|
|
<!-- Penambahan cara baru --> |
|
{{-- <script> |
|
// Mendapatkan elemen select detail peti |
|
const petiSelect = $('#searchPeti'); |
|
|
|
// Mendapatkan elemen select warehouse |
|
const warehouseSelect = $('#warehouse_id'); |
|
|
|
// Menambahkan event listener ke select detail peti |
|
petiSelect.on('change', function() { |
|
// Mendapatkan nilai peti_id yang terpilih |
|
const selectedPetiId = $(this).val(); |
|
|
|
// Memilih warehouse berdasarkan peti_id yang terpilih |
|
$.ajax({ |
|
url: `/api/peti/${selectedPetiId}/warehouse`, // Gantilah dengan URL endpoint yang sesuai |
|
method: 'GET', |
|
success: function(warehouseData) { |
|
// Mengisi opsi warehouse |
|
const warehouseOption = new Option(warehouseData.name, warehouseData.id, true, |
|
true); |
|
warehouseSelect.html('').append(warehouseOption).trigger('change'); |
|
}, |
|
error: function(error) { |
|
console.error(error); |
|
} |
|
}); |
|
}); |
|
</script> --}} |
|
@endsection
|
|
|