@extends('layouts.admin')

@section('title', 'Settings — Admin DaisyRisk')
@section('page-title', 'Settings')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-0 text-gray-800">System Settings</h1>
        <p class="text-muted">Configure application settings and preferences</p>
    </div>
</div>

<div class="row">
    {{-- General Settings --}}
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">General Settings</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.settings.update') }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="form-group">
                        <label for="app_name">Application Name</label>
                        <input type="text" class="form-control" id="app_name" name="app_name" 
                               value="{{ config('app.name') }}" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="app_description">Application Description</label>
                        <textarea class="form-control" id="app_description" name="app_description" rows="3"
                                  placeholder="Global Supply Chain Risk Assessment Platform">{{ old('app_description', 'Global Supply Chain Risk Assessment Platform') }}</textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="contact_email">Contact Email</label>
                        <input type="email" class="form-control" id="contact_email" name="contact_email" 
                               value="{{ old('contact_email', 'admin@daisyrisk.com') }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="timezone">Default Timezone</label>
                        <select class="form-control" id="timezone" name="timezone">
                            <option value="UTC" {{ config('app.timezone') === 'UTC' ? 'selected' : '' }}>UTC</option>
                            <option value="Asia/Jakarta" {{ config('app.timezone') === 'Asia/Jakarta' ? 'selected' : '' }}>Asia/Jakarta</option>
                            <option value="America/New_York" {{ config('app.timezone') === 'America/New_York' ? 'selected' : '' }}>America/New_York</option>
                        </select>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Update General Settings
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- API Settings --}}
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">API Configuration</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.settings.update-api') }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="form-group">
                        <label for="api_rate_limit">API Rate Limit (per minute)</label>
                        <input type="number" class="form-control" id="api_rate_limit" name="api_rate_limit" 
                               value="{{ old('api_rate_limit', 60) }}" min="1" max="1000">
                    </div>
                    
                    <div class="form-group">
                        <label for="weather_api_key">Weather API Key</label>
                        <input type="text" class="form-control" id="weather_api_key" name="weather_api_key" 
                               value="{{ old('weather_api_key', '••••••••••••••••') }}" 
                               placeholder="Enter Weather API Key">
                    </div>
                    
                    <div class="form-group">
                        <label for="disaster_api_key">Disaster API Key</label>
                        <input type="text" class="form-control" id="disaster_api_key" name="disaster_api_key" 
                               value="{{ old('disaster_api_key', '••••••••••••••••') }}" 
                               placeholder="Enter Disaster API Key">
                    </div>
                    
                    <div class="form-group">
                        <label for="exchange_api_key">Exchange Rate API Key</label>
                        <input type="text" class="form-control" id="exchange_api_key" name="exchange_api_key" 
                               value="{{ old('exchange_api_key', '••••••••••••••••') }}" 
                               placeholder="Enter Exchange Rate API Key">
                    </div>
                    
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-key"></i> Update API Settings
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- Cache Settings --}}
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Cache Management</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>Application Cache</span>
                        <button class="btn btn-sm btn-outline-warning" onclick="clearCache('application')">
                            <i class="fas fa-trash"></i> Clear
                        </button>
                    </div>
                    <small class="text-muted">Clears compiled views, routes, and config cache</small>
                </div>
                
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>Dashboard Cache</span>
                        <button class="btn btn-sm btn-outline-warning" onclick="clearCache('dashboard')">
                            <i class="fas fa-trash"></i> Clear
                        </button>
                    </div>
                    <small class="text-muted">Clears dashboard statistics and widget cache</small>
                </div>
                
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>API Response Cache</span>
                        <button class="btn btn-sm btn-outline-warning" onclick="clearCache('api')">
                            <i class="fas fa-trash"></i> Clear
                        </button>
                    </div>
                    <small class="text-muted">Clears external API response cache</small>
                </div>
                
                <hr>
                
                <button class="btn btn-warning btn-block" onclick="clearCache('all')">
                    <i class="fas fa-broom"></i> Clear All Cache
                </button>
            </div>
        </div>
    </div>

    {{-- System Info --}}
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">System Information</h6>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-6 mb-3">
                        <div class="border-bottom pb-2 mb-2">
                            <strong>PHP Version</strong>
                        </div>
                        <span class="badge badge-info">{{ PHP_VERSION }}</span>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="border-bottom pb-2 mb-2">
                            <strong>Laravel Version</strong>
                        </div>
                        <span class="badge badge-success">{{ app()->version() }}</span>
                    </div>
                </div>
                
                <div class="row text-center">
                    <div class="col-md-6 mb-3">
                        <div class="border-bottom pb-2 mb-2">
                            <strong>Environment</strong>
                        </div>
                        <span class="badge badge-{{ config('app.env') === 'production' ? 'danger' : 'warning' }}">
                            {{ strtoupper(config('app.env')) }}
                        </span>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="border-bottom pb-2 mb-2">
                            <strong>Debug Mode</strong>
                        </div>
                        <span class="badge badge-{{ config('app.debug') ? 'warning' : 'success' }}">
                            {{ config('app.debug') ? 'ON' : 'OFF' }}
                        </span>
                    </div>
                </div>
                
                <div class="row text-center">
                    <div class="col-md-12 mb-3">
                        <div class="border-bottom pb-2 mb-2">
                            <strong>Database Connection</strong>
                        </div>
                        <span class="badge badge-success" id="db-status">
                            <i class="fas fa-check-circle"></i> Connected
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Backup & Maintenance --}}
<div class="row">
    <div class="col-12">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Backup & Maintenance</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <i class="fas fa-download fa-2x text-primary mb-2"></i>
                            <h6>Export Data</h6>
                            <p class="text-muted small">Export system data as JSON/CSV</p>
                            <button class="btn btn-primary btn-sm" onclick="exportData()">
                                <i class="fas fa-download"></i> Export
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <i class="fas fa-database fa-2x text-success mb-2"></i>
                            <h6>Database Backup</h6>
                            <p class="text-muted small">Create database backup</p>
                            <button class="btn btn-success btn-sm" onclick="backupDatabase()">
                                <i class="fas fa-save"></i> Backup
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <i class="fas fa-tools fa-2x text-warning mb-2"></i>
                            <h6>Maintenance Mode</h6>
                            <p class="text-muted small">Enable/disable maintenance mode</p>
                            <button class="btn btn-warning btn-sm" onclick="toggleMaintenance()">
                                <i class="fas fa-wrench"></i> Toggle
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function clearCache(type) {
    if (confirm(`Are you sure you want to clear ${type} cache?`)) {
        fetch(`/admin/settings/clear-cache/${type}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`${type} cache cleared successfully!`);
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        });
    }
}

function exportData() {
    if (confirm('Export system data? This may take a few moments.')) {
        window.location.href = '/admin/settings/export-data';
    }
}

function backupDatabase() {
    if (confirm('Create database backup? This may take a few moments.')) {
        fetch('/admin/settings/backup-database', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Database backup created successfully!');
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        });
    }
}

function toggleMaintenance() {
    if (confirm('Toggle maintenance mode?')) {
        fetch('/admin/settings/toggle-maintenance', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                window.location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        });
    }
}

// Test database connection on page load
document.addEventListener('DOMContentLoaded', function() {
    fetch('/admin/settings/test-database', {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        const dbStatus = document.getElementById('db-status');
        if (data.success) {
            dbStatus.innerHTML = '<i class="fas fa-check-circle"></i> Connected';
            dbStatus.className = 'badge badge-success';
        } else {
            dbStatus.innerHTML = '<i class="fas fa-times-circle"></i> Disconnected';
            dbStatus.className = 'badge badge-danger';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        const dbStatus = document.getElementById('db-status');
        dbStatus.innerHTML = '<i class="fas fa-question-circle"></i> Unknown';
        dbStatus.className = 'badge badge-warning';
    });
});
</script>
@endpush