@extends('tickets.layouts.admin_layout')

@section('title', 'Create Coupon - Loyaltiya Tickets')

@section('content')
	<div class="col-md-12">
		<div class="d-main-title">
			<h3><i class="fa-solid fa-tags me-3"></i>Create Coupon</h3>
		</div>
	</div>

	<div class="col-md-12">
		@if ($errors->any())
			<div class="alert alert-danger mt-4">
				<ul class="mb-0">
					@foreach ($errors->all() as $error)
						<li>{{ $error }}</li>
					@endforeach
				</ul>
			</div>
		@endif

		<form method="POST" action="{{ route('tickets.coupons.store') }}">
			@csrf

			<div class="main-card mt-4">
				<div class="bp-title p-4 border_bottom">
					<h4 class="m-0"><i class="fa-solid fa-circle-info me-3"></i>Details</h4>
				</div>
				<div class="p-4 main-form">
					<div class="row g-3">
						<div class="col-md-6">
							<label class="form-label fs-16">Coupon Code*</label>
							<input class="form-control h_50 text-uppercase" type="text" name="code" placeholder="e.g. SAVE20" value="{{ old('code') }}">
							<small class="text-muted">Not case-sensitive — always stored and matched in uppercase.</small>
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Restrict to Event</label>
							<select class="selectpicker" name="event_id" data-live-search="true" title="Applies to all events">
								<option value="">All events</option>
								@foreach ($events as $event)
									<option value="{{ $event->id }}" {{ old('event_id') == $event->id ? 'selected' : '' }}>{{ $event->name }}</option>
								@endforeach
							</select>
						</div>

						<div class="col-md-6">
							<label class="form-label fs-16">Discount Type*</label>
							<select class="selectpicker" name="type" id="coupon_type_select" title="Select discount type">
								<option value="percentage" {{ old('type') === 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
								<option value="fixed" {{ old('type') === 'fixed' ? 'selected' : '' }}>Fixed Amount</option>
							</select>
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Value*</label>
							<input class="form-control h_50" type="number" step="0.01" min="0.01" name="value" id="coupon_value_input" value="{{ old('value') }}">
							<small class="text-muted" id="coupon_value_hint">Percentage off the order total.</small>
						</div>

						<div class="col-md-6">
							<label class="form-label fs-16">Minimum Order Amount</label>
							<input class="form-control h_50" type="number" step="0.01" min="0" name="min_order_amount" placeholder="No minimum" value="{{ old('min_order_amount') }}">
						</div>
					</div>
				</div>
			</div>

			<div class="main-card mt-4">
				<div class="bp-title p-4 border_bottom">
					<h4 class="m-0"><i class="fa-solid fa-clock me-3"></i>Usage &amp; Validity</h4>
				</div>
				<div class="p-4 main-form">
					<div class="row g-3">
						<div class="col-md-12">
							<div class="d-flex align-items-start">
								<label class="btn-switch m-0 me-3">
									<input type="checkbox" id="uses_unlimited" {{ old('max_uses') ? '' : 'checked' }}>
									<span class="checkbox-slider"></span>
								</label>
								<label class="color-black mb-0">Unlimited uses</label>
							</div>
						</div>
						<div class="col-md-4 max-uses-field" style="display: {{ old('max_uses') ? 'block' : 'none' }};">
							<label class="form-label fs-16">Max Uses</label>
							<input class="form-control h_50" type="number" min="1" name="max_uses" value="{{ old('max_uses') }}">
						</div>
					</div>

					<div class="row g-3 mt-1">
						<div class="col-md-12">
							<div class="d-flex align-items-start">
								<label class="btn-switch m-0 me-3">
									<input type="checkbox" id="starts_now" {{ old('starts_at') ? '' : 'checked' }}>
									<span class="checkbox-slider"></span>
								</label>
								<label class="color-black mb-0">Active immediately</label>
							</div>
						</div>
						<div class="col-md-6 starts-at-field" style="display: {{ old('starts_at') ? 'block' : 'none' }};">
							<label class="form-label fs-16">Starts At</label>
							<input class="form-control h_50" type="datetime-local" name="starts_at" value="{{ old('starts_at') }}">
						</div>

						<div class="col-md-12 mt-3">
							<div class="d-flex align-items-start">
								<label class="btn-switch m-0 me-3">
									<input type="checkbox" id="no_expiry" {{ old('expires_at') ? '' : 'checked' }}>
									<span class="checkbox-slider"></span>
								</label>
								<label class="color-black mb-0">No expiry</label>
							</div>
						</div>
						<div class="col-md-6 expires-at-field" style="display: {{ old('expires_at') ? 'block' : 'none' }};">
							<label class="form-label fs-16">Expires At</label>
							<input class="form-control h_50" type="datetime-local" name="expires_at" value="{{ old('expires_at') }}">
						</div>
					</div>

					<div class="row g-3 mt-1">
						<div class="col-md-12">
							<div class="d-flex align-items-start">
								<label class="btn-switch m-0 me-3">
									<input type="checkbox" name="is_active" value="1" id="is_active" {{ old('is_active', true) ? 'checked' : '' }}>
									<span class="checkbox-slider"></span>
								</label>
								<label class="color-black mb-0">Active</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="d-flex justify-content-end gap-3 mt-4 mb-5">
				<a href="{{ route('tickets.coupons') }}" class="co-main-btn min-width btn-hover h_50 d-inline-flex align-items-center justify-content-center">Cancel</a>
				<button type="submit" class="main-btn min-width btn-hover h_50">Create Coupon</button>
			</div>
		</form>
	</div>
@endsection

@push('scripts')
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const typeSelect = document.getElementById('coupon_type_select');
			const valueInput = document.getElementById('coupon_value_input');
			const valueHint = document.getElementById('coupon_value_hint');

			function toggleValueHint() {
				const isPercentage = typeSelect.value === 'percentage';
				valueHint.innerText = isPercentage ? 'Percentage off the order total.' : 'Fixed amount deducted from the order total.';
				valueInput.max = isPercentage ? 100 : '';
			}
			if (typeSelect) {
				toggleValueHint();
				typeSelect.addEventListener('change', toggleValueHint);
				$(typeSelect).on('changed.bs.select', toggleValueHint);
			}

			const usesUnlimited = document.getElementById('uses_unlimited');
			const maxUsesField = document.querySelector('.max-uses-field');
			usesUnlimited.addEventListener('change', function () {
				maxUsesField.style.display = this.checked ? 'none' : '';
			});

			const startsNow = document.getElementById('starts_now');
			const startsAtField = document.querySelector('.starts-at-field');
			startsNow.addEventListener('change', function () {
				startsAtField.style.display = this.checked ? 'none' : '';
			});

			const noExpiry = document.getElementById('no_expiry');
			const expiresAtField = document.querySelector('.expires-at-field');
			noExpiry.addEventListener('change', function () {
				expiresAtField.style.display = this.checked ? 'none' : '';
			});
		});
	</script>
@endpush