<!-- $o=System::class -->
<div class="modal fade" id="packet-contents" tabindex="-1">
	<div class="modal-dialog modal-lg modal-dialog-scrollable">
		<div class="modal-content bg-dark">
			<div class="modal-header bg-success">
				<h5 class="modal-title text-light">Summary Packet Contents for <span id="packet"></span></h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<i id="spinner" class="spinner-grow spinner-grow-sm d-none"></i>
				<div id="modal-content"></div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

@section('page-scripts')
	<script>
		var packet = new bootstrap.Modal(document.getElementById('packet-contents'), {});

		$(document).ready(function() {
			$('.packet').click(function(e) {
				var item = this;
				var icon = $('#spinner');

				$('span#packet').html(e.target.innerText);

				packet.show();

				$.ajax({
					type: 'POST',
					data: {packet: e.target.innerText,_token: '{{csrf_token()}}'},
					beforeSend: function() {
						icon.toggleClass('d-none');
						$('#packet-contents').find('div#modal-content').empty();
					},
					success: function(data) {
						icon.toggleClass('d-none');

						$('#packet-contents').find('div#modal-content').html(data);
					},
					error: function(e) {
						icon.toggleClass('d-none');

						alert('That didnt work? Please try again....');
					},
					url: '{{ url('packet/contents',['o'=>$o->id]) }}/'+e.target.innerText,
					cache: false
				})

				return false;
			});
		});
	</script>
@append