@extends('admin.admin')

@section('content')
<div class="page-wrapper">
	<form id="pusherSettingForm" >
		<div class="content">
			<div class="d-md-flex d-block align-items-center justify-content-between border-bottom pb-4">
				<div class="my-auto mb-2">
					<h3 class="page-title mb-1">{{ __('Pusher Settings')}}</h3>
					<nav>
						<ol class="breadcrumb mb-0">
							<li class="breadcrumb-item">
								<a href="{{ route('admin.dashboard') }}">{{ __('Dashboard')}}</a>
							</li>
							<li class="breadcrumb-item">
								<a href="javascript:void(0);">{{ __('Settings')}}</a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">{{ __('Pusher Settings')}}</li>
						</ol>
					</nav>
				</div>

				<div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
					<div class="mb-2">
                    @if(isset($permission))
                        @if(hasPermission($permission, 'General Settings', 'edit'))
							<div class="skeleton label-skeleton label-loader"></div>
                            <button class="btn btn-primary pusher_setting_btn fixed-size-btn d-none real-label" type="submit">{{ __('Update')}}</button>
                        @endif
                    @endif
					</div>
				</div>
			</div>
			<div class="row">
				@include('admin.partials.general_settings_side_menu')
				<div class="col-xxl-10 col-xl-9">
					<div class="flex-fill ps-1">
						<div class="d-flex align-items-center justify-content-between flex-wrap mb-3">
						</div>
						<div class="d-md-flex d-block">
							<div class="flex-fill">
								<input type="hidden" name="group_id" id="group_id" class="form-control" value="14" >
								
								<div class="card">
									<div class="card-header">
										<div class="skeleton label-skeleton label-loader"></div>
										<h5 class="d-none real-label">{{ __('Pusher Configuration') }}</h5>
									</div>
									<div class="card-body pb-1">
										<div class="modal-satus-toggle d-flex align-items-center justify-content-between mb-3">
											<div class="status-title">
												<div class="skeleton label-skeleton label-loader"></div>
												<p class="d-none real-label">{{ __('Enable Pusher for real-time features') }} </p>
											</div>
											<div class="status-toggle modal-status d-none real-label">
												<div class="skeleton label-skeleton label-loader"></div>
												<input type="hidden" name="pusher_status" value="0">
												<input type="checkbox" name="pusher_status" id="pusher_status" value="1" class="check">
												<label for="pusher_status" class="checktoggle d-none real-label"> </label>
											</div>
										</div>

										<div class="row">
											<div class="col-12 col-md-6 mb-3">
												<div class="skeleton label-skeleton label-loader"></div>
												<label class="form-label d-none real-label" for="pusher_app_id">{{ __('Pusher App ID') }}<span class="text-danger"> *</span></label>
												<div class="skeleton input-skeleton input-loader"></div>
												<input type="text" name="pusher_app_id" id="pusher_app_id" class="form-control d-none real-input" placeholder="{{ __('Enter Pusher App ID') }}" maxlength="100">
												<span class="text-danger error-text" id="pusher_app_id_error"></span>
											</div>
											<div class="col-12 col-md-6 mb-3">
												<div class="skeleton label-skeleton label-loader"></div>
												<label class="form-label d-none real-label" for="pusher_app_key">{{ __('Pusher App Key') }}<span class="text-danger"> *</span></label>
												<div class="skeleton input-skeleton input-loader"></div>
												<input type="text" name="pusher_app_key" id="pusher_app_key" class="form-control d-none real-input" placeholder="{{ __('Enter Pusher App Key') }}" maxlength="100">
												<span class="text-danger error-text" id="pusher_app_key_error"></span>
											</div>
										</div>

										<div class="row">
											<div class="col-12 col-md-6 mb-3">
												<div class="skeleton label-skeleton label-loader"></div>
												<label class="form-label d-none real-label" for="pusher_app_secret">{{ __('Pusher App Secret') }}<span class="text-danger"> *</span></label>
												<div class="skeleton input-skeleton input-loader"></div>
												<input type="text" name="pusher_app_secret" id="pusher_app_secret" class="form-control d-none real-input" placeholder="{{ __('Enter Pusher App Secret') }}" maxlength="100">
												<span class="text-danger error-text" id="pusher_app_secret_error"></span>
											</div>
											<div class="col-12 col-md-6 mb-3">
												<div class="skeleton label-skeleton label-loader"></div>
												<label class="form-label d-none real-label" for="pusher_app_cluster">{{ __('Pusher App Cluster') }}<span class="text-danger"> *</span></label>
												<div class="skeleton input-skeleton input-loader"></div>
												<input type="text" name="pusher_app_cluster" id="pusher_app_cluster" class="form-control d-none real-input" placeholder="{{ __('Enter Pusher App Cluster') }}" maxlength="50">
												<span class="text-danger error-text" id="pusher_app_cluster_error"></span>
											</div>
										</div>

										<div class="row">
											<div class="col-12 col-md-6 mb-3">
												<div class="skeleton label-skeleton label-loader"></div>
												<label class="form-label d-none real-label" for="pusher_host">{{ __('Pusher Host') }}</label>
												<div class="skeleton input-skeleton input-loader"></div>
												<input type="text" name="pusher_host" id="pusher_host" class="form-control d-none real-input" placeholder="{{ __('Enter Pusher Host (Optional)') }}" maxlength="100">
												<span class="text-danger error-text" id="pusher_host_error"></span>
											</div>
											<div class="col-12 col-md-6 mb-3">
												<div class="skeleton label-skeleton label-loader"></div>
												<label class="form-label d-none real-label" for="pusher_port">{{ __('Pusher Port') }}</label>
												<div class="skeleton input-skeleton input-loader"></div>
												<input type="number" name="pusher_port" id="pusher_port" class="form-control d-none real-input" placeholder="{{ __('Enter Pusher Port (Optional)') }}" maxlength="10">
												<span class="text-danger error-text" id="pusher_port_error"></span>
											</div>
										</div>

										<div class="alert alert-info d-none real-label">
											<h6 class="alert-heading">{{ __('Note') }}</h6>
											<p class="mb-0">{{ __('Pusher credentials will be stored in your environment file for security. Make sure to backup your .env file before making changes.') }}</p>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
	// Form submission handler
	$('#pusherSettingForm').on('submit', function(e) {
		e.preventDefault();
		
		// Clear previous error messages
		$('.text-danger').text('');
		
		// Handle checkbox value properly
		if (!$('#pusher_status').is(':checked')) {
			$('input[name="pusher_status"][type="hidden"]').val('0');
		} else {
			$('input[name="pusher_status"][type="hidden"]').val('1');
		}
		
		$.ajax({
			url: '{{ route("admin.pusher-settings.save") }}',
			type: 'POST',
			data: $(this).serialize() + '&_token={{ csrf_token() }}',
			success: function(response) {
				if(response.success) {
					toastr.success(response.message);
				} else {
					toastr.error(response.message);
				}
			},
			error: function(xhr) {
				if(xhr.status === 422 && xhr.responseJSON.errors) {
					// Display validation errors
					$.each(xhr.responseJSON.errors, function(key, value) {
						$('#' + key + '_error').text(value[0]);
					});
					toastr.error('Please fill the required fields');
				} else {
					toastr.error(xhr.responseJSON?.message || 'An error occurred');
				}
			}
		});
	});

	// Load existing settings
	$.ajax({
		url: '{{ route("admin.pusher-settings.load") }}',
		type: 'GET',
		success: function(response) {
			if(response.data) {
				$('#pusher_status').prop('checked', response.data.pusher_status == '1');
				$('#pusher_app_id').val(response.data.pusher_app_id || '');
				$('#pusher_app_key').val(response.data.pusher_app_key || '');
				$('#pusher_app_secret').val(response.data.pusher_app_secret || '');
				$('#pusher_app_cluster').val(response.data.pusher_app_cluster || '');
				$('#pusher_host').val(response.data.pusher_host || '');
				$('#pusher_port').val(response.data.pusher_port || '');
			}
			// Remove skeleton loaders
			$('.skeleton').addClass('d-none');
			$('.real-label, .real-input').removeClass('d-none');
		},
		error: function() {
			// Remove skeleton loaders even on error
			$('.skeleton').addClass('d-none');
			$('.real-label, .real-input').removeClass('d-none');
		}
	});
});
</script>
@endpush