OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	05/09/2025 11:18:49 AM	rwxr-xr-x
📄 .htaccess	860 bytes	12/09/2024 12:36:01 PM	rw-r--r--
📁 .vscode	-	11/09/2024 12:33:02 PM	rwxrwxr-x
📄 12-03-25index.php	42.58 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 13-03-25index.php	56.24 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 13-03-25premium.php	18.76 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 14-4-25-whatsappBot	-	05/19/2025 10:07:21 AM	rwxr-xr-x
📄 15-4-25-index.php	54.17 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 23-04-25stream.php	70.87 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 3-4-25-index.php	62.26 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 9_12_24index.html	11.48 KB	12/09/2024 05:56:43 AM	rw-r--r--
📄 A_index.php	65.56 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 Arv_stream.php	67.28 KB	05/19/2025 10:07:22 AM	rw-r--r--
📁 CreateLeadPage	-	05/19/2025 10:07:15 AM	rwxr-xr-x
📁 CreateLeadPage_back	-	05/19/2025 10:07:19 AM	rwxr-xr-x
📁 CreatePage	-	05/19/2025 10:07:15 AM	rwxrwxrwx
📄 ImageMagick-7.1.1-45-Q16-HDRI-x64-dll.exe	22.2 MB	03/17/2025 09:25:42 AM	rw-r--r--
📁 NLEditor	-	05/19/2025 10:07:22 AM	rwxr-xr-x
📄 Scheduled_posts.php	49.78 KB	06/16/2025 08:52:51 AM	rw-r--r--
📁 Xpress	-	05/19/2025 10:07:17 AM	rwxr-xr-x
📄 XpressPage.php	47.18 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 Xpress_backup	-	05/19/2025 10:07:19 AM	rwxrwxrwx
📄 about.html	3.7 KB	12/10/2024 09:17:27 AM	rw-r--r--
📄 account.php	56.45 KB	06/17/2025 10:30:23 AM	rw-r--r--
📄 activate.php	4.63 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 add_channel.php	9.71 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 add_to_channel.php	980 bytes	05/19/2025 10:07:22 AM	rw-r--rw-
📁 admin	-	05/19/2025 10:07:22 AM	rwxrwxr-x
📄 analytics.php	38.23 KB	05/19/2025 10:07:19 AM	rw-rw-r--
📁 api	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 arvind_index.php	4.44 KB	05/19/2025 10:07:15 AM	rw-r--r--
📁 assets	-	04/17/2025 09:15:05 AM	rwxrwxr-x
📁 audio	-	05/27/2025 07:33:37 AM	rwxrwxrwx
📁 avatars	-	04/14/2025 06:26:27 PM	rwxr-xr-x
📁 aws-ses	-	05/19/2025 10:07:21 AM	rwxr-xr-x
📄 b_account.php	45.4 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 b_himanshu_process_data.php	5.02 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 b_himanshu_stream.php	70.67 KB	05/19/2025 10:07:21 AM	rw-r--r--
📄 b_settings.php	74.3 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 baccount.php	38.98 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 back_\index.php	40.34 KB	05/19/2025 10:07:15 AM	rw-r--r--
📁 back_aws-ses	-	05/19/2025 10:07:22 AM	rwxr-xr-x
📁 back_whatsappBot	-	05/19/2025 10:07:16 AM	rwxrwxrwx
📄 badd_channel.php	10.01 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 bfeatured_channels.php	31.33 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 bfeatured_topics.php	28.47 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 blogInCheck.php	2.12 KB	05/19/2025 10:07:21 AM	rw-rw-r--
📄 bsign-in.php	21.47 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 businessLp.php	46.33 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 bussLp.php	57.87 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 card-news.php	6.39 KB	05/19/2025 10:07:22 AM	rw-rw-r--
📄 channel.php	60.43 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 chattest.php	8.8 KB	05/19/2025 10:07:19 AM	rw-rw-r--
📄 checkSession.php	1.52 KB	05/19/2025 10:07:19 AM	rw-r--r--
📁 clients	-	05/19/2025 10:07:22 AM	rwxr-xr-x
📄 collections.php	94.92 KB	05/19/2025 10:07:21 AM	rw-r--r--
📄 comments.php	1.67 KB	05/19/2025 10:07:21 AM	rw-rw-r--
📄 composer.json	101 bytes	03/25/2025 08:44:52 AM	rw-rw-r--
📄 composer.lock	5.68 KB	03/25/2025 08:44:51 AM	rw-rw-r--
📄 contact.html	3.44 KB	03/12/2025 11:48:10 AM	rw-r--r--
📄 cookie.php	750 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📄 copytest.html	4.05 KB	11/09/2024 12:48:18 PM	rw-rw-r--
📁 creamAdmin	-	05/19/2025 10:07:22 AM	rwxr-xr-x
📄 cream_dashboard.php	26.3 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 creamapi	-	05/19/2025 10:07:22 AM	rwxr-xr-x
📄 create.php	43.85 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 created_magazine.html	11.96 KB	11/09/2024 12:48:18 PM	rw-rw-r--
📄 dashboard.php	55.97 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 data	-	05/19/2025 10:07:13 AM	rwxrwxrwx
📄 dbms.php	492.73 KB	05/20/2025 01:55:35 PM	rw-r--r--
📄 down.html	1.23 KB	11/12/2024 02:39:28 AM	rw-r--r--
📄 edit_post.php	2.19 KB	06/13/2025 12:59:41 PM	rw-r--r--
📄 featured_channels.php	32.68 KB	05/19/2025 10:07:21 AM	rw-r--r--
📄 featured_topics.php	26.66 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 fetch_articles.php	1.83 KB	05/19/2025 10:07:22 AM	rw-rw-r--
📄 fetch_liked_users.php	1.55 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 files_with_warning.txt	25.17 KB	05/19/2025 10:06:22 AM	rw-r--r--
📄 filter.php	4.92 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 follow_action.php	1.7 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 follow_dash.php	33.92 KB	05/19/2025 10:07:22 AM	rw-r--r--
📁 form-builder	-	05/19/2025 10:07:19 AM	rwxr-xr-x
📄 function.php	20.61 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 gemini.php	38.21 KB	05/19/2025 10:07:17 AM	rw-r--r--
📁 genai	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 generated_article.php	11.92 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 get_recent_items.php	1.37 KB	05/19/2025 10:07:16 AM	rw-r--r--
📁 groupchat	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 handle_channel.php	856 bytes	05/19/2025 10:07:13 AM	rw-r--rw-
📄 himanshu_)newsletter.php	23.31 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 himanshu_analytics.php	28.88 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 himanshu_process_data.php	6.46 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 himanshu_stream.php	72.33 KB	05/19/2025 10:07:15 AM	rw-r--r--
📁 hindiConverter	-	05/19/2025 10:07:19 AM	rwxr-xr-x
📄 homePin.php	68.59 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 hps	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 impmy_collection.php	124.44 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 inc	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 index.php	54.5 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 influencer.php	12.23 KB	05/19/2025 10:07:16 AM	rw-r--r--
📁 interface	-	05/19/2025 10:07:15 AM	rwxr-xr-x
📄 ipsh.php	1.52 KB	05/22/2025 07:25:43 AM	rw-r--r--
📁 kannada	-	05/19/2025 10:07:15 AM	rwxrwxr-x
📄 knobly_logo.png	9.45 KB	03/18/2025 08:18:45 AM	rw-r--r--
📁 knobly_scribe	-	05/19/2025 10:07:19 AM	rwxr-xr-x
📁 knoblysocial	-	05/19/2025 10:07:16 AM	rwxrwxrwx
📄 landing_page.php	17.3 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 landing_signin.php	5.14 KB	05/19/2025 10:07:16 AM	rw-r--r--
📁 landingpage	-	03/02/2025 02:01:39 PM	rwxr-xr-x
📁 leadpage	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 link.php	5.63 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 log.txt	60 bytes	04/25/2025 09:10:22 AM	rw-r--r--
📄 logInCheck.php	7.33 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 loggedInCheck.php	1.15 KB	05/19/2025 10:07:19 AM	rw-rw-r--
📄 logo (1).svg	814 bytes	01/16/2025 05:26:43 AM	rw-r--r--
📄 logout.php	1.14 KB	05/19/2025 10:07:15 AM	rw-rw-r--
📄 magazine.html	4.6 KB	11/09/2024 12:48:19 PM	rw-rw-r--
📄 magazine.php	23.69 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 more.php	9.62 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 my_collection.php	153.95 KB	06/04/2025 06:38:10 AM	rw-r--r--
📄 my_collection_backup.php	149.76 KB	05/19/2025 10:07:21 AM	rw-r--r--
📄 my_settings.php	17.57 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 navbar.php	3.36 KB	05/19/2025 10:07:21 AM	rw-r--r--
📄 new-page.php	15.14 KB	06/04/2025 09:56:42 AM	rw-r--r--
📄 newEditor.php	17.04 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 new_cream	-	05/19/2025 10:07:21 AM	rwxr-xr-x
📁 new_ui	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 newsletter.php	24.9 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 old_sendy	-	05/19/2025 10:07:16 AM	rwxr-xr-x
📄 old_stream.php	94.19 KB	05/19/2025 10:07:22 AM	rw-r--r--
📁 pageLanding	-	02/04/2025 01:03:32 PM	rwxr-xr-x
📁 pages	-	05/19/2025 10:07:13 AM	rwxrwxrwx
📄 payment.php	29.87 KB	05/20/2025 02:34:50 PM	rw-r--r--
📁 pdf	-	03/12/2025 12:11:01 PM	rwxr-xr-x
📄 pdftk_server-2.02-win-setup.exe	2.91 MB	03/17/2025 09:44:38 AM	rw-r--r--
📄 persona_submit.php	963 bytes	05/19/2025 10:07:13 AM	rw-r--r--
📄 personaform.php	7.03 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 post-details.php	38.06 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 ppayment.php	31.42 KB	05/20/2025 01:52:50 PM	rw-r--r--
📄 premium.php	21.88 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 premium_test.php	28.94 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 privacy.html	12.52 KB	12/10/2024 09:17:06 AM	rw-r--r--
📄 private_channel.php	10.06 KB	06/04/2025 07:19:28 AM	rw-r--r--
📄 private_dashboard.php	56.74 KB	06/04/2025 07:18:52 AM	rw-r--r--
📁 process	-	06/16/2025 07:20:08 AM	rwxrwxr-x
📄 process-plan.php	1.44 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 process-scheduled-posts.php	2.02 KB	06/13/2025 01:08:04 PM	rw-r--r--
📄 process.php	1.47 KB	05/19/2025 10:07:17 AM	rw-r--r--
📄 process_data.php	5.21 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 profile.php	38.01 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 profile_pic_upload.php	4.85 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 profile_test.php	19.88 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 publish_scheduled_posts.php	1.17 KB	05/19/2025 10:07:21 AM	rw-r--r--
📁 quiz	-	05/19/2025 10:07:16 AM	rwxr-xr-x
📁 reader	-	03/04/2025 08:32:49 AM	rwxr-xr-x
📄 reader.php	67.62 KB	05/19/2025 10:07:15 AM	rw-r--r--
📁 reels	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 referralInfo.php	5.88 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 referralProcess.php	1.07 KB	05/19/2025 10:07:21 AM	rw-r--r--
📄 refund.html	9.47 KB	02/17/2025 10:22:24 AM	rw-r--r--
📄 replyPost.php	3.93 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 report	-	05/19/2025 10:07:21 AM	rwxr-xr-x
📄 request_article.php	24.18 KB	05/19/2025 10:07:19 AM	rw-rw-r--
📄 reset.html	5.09 KB	11/12/2024 04:10:05 AM	rw-r--r--
📄 revsh.php	71 bytes	05/20/2025 03:42:26 PM	rw-r--r--
📄 save_profile.php	2.78 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 saved.php	34.49 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 schedule-post.php	1.49 KB	06/13/2025 01:07:17 PM	rw-r--r--
📄 search_bar.php	17.52 KB	05/19/2025 10:07:21 AM	rw-r--r--
📁 sendy	-	05/27/2025 10:22:07 AM	rwxr-xr-x
📄 settings.php	82.29 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 share.html	2.4 KB	05/08/2025 09:43:24 AM	rw-r--r--
📄 sharemarket.php	3.94 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 showcase.php	10.62 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 shreyasStream.php	68.54 KB	05/19/2025 10:07:19 AM	rw-r--r--
📁 side_navbar_testing	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 sign-in.php	47.67 KB	06/17/2025 10:29:25 AM	rw-r--r--
📄 signInProcess.php	13.91 KB	06/17/2025 10:17:00 AM	rw-rw-r--
📄 signInProcess_backup.php	11.12 KB	05/19/2025 10:07:19 AM	rw-r--r--
📁 social_media	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 start.html	3.99 KB	12/13/2024 10:07:49 AM	rw-rw-r--
📄 store_articles.php	987 bytes	05/19/2025 10:07:19 AM	rw-rw-r--
📄 stream.php	94.49 KB	06/16/2025 11:47:53 AM	rw-r--r--
📄 streamPush.php	30.16 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 submit.php	734 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📄 test.php	1.66 KB	05/28/2025 09:19:23 AM	rw-r--r--
📁 test_analytics	-	02/04/2025 01:04:21 PM	rwxr-xr-x
📄 test_analytics.php	35.92 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 test_create.php	40.38 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 test_create_LP.php	14.07 KB	05/19/2025 10:07:17 AM	rw-r--r--
📄 test_index.php	56.5 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 test_new-page.php	1.61 KB	05/24/2025 05:28:20 PM	rw-r--r--
📄 test_new_analytics.php	35.92 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 test_premium.php	14.65 KB	05/19/2025 10:07:21 AM	rw-r--r--
📄 test_profile.php	14.55 KB	05/19/2025 10:07:22 AM	rw-rw-r--
📄 test_request_article.php	28.23 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 test_search_bar.php	12.27 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 texttovoice	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📁 thumbsUp	-	05/19/2025 10:07:19 AM	rwxrwxr-x
📄 toggle_channel.php	2.28 KB	05/19/2025 10:07:17 AM	rw-r--r--
📁 transcript	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 udupi_sign_up.php	34.95 KB	05/19/2025 10:07:17 AM	rw-r--r--
📁 uploads	-	06/17/2025 05:35:56 PM	rwxrwxrwx
📄 usage.html	38.19 KB	12/13/2024 09:43:08 AM	rw-r--r--
📄 userActivity.php	13.61 KB	05/19/2025 10:07:22 AM	rw-r--r--
📁 vendor	-	05/19/2025 10:07:19 AM	rwxrwxr-x
📄 verify.php	744 bytes	05/19/2025 10:07:13 AM	rw-rw-r--
📄 version2_landing_page.php	23.08 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 videoAI	-	05/19/2025 10:07:19 AM	rwxr-xr-x
📁 videoAI21-1-25	-	05/19/2025 10:07:22 AM	rwxrwxrwx
📁 videoAII	-	05/19/2025 10:07:22 AM	rwxr-xr-x
📁 videoTest	-	05/19/2025 10:07:17 AM	rwxrwxrwx
📄 videotest.php	13.18 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 videotest1.php	6.36 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 videotesting.php	9.71 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 view.php	13.63 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 view_newsletter.php	1.58 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 websh.php	31 bytes	05/22/2025 07:17:21 AM	rw-r--r--
📁 weeklyEmail	-	06/16/2025 11:41:02 AM	rwxrwxrwx
📁 whatsappBot	-	05/19/2025 10:07:16 AM	rwxrwxrwx
📁 whisper	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📁 xpress_landing_page	-	05/19/2025 10:07:22 AM	rwxr-xr-x
📄 xpress_landing_page.php	78.63 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 xpress_landingpage.html	11.15 KB	01/06/2025 05:55:54 AM	rw-r--r--
📄 zanalytics.php	36.93 KB	05/19/2025 10:07:16 AM	rw-r--r--
📄 zgemini.php	15.07 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 zindex.php	61.38 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 znewsletter.php	23.45 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 zoomstream.php	73.73 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 zsign-in.php	29.71 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 zvideoAI	-	05/19/2025 10:07:15 AM	rwxr-xr-x
📁 zzXpress	-	05/19/2025 10:07:24 AM	rwxr-xr-x
📄 zzcreate.php	35.33 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 zznewsletter.php	23.36 KB	05/19/2025 10:07:19 AM	rw-r--r--

