Initial commit
This commit is contained in:
meusinfirmary
360
resources/views/menu_v1/_addTransactionsSpcMultiple.blade.php
Executable file
360
resources/views/menu_v1/_addTransactionsSpcMultiple.blade.php
Executable file
@ -0,0 +1,360 @@
|
||||
@extends('app.app')
|
||||
@section('title')
|
||||
Transactions Special
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<form action="{{ url('api/transactions_spc/create_order_v1') }}" method="POST">
|
||||
@csrf
|
||||
{{-- template pickup and drop --}}
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-8 col-sm-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col">
|
||||
<p class="card-title text-bold mb-0">Tambah Pengiriman Baru</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{-- client --}}
|
||||
<div class="row mb-3 d-flex align-items-center">
|
||||
<div class="col-12 mb-3">
|
||||
<div class="mb-3">
|
||||
<p class="text-danger text-bold mb-0">Tanggal dan Waktu Pengiriman</p>
|
||||
<small>Masukkan tanggal, jam, lokasi penjemputan, dan lokasi pengantaran yang ada pada daftar zona yang telah didaftarkan</small>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-5">
|
||||
<label class="form-label text-nowrap">Tanggal Penjemputan <span class="text-danger">*</span></label>
|
||||
<input type="date" name="add_pickup_date" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-2"></div>
|
||||
<div class="col-sm-5 col-5">
|
||||
<label for="add_pickup_time" class="form-label text-nowrap">Waktu Penjemputan <span class="text-danger">*</span></label>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
|
||||
<select name="add_pickup_time_hour" class="form-control" required>
|
||||
<option value="" selected disabled hidden>--</option>
|
||||
@for ($i = 0; $i < 24; $i++)
|
||||
<option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
|
||||
<select name="add_pickup_time_minute" class="form-control" required>
|
||||
<option value="" selected disabled hidden>--</option>
|
||||
@for ($i = 0; $i < 60; $i++)
|
||||
<option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 col-5 mb-3 d-none">
|
||||
<label for="add_client" class="form-label text-nowrap">Pilih Client <span class="text-danger">*</span></label>
|
||||
<select name="add_client" id="add_client" class="select2 form-control" readonly>
|
||||
@foreach ($uclients as $uclient)
|
||||
<option value="{{ $uclient->id }}" data-uid="{{ $uclient->id }}" data-cptid="{{ $uclient->client_group_id }}">
|
||||
{{ $uclient->first_name . " ($uclient->client_group_name)" }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-light">
|
||||
<div class="card-header">
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col">
|
||||
<p class="card-title text-bold mb-0">Penjemputan dan Pengantaran</p>
|
||||
<small>Masukkan lokasi penjemputan, dan lokasi pengantaran yang ada pada daftar zona yang telah didaftarkan</small>
|
||||
</div>
|
||||
<div class="col text-end">
|
||||
<button id="point-add-row" type="button" class="btn btn-sm btn-danger list_add_button">
|
||||
<span class="ion-plus"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="point-container" class="card-body pb-0">
|
||||
{{-- add here --}}
|
||||
<div id="templatePickDrop" class="">
|
||||
<div class="card point-card" data-id="0">
|
||||
<div class="card-body">
|
||||
<div class="row mb-3 d-flex align-items-center">
|
||||
<div class="col-12">
|
||||
<p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran <span class="point-rowno"></span> <span class="text-danger">*</span></p>
|
||||
</div>
|
||||
{{-- <div class="col-2 text-end">
|
||||
<button class="btn btn-sm btn-secondary point-minus list_remove_button" type="button">
|
||||
<span class="ion-minus"></span>
|
||||
</button>
|
||||
</div> --}}
|
||||
</div>
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-5">
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_pickup_zone" class="form-label">Lokasi Penjemputan <span class="text-danger">*</span></label>
|
||||
<select id="addPickupZone" name="add_pickup_zone[]" class="form-control select2" required>
|
||||
<option value="" disabled selected>Belum ada lokasi yang dipilih</option>
|
||||
@foreach ($pickup_zone as $_pickup_zone)
|
||||
<option value="{{ $_pickup_zone->id }}">{{ $_pickup_zone->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_pickup_pic_name" class="form-label text-nowrap">Nama Pengirim <span class="text-danger">*</span></label>
|
||||
<input type="text" name="add_pickup_pic_name[]" id="addPickupPicName" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_pickup_pic_phone" class="form-label text-nowrap">No Telepon Pengirim <span class="text-danger">*</span></label>
|
||||
<input type="tel" name="add_pickup_pic_phone[]" pattern="[0-9]*" title="Please enter a valid phone number (digits only)." id="addPickupPicPhone" class="form-control" required>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 text-center">
|
||||
<label for="" class="form-label mb-0 mt-2"> </label>
|
||||
<span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_drop_zone" class="form-label">Lokasi Pengantaran <span class="text-danger">*</span></label>
|
||||
<select name="add_drop_zone[]" class="form-control select2" required>
|
||||
<option value="" selected disabled>Belum ada lokasi yang dipilih</option>
|
||||
@foreach ($drop_zone as $_drop_zone)
|
||||
<option value="{{ $_drop_zone->id }}">{{ $_drop_zone->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_drop_pic_name" class="form-label text-nowrap">Nama Penerima <span class="text-danger">*</span></label>
|
||||
<input type="text" name="add_drop_pic_name[]" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_drop_pic_phone" class="form-label text-nowrap">No Telepon Penerima <span class="text-danger">*</span></label>
|
||||
<input type="tel" name="add_drop_pic_phone[]" pattern="[0-9]*" title="Please enter a valid phone number (digits only)." class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex mt-2 select-report">
|
||||
<div class="col-sm-12">
|
||||
<label for="add_pickup_zone" class="form-label">Foto Pelaporan</label>
|
||||
<select class="select2 form-control" id="addChecklist" name="checklist[0][]" style="width: 100%" multiple>
|
||||
@foreach ($checklist as $_checklist)
|
||||
<option value="{{ $_checklist->id }}">{{ $_checklist->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- prefer type vehicle --}}
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-12 mb-3">
|
||||
<p class="text-danger text-bold mb-0">Informasi Kendaraan & Pengemudi</p>
|
||||
</div>
|
||||
<div class="col-5 mb-3">
|
||||
<label for="add-truck_type" class="form-label">Pilih Kendaraan <span class="text-danger">*</span></label>
|
||||
<select name="id_kendaraan" class="form-control" class="select2">
|
||||
<option value="">Pilih Kendaraan</option>
|
||||
@foreach ($vehicles as $_vehicle)
|
||||
<option value="{{ $_vehicle->id }}">{{ $_vehicle->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-sm-2"></div>
|
||||
<div class="col-5 mb-3">
|
||||
<label for="add-truck_type" class="form-label">Pilih Pengemudi <span class="text-danger">*</span></label>
|
||||
<select name="id_pengemudi" class="form-control" class="select2">
|
||||
<option value="">Pilih Pengemudi</option>
|
||||
@foreach ($drivers as $_driver)
|
||||
<option value="{{ $_driver->id }}">{{ $_driver->fullname . ' (+62 ' . $_driver->phone . ')' }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="add-note_tonase" class="form-label">Catatan Tonase</label>
|
||||
<input type="text" name="add-note_tonase" id="add-note_tonase" class="form-control" placeholder="Tonase: 22 Ton / 58CBM">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-8">
|
||||
<p class="mb-0">
|
||||
Sudahkah Anda mengisi semua kolom yang ada?
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-4 text-end">
|
||||
{{-- <button class="btn btn-warning btn-block btn-sm" id="btnCalculate">Pesan Sekarang</button> --}}
|
||||
<button class="btn btn-warning btn-block btn-sm" type="submit">Pesan Sekarang</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('customcss')
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
|
||||
@endsection
|
||||
@section('customjs')
|
||||
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#add_client').val('{{ Auth::user()->id }}').change();
|
||||
var x = 1; //Initial field counter
|
||||
var list_maxField = 10; //Input fields increment limitation
|
||||
|
||||
let index = 1;
|
||||
|
||||
function initializeSelect2(selector) {
|
||||
$('.select2').select2();
|
||||
}
|
||||
|
||||
initializeSelect2('#options0');
|
||||
|
||||
function updateIndices() {
|
||||
$('#templatePickDrop .select-report').each(function(i) {
|
||||
$(this).find('.select').attr('name', `checklist[${i}][]`);
|
||||
$(this).find('.select').attr('id', `options${i}`);
|
||||
});
|
||||
index = $('#templatePickDrop .select-report').length;
|
||||
}
|
||||
//Once add button is clicked
|
||||
$('body').on('click', '#point-add-row', function() {
|
||||
//Check maximum number of input fields
|
||||
x++;
|
||||
if (x < list_maxField) {
|
||||
var list_fieldHTML = `
|
||||
<div class="card point-card" data-id="0">
|
||||
<div class="card-body">
|
||||
<div class="row mb-3 d-flex align-items-center">
|
||||
<div class="col-10 mb-3">
|
||||
<p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran <span class="point-rowno"></span> <span class="text-danger">*</span></p>
|
||||
</div>
|
||||
<div class="col-2 text-end">
|
||||
<button class="btn btn-sm btn-secondary point-minus list_remove_button" type="button">
|
||||
<span class="ion-minus"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-5">
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_pickup_zone" class="form-label">Lokasi Penjemputan <span class="text-danger">*</span></label>
|
||||
<select name="add_pickup_zone[]" class="form-control select2pckup" required>
|
||||
<option value="" selected disabled>Belum ada lokasi yang dipilih</option>
|
||||
@foreach ($pickup_zone as $_pickup_zone)
|
||||
<option value="{{ $_pickup_zone->id }}">{{ $_pickup_zone->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_pickup_pic_name" class="form-label text-nowrap">Nama Pengirim <span class="text-danger">*</span></label>
|
||||
<input type="text" name="add_pickup_pic_name[]" class="form-control add-pckup-pic-name" required readonly>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_pickup_pic_phone" class="form-label text-nowrap">No Telepon Pengirim <span class="text-danger">*</span></label>
|
||||
<input type="tel" name="add_pickup_pic_phone[]" pattern="[0-9]*" title="Please enter a valid phone number (digits only)." class="form-control add-pckup-pic-phone" required readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 text-center">
|
||||
<label for="" class="form-label mb-0 mt-2"> </label>
|
||||
<span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_drop_zone" class="form-label">Lokasi Pengantaran <span class="text-danger">*</span></label>
|
||||
<select name="add_drop_zone[]" class="select2 form-control" required>
|
||||
<option value="" selected disabled>Belum ada lokasi yang dipilih</option>
|
||||
@foreach ($drop_zone as $_drop_zone)
|
||||
<option value="{{ $_drop_zone->id }}">{{ $_drop_zone->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_drop_pic_name" class="form-label text-nowrap">Nama Penerima <span class="text-danger">*</span></label>
|
||||
<input type="text" name="add_drop_pic_name[]" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label for="add_drop_pic_phone" class="form-label text-nowrap">No Telepon Penerima <span class="text-danger">*</span></label>
|
||||
<input type="tel" name="add_drop_pic_phone[]" pattern="[0-9]*" title="Please enter a valid phone number (digits only)." class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex mt-2 select-report">
|
||||
<div class="col-sm-12">
|
||||
<label for="add_pickup_zone" class="form-label">Foto Pelaporan</label>
|
||||
<select class="select2 select2checklist form-control" name="checklist[${index}][]" id="options${index}" style="width: 100%" multiple>
|
||||
@foreach ($checklist as $_checklist)
|
||||
<option value="{{ $_checklist->id }}">{{ $_checklist->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`; //New input field html
|
||||
$('#templatePickDrop').append(list_fieldHTML); //Add field html
|
||||
// $("select").select2();
|
||||
// $(".select2pckup").prop('readonly', true);
|
||||
$(".select2pckup").prop('disabled', true);
|
||||
initializeSelect2(`#options${index}`);
|
||||
|
||||
$('.select2pckup').val($('#addPickupZone').val()).trigger('change')
|
||||
$('.add-pckup-pic-name').val($('#addPickupPicName').val())
|
||||
$('.add-pckup-pic-phone').val($('#addPickupPicPhone').val())
|
||||
|
||||
|
||||
$('.select2checklist').prop('disabled', true);
|
||||
$('.select2checklist').val($('#addChecklist').val()).trigger('change')
|
||||
index++;
|
||||
}
|
||||
});
|
||||
|
||||
//Once remove button is clicked
|
||||
$('#templatePickDrop').on('click', '.list_remove_button', function() {
|
||||
$(this).closest('div.point-card').remove(); //Remove field html
|
||||
updateIndices();
|
||||
});
|
||||
|
||||
$('#addPickupZone').on('change', function() {
|
||||
console.log($(this).val());
|
||||
$('.select2pckup').val($(this).val()).trigger('change')
|
||||
$('.add-pckup-pic-name').val($('#addPickupPicName').val())
|
||||
$('.add-pckup-pic-phone').val($('#addPickupPicPhone').val())
|
||||
})
|
||||
|
||||
$('#addPickupPicName').on('keyup', function() {
|
||||
$('.add-pckup-pic-name').val($(this).val())
|
||||
});
|
||||
$('#addPickupPicPhone').on('keyup', function() {
|
||||
$('.add-pckup-pic-phone').val($(this).val())
|
||||
});
|
||||
|
||||
$('#addChecklist').on('change', function() {
|
||||
$('.select2checklist').val($('#addChecklist').val()).trigger('change')
|
||||
})
|
||||
|
||||
|
||||
|
||||
jQuery(function($) {
|
||||
$('form').bind('submit', function() {
|
||||
$(this).find('.select2pckup').prop('disabled', false);
|
||||
$(this).find('.select2checklist').prop('disabled', false);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user