@push('title')
Dkim activation
@endpush
<div class="content-wrapper">
    <div class="row">

        <!-- LEFT COLUMN: Accounts & Password & Actions Cards -->
        <div class="col-md-4">

            <!-- 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-user"></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="6"></textarea>


                    </div>
                </div>
            </div>
            <!-- Subdomains Card -->
            <div class="card mb-3">
                <div class="card-header text-sm">
                    <i class="fa fa-globe"></i> Enter Subdomains
                </div>
                <div class="card-body">
                    <div class="form-group text-sm">
                        <label for="subdomains">Subdomains (one per line):</label>
                        <textarea id="subdomains" wire:model="subdomains" class="form-control text-sm" rows="6"></textarea>
                    </div>
                </div>
            </div>

            <!-- Password & Actions Card -->
            <div class="card mb-3">
                <div class="card-header text-sm">
                    <i class="fa fa-key"></i> Password & Actions
                </div>
                <div class="card-body">
                    <div class="form-group text-sm position-relative">
                        <input type="password" id="password" wire:model="password" class="form-control text-sm">
                        <i class="fa fa-eye toggle-password position-absolute" style="right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer;"></i>
                    </div>
                    <button wire:click="executeMasterScript" wire:loading.attr="disabled" class="btn btn-primary mb-2 text-sm">
                        <span wire:loading wire:target="executeMasterScript" class="text-sm">
                            <i class="fa fa-spinner fa-spin"></i> Loading...
                        </span>
                        <span wire:loading.remove wire:target="executeMasterScript" class="text-sm">
                            <i class="fa fa-play"></i> Active Dkim
                        </span>
                    </button>
                </div>
            </div>
        </div>

        <!-- RIGHT COLUMN: Status & Data Card -->
        <div class="col-md-8">
            <!-- 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">
                    @if(!empty($csvData))
                    {{-- Display CSV Data in Table Format --}}
                    <table class="table table-bordered table-sm text-sm">
                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>Subdomain</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($csvData as $data)
                            <tr>
                                <td>{{ $data['email'] }}</td>
                                <td>{{ $data['subdomain'] }}</td>
                                <td>{{ $data['status'] }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    <p class="text-center text-sm">
                        <i class="fa fa-exclamation-circle"></i> No data available.
                    </p>
                    @endif
                </div>
            </div>
        </div>


    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const togglePasswordIcon = document.querySelector('.toggle-password');
        const passwordInput = document.getElementById('password');
        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>