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


@section('content')
	<div class="dashboard-title-flex space-between">
		<h2 class="dashboard-title">{{ __("Subscription Management") }}</h2>
		<div class="dashboard-button-title">
			@if (auth()->user()->userRole->hasAccess('manage-subscription-packages'))
				<a href="{{ route('cms.subscriptions.management.create', ['service_type' => 'bookkeeping']) }}" class="btn primary-button add-new-btn">{{ __("Add New") }}</a>
			@endif
			<a href="{{ route('cms.subscriptions') }}" class="btn btn-error">{{ __("Back") }}</a>
		</div>
	</div>

	<div class="tabs-navigation blue-tabs">
		<ul>
			<li class="active"><a href="#" class="js-tab-navigate" data-id="#in-queue" data-add-url="{{ route('cms.subscriptions.management.create', ['service_type' => 'bookkeeping']) }}"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/business-black.svg') }}"> {{ __("Bookkeeping") }}</a></li>
			<li><a href="#" class="js-tab-navigate" data-id="#completed" data-add-url="{{ route('cms.subscriptions.management.create', ['service_type' => 'company_secretary']) }}"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/secretary-black.svg') }}"> {{ __("Company Secretary") }}</a></li>
		</ul>
	</div>

	<div class="tabs-content">
		<div class="tabs-content-item white-bg no-padd no-box-shadow" id="in-queue">
			<table id="bookkeppingSubscriptionListTable" class="">
				<thead>
					<tr>
						<td>{{ __("Name") }}</td>
						<td>{{ __("Price") }}</td>
						<td>{{ __("Period") }}</td>
						<td>{{ __("Status") }}</td>
						<td>{{ __("Action") }}</td>
					</tr>
				</thead>
				<tbody>
					{{-- <tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr>
					<tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr>
					<tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr>
					<tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr>
					<tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr> --}}
				</tbody>
			</table>
		</div>
		<div class="tabs-content-item white-bg no-padd no-box-shadow" id="completed" style="display: none;">
			<table id="comSecSubscriptionListTable" class="">
				<thead>
					<tr>
						<td>{{ __("Name") }}</td>
						<td>{{ __("Price") }}</td>
						<td>{{ __("Period") }}</td>
						<td>{{ __("Status") }}</td>
						<td>{{ __("Action") }}</td>
					</tr>
				</thead>
				<tbody>
					{{-- <tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr>
					<tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr>
					<tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr>
					<tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr>
					<tr>
						<td>Demi</td>
						<td>$14,000</td>
						<td>Anually</td>
						<td><span class="success item-list-note">Active</span></td>
						<td><a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="{{ route('cms.subscriptions.management') }}?u=1" class="primary-text">Edit</a></td>
					</tr> --}}
				</tbody>
			</table>
		</div>
	</div>
@endsection