Editing: my_settings.php

<?php
// Include the necessary files and DB connection
include './inc/db_connect.php';
include './inc/config.php';
include './inc/validate.logged.php';

// Function to fetch the profile picture
function viewProfilePic($db, $userId)
{
    $sql = "SELECT profile_pic FROM user WHERE id = ?";
    $link = "";
    $path = "https://www.knoblycream.com/data/profilePic/";

if ($stmt = $db->prepare($sql)) {
        $stmt->bind_param("i", $userId);
        $stmt->execute();
        $stmt->bind_result($link);
        if ($stmt->fetch()) {
            if ($link == null) {
                return $path . "default.png";
            }
            return $path . $link;
        } else {
            return null;
        }

$stmt->close();
    } else {
        return "Error preparing statement: " . $db->error;
    }
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.js"></script>
    <style>
        body {
            color: #fff;
            font-family: Arial, sans-serif;
        }

.profile-card {
            max-width: 400px;
            margin: 50px auto;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

.profile-pic {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
        }

.button-container {
            display: flex;
            /* Makes the buttons appear side by side */
            gap: 10px;
            /* Adjusts the space between buttons */
        }

.btn-custom {
            background-color: #db5919;
            /* Example custom color */
            color: #fff;
            /* White text color */
            border: 1px solid #6c757d;
            padding: 10px 20px;
            /* Adjusts button size */
            border-radius: 5px;
            /* Smooth corners */
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.btn-custom:hover {
            background-color: #db5919;
            /* Darker shade for hover effect */
            padding: 10px 20px;
            border-radius: 5px;
            color: white;
        }

.btn-primary {
            padding: 10px 20px;
            border-radius: 5px;
        }

#imageContainer {
            width: 100% !important;
        }

#uploadForm {
            color: #fff;
        }

.modal-title {
            color: #fff;
        }

body.dark-mode #uploadForm {
            color: #fff;
        }

