@include('admin.dash.layout.header')

<div class="nk-content">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="components-preview wide-md mx-auto">
                    <div class="nk-block nk-block-lg">
                        <div class="nk-block-head">
                            <div class="nk-block-head-content">
                                <h4 class="nk-block-title">Admin Settings</h4>
                                <div class="nk-block-des">
                                    <p>Manage your <code class="code-class">admin profile</code> and account settings.</p>
                                </div>
                            </div>
                        </div>

                        <div class="row g-gs">
                            <!-- Profile Information -->
                            <div class="col-lg-6">
                                <div class="card card-bordered">
                                    <div class="card-inner">
                                        <div class="card-title-group">
                                            <div class="card-title">
                                                <h6 class="title">Profile Information</h6>
                                            </div>
                                        </div>
                                        
                                        <form id="profile-form">
                                            @csrf
                                            <div class="row g-4">
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="form-label" for="admin-name">Full Name</label>
                                                        <div class="form-control-wrap">
                                                            <input type="text" class="form-control" id="admin-name" name="name" value="{{ auth()->guard('admin')->user()->name }}" placeholder="Enter your full name">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="form-label" for="admin-email">Email Address</label>
                                                        <div class="form-control-wrap">
                                                            <input type="email" class="form-control" id="admin-email" name="email" value="{{ auth()->guard('admin')->user()->email }}" placeholder="Enter your email">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <button type="submit" class="btn btn-primary">Update Profile</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Change Password -->
                            <div class="col-lg-6">
                                <div class="card card-bordered">
                                    <div class="card-inner">
                                        <div class="card-title-group">
                                            <div class="card-title">
                                                <h6 class="title">Change Password</h6>
                                            </div>
                                        </div>
                                        
                                        <form id="password-form">
                                            @csrf
                                            <div class="row g-4">
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="form-label" for="current-password">Current Password</label>
                                                        <div class="form-control-wrap">
                                                            <a href="#" class="form-icon form-icon-right passcode-switch lg" data-target="current-password">
                                                                <em class="passcode-icon icon-show icon ni ni-eye"></em>
                                                                <em class="passcode-icon icon-hide icon ni ni-eye-off"></em>
                                                            </a>
                                                            <input type="password" class="form-control" id="current-password" name="current_password" placeholder="Enter current password">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="form-label" for="new-password">New Password</label>
                                                        <div class="form-control-wrap">
                                                            <a href="#" class="form-icon form-icon-right passcode-switch lg" data-target="new-password">
                                                                <em class="passcode-icon icon-show icon ni ni-eye"></em>
                                                                <em class="passcode-icon icon-hide icon ni ni-eye-off"></em>
                                                            </a>
                                                            <input type="password" class="form-control" id="new-password" name="new_password" placeholder="Enter new password">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="form-label" for="confirm-password">Confirm New Password</label>
                                                        <div class="form-control-wrap">
                                                            <a href="#" class="form-icon form-icon-right passcode-switch lg" data-target="confirm-password">
                                                                <em class="passcode-icon icon-show icon ni ni-eye"></em>
                                                                <em class="passcode-icon icon-hide icon ni ni-eye-off"></em>
                                                            </a>
                                                            <input type="password" class="form-control" id="confirm-password" name="confirm_password" placeholder="Confirm new password">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <button type="submit" class="btn btn-danger">Change Password</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Account Information -->
                            <div class="col-12">
                                <div class="card card-bordered">
                                    <div class="card-inner">
                                        <div class="card-title-group">
                                            <div class="card-title">
                                                <h6 class="title">Account Information</h6>
                                            </div>
                                        </div>
                                        
                                        <ul class="data-list is-compact">
                                            <li class="data-item">
                                                <div class="data-col">
                                                    <div class="data-label">Admin ID</div>
                                                    <div class="data-value">{{ auth()->guard('admin')->user()->id }}</div>
                                                </div>
                                            </li>
                                            
                                            <li class="data-item">
                                                <div class="data-col">
                                                    <div class="data-label">Account Created</div>
                                                    <div class="data-value">{{ \Carbon\Carbon::parse(auth()->guard('admin')->user()->created_at)->format('M d, Y h:i A') }}</div>
                                                </div>
                                            </li>
                                            <li class="data-item">
                                                <div class="data-col">
                                                    <div class="data-label">Last Updated</div>
                                                    <div class="data-value">{{ \Carbon\Carbon::parse(auth()->guard('admin')->user()->updated_at)->format('M d, Y h:i A') }}</div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@include('admin.dash.layout.footer')


<script>
$(document).ready(function() {
    // Handle profile form submission
    $('#profile-form').on('submit', function(e) {
        e.preventDefault();
        
        const btn = $(this).find('button[type="submit"]');
        const originalText = btn.html();
        btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Updating...').prop('disabled', true);
        
        $.post('/admin/settings/profile', $(this).serialize(), function(response) {
            if (response.success) {
                alert('Profile updated successfully!');
            } else {
                alert('Error updating profile: ' + (response.message || 'Unknown error'));
            }
        }).fail(function() {
            alert('Error updating profile. Please try again.');
        }).always(function() {
            btn.html(originalText).prop('disabled', false);
        });
    });

    // Handle password form submission
    $('#password-form').on('submit', function(e) {
        e.preventDefault();
        
        // Check if new passwords match
        const newPassword = $('#new-password').val();
        const confirmPassword = $('#confirm-password').val();
        
        if (newPassword !== confirmPassword) {
            alert('New passwords do not match!');
            return;
        }
        
        if (newPassword.length < 8) {
            alert('New password must be at least 8 characters long!');
            return;
        }
        
        const btn = $(this).find('button[type="submit"]');
        const originalText = btn.html();
        btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Changing...').prop('disabled', true);
        
        $.post('/admin/settings/password', $(this).serialize(), function(response) {
            if (response.success) {
                alert('Password changed successfully!');
                $('#password-form')[0].reset();
            } else {
                alert('Error changing password: ' + (response.message || 'Unknown error'));
            }
        }).fail(function() {
            alert('Error changing password. Please try again.');
        }).always(function() {
            btn.html(originalText).prop('disabled', false);
        });
    });

    // Password visibility toggle
    $('.passcode-switch').on('click', function(e) {
        e.preventDefault();
        const target = $(this).data('target');
        const input = $('#' + target);
        const showIcon = $(this).find('.icon-show');
        const hideIcon = $(this).find('.icon-hide');
        
        if (input.attr('type') === 'password') {
            input.attr('type', 'text');
            showIcon.hide();
            hideIcon.show();
        } else {
            input.attr('type', 'password');
            showIcon.show();
            hideIcon.hide();
        }
    });
});
</script>