@extends('app')
@section('content')
@include('layout.admin_sidebar')

<!-- Dashboard Section -->
<div class="dashboard-container">
    <p class="dashboard-heading mb-3">Dashboard</p>
    <div class="dashboard-card">
        <div class="system-info px-3 py-2 dashboard-info">
            <div class="d-flex justify-content-between align-items-center">
                <p class="text-light m-0 align-content-center">System Information</p>
                <!-- Button to trigger modal -->
                <button type="button" class="change-password-btn btn" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                    Change Password
                </button>
            </div>
        </div>
        <div class="dashboard-content bg-light">
            <p>Site Name: FundMeSmart</p>
            <p>Site Address: <a href="{{ env('APP_URL') }}" target="_blank">{{ env('APP_URL') }}</a></p>
        </div>
    </div>
</div>

<!-- Change Password Modal -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content dashboard-modal-content">
            <!-- Modal Header -->
            <div class="modal-header dashboard-header1" style="background-color: #5e0c0c !important; border-radius: 0 !important;">
                <p class="text-light changepassword-title1" id="changePasswordModalLabel">Change Password </p>
                <!-- <p class="modal-title">Change Password</p> -->
                <button type="button" class="btn-close dashboard-close border-0 fw-bolder" data-bs-dismiss="modal" aria-label="Close" id="closeBtn"></button>
            </div>
            <!-- Modal Body -->
            <div class="modal-body dashboard-body">
                <form id="change-password-form">
                    <!-- Old Password -->
                    <div class="mb-3 mt-3 form-grid dashboard-grid">
                        <label for="currentPassword" class="form-label dashboard-label text-secondary">Current Password <span class="text-danger">*</span>:</label>
                        <input type="password" class="form-control rounded-0 border-secondary p-1" id="currentPassword" name="currentPassword" autocomplete="off" placeholder="Enter your current password">
                        <span class="eye eyeIcon position-absolute"><i class="fa-regular fa-eye-slash closed-eye-icon11 eye-icon "></i></span>
                        <span></span>
                        <small id="currentpasswordError" class="userpasswordError text-danger"></small>
                    </div>


                    <!-- New Password -->
                    <div class="mb-3 form-grid dashboard-grid">
                        <label for="newPassword" class="form-label dashboard-label text-secondary">New Password <span class="text-danger">*</span>:</label>
                        <input type="password" class="form-control rounded-0 border-secondary p-1" id="newPassword" name="newPassword" autocomplete="off" placeholder="Enter your new password">
                        <span class="eye eyeIcon position-absolute"><i class="fa-regular fa-eye-slash closed-eye-icon22 eye-icon"></i></span>
                        <span></span>
                        <small id="newpasswordError" class="userpasswordError text-danger"></small>
                    </div>

                    <!-- Confirm New Password -->
                    <div class="mb-3 form-grid dashboard-grid">
                        <label for="newPassword_confirmation" class="form-label dashboard-label text-secondary">Confirm New Password <span class="text-danger">*</span>:</label>
                        <input type="password" class="form-control rounded-0 border-secondary p-1" id="newPassword_confirmation" name="newPassword_confirmation" autocomplete="off" placeholder="Confirm your new password">
                        <span class="eye eyeIcon position-absolute"><i class="fa-regular fa-eye-slash closed-eye-icon33 eye-icon"></i></span>
                        <span></span>
                        <small id="confirmpasswordError" class="userpasswordError text-danger"></small>
                    </div>


            </div>

            <!-- Modal Footer -->
            <div class="modal-footer" style=" background-color: white !important;border-radius: 0 !important;">
                <button type="button" id="cancelBtn" class="rounded-1 btn-transparent-blue me-2 bg-white dashboard-cancel p-1" data-bs-dismiss="modal">Cancel</button>
                <button id="saveBtn" type="submit" class="rounded-1 border-0 dashboard-save p-1">
                    Save
                    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                </button>

                <span class="spinner-border spinner-border-sm d-none change-psd-spinner"></span>
            </div>
            </form>
        </div>
    </div>
</div>

<!-- Include jQuery for AJAX -->
@vite(['resources/js/pages/admin_dashboard.js'])
@vite(['resources/js/admin_panel/admin_panel_login.js'])



@endsection