<!-- 发票查看 -->
<!-- select -->
<link rel="stylesheet"
	href="/themes/clientarea/default/assets/libs/bootstrap-select/css/bootstrap-select.min.css?v={$Ver}">
<script src="/themes/clientarea/default/assets/libs/bootstrap-select/js/bootstrap-select.min.js?v={$Ver}"></script>
{include file="includes/paymodal"}

{if $Think.get.action == 'check'}
<div class="card">
	<div class="card-body">
		<div class="container-fluid">
			<div class="row mb-3">
				<div class="col-12">
					<label class="text-black-50">{$Lang.issue_type}：</label>
					<span class="text-black">{$Invoicedetail.voucher.issue_type_zh}</span>
				</div>
				<div class="col-xs-12 col-lg-6">
					<label class="text-black-50">{$Lang.header_information}：</label>
					<span class="text-black">{$Invoicedetail.voucher.title}</span>
				</div>
				<div class="col-xs-12 col-lg-6">
					<label class="text-black-50">{$Lang.express_information}：</label>
					<span class="text-black">{$Invoicedetail.voucher.name}</span>
				</div>
				<div class="col-12">
					<label class="text-black-50">{$Lang.mailing_address}：</label>
					<span
						class="text-black">{$Invoicedetail.voucher.province}{$Invoicedetail.voucher.city}{$Invoicedetail.voucher.region}{$Invoicedetail.voucher.detail}</span>
				</div>
			</div>
		</div>
		<table class="table mb-0">
			<thead>
				<tr>
					<th>{$Lang.product_name}</th>
					<th>{$Lang.amount_money}</th>
					<th>{$Lang.tax_rate}</th>
					<th>{$Lang.tax_amount}</th>
				</tr>
			</thead>
			<tbody>
				{if $Invoicedetail.invoices}
				{foreach $Invoicedetail.invoices as $list}
				<tr>
					<td>
						{foreach $list.items as $sublist}
						<pre>{$sublist.description}</pre>
						{/foreach}
					</td>
					<td>{$Currency.prefix}{$list.subtotal}</td>
					<td>{$list.taxed}</td>
					<td>{$Currency.prefix}{$list.taxed_amount}</td>
				</tr>
				{/foreach}
				{else}
				<tr>
					<td colspan="8">
						<div class="no-data">{$Lang.nothing}</div>
					</td>
				</tr>
				{/if}

			</tbody>
		</table>
		<div>{$Lang.deduction_invoice}：{$Currency.prefix}{$Invoicedetail.voucher_amount} +
			{$Lang.invoice_mailing_express_fee}{$Currency.prefix}{$Invoicedetail.voucher.price}</div>
	</div>
</div>

{elseif $Think.get.action == 'invoiceapply'}

<!-- 开具发票 -->
{if $Think.get.type == 'issue'}

{if $ErrorMsg}
{include file="error/alert" value="$ErrorMsg"}
{/if}

{if $SuccessMsg}
{include file="error/notifications" value="$SuccessMsg" url="invoicelists"}
{/if}

<script type="text/javascript">
	$('.selectpicker').selectpicker();
	$(function () {
		setIssueType()
		$('input[name="type"]').on('change', function () {
			setIssueType()
		})
	});
	// 不同开具类型 展示不同字段
	function setIssueType() {
		var activeRadio = $("input[name='type']:checked").val()
		if (activeRadio == 'person') {
			$('#personTitle').show()
			$('#companyTitle').hide()
		} else if (activeRadio == 'company') {
			$('#personTitle').hide()
			$('#companyTitle').show()
		}
	}