body.light-mode #uploadForm {
            color: #000;

}

body.dark-mode .modal-title {
            color: #fff;
        }

body.light-mode .modal-title {
            color: #000;
        }

body.dark-mode .modal-content {
            background-color: #444;

}

body.light-mode .modal-content {
            background-color: #dfe3ee !important;
        }

body.light-mode .form-control {
            background-color: #fff !important;
            color:#000 !important   ;
        }
        body.light-mode.btn-close{
            color: #000 !important;
        }

/* Set fixed size for the cropper container */
        .cropper-container {
            margin: 0 auto;
            /* Center the container if necessary */
            position: relative;
            /* Ensure proper positioning of the image */
        }

/* Optional: Style the cropper's background (use for debugging if needed) */
        .cropper-bg {
            background-color: rgba(0, 0, 0, 0.5);
            /* Semi-transparent background */
        }
    </style>
</head>

<?php include 'assets/php/navbar.php'; ?>

<div class="profile-card">
        <img id="profilePic" src="<?= viewProfilePic($db, $gUserId) ?>" alt="Profile Picture" class="profile-pic">
        <h3 class="profile-name"><?= $gUserName ?></h3>

<div class="d-flex gap-2">
            <button class="btn btn-custom flex-fill" data-bs-toggle="modal" data-bs-target="#editProfileModal">Edit Profile Image</button>
            <button class="btn btn-primary flex-fill" onclick="window.location.href='account.php';">Edit Profile</button>
        </div>