@section('script')
<script>
	$(document).ready( function () {
    	var currentLanguage = $('#currentLanguage').val();

		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
		
	    var bookkeppingSubscriptionListTable = $("#bookkeppingSubscriptionListTable").DataTable({
			processing: true,
			serverSide: true,
			ajax: {
				url: '{{ route("cms.subscriptions.management.table", ["service_type" => "bookkeeping"]) }}',
				type: 'post',
				"dataSrc": function ( json ) {
					for (var i = 0; i < json.data.length; i++) {
						$.each( json.data[i], function( key, value ) {
							json.data[i][key] = value ? value : '-';
						});
					}

					return json.data;
				}    
			},
			columns: [
        		(currentLanguage == 'zh_hk' ? {data: 'name_chinese', name: 'name_chinese'} : {data: 'name_english', name: 'name_english'}),
				{data: 'price', name: 'price'},
        		(currentLanguage == 'zh_hk' ? {data: 'period_chinese', name: 'period_chinese'} : {data: 'period_english', name: 'period_english'}),
				{data: 'status', name: 'status'},
				{data: 'actions', name: 'actions', searchable: false, sortable: false}
			],
			order: [[0, "asc"]],
			searchDelay: 500,
		    "language": {
				"paginate": {
					"next": ">",         // Text for the "Next" page button
					"previous": "<"  // Text for the "Previous" page button
				},
      			"emptyTable": '{{ __("No data available in table") }}'
				// Add more text customizations if needed
			}
		});
		
	    var comSecSubscriptionListTable = $("#comSecSubscriptionListTable").DataTable({
			processing: true,
			serverSide: true,
			ajax: {
				url: '{{ route("cms.subscriptions.management.table", ["service_type" => "company_secretary"]) }}',
				type: 'post',
				"dataSrc": function ( json ) {
					for (var i = 0; i < json.data.length; i++) {
						$.each( json.data[i], function( key, value ) {
							json.data[i][key] = value ? value : '-';
						});
					}

					return json.data;
				}    
			},
			columns: [
        		(currentLanguage == 'zh_hk' ? {data: 'name_chinese', name: 'name_chinese'} : {data: 'name_english', name: 'name_english'}),
				{data: 'price', name: 'price'},
        		(currentLanguage == 'zh_hk' ? {data: 'period_chinese', name: 'period_chinese'} : {data: 'period_english', name: 'period_english'}),
				{data: 'status', name: 'status'},
				{data: 'actions', name: 'actions', searchable: false, sortable: false}
			],
			order: [[0, "asc"]],
			searchDelay: 500,
		    "language": {
				"paginate": {
					"next": ">",         // Text for the "Next" page button
					"previous": "<"  // Text for the "Previous" page button
				},
      			"emptyTable": '{{ __("No data available in table") }}'
				// Add more text customizations if needed
			}
		});

		$(document).on('click', '.suspend-subscription', function(e) {
			var action = $(this).attr('data-action');

			if (action) {
				Swal.fire({
					title: '{{ __("Are you sure?") }}',
					text: `{{ __("You would not be able to revert this!") }}`,
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: '{{ __("Yes") }}',
					cancelButtonText: '{{ __("Cancel") }}'
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url: action,
							type: "post",
							data: {},
							dataType: 'json',
							success:function(data) {
								if (data.success) {
									$('#validationModal').modal('show');
									$('#validationModal .error-message').html(data.message);

									bookkeppingSubscriptionListTable.ajax.reload();
									comSecSubscriptionListTable.ajax.reload();
								}
							},
							error: function(data) {
								var errors = data.responseJSON.errors;
								var errorMessage = '<ul>';
								$.each(errors, function(index, error) {
									console.log(error);
									errorMessage += '<li>' + error[0] + '</li>';
								});
								errorMessage += '</ul>';

								$('#validationModal .error-message').html(errorMessage);
								$('#validationModal').modal('show');
							}
						});
					}
				});
			}
		});

		$(document).on('click', '.activate-subscription', function(e) {
			var action = $(this).attr('data-action');

			if (action) {
				Swal.fire({
					title: '{{ __("Are you sure?") }}',
					text: `{{ __("You would not be able to revert this!") }}`,
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: '{{ __("Yes") }}',
					cancelButtonText: '{{ __("Cancel") }}'
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url: action,
							type: "post",
							data: {},
							dataType: 'json',
							success:function(data) {
								if (data.success) {
									$('#validationModal').modal('show');
									$('#validationModal .error-message').html(data.message);

									bookkeppingSubscriptionListTable.ajax.reload();
									comSecSubscriptionListTable.ajax.reload();
								}
							},
							error: function(data) {
								var errors = data.responseJSON.errors;
								var errorMessage = '<ul>';
								$.each(errors, function(index, error) {
									console.log(error);
									errorMessage += '<li>' + error[0] + '</li>';
								});
								errorMessage += '</ul>';

								$('#validationModal .error-message').html(errorMessage);
								$('#validationModal').modal('show');
							}
						});
					}
				});
			}
		});

	    $(".js-side-nav").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.side-nav-tabs').next().find('.js-content-tab').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.side-nav-tabs').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');
	    });

	    $(".js-tab-navigate").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.tabs-navigation').next().find('.tabs-content-item').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.tabs-navigation').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');

	    	var addUrl = jQuery(this).data('add-url');
			$('.add-new-btn').attr('href', addUrl)
	    });
	} );
</script>
@endsection