</script>
<div class="card">
	<div class="card-body">
		<form method="post" class="needs-validation" novalidate>
			<div class="form-group row mb-4">
				<label for="horizontal-firstname-input" class="col-sm-1 col-form-label">{$Lang.issue_type}</label>
				<div class="col-sm-11">
					<div class="custom-control custom-radio">
						<span class="mr-5">
							<input class="custom-control-input" type="radio" id="personRadio" name="type" value="person">
							<label class="custom-control-label" for="personRadio">{$Lang.personal}</label>
						</span>
						<span>
							<input class="custom-control-input" type="radio" id="companyRadio" name="type" value="company" checked>
							<label class="custom-control-label" for="companyRadio">{$Lang.company}</label>
						</span>
					</div>
				</div>
			</div>
			<div class="form-group row mb-4">
				<label for="horizontal-email-input" class="col-sm-1 col-form-label">{$Lang.header_information}</label>
				<div class="col-sm-5">
					<select id="personTitle" class="form-control select2 select2-hidden-accessible" data-select2-id="1"
						tabindex="-1" aria-hidden="true">
						{foreach $Issuevoucher.title.person as $list}
						<option value="CA" data-persontitleid="{$list.id}">{$list.title}</option>
						{/foreach}
					</select>
					<select id="companyTitle" class="form-control select2 select2-hidden-accessible" data-select2-id="1"
						tabindex="-1" aria-hidden="true">
						{foreach $Issuevoucher.title.company as $list}
						<option value="CA" data-companytitleid="{$list.id}">{$list.title}</option>
						{/foreach}
					</select>
				</div>
				<label for="horizontal-email-input" class="col-sm-1 col-form-label">{$Lang.express_information}</label>
				<div class="col-sm-5">
					<select class="form-control select2 select2-hidden-accessible" id="courierOptions" data-select2-id="1"
						tabindex="-1" aria-hidden="true">
						{foreach $Issuevoucher.express as $list}
						<option value="{$list.price}" data-courierid="{$list.id}">{$list.name}({$Lang.postage}{$list.price})
						</option>
						{/foreach}
					</select>
				</div>
			</div>
			<div class="form-group row mb-4">
				<label for="horizontal-password-input" class="col-sm-1 col-form-label">{$Lang.mailing_address}</label>
				<div class="col-sm-11">
					<select class="form-control select2 select2-hidden-accessible selectpicker" id="mailingAddress"
						data-select2-id="1" tabindex="-1" aria-hidden="true">
						{foreach $Issuevoucher.post as $list}
						<option value="CA" selected="{if $list.default == '1'}true{else}false{/if}" data-addressid="{$list.id}"
							data-content="{if $list.default == '1'}<i class='fas fa-star text-warning mr-2'></i>{else}<i class='fas fa-star text-warning mr-2' style='opacity: 0;'></i>{/if}{$list.province}{$list.city}{$list.region}">
							{$list.province}{$list.city}{$list.region}
						</option>
						{/foreach}
					</select>
				</div>
			</div>

			<div class="form-group row justify-content-end">
				<div class="col-sm-12" style="overflow: auto;">
					<table class="table mb-0">
						<thead>
							<tr>
								<th>{$Lang.product_name}</th>
								<th>{$Lang.amount_money}</th>
								<th>{$Lang.tax_rate}</th>
								<th>{$Lang.tax_amount}</th>
							</tr>
						</thead>
						<tbody>
							{if $Issuevoucher.invoices}
							{foreach $Issuevoucher.invoices as $list}
							<tr>
								<td>
									{foreach $list.items as $sublist}
									<pre>{$sublist.description}</pre>
									{/foreach}
								</td>
								<td>{$Currency.prefix}{$list.subtotal}</td>
								<td>{$list.taxed}</td>
								<td>{$Currency.prefix}{$list.taxed_amount}</td>
							</tr>
							{/foreach}
							{else}
							<tr>
								<td colspan="8">
									<div class="no-data">{$Lang.nothing}</div>
								</td>
							</tr>
							{/if}

						</tbody>
					</table>
				</div>
			</div>
			<div class="form-group row justify-content-between px-4">
				<div>{$Lang.deduction_invoice}：{$Currency.prefix}{$Issuevoucher.voucher_amount} +
					{$Lang.invoice_mailing_express_fee}<span id="courierFees"></span>
				</div>

			</div>
			<div>
				<!-- 跳账单页进行支付 -->
				<button type="button" class="btn btn-primary w-md" onclick="confirmPayment()">{$Lang.confirm_payment}</button>
				<button type="button" class="btn border w-md" onclick="goBack()">{$Lang.return}</button>
			</div>
		</form>
	</div>
</div>
<script>
	// 返回
	function goBack() {
		location.replace('/invoicelist?action=invoiceapply')
	}
	// 动态修改快递非哟领
	$(document).ready(function () {
		$('#courierFees').text($("#courierOptions option:selected").val());

		$('#courierOptions').on('change', function () {
			$('#courierFees').text($("#courierOptions option:selected").val());
		});
	});
//防抖