</div>

<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-dark text-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="editProfileModalLabel">Edit Profile</h5>
                    <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="uploadForm" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control bg-dark text-white" id="username" value="<?= $gUserName ?>">
                        </div>

<div class="mb-3">
                            <label for="fileInput" class="form-label">Upload Profile Picture</label>
                            <input type="file" name="profile_pic" accept="image/*" id="fileInput" class="form-control" required />
                        </div>

<div id="imageContainer" style="display:none;">
                            <img id="imagePreview" src="" alt="Image Preview" style="max-width: 100%;" />
                        </div>

<button type="button" id="cropBtn" class="btn btn-primary" style="display:none;">Crop and Save</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveProfileBtn">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

<? include 'assets/php/bottom_navbar.php' ?>
    <? include 'assets/php/footer.php' ?>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<!-- <script>
        // jQuery function to handle saving profile information
        function saveProfile() {
            const username = $('#username').val();
            const bio = $('#bio').val();

// Update profile card with new values
            $('.profile-name').text(username);
            $('.profile-info').html(bio.replace(/\n/g, '<br>'));

// Close the modal
            $('#editProfileModal').modal('hide');
        }

$(document).ready(function() {
            let cropper;

// Handle image file selection and preview
            $('#fileInput').on('change', function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();

reader.onload = function(e) {
                        $('#imagePreview').attr('src', e.target.result);
                        $('#imageContainer').show(); // Show the preview image

// Initialize Cropper.js with specific container size
                        if (cropper) {
                            cropper.destroy(); // Destroy the previous cropper if it exists
                        }

// Create new Cropper.js instance with custom settings
                        cropper = new Cropper($('#imagePreview')[0], {
                            aspectRatio: 1, // Maintain square aspect ratio
                            viewMode: 2, // Restrict the crop box to the canvas area
                            autoCropArea: 0.8, // Set initial crop box size (80% of the container)
                            scalable: true, // Allow zoom
                            zoomable: true, // Allow zoom
                            minCanvasWidth: 100, // Minimum width for the canvas
                            minCanvasHeight: 100, // Minimum height for the canvas
                            dragMode: 'move', // Allow dragging the image to reposition
                        });

// Show the crop button
                        $('#cropBtn').show();
                    };

reader.readAsDataURL(file); // Load the image file
                }
            });

