@version(2)
@load('css/shop.css')

<div class="shp shp-narrow">
	<div class="shp-top"><h2 class="shp-title">{{ $lang->shop_my_orders }}</h2></div>

	@if ($is_member)
		<div class="shp-summary" style="margin-bottom:16px">
			@if (!empty($my_grade))
			<div class="shp-summary-row"><span>{{ $lang->shop_grade }}</span><span><a href="{{ getUrl('', 'mid', $mid, 'act', 'dispCommerceGrades') }}"><strong class="shp-accent">{{ $my_grade->title }}</strong></a> <small style="color:#6b7684">{{ sprintf($lang->shop_grade_total, shop_money_base($my_grade->total_spend)) }}</small></span></div>
			@endif
			<div class="shp-summary-row is-total"><span>{{ $lang->shop_credit_balance }}</span><span>{{ shop_money_base($credit_balance) }}</span></div>
		</div>

		@php
		$shp_status_counts = [];
		foreach ($orders ?? [] as $shp_o)
		{
			$shp_k = $shp_o->display_status ?? $shp_o->status;
			$shp_status_counts[$shp_k] = ($shp_status_counts[$shp_k] ?? 0) + 1;
		}
		@endphp

		<div class="shp-my-tabs" role="tablist">
			<button type="button" class="shp-my-tab is-on" role="tab" data-shp-tab="orders" aria-selected="true">{{ $lang->shop_tab_orders }} <small>{{ count($orders ?? []) }}</small></button>
			<button type="button" class="shp-my-tab" role="tab" data-shp-tab="credit" aria-selected="false">{{ $lang->shop_credit_history }}</button>
			<button type="button" class="shp-my-tab" role="tab" data-shp-tab="coupons" aria-selected="false">{{ $lang->shop_my_coupons }} <small>{{ count($my_coupons ?? []) }}</small></button>
		</div>

		<div class="shp-my-panel" id="shpMyPanel-orders" role="tabpanel">
		@if (empty($orders))
		<p class="shp-empty">{{ $lang->shop_no_orders }}</p>
		@else
		@if (count($shp_status_counts) > 1)
		<div class="shp-my-filter" role="group">
			<button type="button" class="is-on" data-shp-status="">{{ $lang->shop_filter_all }}<small>{{ count($orders) }}</small></button>
			@foreach ($shp_status_counts as $shp_sk => $shp_sn)
			<button type="button" data-shp-status="{{ $shp_sk }}">{{ $lang->{'shop_status_' . $shp_sk} ?? $shp_sk }}<small>{{ $shp_sn }}</small></button>
			@endforeach
		</div>
		@endif
		<table class="shp-table" id="shpMyOrders">
			<thead><tr><th>{{ $lang->shop_order_code }}</th><th>{{ $lang->shop_total }}</th><th>{{ $lang->shop_status }}</th><th></th></tr></thead>
			<tbody>
				@foreach ($orders as $o)
				@php $shp_ds = $o->display_status ?? $o->status; @endphp
				<tr data-shp-status="{{ $shp_ds }}">
					<td><strong>{{ $o->order_code }}</strong><br /><small style="color:#6b7684">{{ zdate($o->regdate, 'Y.m.d H:i') }}</small></td>
					<td>{{ shop_money_in($o->payment_price, $o->currency ?? 'KRW') }}</td>
					<td><span class="shp-st shp-st-{{ $shp_ds }}">{{ $lang->{'shop_status_' . $shp_ds} ?? $shp_ds }}</span></td>
					<td style="white-space:nowrap"><a href="{{ getUrl('', 'mid', $mid, 'act', 'dispCommerceOrderResult', 'code', $o->order_code) }}" style="color:#2677e3;font-weight:600">{{ $lang->shop_view }}</a></td>
				</tr>
				@if ($shp_ds === 'pending')
				<tr class="shp-pending-row" data-shp-status="{{ $shp_ds }}">
					<td colspan="4">
						<p class="shp-pending-msg">{{ !empty($o->pending_deadline) ? sprintf($lang->shop_pending_notice, zdate($o->pending_deadline, 'Y.m.d A g:i')) : $lang->shop_pending_notice_nodate }}</p>
						@if (!empty($o->resume_pay_url))
						<a class="shp-btn shp-btn-primary shp-btn-sm" href="{{ escape($o->resume_pay_url) }}">{{ $lang->shop_resume_pay }}</a>
						@else
						<span class="shp-pending-msg">{{ $lang->shop_pending_expired }}</span>
						@endif
						<form action="{{ getUrl('') }}" method="post" style="display:inline" onsubmit="return confirm('{{ $lang->shop_pending_cancel_ask }}')">
							<input type="hidden" name="module" value="commerce" />
							<input type="hidden" name="mid" value="{{ $mid }}" />
							<input type="hidden" name="act" value="procCommerceClaim" />
							<input type="hidden" name="order_code" value="{{ $o->order_code }}" />
							<button type="submit" class="shp-btn shp-btn-sm">{{ $lang->shop_cancel_order }}</button>
						</form>
					</td>
				</tr>
				@endif
				@endforeach
			</tbody>
		</table>
		<p class="shp-empty" id="shpMyOrdersNone" hidden>{{ $lang->shop_no_orders }}</p>
		@endif
		</div>

		<div class="shp-my-panel" id="shpMyPanel-credit" role="tabpanel" hidden>
		@if (empty($credit_logs))
		<p class="shp-empty">{{ $lang->shop_no_credit_logs }}</p>
		@else
		<table class="shp-table">
			<thead><tr><th>{{ $lang->shop_credit_date }}</th><th>{{ $lang->shop_credit_change }}</th><th>{{ $lang->shop_credit_balance }}</th><th>{{ $lang->shop_credit_type }}</th></tr></thead>
			<tbody>
				@foreach ($credit_logs as $cl)
				<tr>
					<td><small>{{ zdate($cl->regdate, 'Y.m.d H:i') }}</small></td>
					<td style="{{ $cl->amount >= 0 ? 'color:#2677e3' : 'color:#c0392b' }};font-weight:600">{{ $cl->amount >= 0 ? '+' : '-' }}{{ shop_money_base(abs((int)$cl->amount)) }}</td>
					<td>{{ shop_money_base((int)$cl->balance_after) }}</td>
					<td>{{ $lang->{'shop_credit_type_' . $cl->type} ?? $cl->type }}</td>
				</tr>
				@endforeach
			</tbody>
		</table>
		@endif
		</div>

		<div class="shp-my-panel" id="shpMyPanel-coupons" role="tabpanel" hidden>
		@if (!count($my_coupons ?? []))
		<p class="shp-empty">{{ $lang->shop_no_coupons }}</p>
		@else
		<ul class="shp-coupon-list">
			@foreach ($my_coupons as $shp_cp)
			<li>
				<strong>{{ $shp_cp->coupon->title }}</strong>
				<span class="shp-coupon-off">{{ shop_money_base((int)$shp_cp->discount) }}</span>
				@if (!empty($shp_cp->coupon->min_order))<small>{{ sprintf($lang->shop_coupon_min, shop_money_base((int)$shp_cp->coupon->min_order)) }}</small>@endif
				@if (!empty($shp_cp->coupon->use_end))<small>{{ zdate($shp_cp->coupon->use_end, 'Y.m.d') }} {{ $lang->shop_coupon_until }}</small>@endif
			</li>
			@endforeach
		</ul>
		@endif
		</div>

		<script>
		(function () {
			var tabs = document.querySelectorAll('.shp-my-tab');
			tabs.forEach(function (t) {
				t.addEventListener('click', function () {
					var name = t.getAttribute('data-shp-tab');
					tabs.forEach(function (x) { var on = x === t; x.classList.toggle('is-on', on); x.setAttribute('aria-selected', on ? 'true' : 'false'); });
					document.querySelectorAll('.shp-my-panel').forEach(function (p) { p.hidden = (p.id !== 'shpMyPanel-' + name); });
				});
			});
			var chips = document.querySelectorAll('.shp-my-filter [data-shp-status]');
			chips.forEach(function (c) {
				c.addEventListener('click', function () {
					var want = c.getAttribute('data-shp-status');
					chips.forEach(function (x) { x.classList.toggle('is-on', x === c); });
					var shown = 0;
					document.querySelectorAll('#shpMyOrders tbody tr').forEach(function (tr) {
						var on = !want || tr.getAttribute('data-shp-status') === want;
						tr.hidden = !on;
						if (on && !tr.classList.contains('shp-pending-row')) shown++;
					});
					var none = document.getElementById('shpMyOrdersNone');
					if (none) none.hidden = shown > 0;
				});
			});
		})();
		</script>

		<p class="shp-foot-links">
			<a href="{{ getUrl('', 'act', 'dispMemberModifyInfo') }}">{{ $lang->shop_edit_profile }}</a>
			<a href="{{ getUrl('', 'mid', $mid, 'act', 'dispCommerceList') }}">{{ $lang->shop_back_list }}</a>
		</p>
	@else
	<p class="shp-detail-summary">{{ $lang->shop_guest_lookup_help }}</p>
	<form action="{{ getUrl('') }}" method="post" class="shp-form">
		<input type="hidden" name="act" value="procCommerceGuestLookup" />
		<input type="hidden" name="mid" value="{{ $mid }}" />
		<fieldset>
			<div class="shp-row"><label>{{ $lang->shop_order_code }}</label><input type="text" name="order_code" required /></div>
			<div class="shp-row"><label>{{ $lang->shop_guest_password }}</label><input type="password" name="guest_password" required autocomplete="off" /></div>
			<button type="submit" class="shp-btn shp-btn-primary" style="width:100%">{{ $lang->shop_lookup }}</button>
		</fieldset>
	</form>

	<p class="shp-foot-links">
		<a href="{{ getUrl('', 'mid', $mid, 'act', 'dispCommerceList') }}">{{ $lang->shop_back_list }}</a>
	</p>
	@endif
</div>