function debounce(fn, wait) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments) // 把参数传进去
}, wait);
}
}
	// 确认支付
	const confirmPayment = debounce (function () {

	// 表单验证
	var activeRadio = $("input[name='type']:checked").val()
	var personTitle = document.getElementById('personTitle')
	var companyTitle = document.getElementById('companyTitle')
	var courierOptions = document.getElementById('courierOptions')
	var mailingAddress = document.getElementById('mailingAddress')
	if (activeRadio === 'person') {
	if (personTitle.value == '') {
	personTitle.classList.remove("is-valid"); //清除合法状态
	personTitle.classList.add("is-invalid"); //添加非法状态
	return
	} else {
	personTitle.classList.remove("is-invalid");
	personTitle.classList.add("is-valid");
	}
	} else if (activeRadio === 'company') {
	if (companyTitle.value == '') {
	companyTitle.classList.remove("is-valid"); //清除合法状态
	companyTitle.classList.add("is-invalid"); //添加非法状态
	return
	} else {
	companyTitle.classList.remove("is-invalid");
	companyTitle.classList.add("is-valid");
	}
	}
	if (courierOptions.value == '') {
	courierOptions.classList.remove("is-valid"); //清除合法状态
	courierOptions.classList.add("is-invalid"); //添加非法状态
	return
	} else {
	courierOptions.classList.remove("is-invalid");
	courierOptions.classList.add("is-valid");
	}
	if (mailingAddress.value == '') {
	mailingAddress.classList.remove("is-valid"); //清除合法状态
	mailingAddress.classList.add("is-invalid"); //添加非法状态
	return
	} else {
	mailingAddress.classList.remove("is-invalid");
	mailingAddress.classList.add("is-valid");
	}

	const queryObj = {
	express_id: $("#courierOptions option:selected").attr("data-courierid"),
	invoice_ids: {:json_encode($Think.get.invoice_ids)
	},
	post_id: $("#mailingAddress option:selected").attr("data-addressid"),
	type: $("input[name='type']:checked").val(),
	type_id: '',
	}
	if (queryObj.type == 'company') {
	queryObj.type_id = $('#companyTitle option:selected').attr('data-companytitleid')
	} else if (queryObj.type == 'person') {
	queryObj.type_id = $('#personTitle option:selected').attr('data-persontitleid')
	}

	$.ajax({
	type: "post",
	url: '' + '/voucher/issuevoucher',
	data: JSON.stringify(queryObj),
	dataType: 'JSON',
	headers: {
	'Content-Type': 'application/json;charset=UTF-8',
	},
	success: function (data) {

	if (data.status === 1001) {
	toastr.success(data.msg);
	location.replace('/invoicelist?action=invoiceapply')
	} else {

	location.replace(`/viewbilling?id=${data.data.invoice_id}`)
	}
	}
	});
	},1000)
</script>

<!-- 发票申请列表 -->
{else}
<script>
	$(function () {
		// 关键字搜索
		$('#searchInp').val('{$Think.get.keywords}')

		$('#searchInp').on('keydown', function (e) {
			if (e.keyCode == 13) {
				location.href = 'invoicelist?action=invoiceapply&keywords=' + $('#searchInp').val() +
					'&sort={$Think.get.sort}&orderby={$Think.get.orderby}&page={$Think.get.page}&limit={$Think.get.limit}'
			}
		})
		$('#searchIcon').on('click', function () {
			location.href = 'invoicelist?action=invoiceapply&keywords=' + $('#searchInp').val() +
				'&sort={$Think.get.sort}&orderby={$Think.get.orderby}&page={$Think.get.page}&limit={$Think.get.limit}'
		});

		// 排序
		$('.bg-light th:not(.checkbox)').on('click', function () {
			var sort = '{$Think.get.sort}'
			location.href = 'invoicelist?action=invoiceapply&keywords={$Think.get.keywords}&sort=' + (sort == 'desc' ?
					'asc' : 'desc') + '&orderby=' + $(this).attr('prop') +
				'&page={$Think.get.page}&limit={$Think.get.limit}'
		})

		// 多选开具发票
		var headCheckbox = $('input[name="invoiceCheckHead"]')
		var rowCheckbox = $('input[name="invoiceCheckRow"]');
		// [...rowCheckbox].forEach(item => {
		// 	
		// 	$(item).removeAttr('checked')
		// })
		var invoice_ids = []
		headCheckbox.on('change', function () {
			if (headCheckbox.is(':checked')) {
				rowCheckbox.attr('checked', true)
			} else {
				rowCheckbox.attr('checked', false)
			}

			[...rowCheckbox].forEach(item => {
				invoice_ids.push(item.value)
			})
			// 

		});

		rowCheckbox.on('change', function () {
			if ($(this).is(':checked')) {
				invoice_ids.push($(this)[0].value)
			}
		});

		$('#issueBtn').on('click', function () {
			invoice_ids = []
			$('.row-checkbox:checked').each(function () {
				invoice_ids.push($(this).val())
			})
			if (invoice_ids.length > 0) {
				var params = ''
				invoice_ids.forEach(item => {
					params += '&invoice_ids[]=' + item
				})
				location.href = 'invoicelist?action=invoiceapply&type=issue' + params
			}
		});


	})
