@extends('admin.layouts.master')
@section('content')
@php 
 $settings = \App\Models\SettingsModel::first();
@endphp
<br>
<br>
	<div class="breadcrumbs">
		<div class="col-sm-4">
			<div class="page-header float-left">
				<div class="page-title">
					<h1>Web Settings</h1>
				</div>
			</div>
		</div> 
	</div>

	<div class="content mt-3">
		<div class="col-md-12">
			<div class="card">
				<div class="card-body">
					<form action="{{ route('settings.update', $settings->id) }}" id="settingsForm" method="POST">
						@csrf
						@if(isset($pages))
							@method('POST') 
							<input type="hidden" name="settings_id" value="{{ $settings->id }}">
						@endif
						<div class="form-group">
							<label>Title</label>
							<input type="text" class="form-control" name="title" value="{{$settings->title}}">
						</div>
						<div class="form-group">
							<label>Meta Title</label>
							<input type="text" class="form-control" name="meta_title" value="{{$settings->meta_title}}">
						</div>
						<div class="form-group">
							<label>Meta Description</label>
							<textarea class="form-control" name="meta_description" rows="2" >{{$settings->meta_description}}</textarea>
						</div>
						<div class="form-group">
							<label>Meta Keywords</label>
							<textarea class="form-control" name="meta_keywords" rows="2" >{{$settings->meta_keywords}}</textarea>
						</div>
						<div class="form-group">
							<label>Site name</label>
							<input type="text" class="form-control" name="site_name" value="{{$settings->site_name}}" >
						</div>
						<div class="form-group">
							<label>Site url address</label>
							<input type="text" class="form-control" name="site_url" value="{{$settings->site_url}}" >
						</div>
						<div class="form-group">
							<label>Info email address</label>
							<input type="text" class="form-control" name="info_email" value="{{$settings->info_email}}" >
						</div>
						<div class="form-group">
							<label>Support email address</label>
							<input type="text" class="form-control" name="support_email" value="{{$settings->support_email}}">
						</div>

						<div class="form-group">
							<label>Copyright</label>
							<input type="text" class="form-control" name="copyright" value="{{$settings->copyright}}">
						</div>

						<div class="form-group">
							<label>Upload Brands Logo (formats: jpg, png, recommended sizes: 48x48, 56x66, etc.)</label>
							<div id="image-container">
								<div class="image-input-group">
									<!-- <input type="file" name="logos[]" class="form-control mb-2" style="display:inline-block;width:auto;"> -->
									@if($settings->brands_logo) 
										<div>Uploaded Files: 
											@foreach(json_decode($settings->brands_logo) as $key => $logo)
												<div class="d-flex align-items-center mb-2">
													<img src="{{ asset('storage/brands_logo/') }}/{{$logo}}" alt="Brand Logo" width="40px" height="40px">
													<button type="button" class="remove-logo-btn btn btn-danger" data-key="{{ $key }}" style="margin-left: 10px;">×</button>
												</div>
											@endforeach
										</div>
									@endif	
								</div>
							</div>
							<button type="button" id="add-more" class="btn btn-success">+ Add More</button>
						</div>

						<script>
							$('#add-more').click(function() {
								$('#image-container').append('<div class="image-input-group"><input type="file" name="logos[]" class="form-control mb-2" style="display:inline-block;width:auto;" ><button type="button" class="remove-btn btn btn-danger" style="display:inline-block;margin-left:10px;">×</button></div>');
							});

							$('#image-container').on('click', '.remove-logo-btn', function() {
								$(this).parent('.d-flex').remove();
							});

							$('#image-container').on('click', '.remove-btn', function() {
								$(this).parent('.image-input-group').remove(); 
							});
						</script>

						<!-- script for deleting the uploaded logo - frontend -->
						<script>
								$('#image-container').on('click', '.remove-logo-btn', function () {
								let logoKey = $(this).data('key');  // Get the key from the button's data attribute
								let logoName = $(this).siblings('img').attr('src').split('/').pop();  // Extract the logo name from the image src

								$.ajax({
									type: 'POST',
									url: '/settings/delete-logo',  // Adjust this to your actual route
									data: {
										_token: $('meta[name="csrf-token"]').attr('content'),
										logoKey: logoKey,
										logoName: logoName,
									},
									success: function (response) {
										toastr.success(response.message, 'Success');
									},
									error: function () {
										toastr.error('An error occurred while deleting the logo.', 'Error');
									}
								});
								$(this).closest('.d-flex').remove(); 
							});
						</script>

						<div class="form-group">
							<label>Upload Logo (format: jpg, png)</label>
							<input type="file" name="logo" class="form-control"  >
							@if($settings->logo) 
								<div style="display: flex; align-items: center;">
								<span>Uploaded Files:</span> 
									<img src="{{ asset('storage/brands_logo/') }}/{{$settings->logo}}" alt="" width="40px" height="40px" style="margin-left: 10px;">
								</div>
							@endif
						</div>

						<div class="form-group">
							<label>Upload Favicon (format: jpg, png)</label>
							<input type="file" name="favicon" class="form-control" value="{{$settings->favicon}}" >
							@if($settings->favicon) 
								<div style="display: flex; align-items: center;">
								<span>Uploaded Files:</span> 
									<img src="{{ asset('storage/brands_logo/') }}/{{$settings->favicon}}" alt="" width="40px" height="40px" style="margin-left: 10px;">
								</div>
							@endif
						</div>

						<!-- <div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<label>Default language</label>
									<select class="form-control" name="default_language">
									
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Default template</label>
									<select class="form-control" name="default_template">
									
									</select>
								</div>
							</div>
						</div> -->

						<div class="form-group">
							<label>Skype</label>
							<input type="text" class="form-control" name="skype" value="{{$settings->skype}}" >
						</div>
						<div class="form-group">
							<label>Whatsapp</label>
							<input type="text" class="form-control" name="whatsapp" value="{{$settings->whatsapp}}" >
						</div>

						<div class="form-group">
							<label>Social Media Links</label>
							<div id="social-media-container">
								@if(isset($settings) && $settings->social_media_links)
									@foreach(json_decode($settings->social_media_links) as $social)
										<div class="social-input-group">
											<input type="text" name="social_name[]" value="{{ $social->social_name }}" placeholder="Social Media Name" class="form-control mb-2" style="display:inline-block;width:45%;">
											<input type="url" name="social_link[]" value="{{ $social->social_link }}" placeholder="Social Media Link" class="form-control mb-2" style="display:inline-block;width:45%;">
											<button type="button" class="remove-social btn btn-danger" style="display:inline-block;margin-left:10px;">×</button>
										</div>
									@endforeach
									@else
									<div class="social-input-group">
										<input type="text" name="social_name[]" placeholder="Social Media Name" class="form-control mb-2" style="display:inline-block;width:45%;">
										<input type="url" name="social_link[]" placeholder="Social Media Link" class="form-control mb-2" style="display:inline-block;width:45%;">
										<button type="button" class="remove-social btn btn-danger" style="display:inline-block;margin-left:10px;">×</button>
									</div>
								@endif
							</div>
							<button type="button" id="add-social-media" class="btn btn-success">+ Add More</button>
						</div>

						<script>
							$(document).ready(function() {
								$('#add-social-media').click(function() {
									$('#social-media-container').append(`
										<div class="social-input-group">
											<input type="text" name="social_name[]" placeholder="Social Media Name" class="form-control mb-2" style="display:inline-block;width:45%;">
											<input type="url" name="social_link[]" placeholder="Social Media Link" class="form-control mb-2" style="display:inline-block;width:45%;">
											<button type="button" class="remove-social btn btn-danger" style="display:inline-block;margin-left:10px;">×</button>
										</div>
									`);
								});

								$('#social-media-container').on('click', '.remove-social', function() {
									$(this).closest('.social-input-group').remove();
								});
							});
						</script>

						<div class="form-group">
							<label>Referral comission</label>
							<input type="text" class="form-control" name="referral_commission" value="{{$settings->referral_commission}}" >
							<small>Put here number of referral commission. Example if type 10 system will calculate referral comission with 10%. Enter number without %</small>
						</div>
						<div class="form-group">
							<label>Require user login to exchange</label>
							<select class="form-control" name="require_user_to_login">
								<option value="1" >Yes</option>
								<option value="0" >No</option>
							</select>		
						</div>
						<div class="checkbox">
								<label>
								<input type="checkbox" name="require_user_to_upload_documents"  value="1" {{$settings->require_user_to_upload_documents == 1 ? 'checked' : ''}} > Require user to upload documents and you verify it before exchange
								</label>
						</div>
						<div class="checkbox">
								<label>
								<input type="checkbox" name="require_user_to_verify_email" value="1" {{$settings->require_user_to_verify_email == 1 ? 'checked' : ''}}" > Require user to verify their email address before exchange
								</label>
						</div>
						<div class="checkbox">
							<label>
								<input type="checkbox" name="require_user_to_verify_mobile_number" value="1" {{$settings->require_user_to_verify_mobile_number == 1 ? 'checked' : ''}}" > Require user to verify their mobile number before exchange
							</label>
						</div>
						<div class="form-group">
							<label>Nexmo API Key</label>
							<input type="text" class="form-control" name="nexmo_api_key" value="{{$settings->nexmo_api_key}}">
							<small>Type Nexmo API Key if you turned on mobile verification. Get api key form <a href="http://nexmo.com" target="_blank">www.nexmo.com</a></small>
						</div>
						<div class="form-group">
							<label>Nexmo API Secret</label>
							<input type="text" class="form-control" name="nexmo_api_secret" value="{{$settings->nexmo_api_secret}}" >
							<small>Type Nexmo API Secret if you turned on mobile verification. Get api key form <a href="http://nexmo.com" target="_blank">www.nexmo.com</a></small>
						</div>
						<div class="form-group">
							<label>Work time start</label>
							<input type="text" class="form-control" name="work_time_start" value="{{$settings->work_time_start}}">
						</div>
						<div class="form-group">
							<label>Work time end</label>
							<input type="text" class="form-control" name="work_time_end" value="{{$settings->work_time_end}}">
						</div>
						<div class="form-group">
							<label>Work time GMT zone</label>
							<input type="text" class="form-control" name="work_time_gmt_zone" value="{{$settings->work_time_gmt_zone}}">
						</div>
						<div class="form-group">
							<label>Footer short info</label>
							<textarea class="form-control" name="footer_short_info" rows="2">{{$settings->footer_short_info}}</textarea>
						</div>
						<div class="form-group">
							<label>Location</label>
							<input type="text" class="form-control" name="location" value="{{$settings->location}}">
						</div>
						<button type="submit" class="btn btn-primary" id="btn_save" name="btn_save"><i class="fa fa-check"></i> Save changes</button>
					</form>
				</div>
			</div>
		</div>
	</div>


	<script>
		$('#settingsForm').on('submit', function (event) {
			event.preventDefault(); // Prevent default form submission
			var formData = new FormData(this); // Create FormData object

			// Append all form fields manually
			$.each($('input[name="logos[]"]'), function(i, fileInput){
				if (fileInput.files.length > 0) {
					$.each(fileInput.files, function(j, file){
						formData.append('logos[]', file);
					});
				}
				fileInput.value = '';
			});

			formData.append('logo', $('input[name="logo"]')[0].files[0]);
			formData.append('favicon', $('input[name="favicon"]')[0].files[0]);
			var socialNames = $('input[name="social_name[]"]').map(function() {
				return $(this).val();
			}).get();

			var socialLinks = $('input[name="social_link[]"]').map(function() {
				return $(this).val();
			}).get();

			var socialMediaLinks = [];
			for (var i = 0; i < socialNames.length; i++) {
				const socialName = {
					social_name: socialNames[i],
					social_link: socialLinks[i],
				};
				socialMediaLinks.push(socialName);
			}
			formData.append('social_media_links', JSON.stringify(socialMediaLinks));

			// Make AJAX request
			$.ajax({
				type: 'POST',
				url: $(this).attr('action'),
				data: formData,
				processData: false, 
				contentType: false, 
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(response) {
					toastr.success(response.message, 'Success');
					console.log(response.message);
					
				},
				error: function(xhr) {
					if (xhr.responseJSON && xhr.responseJSON.errors) {
						const errors = xhr.responseJSON.errors;
						for (const field in errors) {
							toastr.error(errors[field][0], 'Error');
						}
					} else {
						toastr.error('An unknown error occurred. Please try again.', 'Error');
					}
				}
			});
		});
	</script>


@endsection