@extends('provider.provider')
@section('content')

<div class="page-wrapper">
	<div class="content container-fluid">
		<div class="row">
			<div class="d-flex align-items-center justify-content-between flex-wrap row-gap-3 mb-4">
				<div class="my-auto mb-2">
					<h3 class="page-title mb-1">Membership</h3>
					<ol class="breadcrumb mb-0">
						<li class="breadcrumb-item"><a href="{{ route('provider.dashboard') }}">Dashboard</a></li>
						<li class="breadcrumb-item active" aria-current="page">Membership</li>
					</ol>
				</div>
			</div>

			<div id="membershipApp" class="row g-3">
				<div class="col-12">
					<div class="alert alert-info">Loading plans...</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Simple confirm modal for paid plans -->
	<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Confirm Payment</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<input type="hidden" id="confirm_subscription_id">
					<div class="mb-3">
						<label class="form-label">Transaction Reference</label>
						<input type="text" id="confirm_transaction_ref" class="form-control" placeholder="pi_xxx or payment reference">
					</div>
					<p class="text-muted fs-12 mb-0">Enter a payment reference to activate after payment succeeds.</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
					<button type="button" id="confirmActivateBtn" class="btn btn-primary">Activate</button>
				</div>
			</div>
		</div>
	</div>

</div>

@push('scripts')
<script src="/front/js/membership.js"></script>
@endpush

@endsection