@extends('layouts.app')

@section('title', 'Setup Guide Auto Isolir')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <div>
                    <h4 class="mb-sm-0">
                        <i class="fas fa-cogs text-primary me-2"></i>Setup Guide Auto Isolir
                    </h4>
                    <p class="text-muted mb-0">Panduan lengkap setup sistem auto isolir</p>
                </div>
                <div class="page-title-right">
                    <a href="/auto-isolir" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>
                        Kembali ke Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list-ol text-primary me-2"></i>Langkah Setup
                    </h5>
                </div>
                <div class="card-body">
                    <div class="step-container">
                        <div class="step-item">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <h6>Install Dependencies</h6>
                                <pre class="bg-dark text-light p-3 rounded"><code>composer require spatie/laravel-permission
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"</code></pre>
                            </div>
                        </div>

                        <div class="step-item">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <h6>Setup Database</h6>
                                <pre class="bg-dark text-light p-3 rounded"><code>php artisan migrate
php artisan queue:table
php artisan migrate</code></pre>
                            </div>
                        </div>

                        <div class="step-item">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <h6>Setup Permissions</h6>
                                <pre class="bg-dark text-light p-3 rounded"><code>php artisan permission:create-role admin
php artisan permission:assign-role admin</code></pre>
                            </div>
                        </div>

                        <div class="step-item">
                            <div class="step-number">4</div>
                            <div class="step-content">
                                <h6>Configure Environment</h6>
                                <pre class="bg-dark text-light p-3 rounded"><code># .env file
QUEUE_CONNECTION=database
CACHE_DRIVER=file

# WhatsApp Gateway
WHATSAPP_GATEWAY_URL=your_gateway_url
WHATSAPP_GATEWAY_TOKEN=your_token

# Mikrotik API
MIKROTIK_HOST=192.168.1.1
MIKROTIK_USERNAME=admin
MIKROTIK_PASSWORD=password</code></pre>
                            </div>
                        </div>

                        <div class="step-item">
                            <div class="step-number">5</div>
                            <div class="step-content">
                                <h6>Setup Cronjob</h6>
                                <p>Pilih sesuai hosting Anda:</p>
                                <ul>
                                    <li><strong>cPanel:</strong> Login cPanel → Cron Jobs → Add cronjob</li>
                                    <li><strong>aaPanel:</strong> Login aaPanel → Cron → Add Task</li>
                                    <li><strong>Windows:</strong> Task Scheduler → Create Basic Task</li>
                                </ul>
                                <a href="/auto-isolir/scripts" class="btn btn-sm btn-info">
                                    <i class="fas fa-code me-1"></i>Lihat Scripts
                                </a>
                            </div>
                        </div>

                        <div class="step-item">
                            <div class="step-number">6</div>
                            <div class="step-content">
                                <h6>Test System</h6>
                                <pre class="bg-dark text-light p-3 rounded"><code># Test auto isolir
php artisan auto-isolir:check --dry-run

# Test queue worker
php artisan queue:work database --stop-when-empty</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle text-info me-2"></i>System Info
                    </h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <td>PHP Version:</td>
                            <td><code>{{ PHP_VERSION }}</code></td>
                        </tr>
                        <tr>
                            <td>Laravel:</td>
                            <td><code>{{ app()->version() }}</code></td>
                        </tr>
                        <tr>
                            <td>Queue Driver:</td>
                            <td><code>{{ config('queue.default') }}</code></td>
                        </tr>
                        <tr>
                            <td>Cache Driver:</td>
                            <td><code>{{ config('cache.default') }}</code></td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-exclamation-triangle text-warning me-2"></i>Troubleshooting
                    </h5>
                </div>
                <div class="card-body">
                    <h6>Common Issues:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-circle text-danger me-2" style="font-size: 6px;"></i>Queue tidak jalan → Cek QUEUE_CONNECTION</li>
                        <li><i class="fas fa-circle text-danger me-2" style="font-size: 6px;"></i>Permission error → Run php artisan permission:create-role</li>
                        <li><i class="fas fa-circle text-danger me-2" style="font-size: 6px;"></i>Cronjob tidak jalan → Cek path PHP</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.step-container {
    position: relative;
}

.step-item {
    display: flex;
    margin-bottom: 30px;
    position: relative;
}

.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 40px;
    bottom: -30px;
    width: 2px;
    background: #e9ecef;
}

.step-number {
    width: 40px;
    height: 40px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.step-content {
    flex: 1;
}

.step-content h6 {
    margin-bottom: 10px;
    color: #495057;
}

pre {
    font-size: 0.85rem;
}
</style>
@endsection