@extends('admin.layout')

@section('title', 'Pengaturan')
@section('page-title', 'Pengaturan')

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 text-primary fw-bold">
                        <i class="fas fa-cog me-2"></i>Pengaturan
                    </h1>
                    <p class="text-muted mb-0">Kelola pengaturan umum aplikasi dan informasi hotel</p>
                </div>
            </div>
        </div>
    </div>

    

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <strong>Terjadi kesalahan:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-hotel text-primary me-2"></i>Pengaturan Aplikasi
                    </h5>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- Hotel Information Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary fw-bold mb-3">
                                    <i class="fas fa-building me-2"></i>Informasi Hotel
                                </h6>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="hotel_name" class="form-label fw-medium">Nama Hotel *</label>
                                <input type="text" class="form-control @error('hotel_name') is-invalid @enderror" 
                                       id="hotel_name" name="hotel_name" 
                                       value="{{ old('hotel_name', $settings['hotel_name']) }}" 
                                       placeholder="Masukkan nama hotel" required>
                                @error('hotel_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="hotel_email" class="form-label fw-medium">Email Hotel</label>
                                <input type="email" class="form-control @error('hotel_email') is-invalid @enderror" 
                                       id="hotel_email" name="hotel_email" 
                                       value="{{ old('hotel_email', $settings['hotel_email']) }}" 
                                       placeholder="email@hotel.com">
                                @error('hotel_email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="hotel_phone" class="form-label fw-medium">Nomor Telepon</label>
                                <input type="text" class="form-control @error('hotel_phone') is-invalid @enderror" 
                                       id="hotel_phone" name="hotel_phone" 
                                       value="{{ old('hotel_phone', $settings['hotel_phone']) }}" 
                                       placeholder="+62 xxx xxxx xxxx">
                                @error('hotel_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="hotel_website" class="form-label fw-medium">Website Hotel</label>
                                <input type="text" class="form-control @error('hotel_website') is-invalid @enderror" 
                                       id="hotel_website" name="hotel_website" 
                                       value="{{ old('hotel_website', $settings['hotel_website']) }}" 
                                       placeholder="https://www.hotel.com">
                                @error('hotel_website')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="currency" class="form-label fw-medium">Mata Uang *</label>
                                <select class="form-control @error('currency') is-invalid @enderror" 
                                        id="currency" name="currency" required>
                                    <option value="IDR" {{ old('currency', $settings['currency']) == 'IDR' ? 'selected' : '' }}>IDR - Rupiah Indonesia</option>
                                    <option value="USD" {{ old('currency', $settings['currency']) == 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                                    <option value="EUR" {{ old('currency', $settings['currency']) == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                    <option value="SGD" {{ old('currency', $settings['currency']) == 'SGD' ? 'selected' : '' }}>SGD - Singapore Dollar</option>
                                </select>
                                @error('currency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-12">
                                <label for="hotel_address" class="form-label fw-medium">Alamat Hotel</label>
                                <textarea class="form-control @error('hotel_address') is-invalid @enderror" 
                                          id="hotel_address" name="hotel_address" rows="3" 
                                          placeholder="Masukkan alamat lengkap hotel">{{ old('hotel_address', $settings['hotel_address']) }}</textarea>
                                @error('hotel_address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <label for="hotel_logo" class="form-label fw-medium">Logo Hotel</label>
                                @if(isset($settings['hotel_logo']) && $settings['hotel_logo'])
                                    <div class="mb-2">
                                        <img src="{{ route('admin.file', ['path' => $settings['hotel_logo']]) }}" 
                                             alt="Logo Hotel" class="img-thumbnail" 
                                             style="max-height: 100px; max-width: 200px;">
                                        <small class="text-muted d-block">Logo saat ini</small>
                                    </div>
                                @endif
                                <input type="file" class="form-control @error('hotel_logo') is-invalid @enderror" 
                                       id="hotel_logo" name="hotel_logo" 
                                       accept="image/jpeg,image/png,image/jpg,image/gif,image/svg">
                                <small class="text-muted">Format yang didukung: JPEG, PNG, JPG, GIF, SVG. Maksimal 2MB.</small>
                                @error('hotel_logo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Operational Settings Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary fw-bold mb-3">
                                    <i class="fas fa-clock me-2"></i>Pengaturan Operasional
                                </h6>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="check_in_time" class="form-label fw-medium">Waktu Check-in *</label>
                                <input type="time" class="form-control @error('check_in_time') is-invalid @enderror" 
                                       id="check_in_time" name="check_in_time" 
                                       value="{{ old('check_in_time', $settings['check_in_time']) }}" required>
                                @error('check_in_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="check_out_time" class="form-label fw-medium">Waktu Check-out *</label>
                                <input type="time" class="form-control @error('check_out_time') is-invalid @enderror" 
                                       id="check_out_time" name="check_out_time" 
                                       value="{{ old('check_out_time', $settings['check_out_time']) }}" required>
                                @error('check_out_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="timezone" class="form-label fw-medium">Zona Waktu *</label>
                                <select class="form-control @error('timezone') is-invalid @enderror" 
                                        id="timezone" name="timezone" required>
                                    <option value="Asia/Jakarta" {{ old('timezone', $settings['timezone']) == 'Asia/Jakarta' ? 'selected' : '' }}>Asia/Jakarta (WIB)</option>
                                    <option value="Asia/Makassar" {{ old('timezone', $settings['timezone']) == 'Asia/Makassar' ? 'selected' : '' }}>Asia/Makassar (WITA)</option>
                                    <option value="Asia/Jayapura" {{ old('timezone', $settings['timezone']) == 'Asia/Jayapura' ? 'selected' : '' }}>Asia/Jayapura (WIT)</option>
                                </select>
                                @error('timezone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check form-switch mb-2 mt-1">
                                    <input class="form-check-input" type="checkbox"
                                           id="auto_checkout_enabled" name="auto_checkout_enabled"
                                           {{ old('auto_checkout_enabled', $settings['auto_checkout_enabled'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-medium" for="auto_checkout_enabled">
                                        Aktifkan Auto Checkout
                                    </label>
                                </div>
                                <div id="auto-checkout-time-wrap">
                                    <label for="auto_checkout_time" class="form-label fw-medium">Waktu Auto Checkout</label>
                                    <input type="time" class="form-control @error('auto_checkout_time') is-invalid @enderror"
                                           id="auto_checkout_time" name="auto_checkout_time"
                                           value="{{ old('auto_checkout_time', $settings['auto_checkout_time'] ?? $settings['check_out_time']) }}">
                                    @error('auto_checkout_time')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Sistem akan otomatis checkout tamu pada waktu ini setiap hari.</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch mb-2 mt-1">
                                    <input class="form-check-input" type="checkbox"
                                           id="auto_extend_charge_enabled" name="auto_extend_charge_enabled"
                                           {{ old('auto_extend_charge_enabled', $settings['auto_extend_charge_enabled'] ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-medium" for="auto_extend_charge_enabled">
                                        Aktifkan Auto Biaya Extend
                                    </label>
                                </div>
                                <div class="form-text">Jika nonaktif, sistem tidak akan menambahkan biaya extend otomatis saat update booking/check-out.</div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="extra_bed_price" class="form-label fw-medium">Harga Extra Bed per malam</label>
                                <input type="number" min="0" step="1"
                                       class="form-control @error('extra_bed_price') is-invalid @enderror"
                                       id="extra_bed_price" name="extra_bed_price"
                                       value="{{ old('extra_bed_price', $settings['extra_bed_price'] ?? 150000) }}"
                                       placeholder="contoh: 150000">
                                @error('extra_bed_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Dipakai saat jumlah tamu melebihi kapasitas kamar.</div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Email SMTP Settings Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary fw-bold mb-3">
                                    <i class="fas fa-envelope me-2"></i>Pengaturan Email SMTP
                                </h6>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="smtp_host" class="form-label fw-medium">SMTP Host</label>
                                <input type="text" class="form-control @error('smtp_host') is-invalid @enderror" 
                                       id="smtp_host" name="smtp_host" 
                                       value="{{ old('smtp_host', $settings['smtp_host']) }}" 
                                       placeholder="smtp.gmail.com">
                                @error('smtp_host')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="smtp_port" class="form-label fw-medium">SMTP Port</label>
                                <input type="number" class="form-control @error('smtp_port') is-invalid @enderror" 
                                       id="smtp_port" name="smtp_port" 
                                       value="{{ old('smtp_port', $settings['smtp_port']) }}" 
                                       placeholder="587">
                                @error('smtp_port')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="smtp_username" class="form-label fw-medium">SMTP Username</label>
                                <input type="email" class="form-control @error('smtp_username') is-invalid @enderror" 
                                       id="smtp_username" name="smtp_username" 
                                       value="{{ old('smtp_username', $settings['smtp_username']) }}" 
                                       placeholder="your-email@gmail.com">
                                @error('smtp_username')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="smtp_password" class="form-label fw-medium">SMTP Password</label>
                                <input type="password" class="form-control @error('smtp_password') is-invalid @enderror" 
                                       id="smtp_password" name="smtp_password" 
                                       value="{{ old('smtp_password', $settings['smtp_password']) }}" 
                                       placeholder="App Password atau Password Email">
                                @error('smtp_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Untuk Gmail, gunakan App Password bukan password biasa</div>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="smtp_encryption" class="form-label fw-medium">SMTP Encryption</label>
                                <select class="form-control @error('smtp_encryption') is-invalid @enderror" 
                                        id="smtp_encryption" name="smtp_encryption">
                                    <option value="tls" {{ old('smtp_encryption', $settings['smtp_encryption']) == 'tls' ? 'selected' : '' }}>TLS</option>
                                    <option value="ssl" {{ old('smtp_encryption', $settings['smtp_encryption']) == 'ssl' ? 'selected' : '' }}>SSL</option>
                                    <option value="" {{ old('smtp_encryption', $settings['smtp_encryption']) == '' ? 'selected' : '' }}>None</option>
                                </select>
                                @error('smtp_encryption')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="mail_from_address" class="form-label fw-medium">From Email Address</label>
                                <input type="email" class="form-control @error('mail_from_address') is-invalid @enderror" 
                                       id="mail_from_address" name="mail_from_address" 
                                       value="{{ old('mail_from_address', $settings['mail_from_address']) }}" 
                                       placeholder="noreply@hotel.com">
                                @error('mail_from_address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="mail_from_name" class="form-label fw-medium">From Name</label>
                                <input type="text" class="form-control @error('mail_from_name') is-invalid @enderror" 
                                       id="mail_from_name" name="mail_from_name" 
                                       value="{{ old('mail_from_name', $settings['mail_from_name']) }}" 
                                       placeholder="Hotel Management System">
                                @error('mail_from_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-end h-100">
                                    <button type="button" class="btn btn-outline-info" id="testEmailBtn">
                                        <i class="fas fa-paper-plane me-1"></i>Test Email
                                    </button>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- System Settings Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary fw-bold mb-3">
                                    <i class="fas fa-cogs me-2"></i>Pengaturan Sistem
                                </h6>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" 
                                           id="booking_confirmation" name="booking_confirmation" 
                                           {{ old('booking_confirmation', $settings['booking_confirmation']) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-medium" for="booking_confirmation">
                                        Konfirmasi Booking Otomatis
                                    </label>
                                    <div class="form-text">Otomatis konfirmasi booking baru yang masuk</div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <ul class="nav nav-tabs" id="notifSettingsTabs" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="tab-email-btn" data-bs-toggle="tab" data-bs-target="#tab-email" type="button" role="tab">Email</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="tab-telegram-btn" data-bs-toggle="tab" data-bs-target="#tab-telegram" type="button" role="tab">Telegram</button>
                                    </li>
                                </ul>
                                <input type="hidden" name="active_notification_tab" id="active_notification_tab" value="{{ old('active_notification_tab', 'email') }}">
                                <div class="tab-content border border-top-0 rounded-bottom p-3">
                                    <div class="tab-pane fade show active" id="tab-email" role="tabpanel">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="email_notifications" name="email_notifications" 
                                                   {{ old('email_notifications', $settings['email_notifications']) ? 'checked' : '' }}>
                                            <label class="form-check-label fw-medium" for="email_notifications">
                                                Notifikasi Email
                                            </label>
                                            <div class="form-text">Kirim notifikasi email untuk event penting</div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="tab-telegram" role="tabpanel">
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox"
                                                   id="telegram_notifications_enabled" name="telegram_notifications_enabled"
                                                   {{ old('telegram_notifications_enabled', $settings['telegram_notifications_enabled'] ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label fw-medium" for="telegram_notifications_enabled">Aktifkan Notifikasi Telegram</label>
                                        </div>
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label for="telegram_bot_token" class="form-label fw-medium">API Key / Bot Token Telegram</label>
                                                <input type="text" class="form-control @error('telegram_bot_token') is-invalid @enderror"
                                                       id="telegram_bot_token" name="telegram_bot_token"
                                                       value="{{ old('telegram_bot_token', $settings['telegram_bot_token'] ?? '') }}"
                                                       placeholder="Contoh: 123456:ABCDEF...">
                                                @error('telegram_bot_token')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-md-6">
                                                <label for="telegram_chat_id" class="form-label fw-medium">Chat ID Telegram</label>
                                                <input type="text" class="form-control @error('telegram_chat_id') is-invalid @enderror"
                                                       id="telegram_chat_id" name="telegram_chat_id"
                                                       value="{{ old('telegram_chat_id', $settings['telegram_chat_id'] ?? '') }}"
                                                       placeholder="Contoh: -1001234567890">
                                                @error('telegram_chat_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-end mt-3">
                                            <button type="button" class="btn btn-outline-info" id="testTelegramBtn">
                                                <i class="fas fa-paper-plane me-1"></i>Test Telegram
                                            </button>
                                        </div>
                                        <div class="form-text mt-2">Event yang dikirim: login, booking baru, check-in, dan check-out.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label for="booking_sources_text" class="form-label fw-medium">Daftar Sumber Booking</label>
                                @php
                                    $defaultSources = ['Internal', 'Agoda', 'Booking.com', 'Traveloka', 'Airbnb', 'Other'];
                                    $sources = is_array($settings['booking_sources'] ?? null) ? $settings['booking_sources'] : $defaultSources;
                                @endphp
                                <textarea class="form-control" id="booking_sources_text" name="booking_sources_text" rows="2" placeholder="Pisahkan dengan koma, contoh: Internal, Agoda, Booking.com">{{ old('booking_sources_text', implode(', ', $sources)) }}</textarea>
                                <div class="form-text">Sumber booking yang muncul di dropdown. Pisahkan dengan koma.</div>
                            </div>
                        </div>

                        <!-- Tax Settings -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="tax_rate" class="form-label fw-medium">Persentase Pajak (%)</label>
                                <input type="number" min="0" max="100" step="1" 
                                       class="form-control @error('tax_rate') is-invalid @enderror" 
                                       id="tax_rate" name="tax_rate" 
                                       value="{{ old('tax_rate', $settings['tax_rate'] ?? 0) }}" 
                                       placeholder="contoh: 11">
                                @error('tax_rate')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Digunakan untuk perhitungan pajak pada invoice.</div>
                            </div>
                        </div>

                        <!-- Application Version Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary fw-bold mb-3">
                                    <i class="fas fa-code-branch me-2"></i>Informasi Versi
                                </h6>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="app_version" class="form-label fw-medium">Versi Aplikasi</label>
                                <input type="text" class="form-control @error('app_version') is-invalid @enderror" 
                                       id="app_version" name="app_version" 
                                       value="{{ old('app_version', config('app.version')) }}" 
                                       placeholder="1.0.0">
                                @error('app_version')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Format: Major.Minor.Patch (contoh: 1.0.0)</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Versi Saat Ini</label>
                                <div class="form-control-plaintext">
                                    <span class="badge bg-primary fs-6">v{{ config('app.version') }}</span>
                                </div>
                                <div class="form-text">Versi yang sedang berjalan</div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Security Settings Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary fw-bold mb-3">
                                    <i class="fas fa-shield-alt me-2"></i>Pengaturan Keamanan
                                </h6>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" 
                                           id="hcaptcha_enabled" name="hcaptcha_enabled" 
                                           {{ old('hcaptcha_enabled', $settings['hcaptcha_enabled'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-medium" for="hcaptcha_enabled">
                                        Aktifkan hCaptcha
                                    </label>
                                    <div class="form-text">Menggunakan hCaptcha untuk melindungi form login dari bot</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4" id="hcaptcha-settings">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="hcaptcha_site_key" class="form-label fw-medium">
                                        <i class="fas fa-key me-1"></i>Site Key
                                    </label>
                                    <input type="text" class="form-control" id="hcaptcha_site_key" 
                                           name="hcaptcha_site_key" 
                                           value="{{ old('hcaptcha_site_key', $settings['hcaptcha_site_key'] ?? '') }}"
                                           placeholder="Masukkan hCaptcha Site Key">
                                    <div class="form-text">Site Key untuk hCaptcha (public key)</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="hcaptcha_secret_key" class="form-label fw-medium">
                                        <i class="fas fa-lock me-1"></i>Secret Key
                                    </label>
                                    <input type="password" class="form-control" id="hcaptcha_secret_key" 
                                           name="hcaptcha_secret_key" 
                                           value="{{ old('hcaptcha_secret_key', $settings['hcaptcha_secret_key'] ?? '') }}"
                                           placeholder="Masukkan hCaptcha Secret Key">
                                    <div class="form-text">Secret Key untuk hCaptcha (private key)</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Cara mendapatkan hCaptcha Keys:</strong>
                                    <ol class="mb-0 mt-2">
                                        <li>Kunjungi <a href="https://dashboard.hcaptcha.com/" target="_blank">Dashboard hCaptcha</a></li>
                                        <li>Buat situs baru dan masukkan domain aplikasi Anda (mis. localhost untuk pengujian)</li>
                                        <li>Pilih tipe challenge yang diinginkan</li>
                                        <li>Salin Site Key dan Secret Key ke form ini</li>
                                    </ol>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex gap-2 justify-content-end">
                                    <button type="button" class="btn btn-outline-secondary" onclick="window.history.back()">
                                        <i class="fas fa-arrow-left me-1"></i>Kembali
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-1"></i>Simpan Pengaturan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const hcaptchaEnabled = document.getElementById('hcaptcha_enabled');
    const hcaptchaSettings = document.getElementById('hcaptcha-settings');
    const autoEnabled = document.getElementById('auto_checkout_enabled');
    const autoTimeWrap = document.getElementById('auto-checkout-time-wrap');
    
    function toggleHCaptchaSettings() {
        if (hcaptchaEnabled.checked) {
            hcaptchaSettings.style.display = 'block';
        } else {
            hcaptchaSettings.style.display = 'none';
        }
    }
    function toggleAutoCheckout() {
        if (autoEnabled && autoTimeWrap) {
            autoTimeWrap.style.display = autoEnabled.checked ? 'block' : 'none';
        }
    }
    
    // Initial state
    toggleHCaptchaSettings();
    toggleAutoCheckout();
    
    // Toggle on change
    hcaptchaEnabled.addEventListener('change', toggleHCaptchaSettings);
    if (autoEnabled) autoEnabled.addEventListener('change', toggleAutoCheckout);

    const activeNotificationTab = document.getElementById('active_notification_tab');
    const notifTabButtons = document.querySelectorAll('#notifSettingsTabs button[data-bs-toggle="tab"]');
    const desiredTab = activeNotificationTab ? activeNotificationTab.value : 'email';
    const desiredBtn = document.querySelector(`#notifSettingsTabs button[data-bs-target="#tab-${desiredTab}"]`);
    if (desiredBtn && typeof bootstrap !== 'undefined' && bootstrap.Tab) {
        bootstrap.Tab.getOrCreateInstance(desiredBtn).show();
    }
    notifTabButtons.forEach(btn => {
        btn.addEventListener('shown.bs.tab', function(e) {
            const target = e.target.getAttribute('data-bs-target') || '';
            if (activeNotificationTab && target.startsWith('#tab-')) {
                activeNotificationTab.value = target.replace('#tab-', '');
            }
        });
    });
    
    // Test Email Button
    document.getElementById('testEmailBtn').addEventListener('click', function() {
        const btn = this;
        const originalText = btn.innerHTML;
        
        // Disable button and show loading
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Mengirim...';
        
        // Get SMTP settings from form
        const smtpData = {
            smtp_host: document.getElementById('smtp_host').value,
            smtp_port: document.getElementById('smtp_port').value,
            smtp_username: document.getElementById('smtp_username').value,
            smtp_password: document.getElementById('smtp_password').value,
            smtp_encryption: document.getElementById('smtp_encryption').value,
            mail_from_address: document.getElementById('mail_from_address').value,
            mail_from_name: document.getElementById('mail_from_name').value,
            _token: document.querySelector('input[name="_token"]').value
        };
        
        // Send test email
        fetch('{{ route("admin.settings.test-email") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': smtpData._token
            },
            body: JSON.stringify(smtpData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Show success message
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3';
                alertDiv.innerHTML = `
                    <i class="fas fa-check-circle me-2"></i>${data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                document.querySelector('.card-body').insertBefore(alertDiv, document.querySelector('form'));
            } else {
                // Show error message
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-3';
                alertDiv.innerHTML = `
                    <i class="fas fa-exclamation-circle me-2"></i>${data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                document.querySelector('.card-body').insertBefore(alertDiv, document.querySelector('form'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-3';
            alertDiv.innerHTML = `
                <i class="fas fa-exclamation-circle me-2"></i>Terjadi kesalahan saat mengirim test email
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.card-body').insertBefore(alertDiv, document.querySelector('form'));
        })
        .finally(() => {
            // Re-enable button
            btn.disabled = false;
            btn.innerHTML = originalText;
        });
    });

    // Test Telegram Button
    const testTelegramBtn = document.getElementById('testTelegramBtn');
    if (testTelegramBtn) {
        testTelegramBtn.addEventListener('click', function() {
            const btn = this;
            const originalText = btn.innerHTML;
            const token = document.getElementById('telegram_bot_token').value;
            const chatId = document.getElementById('telegram_chat_id').value;
            const csrf = document.querySelector('input[name="_token"]').value;

            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Mengirim...';

            fetch('{{ route("admin.settings.test-telegram") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf
                },
                body: JSON.stringify({
                    telegram_bot_token: token,
                    telegram_chat_id: chatId
                })
            })
            .then(response => response.json())
            .then(data => {
                const alertDiv = document.createElement('div');
                alertDiv.className = `alert ${data.success ? 'alert-success' : 'alert-danger'} alert-dismissible fade show mt-3`;
                alertDiv.innerHTML = `
                    <i class="fas ${data.success ? 'fa-check-circle' : 'fa-exclamation-circle'} me-2"></i>${data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                document.querySelector('.card-body').insertBefore(alertDiv, document.querySelector('form'));
            })
            .catch(error => {
                console.error('Error:', error);
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-3';
                alertDiv.innerHTML = `
                    <i class="fas fa-exclamation-circle me-2"></i>Terjadi kesalahan saat mengirim test Telegram
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                document.querySelector('.card-body').insertBefore(alertDiv, document.querySelector('form'));
            })
            .finally(() => {
                btn.disabled = false;
                btn.innerHTML = originalText;
            });
        });
    }
});
</script>
@endsection