</script>
{include file="includes/tablestyle"}
<div class="card">
	<div class="card-body">
		<div class="table-container">
			<div class="table-header">
				<div class="table-filter">
					<div class="row">
						<div class="col">
						</div>
					</div>
				</div>
				<div class="table-search">
					<div class="row justify-content-end">
						<div class="col-sm-6">
							<div class="search-box">
								<div class="position-relative">
									<input type="text" class="form-control" id="searchInp" placeholder="{$Lang.search_by_keyword}">
									<i class="bx bx-search-alt search-icon" id="searchIcon"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="table-responsive">
				<table class="table tablelist">
					<colgroup>
						<col>
						<col width="15%">
						<col>
						<col>
						<col>
						<col width="10%">
					</colgroup>
					<thead class="bg-light">
						<tr>
							<th class="checkbox"><input type="checkbox" name="invoiceCheckHead" /></th>
							<th class="pointer" prop="id">
								<span>{$Lang.bill_no}</span>
								<span class="text-black-50 d-inline-flex flex-column justify-content-center ml-1 offset-3">
									<i class="bx bx-caret-up"></i>
									<i class="bx bx-caret-down"></i>
								</span>
							</th>
							<th class="pointer" prop="subtotal">
								<span>{$Lang.amount_money}</span>
								<span class="text-black-50 d-inline-flex flex-column justify-content-center ml-1 offset-3">
									<i class="bx bx-caret-up"></i>
									<i class="bx bx-caret-down"></i>
								</span>
							</th>
							<th class="pointer" prop="type">
								<span>{$Lang.type}</span>
								<span class="text-black-50 d-inline-flex flex-column justify-content-center ml-1 offset-3">
									<i class="bx bx-caret-up"></i>
									<i class="bx bx-caret-down"></i>
								</span>
							</th>
							<th class="pointer" prop="paid_time">
								<span>{$Lang.payment_time}</span>
								<span class="text-black-50 d-inline-flex flex-column justify-content-center ml-1 offset-3">
									<i class="bx bx-caret-up"></i>
									<i class="bx bx-caret-down"></i>
								</span>
							</th>
							<th>{$Lang.operating}</th>
						</tr>
					</thead>
					<tbody>
						{if $Invoiceapply}
						{foreach $Invoiceapply as $list}
						<tr>
							<td><input class="row-checkbox" type="checkbox" name="invoiceCheckRow" value="{$list.id}" /></td>
							<td><span class="badge badge-light"># {$list.id}</span></td>
							<td>{$Currency.prefix}{$list.subtotal}</td>
							<td>{$list.type_zh}</td>
							<td>{if $list.paid_time}{$list.paid_time|date="Y-m-d H:i"}{else}-{/if}</td>
							<td>
								<a href="invoicelist?action=invoiceapply&type=issue&invoice_ids={$list.id}"
									class="text-primary mr-2">{$Lang.invoice}</a>
							</td>
						</tr>
						{/foreach}
						{else}
						<tr>
							<td colspan="12">
								<div class="no-data">{$Lang.nothing}</div>
							</td>
						</tr>
						{/if}
					</tbody>
				</table>
				<button class="btn btn-primary btn-sm" id="issueBtn">{$Lang.invoice}</button>
			</div>
			<!-- 表单底部调用开始 -->
			{include file="includes/tablefooter" url="invoicelist"}
		</div>
	</div>
</div>

{/if}

<!-- 发票列表 -->
{else}

