<div class="row justify-content-md-center">
<div class="col-12">
<div class="card mt-3">
<div class="card-header p-2 pl-3">
Employee Data
</div>
<div class="card-body p-2">
<div class="form-row">
<div class="col-12 col-sm-6 p-0 pb-2">
<div class="col-lg-8">
<label class="label-input" for="npk">NPK</label>
<div class="txt-value">HN-2312</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="name">Name</label>
<div class="txt-value">Buntaran Simangunsong</div>
</div>
<div class="col-3 mt-2">
<label class="label-input" for="grade">Grade</label>
<div class="txt-value">M</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="division">Division</label>
<div class="txt-value">Finance</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="department">Department</label>
<div class="txt-value">Account Payable</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="cost-center">Cost Center</label>
<div class="txt-value">B-1011-SC</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="business-trip-category">Business Trip Category</label>
<div class="txt-value">AOTS (One Way Trip)</div>
</div>
</div>
<div class="col-12 col-sm-6 p-0 pb-2">
<div class="col-lg-8">
<label class="label-input" for="extension">Extension</label>
<div class="txt-value">32</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="handphone">Handphone</label>
<div class="txt-value">(021) 233 2233</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="email">Email</label>
<div class="txt-value">buntaran.s@hino.co.id</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="city_address">City Address</label>
<div class="txt-value">Jakarta</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="area">Area</label>
<div class="txt-value">Jakarta</div>
</div>
<div class="col-lg-8 mt-2">
<label class="label-input" for="address">Address</label>
<div class="txt-value">Jakarta</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header p-2">
Business Trip Type
</div>
<div class="card-body p-2">
<div class="form-row">
<div class="col-12 col-sm-8 p-0 pb-2">
<div class="row mr-0 ml-0">
<div class="col-12 col-sm-12">
<label class="label-input" for="business-trip-category">Business Trip Type</label>
<div class="txt-value">Overseas</div>
</div>
</div>
<div class="row mr-0 ml-0 mt-2">
<div class="col-12 col-sm-6">
<label class="label-input" for="business-trip-category">Have a Passport</label>
<div class="txt-value">Yes</div>
</div>
<div class="col-12 col-sm-6">
<label class="label-input" for="area">Expired Date</label>
<div class="txt-value">10-May-2023</div>
</div>
</div>
<div class="row mr-0 ml-0 mt-2">
<div class="col-12 col-sm-6">
<label class="label-input" for="business-trip-category">Have a Visa</label>
<div class="txt-value">Yes</div>
</div>
<div class="col-12 col-sm-6">
<label class="label-input" for="area">Expired Date</label>
<div class="txt-value">30-May-2020</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header p-2">
Destination Info
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col" nowrap="nowrap">Country</th>
<th scope="col" nowrap="nowrap">City</th>
<th scope="col" nowrap="nowrap">Place</th>
<th scope="col" nowrap="nowrap">From</th>
<th scope="col" nowrap="nowrap">Until</th>
<th scope="col" nowrap="nowrap">Purpose</th>
<th scope="col" nowrap="nowrap">Objective</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col">1</td>
<td scope="col" nowrap="nowrap">China</td>
<td scope="col" nowrap="nowrap">Wuhan</td>
<td scope="col" nowrap="nowrap">Hubei</td>
<td scope="col" nowrap="nowrap">22-Apr-2020</td>
<td scope="col" nowrap="nowrap">27-Apr-2020</td>
<td scope="col"></td>
<td scope="col"></td>
</tr>
<tr>
<td scope="col">2</td>
<td scope="col" nowrap="nowrap">North Korea</td>
<td scope="col">Wuhan</td>
<td scope="col">Hubei</td>
<td scope="col">22-Apr-2020</td>
<td scope="col">27-Apr-2020</td>
<td scope="col"></td>
<td scope="col"></td>
</tr>
<tr>
<td scope="col">3</td>
<td scope="col">China</td>
<td scope="col">Wuhan</td>
<td scope="col">Hubei</td>
<td scope="col">22-Apr-2020</td>
<td scope="col">27-Apr-2020</td>
<td scope="col"></td>
<td scope="col"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header p-2">
Ticket Info
</div>
<div class="card-body">
<div class="form-row">
<div class="col-12 p-0 pb-2">
<div class="row mr-0 ml-0">
<div class="col-12 col-sm-12 pl-0">
<label class="label-input" for="business-trip-category">Airplane Ticket</label>
<div class="txt-value">Yes</div>
</div>
</div>
<div class="row mr-0 ml-0 mt-2">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" nowrap="nowrap">No</th>
<th scope="col" nowrap="nowrap">Airline</th>
<th scope="col" nowrap="nowrap">Class</th>
<th scope="col" nowrap="nowrap">From Country</th>
<th scope="col" nowrap="nowrap">From Airport</th>
<th scope="col" nowrap="nowrap">To Country</th>
<th scope="col" nowrap="nowrap">To Airport</th>
<th scope="col" nowrap="nowrap">Depart</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col" nowrap="nowrap">1</td>
<td scope="col" nowrap="nowrap">Sriwijaya Air</td>
<td scope="col" nowrap="nowrap">Business</td>
<td scope="col" nowrap="nowrap">Indonesia</td>
<td scope="col" nowrap="nowrap">Pondok Cabe</td>
<td scope="col" nowrap="nowrap">Wuhan</td>
<td scope="col" nowrap="nowrap">Hubei Intl. Airport</td>
<td scope="col" nowrap="nowrap">21-Apr-2020 10:32</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row mr-0 ml-0 mt-2">
<div class="col-12 col-sm-12 pl-0">
<label class="label-input" for="business-trip-category">Land Transport</label>
<div class="txt-value">Taxi</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header p-2">
Hotel Info
</div>
<div class="card-body">
<div class="form-row">
<div class="col-12 p-0 pb-2">
<div class="row mr-0 ml-0">
<div class="col-12 col-sm-12 pl-0">
<label class="label-input" for="business-trip-category">Hotel</label>
<div class="txt-value">Yes</div>
</div>
</div>
<div class="row mr-0 ml-0 mt-2">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" nowrap="nowrap">No</th>
<th scope="col" nowrap="nowrap">Hotel Name</th>
<th scope="col" nowrap="nowrap">Room Info</th>
<th scope="col" nowrap="nowrap">City Place</th>
<th scope="col" nowrap="nowrap">Standar</th>
<th scope="col" nowrap="nowrap">Check In</th>
<th scope="col" nowrap="nowrap">Check Out</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col">1</td>
<td scope="col" nowrap="nowrap">Novotel Hubei</td>
<td scope="col" nowrap="nowrap">312</td>
<td scope="col" nowrap="nowrap">Hubei</td>
<td scope="col" nowrap="nowrap">***</td>
<td scope="col" nowrap="nowrap">22-Apr-2020</td>
<td scope="col" nowrap="nowrap">27-Apr-2020</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header p-2">
Travel Allowance
</div>
<div class="card-body">
<div class="row mr-0 ml-0 mt-2">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Destination</th>
<th scope="col">Allowance</th>
<th scope="col">Currency</th>
<th scope="col">Amount</th>
<th scope="col">Remarks</th>
<th scope="col">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col">1</td>
<td scope="col">Wuhan</td>
<td scope="col">All In</td>
<td scope="col">Yuan</td>
<td scope="col">10.000</td>
<td scope="col"></td>
<td scope="col">No</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header p-2">
Itinerary
</div>
<div class="card-body">
<div class="row mr-0 ml-0 mt-2">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Destination</th>
<th scope="col">Activity</th>
<th scope="col">Start</th>
<th scope="col">Finish</th>
<th scope="col">Place</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col" nowrap="nowrap">1</td>
<td scope="col" nowrap="nowrap">Umbrella Inc.</td>
<td scope="col" nowrap="nowrap">Launch Corona Virus</td>
<td scope="col" nowrap="nowrap">22-Apr-2020</td>
<td scope="col" nowrap="nowrap">27-Apr-2020</td>
<td scope="col" nowrap="nowrap"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>