@extends('layout.app')

@section('title', 'Pengaturan Auto Isolir - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Pengaturan Auto Isolir" 
    subtitle="Konfigurasi isolir otomatis untuk pelanggan yang telat bayar"
    :breadcrumbs="[
        ['name' => 'Dashboard', 'url' => route('dashboard')],
        ['name' => 'Pengaturan', 'url' => route('pengaturan.dashboard')],
        ['name' => 'Auto Isolir']
    ]"
/>

<div class="container-fluid py-4">
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Status</p>
                            <h4 class="mb-0">
                                @if($settings['auto_isolir_enabled'])
                                    <span class="badge badge-sm bg-gradient-success">Aktif</span>
                                @else
                                    <span class="badge badge-sm bg-gradient-secondary">Nonaktif</span>
                                @endif
                            </h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-{{ $settings['auto_isolir_enabled'] ? 'success' : 'secondary' }} shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">{{ $settings['auto_isolir_enabled'] ? 'check_circle' : 'cancel' }}</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-{{ $settings['auto_isolir_enabled'] ? 'success' : 'secondary' }}">
                        {{ $settings['auto_isolir_enabled'] ? 'Auto isolir aktif' : 'Auto isolir tidak aktif' }}
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Jalankan Terakhir</p>
                            <h4 class="mb-0">
                                @if($stats['last_run'])
                                    {{ \Carbon\Carbon::parse($stats['last_run'])->format('d/m/Y H:i') }}
                                @else
                                    <span class="text-muted">Belum pernah</span>
                                @endif
                            </h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-info shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">schedule</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-info">
                        {{ $stats['last_run_count'] ?? 0 }} pelanggan diisolir
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Diisolir Hari Ini</p>
                            <h4 class="mb-0">{{ $stats['total_isolated_today'] ?? 0 }}</h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-warning shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">notification_important</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-warning">Total isolir hari ini</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Settings Form -->
    <div class="row">
        <div class="col-xl-8">
            <div class="card my-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">settings</i> Konfigurasi Auto Isolir
                    </h6>
                </div>
                <div class="card-body pt-3">
                    @if(session('success'))
                        <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
                            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i></span>
                            <span class="alert-text">{{ session('success') }}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger text-white alert-dismissible fade show" role="alert">
                            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                            <span class="alert-text">{{ session('error') }}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('pengaturan.auto-isolir.update') }}">
                        @csrf

                        <!-- Enable Auto Isolir -->
                        <div class="form-group mb-4">
                            <label class="form-label mb-3">Aktifkan Auto Isolir</label>
                            <div class="form-check form-switch mb-2">
                                <input type="checkbox" class="form-check-input" id="auto_isolir_enabled" 
                                       name="auto_isolir_enabled" value="1" 
                                       {{ $settings['auto_isolir_enabled'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="auto_isolir_enabled">
                                    <strong>Aktifkan isolir otomatis untuk pelanggan yang telat bayar</strong>
                                </label>
                            </div>
                            <small class="form-text text-muted d-block">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>
                                Sistem akan otomatis mengisolir pelanggan yang tagihannya sudah jatuh tempo
                            </small>
                        </div>

                        <hr class="my-4">

                        <!-- Grace Period -->
                        <div class="form-group mb-4">
                            <label for="auto_isolir_grace_period" class="form-label">
                                Grace Period (Hari) <span class="text-danger">*</span>
                            </label>
                            <input type="number" class="form-control" id="auto_isolir_grace_period" 
                                   name="auto_isolir_grace_period" 
                                   value="{{ $settings['auto_isolir_grace_period'] }}" 
                                   min="0" max="30" required>
                            <small class="form-text text-muted d-block mt-1">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">schedule</i>
                                Jumlah hari setelah jatuh tempo sebelum pelanggan diisolir. 
                                Contoh: 0 = langsung isolir saat jatuh tempo, 3 = isolir 3 hari setelah jatuh tempo.
                            </small>
                        </div>

                        <!-- Schedule Time -->
                        <div class="form-group mb-4">
                            <label for="auto_isolir_schedule_time" class="form-label">
                                Waktu Jalankan <span class="text-danger">*</span>
                            </label>
                            <input type="time" class="form-control" id="auto_isolir_schedule_time" 
                                   name="auto_isolir_schedule_time" 
                                   value="{{ $settings['auto_isolir_schedule_time'] }}" required>
                            <small class="form-text text-muted d-block mt-1">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">access_time</i>
                                Waktu eksekusi auto isolir setiap hari (format: HH:MM, timezone: Asia/Jakarta)
                            </small>
                        </div>

                        <hr class="my-4">

                        <!-- Isolation Method Settings -->
                        <h6 class="font-weight-bold mb-3 d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">security</i> Metode Isolir
                        </h6>
                        <p class="text-sm text-muted mb-4">
                            Pilih metode isolir yang akan digunakan. Anda bisa memilih salah satu atau keduanya.
                        </p>

                        <div class="form-group mb-4">
                            <div class="form-check mb-3 p-3" style="background: rgba(94, 114, 228, 0.05); border-radius: 0.5rem;">
                                <input type="checkbox" class="form-check-input" id="auto_isolir_method_pppoe" 
                                       name="auto_isolir_method_pppoe" value="1" 
                                       {{ $settings['auto_isolir_method_pppoe'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="auto_isolir_method_pppoe">
                                    <strong>PPPoE</strong> - Isolir menggunakan PPPoE user di Mikrotik
                                </label>
                                <small class="form-text text-muted d-block mt-1 ms-4">
                                    <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">router</i>
                                    Nonaktifkan PPPoE user di Mikrotik untuk pelanggan yang memiliki username_pppoe
                                </small>
                            </div>

                            <div class="form-check mb-3 p-3" style="background: rgba(94, 114, 228, 0.05); border-radius: 0.5rem;">
                                <input type="checkbox" class="form-check-input" id="auto_isolir_method_static_ip" 
                                       name="auto_isolir_method_static_ip" value="1" 
                                       {{ $settings['auto_isolir_method_static_ip'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="auto_isolir_method_static_ip">
                                    <strong>Static IP</strong> - Isolir menggunakan static IP di Mikrotik
                                </label>
                                <small class="form-text text-muted d-block mt-1 ms-4">
                                    <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">network_check</i>
                                    Blokir static IP dengan firewall rule untuk pelanggan yang memiliki ip_address
                                </small>
                            </div>

                            <div class="alert alert-info text-white mt-3" style="border-radius: 0.5rem;">
                                <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>
                                <strong>Catatan:</strong> Sistem akan otomatis menggunakan metode yang sesuai dengan data pelanggan. 
                                Jika pelanggan punya PPPoE dan static IP, keduanya akan diisolir jika kedua metode diaktifkan.
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Notification Settings -->
                        <h6 class="font-weight-bold mb-3 d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">notifications</i> Pengaturan Notifikasi
                        </h6>

                        <div class="form-group mb-4">
                            <label class="form-label mb-3">Kirim Notifikasi</label>
                            <div class="form-check form-switch mb-2">
                                <input type="checkbox" class="form-check-input" id="auto_isolir_notification" 
                                       name="auto_isolir_notification" value="1" 
                                       {{ $settings['auto_isolir_notification'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="auto_isolir_notification">
                                    <strong>Kirim notifikasi sebelum isolir</strong>
                                </label>
                            </div>
                            <small class="form-text text-muted d-block">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">message</i>
                                Kirim notifikasi WhatsApp/Email sebelum pelanggan diisolir
                            </small>
                        </div>

                        <div class="form-group mb-4">
                            <label for="auto_isolir_notification_days_before" class="form-label">
                                Notifikasi Sebelum Isolir (Hari)
                            </label>
                            <input type="number" class="form-control" id="auto_isolir_notification_days_before" 
                                   name="auto_isolir_notification_days_before" 
                                   value="{{ $settings['auto_isolir_notification_days_before'] }}" 
                                   min="0" max="7" required>
                            <small class="form-text text-muted d-block mt-1">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">calendar_today</i>
                                Kirim notifikasi X hari sebelum isolir (jika notification enabled)
                            </small>
                        </div>

                        <div class="mt-4 d-flex flex-wrap" style="gap: 0.5rem;">
                            <button type="submit" class="btn bg-gradient-primary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i> Simpan Pengaturan
                            </button>
                            <button type="button" class="btn bg-gradient-info mb-0" onclick="testAutoIsolir()">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">science</i> Test (Dry Run)
                            </button>
                            <button type="button" class="btn bg-gradient-warning mb-0" onclick="runNow()">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">play_arrow</i> Jalankan Sekarang
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Info Card -->
        <div class="col-xl-4">
            <div class="card my-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">info</i> Informasi
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <h6 class="font-weight-bold mb-3 d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1; color: #5e72e4;">help</i> Cara Kerja Auto Isolir
                    </h6>
                    <ol class="text-sm mb-4" style="padding-left: 1.5rem;">
                        <li class="mb-2">Sistem akan mengecek tagihan yang sudah jatuh tempo setiap hari</li>
                        <li class="mb-2">Pelanggan dengan tagihan status "Belum Bayar" atau "Jatuh Tempo" akan diisolir</li>
                        <li class="mb-2">Grace period menentukan berapa hari setelah jatuh tempo baru diisolir</li>
                        <li class="mb-2">Isolir akan:
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>Mengubah status pelanggan menjadi "Suspend"</li>
                                <li>Menonaktifkan PPPoE user di Mikrotik (jika metode PPPoE diaktifkan)</li>
                                <li>Memblokir static IP di Mikrotik (jika metode Static IP diaktifkan)</li>
                                <li>Menonaktifkan Hotspot user</li>
                                <li>Mengirim notifikasi (jika diaktifkan)</li>
                            </ul>
                        </li>
                    </ol>

                    <hr class="my-4">

                    <h6 class="font-weight-bold mb-3 d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1; color: #5e72e4;">schedule</i> Cron Job Setup
                    </h6>
                    <p class="text-sm mb-2">
                        Pastikan cron job sudah diatur di server:
                    </p>
                    <div class="bg-gray-100 p-3 rounded mb-3" style="background: #f8f9fa !important;">
                        <code class="text-xs d-block" style="color: #344767;">
                            * * * * * cd /path-to-project && php artisan schedule:run >> /dev/null 2>&1
                        </code>
                    </div>
                    <p class="text-sm text-muted mb-0">
                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">check_circle</i>
                        Auto isolir akan berjalan setiap hari sesuai waktu yang diatur.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function testAutoIsolir() {
    const gracePeriod = document.getElementById('auto_isolir_grace_period').value;
    
    if (confirm('Jalankan test (dry run)? Ini tidak akan mengisolir pelanggan, hanya menampilkan hasil.')) {
        $.ajax({
            url: '{{ route("pengaturan.auto-isolir.test") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                grace_period: gracePeriod
            },
            success: function(response) {
                if (response.success) {
                    alert('Test Results:\n\n' + response.output);
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr) {
                alert('Terjadi kesalahan saat menjalankan test');
            }
        });
    }
}

function runNow() {
    const gracePeriod = document.getElementById('auto_isolir_grace_period').value;
    
    if (confirm('Jalankan auto isolir sekarang? Ini akan mengisolir pelanggan yang telat bayar!')) {
        $.ajax({
            url: '{{ route("pengaturan.auto-isolir.run-now") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                grace_period: gracePeriod
            },
            success: function(response) {
                if (response.success) {
                    alert('Auto isolir berhasil dijalankan!\n\n' + response.output);
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr) {
                alert('Terjadi kesalahan saat menjalankan auto isolir');
            }
        });
    }
}
</script>
@endsection