{include file="includes/tablestyle"}
<script>
	$(function () {
		// 排序
		var status = '{$Think.get.status}'
		$('.bg-light th').on('click', function () {
			var sort = '{$Think.get.sort}'
			location.href = 'invoicelist?sort=' + (sort == 'desc' ? 'asc' : 'desc') + '&orderby=' + $(this).attr(
				'prop') + '&page={$Think.get.page}&limit={$Think.get.limit}'
		})
		//排序样式
		changeStyle()

		function changeStyle() {
			$('.bg-light th.pointer').children().children().css('color', 'rgba(0, 0, 0, 0.1)')
			var sort = '{$Think.get.sort}'
			let orderby = '{$Think.get.orderby}'
			let index,
				n
			if (orderby === 'create_time') {
				n = 0
			} else if (orderby === 'amount') {
				n = 1
			} else if (orderby === 'status') {
				n = 2
			}
			if (sort === 'desc') {
				index = 1 + 2 * n
			} else if (sort === 'asc') {
				index = 0 + 2 * n
			}
			$('.bg-light th.pointer').children().children().eq(index).css('color', 'rgba(0, 0, 0, 0.8)')
		}
	})

	function payamount(invoiceid) {
		var url = '' + '/pay?action=billing';
		$.ajax({
			type: "POST",
			data: {
				invoiceid: invoiceid
			},
			url: url,
			success: function (data) {
	
				$("#pay .modal-body").html(data);
				$('.pay').modal('show');
			}
		})
	}
</script>
<div class="card">
	<div class="card-body">
		<a href="invoicelist?action=invoiceapply">
			<button type="button"
				class="btn btn-success btn-sm waves-effect waves-light mb-2">{$Lang.invoice_application}</button>
		</a>
		<div class="table-container">

			<div class="table-responsive">
				<table class="table tablelist">
					<colgroup>
						<col>
						<col>
						<col>
						<col>
						<col>
						<col>
						<col width="15%">
					</colgroup>
					<thead class="bg-light">
						<tr>
							<th class="pointer" prop="create_time">
								<span>{$Lang.application_time}</span>
								<span class="text-black-50 d-inline-flex flex-column justify-content-center ml-1 offset-3">
									<i class="bx bx-caret-up"></i>
									<i class="bx bx-caret-down"></i>
								</span>
							</th>
							<th>
								<span>{$Lang.invoice_title}</span>
							</th>
							<th class="pointer" prop="amount">
								<span>{$Lang.total_invoice_amount}</span>
								<span class="text-black-50 d-inline-flex flex-column justify-content-center ml-1 offset-3">
									<i class="bx bx-caret-up"></i>
									<i class="bx bx-caret-down"></i>
								</span>
							</th>
							<th class="pointer" prop="status">
								<span>{$Lang.invoice_status}</span>
								<span class="text-black-50 d-inline-flex flex-column justify-content-center ml-1 offset-3">
									<i class="bx bx-caret-up"></i>
									<i class="bx bx-caret-down"></i>
								</span>
							</th>
							<th>{$Lang.mailing_address}</th>
							<th>
								<span>{$Lang.express}</span>
							</th>
							<th>{$Lang.operating}</th>
						</tr>
					</thead>
					<tbody>
						{if $Invoicelist}
						{foreach $Invoicelist as $list}
						<tr>
							<td>{if $list.create_time}{$list.create_time|date="Y-m-d H:i"}{else}-{/if}</td>
							<td>{$list.title}</td>
							<td>
								{if $list.invoices_subtotal}
								{$Currency.prefix}{$list.invoices_subtotal}{$Currency.suffix}
								{else}-
								{/if}
							</td>
							<td>{$list.status_zh}</td>
							<td>{$list.province}{$list.city}{$list.region}{$list.detail}</td>
							<td>{$list.name}</td>
							<td>
								<a href="invoicelist?action=check&id={$list.id}" class="text-success mr-2"><i class="fas fa-eye"></i>
									{$Lang.see}</a>
								{if $list.status == 'Unpaid'}
								<a href="javascript: payamount({$list.invoice_id});" class="text-primary mr-2"><i
										class="fas fa-check-circle"></i> {$Lang.payment}</a>
								{/if}
							</td>
						</tr>
						{/foreach}
						{else}
						<tr>
							<td colspan="12">
								<div class="no-data">{$Lang.nothing}</div>
							</td>
						</tr>
						{/if}
					</tbody>
				</table>
			</div>
			<!-- 表单底部调用开始 -->
			{include file="includes/tablefooter" url="invoicelist"}
		</div>
	</div>
</div>


{/if}