????
Your IP : 216.73.216.58
<% layout('./layouts/layout.eta') %>
<div class="content">
<div class="page-inner">
<div class="page-header">
<h4 class="page-title">Yêu cầu tài liệu</h4>
<ul class="breadcrumbs">
<li class="nav-home"><a href="/"><i class="flaticon-home"></i></a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item">Yêu cầu tài liệu</li>
</ul>
</div>
<div id="req-doc-tab" class="animated">
<div class="card">
<div class="card-header bg-primary">
<div class="card-title text-white">Danh sách văn bản yêu cầu</div>
</div>
<div class="card-body">
<table id="req-content" class="table table-hover table-bordered table-striped w-100 table-head-bg-secondary">
<thead>
<tr>
<!-- <th>STT</th> -->
<th>Ký hiệu</th>
<th style="min-width: 300px">Trích yếu</th>
<th>Ngày ban hành</th>
<th>Số trang</th>
<th>Sao lưu</th>
<th>Chứng thực</th>
<th style="width: 200px">Giá cả</th>
<th style="width: 200px">Ghi chú</th>
<th>Xóa</th>
</tr>
</thead>
<tbody style="display:table-row-group"></tbody>
<tfoot>
<tr>
<th colspan="5"></th>
<th id="totalPrice" class="text-right"></th>
<th colspan="2"></th>
</tr>
</tfoot>
</table>
<div class="d-flex justify-content-end">
<div id="cart-pager"></div>
</div>
</div>
<div class="card-footer">
<div class="d-flex justify-content-end">
<button id="next-btn" class="btn btn-primary">
Tiếp <span class="btn-label"><i class="fas fa-arrow-alt-circle-right"></i></span>
</button>
</div>
</div>
</div>
</div>
<div id="req-info-tab" class="collapse animated">
<div class="row justify-content-center">
<div class="col-xl-4 col-lg-6 col-sm-8">
<div class="card mx-auto">
<div class="card-header bg-primary">
<div class="card-title text-white">Thông tin người yêu cầu</div>
</div>
<div class="card-body" id="req-check-card" data-bind="invisible:idnumber">
<span class="text-muted font-italic">* Nhập số CMND, hộ chiếu dùng để gửi yêu cầu</span>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="idnumber" data-bind="value:idcheck">
<div class="input-group-append">
<button class="btn btn-primary btn-sm" data-bind="events:{click:checkInfo}">
<span class="btn-label"><i class="fas fa-spinner fa-spin collapse"></i></span> Kiểm tra
</button>
</div>
</div>
</div>
</div>
<form id="req-info">
<div class="card-body" id="req-info-card" data-bind="visible:idnumber">
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Họ và tên</label>
<div class="col-sm-8">
<input type="hidden">
<input type="text" class="form-control input-full" name="fullname"
data-bind="value:info.FullName,readonly:info.IdNumber" title="Vui lòng nhập họ và tên" required>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Số CMND, hộ chiếu</label>
<div class="input-group col-sm-8">
<input type="text" class="form-control" name="idnumber" data-bind="value:idnumber"
title="Số CMND hoặc hộ chiếu không được để trống" readonly required>
<div class="input-group-append">
<button type="button" class="btn btn-sm btn-warning"
data-bind="invisible:info.login,events:{click:changeId}">Thay đổi</button>
</div>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Ngày sinh</label>
<div class="col-sm-8">
<input id="birthday" type="text" class="form-control" name="birthday" data-role="datepicker"
data-format="dd/MM/yyyy" data-culture="vi-VN" data-bind="value:info.Birthday" required>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Số điện thoại</label>
<div class="col-sm-8">
<input type="text" class="form-control input-full" name="phone"
title="Cần nhập số điện thoại liên hệ" required>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Địa chỉ</label>
<div class="col-sm-8">
<input type="text" class="form-control input-full" name="address">
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Email</label>
<div class="col-sm-8">
<input type="email" class="form-control input-full" name="email"
title="Email nhập không đúng định dạng">
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Cơ quan công tác</label>
<div class="col-sm-8">
<input type="text" class="form-control input-full" name="organ">
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Mục đích sử dụng</label>
<div class="col-sm-8">
<textarea rows="2" class="form-control input-full" name="uses"></textarea>
</div>
</div>
</div>
<div class="card-footer">
<div class="form-group form-inline justify-content-between">
<button type="button" id="prev-btn" class="btn btn-secondary">
<span class="btn-label"><i class="fas fa-arrow-alt-circle-left"></i></span> Quay lại
</button>
<button type="submit" class="btn btn-primary">Gửi yêu cầu</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="cart-item" type="text/x-kendo-template">
<tr>
<td class="text-center">#:code#</td>
<td class="text-justify">#:subject#</td>
<td class="text-center">#:kendo.parseDate(issuedDate) ? kendo.toString(kendo.parseDate(issuedDate), 'dd/MM/yyyy') : ''#</td>
<td class="text-center">#:pageAmount#</td>
<td class="text-center">#:copiedNum#</td>
<td class="text-center">#:certifiedNum#</td>
<td class="text-right">#:kendo.toString(price, 'n0')# đồng</td>
<td>#:desc || ''#</td>
<td class="text-center btn-group">
<button title="Sửa" class="btn btn-xs btn-icon btn-warning k-edit-button"><i class="fas fa-pencil-alt"></i></button>
<button title="Xóa khỏi giỏ hàng" class="btn btn-xs btn-icon btn-danger k-delete-button"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</script>
<script id="cart-item-edit" type="text/x-kendo-template">
<tr>
<td class="text-center">#:code#</td>
<td class="text-justify">#:subject#</td>
<td class="text-center">#:kendo.parseDate(issuedDate) ? kendo.toString(kendo.parseDate(issuedDate), 'dd/MM/yyyy') : ''#</td>
<td class="text-center">#:pageAmount#</td>
<td><input type="number" data-role="numerictextbox" data-format="n0" data-min="0" data-bind="value:copiedNum"></td>
<td><input type="number" data-role="numerictextbox" data-format="n0" data-min="0" data-bind="value:certifiedNum"></td>
<td class="text-right">#:kendo.toString(price, 'n0')# đồng</td>
<td><input type="text" class="form-control" data-bind="value:desc"></td>
<td class="text-center btn-group">
<button title="Cập nhật" class="btn btn-xs btn-icon btn-success k-update-button"><i class="fas fa-check"></i></button>
<button title="Hủy thay đổi" class="btn btn-xs btn-icon btn-danger k-cancel-button"><i class="fas fa-ban"></i></button>
</td>
</tr>
</script>
<script>
$(function () {
// Thông tin yêu cầu
var reqVM = kendo.observable({
info: {},
idcheck: null,
idnumber: null,
checkInfo: function (e) {
var $this = this;
$('#req-check-card .input-group .fa-spin').removeClass('collapse');
$.ajax({
url: '/cart/check',
type: 'POST',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: { idnumber: $this.get('idcheck') },
success: function (data, text, jqXHR) {
$this.set('info', data || {});
$this.set('idnumber', $this.get('info.IdNumber') || $this.get('idcheck'))
},
error: function (jqXHR, text, err) { },
complete: function (jqXHR, text) {
setTimeout(function () {
$('#req-check-card .input-group .fa-spin').addClass('collapse');
}, 1000)
}
})
},
changeId: function (e) {
this.set('idnumber', null)
}
})
kendo.bind($('#req-info-tab'), reqVM);
// Chi tiết văn bản trong giỏ hàng
var cartList = $('#req-content tbody').kendoListView({
dataSource: {
transport: {
read: function (opts) {
let cart = localStorage.getItem('cart');
opts.success(cart ? JSON.parse(localStorage.getItem('cart')) : [])
},
update: function (opts) {
var prices = JSON.parse(localStorage.getItem('reqPrices'));
var item = opts.data;
item['price'] = (item['copiedNum'] + item['certifiedNum']) * item['pageAmount'] * prices['SL']['Price'] + item['certifiedNum'] * prices['CT']['Price'];
cartList.dataSource.pushUpdate(item);
opts.success();
},
destroy: function (opts) {
var item = opts.data;
cartList.dataSource.pushDestroy(item);
opts.success();
}
},
pageSize: 5,
schema: {
model: {
id: 'docId',
fields: {
docId: 'docId',
copiedNum: { type: 'number' },
certifiedNum: { type: 'number' },
desc: { type: 'string' }
}
}
},
change: function (e) {
var data = this.data().toJSON();
localStorage.setItem('cart', JSON.stringify(data));
populateCart();
}
},
template: kendo.template($("#cart-item").html()),
editTemplate: kendo.template($("#cart-item-edit").html()),
remove: function (e) {
e.preventDefault();
Swal.fire({
title: 'Xác nhận',
text: `Bạn có muốn xóa văn bản khỏi giỏ hàng`,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#cd201f',
cancelButtonColor: '#467fcf',
confirmButtonText: 'Xóa',
cancelButtonText: 'Hủy'
}).then(function (result) {
if (result.value) {
cartList.dataSource.remove(e.model);
cartList.dataSource.sync();
}
})
}
}).data('kendoListView');
$('#cart-pager').kendoPager({
dataSource: cartList.dataSource
})
// Chuyển đổi giữa các tab
$('#next-btn').on('click', function (e) {
var reqData = cartList.dataSource.data();
if (reqData.length) {
reqVM.checkInfo()
$('#req-doc-tab').addClass('collapse');
$('#req-info-tab').removeClass('collapse').addClass('fadeIn');
} else { Swal.fire('', 'Không có văn bản nào được yêu cầu', 'error') }
});
$('#prev-btn').on('click', function (e) {
$('#req-info-tab').addClass('collapse');
$('#req-doc-tab').removeClass('collapse').addClass('fadeIn');
});
// Form yêu cầu modal
$("#req-info").validate({
rules: {
reqInfoId: {
pattern: /^([A-Z]?[0-9]){7,12}$/
}
},
messages: {
reqInfoName: {
required: "Vui lòng nhập họ và tên",
},
reqInfoId: {
required: "Số thẻ căn cước, CMND không được để trống",
pattern: "Từ 7 đến 12 ký tự số, chỉ cho phép ký tự đầu tiên là chữ cái viết hoa"
}
},
validClass: "success",
highlight: function (element) {
$(element).closest(".form-group").removeClass("has-primary").addClass("has-error");
},
unhighlight: function (element) {
$(element).closest(".form-group").addClass("has-primary").removeClass("has-error");
},
submitHandler: function (domForm) {
var formData = $(domForm).serializeArray();
formData.push({ name: 'cart', value: localStorage.getItem('cart') })
if ($('#req-info-card').is(':visible')) {
$.ajax({
method: 'POST',
url: '/cart/checkout',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: formData,
success: function (data, textStatus, jqXHR) {
Swal.fire('', 'Tạo yêu cầu tài liệu thành công', 'success')
.then(function (result) {
localStorage.removeItem('cart');
location.replace(data.redirect || '/')
});
},
error: function (jqXHR, textStatus, err) {
Swal.fire('', jqXHR.responseText, 'error')
}
});
} else { Swal.fire('', 'Vui lòng điền thông tin người yêu cầu', 'error') }
}
});
// ngày sinh
$('#birthday').inputmask('datetime', { inputFormat: "dd/mm/yyyy" });
$('#birthday').bind('focus', function (e) { $(this).data('kendoDatePicker').open() });
// input number
$("input[type='number']").spinner({
decimals: 0,
min: 0
});
})
</script>