@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(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @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="{{ asset('storage/' . $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>

                        <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 class="col-md-6">
                                <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>

                        <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="recaptcha_enabled" name="recaptcha_enabled" 
                                           {{ old('recaptcha_enabled', $settings['recaptcha_enabled'] ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-medium" for="recaptcha_enabled">
                                        Aktifkan Google reCAPTCHA
                                    </label>
                                    <div class="form-text">Menggunakan Google reCAPTCHA untuk melindungi form login dari bot</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4" id="recaptcha-settings">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="recaptcha_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="recaptcha_site_key" 
                                           name="recaptcha_site_key" 
                                           value="{{ old('recaptcha_site_key', $settings['recaptcha_site_key'] ?? '') }}"
                                           placeholder="Masukkan Google reCAPTCHA Site Key">
                                    <div class="form-text">Site Key untuk Google reCAPTCHA (public key)</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="recaptcha_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="recaptcha_secret_key" 
                                           name="recaptcha_secret_key" 
                                           value="{{ old('recaptcha_secret_key', $settings['recaptcha_secret_key'] ?? '') }}"
                                           placeholder="Masukkan Google reCAPTCHA Secret Key">
                                    <div class="form-text">Secret Key untuk Google reCAPTCHA (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 Google reCAPTCHA Keys:</strong>
                                    <ol class="mb-0 mt-2">
                                        <li>Kunjungi <a href="https://www.google.com/recaptcha/admin" target="_blank">Google reCAPTCHA Admin Console</a></li>
                                        <li>Klik "+" untuk membuat site baru</li>
                                        <li>Pilih reCAPTCHA v2 "I'm not a robot" Checkbox</li>
                                        <li>Masukkan domain website Anda</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() {
    // reCAPTCHA settings toggle
    const recaptchaEnabled = document.getElementById('recaptcha_enabled');
    const recaptchaSettings = document.getElementById('recaptcha-settings');
    
    function toggleRecaptchaSettings() {
        if (recaptchaEnabled.checked) {
            recaptchaSettings.style.display = 'block';
        } else {
            recaptchaSettings.style.display = 'none';
        }
    }
    
    // Initial state
    toggleRecaptchaSettings();
    
    // Toggle on change
    recaptchaEnabled.addEventListener('change', toggleRecaptchaSettings);
    
    // 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;
        });
    });
});
</script>
@endsection