@push('title')
    Change Password
@endpush
<div class="content-wrapper">
    <div class="row">
        <!-- LEFT COLUMN: Accounts & New Password Cards -->
        <div class="col-md-6">

            <!-- Notification for errors -->
            @if (session()->has('error'))
            <div class="alert alert-danger text-sm mb-3">
                <i class="fa fa-exclamation-triangle"></i> {{ session('error') }}
            </div>
            @endif

            <!-- Accounts Card -->
            <div class="card mb-3">
                <div class="card-header text-sm">
                    <i class="fa fa-users"></i> Enter Accounts
                </div>
                <div class="card-body">
                    <div class="form-group text-sm">
                        <label for="accounts">Accounts (one per line):</label>
                        <textarea id="accounts" wire:model="accounts" class="form-control text-sm" rows="10" placeholder="e.g., john@random.onmicrosoft.com currentPassword"></textarea>
                    </div>
                </div>
            </div>

            <!-- New Password & Actions Card -->
            <div class="card mb-3">
                <div class="card-header text-sm">
                    <i class="fa fa-key"></i> New Password & Actions
                </div>
                <div class="card-body">
                    <div class="form-group text-sm position-relative">
                        <input type="password" id="newPassword" wire:model="newPassword" class="form-control text-sm" placeholder="Enter new password">
                        <i class="fa fa-eye toggle-password position-absolute" style="right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer;"></i>
                    </div>

                    <button wire:click="generateCSVs" wire:loading.attr="disabled" class="btn btn-secondary mb-2 text-sm" data-toggle="tooltip" title="Generate CSV files for each account">
                        <span wire:loading wire:target="generateCSVs" class="text-sm">
                            <i class="fa fa-spinner fa-spin"></i>
                        </span>
                        <span wire:loading.remove wire:target="generateCSVs" class="text-sm">
                            Generate
                        </span>
                    </button>
                    <button wire:click="executePasswordChangeScript" wire:loading.attr="disabled" class="btn btn-primary mb-2 text-sm" data-toggle="tooltip" title="Run the password change script">
                        <span wire:loading wire:target="executePasswordChangeScript" class="text-sm">
                            <i class="fa fa-spinner fa-spin"></i>
                        </span>
                        <span wire:loading.remove wire:target="executePasswordChangeScript" class="text-sm">
                            Execute
                        </span>
                    </button>
                </div>
            </div>
        </div>

        <!-- RIGHT COLUMN: Status & Data Card -->
        <div class="col-md-6">
            <!-- Status & Data Card -->
            <div class="card">
                <div class="card-header text-sm">
                    <i class="fa fa-info-circle"></i> Status & Data
                </div>
                <div class="card-body">
                    {{-- Display status after executing the password change script --}}
                    @if($status)
                    <div class="alert alert-info mb-3 text-sm">
                        <pre>{{ $status }}</pre>
                    </div>
                    @endif

                    {{-- Display CSV Data in Table Format --}}
                    <table class="table table-bordered table-sm text-sm">
                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($csvData as $data)
                            <tr>
                                <td>{{ $data['email'] }}</td>
                                <td>{{ $data['status'] }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-sm">
                                    <i class="fa fa-exclamation-circle"></i> No data available.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const togglePasswordIcon = document.querySelector('.toggle-password');
        const passwordInput = document.getElementById('newPassword');
        togglePasswordIcon.addEventListener('click', function() {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                togglePasswordIcon.classList.remove('fa-eye');
                togglePasswordIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                togglePasswordIcon.classList.add('fa-eye');
                togglePasswordIcon.classList.remove('fa-eye-slash');
            }
        });
    });
</script>