@extends('theme::layouts.app')

@section('style')
<style>
	.form-tabs {
		gap: 20px;
	}

	.list-buttons-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
    	min-width: 95px;
	}
	.list-buttons-wrapper .list-buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 41px;
		height: 41px;
		background-color: #009B9A;
		color: #000000;
		border-radius: 50px;
    	font-size: 24px;
    	outline: 0;
	}

	.basic-services-item-list-wrapper .basic-services-item-list-item .list-title {
		opacity: 0;
	}
	.basic-services-item-list-wrapper .basic-services-item-list-item:first-of-type .list-title {
		opacity: 1;
	}

	.basic-services-wrapper .basic-services-item:first-of-type .basic-services-buttons {
		display: none;
	}
	.optional-services-wrapper .optional-services-item:first-of-type .optional-services-buttons {
		display: none;
	}
</style>
@endsection

@section('content')
	<h2 class="dashboard-title">{{ __("Subscription Details") }}</h2>
	<div class="tabs-content">
		<div class="tabs-content-item">
			<form action="{{ route('cms.subscriptions.management.update', ['subscription' => $subscription->id]) }}" class="form-tabs white-input" id="editFrm">
    			@include('theme::cms.subscriptions.management.form')
			</form>
		</div>
	</div>
@endsection

@section('script')
<script>
	$(document).ready( function () {
		$('#editFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							popToast('success', data.message);

							setTimeout(() => {
								window.location.href = '{{ route("cms.subscriptions.management") }}';
							}, 2000);
						}
						else {
							popToast('danger', data.message);
						}
					},
					error: function(data) {
						var errors = data.responseJSON.errors;
						$.each(errors, function(index, error) {
							popToast('danger', errors[0]);
							return false;
						});

						button.removeAttr('disabled');
						button.html(buttonHtml);
					}
				});
			}
		});
	});
</script>
@endsection