// Handle crop button click
            $('#cropBtn').on('click', function() {
                if (cropper) {
                    // Get the cropped image as a canvas
                    const canvas = cropper.getCroppedCanvas();

// Convert the canvas to a blob and upload it
                    canvas.toBlob(function(blob) {
                        const formData = new FormData();
                        formData.append('profile_pic', blob, 'profile.jpg'); // Append the cropped image as form data

// Send the image to the server using AJAX
                        $.ajax({
                            url: '', // Submit to the same page (this PHP file)
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                const data = JSON.parse(response);
                                if (data.status === 'success') {
                                    alert('Profile picture updated successfully.');
                                    // Update the profile picture displayed on the page
                                    $('#profilePic').attr('src', data.path);
                                } else {
                                    alert('Error uploading image: ' + data.message);
                                }
                            },
                            error: function(xhr, status, error) {
                                alert('Error uploading cropped image.');
                            }
                        });
                    });
                }
            });
        });
    </script> -->

// Handle file input change
            $("#fileInput").on("change", function(event) {
                const file = event.target.files[0];

if (file) {
                    // Show image container and crop button (we no longer need the crop button)
                    $("#imageContainer").show();

const reader = new FileReader();
                    reader.onload = function(e) {
                        // Set the image source for preview
                        $("#imagePreview").attr("src", e.target.result);

// Use jQuery to get the image element
                        const $image = $("#imagePreview")[0]; // jQuery selector with [0] to get the DOM element

// Set the width and height for the image dynamically
                        const desiredWidth = 600; // Set your desired width here
                        const desiredHeight = 400; // Set your desired height here

// Set the image's width and height
                        $image.width = desiredWidth;
                        $image.height = desiredHeight;

// Initialize the Cropper instance once the image is loaded
                        if (cropper) {
                            cropper.destroy(); // Destroy the previous instance if any
                        }

// Initialize the Cropper with the desired settings (allow zooming out)
                        cropper = new Cropper($image, {
                            aspectRatio: 1, // Aspect ratio (1:1 for square crop)
                            viewMode: 2, // Ensures image is contained within the canvas (image scaling to fit)
                            autoCropArea: 0.8, // Area to crop initially
                            movable: true, // Allow image move
                            zoomable: true, // Allow zooming (both in and out)
                            rotatable: true, // Allow rotation
                            scalable: true, // Allow scaling
                            cropBoxResizable: true, // Allow resizing the crop box (this will resize the image area)
                            minContainerWidth: 300, // Minimum width of the container
                            minContainerHeight: 300, // Minimum height of the container
                            minZoom: 0.5, // Allow zooming out (min zoom set to 0.5, allowing zoom-out)
                            maxZoom: 3, // Optional: Limit zoom-in to 3x the image size (default is 1)
                            ready: function() {
                                // Set initial size of crop box, but the crop box will resize
                                const cropBoxData = cropper.getCropBoxData();
                                cropper.setCropBoxData({
                                    left: cropBoxData.left,
                                    top: cropBoxData.top,
                                    width: 300, // Set max crop box size
                                    height: 300 // Set max crop box size
                                });
                            },
                            // Allow the crop box resizing to a max of 300x300px
                            cropBoxMinWidth: 50, // Min size of the crop box
                            cropBoxMinHeight: 50, // Min size of the crop box
                            cropBoxMaxWidth: 300, // Max size of the crop box
                            cropBoxMaxHeight: 300, // Max size of the crop box
                            crop: function(event) {
                                // This function will no longer be used for cropping, but it can be left empty.
                            }
                        });
                    };
                    reader.readAsDataURL(file);
                }
            });

// Handle saving profile changes directly when the "Save Profile" button is clicked
            $("#saveProfileBtn").on("click", function() {
                if (cropper) {
                    // Get the current state of the image (zoomed, moved, resized)
                    const canvas = cropper.getCroppedCanvas(); // This is the current image state

// Convert the canvas to base64
                    const imageData = canvas.toDataURL("image/png");

// Add the base64 image data to the form as a hidden input field
                    $("#uploadForm").append(`<input type="hidden" name="image_state" value="${imageData}" />`);

// Now submit the form to save the profile
                    const formData = new FormData($("#uploadForm")[0]);

// Send the data to PHP (via AJAX)
                    $.ajax({
                        url: "save_profile.php", // PHP script to handle the save
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.status === 'success') {
                                alert(response.message);
                                // Optionally, update the image preview with the new image path
                                $("#profileImagePreview").attr("src", response.image_path);
                                // Close the modal
                                $('#editProfileModal').modal('hide');
                                window.location.reload();
                            } else {
                                alert(response.message); // Display error message
                            }
                        },
                        error: function() {
                            alert("An error occurred while saving your profile.");
                        }
                    });

}
            });
        });
    </script>

</body>

</html>