<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin - Site Configuration - LocalLendables</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    {% include 'common-header.html.twig' %}

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-cogs me-2"></i>Site Configuration</h2>
                <div class="d-flex gap-2">
                    <a href="/admin/alpha-feedback" class="btn btn-secondary">
                        <i class="fas fa-bug me-1"></i>Alpha Feedback
                    </a>
                    <a href="/dashboard/{{ user.id }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Site Information -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Site Information</h5>
                </div>
                <div class="card-body">
                    <form id="siteInfoForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="siteName" class="form-label">Site Name</label>
                                    <input type="text" class="form-control" id="siteName" value="Local Lendables" required>
                                </div>
                                <div class="mb-3">
                                    <label for="siteDescription" class="form-label">Site Description</label>
                                    <textarea class="form-control" id="siteDescription" rows="3" required>Building stronger communities through organized sharing and lending circles.</textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="primaryColor" class="form-label">Primary Color</label>
                                    <input type="color" class="form-control form-control-color" id="primaryColor" value="#0d6efd">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="contactEmail" class="form-label">Contact Email</label>
                                    <input type="email" class="form-control" id="contactEmail" value="hello@locallendables.com" required>
                                </div>
                                <div class="mb-3">
                                    <label for="timezone" class="form-label">Site Timezone</label>
                                    <select class="form-select" id="timezone">
                                        <option value="America/Halifax" selected>Atlantic Time (Halifax)</option>
                                        <option value="America/Toronto">Eastern Time (Toronto)</option>
                                        <option value="America/Vancouver">Pacific Time (Vancouver)</option>
                                        <option value="America/New_York">Eastern Time (New York)</option>
                                        <option value="America/Los_Angeles">Pacific Time (Los Angeles)</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="logoUpload" class="form-label">Site Logo</label>
                                    <input type="file" class="form-control" id="logoUpload" accept="image/*">
                                    <small class="text-muted">Current logo: Local Lendables logo</small>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Save Site Information
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Lending Policies -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-gavel me-2"></i>Lending Policies</h5>
                </div>
                <div class="card-body">
                    <form id="lendingPoliciesForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="maxLoanDuration" class="form-label">Maximum Loan Duration (days)</label>
                                    <input type="number" class="form-control" id="maxLoanDuration" value="14" min="1" max="365" required>
                                </div>
                                <div class="mb-3">
                                    <label for="defaultLoanDuration" class="form-label">Default Loan Duration (days)</label>
                                    <input type="number" class="form-control" id="defaultLoanDuration" value="7" min="1" max="365" required>
                                </div>
                                <div class="mb-3">
                                    <label for="requestExpiryDays" class="form-label">Borrow Request Expiry (days)</label>
                                    <input type="number" class="form-control" id="requestExpiryDays" value="7" min="1" max="30" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="requireOwnerApproval" class="form-label">Owner Approval Required</label>
                                    <select class="form-select" id="requireOwnerApproval">
                                        <option value="true" selected>Yes - Owner must approve all requests</option>
                                        <option value="false">No - Auto-approve requests</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="allowRentals" class="form-label">Allow Paid Rentals</label>
                                    <select class="form-select" id="allowRentals">
                                        <option value="true" selected>Yes - Allow items with rental fees</option>
                                        <option value="false">No - Free lending only</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="requireAgreements" class="form-label">Require Digital Agreements</label>
                                    <select class="form-select" id="requireAgreements">
                                        <option value="true" selected>Yes - Digital agreements required</option>
                                        <option value="false">No - Simple handshake lending</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Save Lending Policies
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Member Management -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-users me-2"></i>Member Management</h5>
                </div>
                <div class="card-body">
                    <form id="memberManagementForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="registrationOpen" class="form-label">Registration Status</label>
                                    <select class="form-select" id="registrationOpen">
                                        <option value="true" selected>Open - Anyone can register</option>
                                        <option value="invite-only">Invite Only - Admin approval required</option>
                                        <option value="false">Closed - No new registrations</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="requireEmailVerification" class="form-label">Email Verification</label>
                                    <select class="form-select" id="requireEmailVerification">
                                        <option value="true">Required - Verify email before access</option>
                                        <option value="false" selected>Optional - Immediate access (Demo mode)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="maxItemsPerUser" class="form-label">Max Items Per User</label>
                                    <input type="number" class="form-control" id="maxItemsPerUser" value="50" min="1" max="500" required>
                                </div>
                                <div class="mb-3">
                                    <label for="membershipLevels" class="form-label">Membership Levels</label>
                                    <select class="form-select" id="membershipLevels">
                                        <option value="single" selected>Single Level - All members equal</option>
                                        <option value="tiered">Tiered - Basic/Premium/VIP levels</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Save Member Settings
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Notifications & Communication -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-bell me-2"></i>Notifications & Communication</h5>
                </div>
                <div class="card-body">
                    <form id="notificationForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="emailNotifications" class="form-label">Email Notifications</label>
                                    <select class="form-select" id="emailNotifications">
                                        <option value="all" selected>All notifications via email</option>
                                        <option value="important">Important notifications only</option>
                                        <option value="none">Disabled - In-app only</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="chatFeature" class="form-label">Chat Feature</label>
                                    <select class="form-select" id="chatFeature">
                                        <option value="enabled" selected>Enabled - Members can chat</option>
                                        <option value="disabled">Disabled - Email only communication</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="reminderFrequency" class="form-label">Return Reminders</label>
                                    <select class="form-select" id="reminderFrequency">
                                        <option value="daily">Daily reminders for overdue items</option>
                                        <option value="weekly" selected>Weekly reminders for upcoming returns</option>
                                        <option value="none">No automatic reminders</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="adminNotifications" class="form-label">Admin Notifications</label>
                                    <select class="form-select" id="adminNotifications">
                                        <option value="all" selected>All platform activity</option>
                                        <option value="issues">Issues and reports only</option>
                                        <option value="none">Disabled</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Save Notification Settings
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- System Status -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-server me-2"></i>System Status</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center p-3 border rounded">
                                <i class="fas fa-database fs-2 text-success mb-2"></i>
                                <h6>Database</h6>
                                <span class="badge bg-success">Connected</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 border rounded">
                                <i class="fas fa-envelope fs-2 text-warning mb-2"></i>
                                <h6>Email Service</h6>
                                <span class="badge bg-warning">Demo Mode</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 border rounded">
                                <i class="fas fa-images fs-2 text-success mb-2"></i>
                                <h6>Image Processing</h6>
                                <span class="badge bg-success">Available</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 border rounded">
                                <i class="fas fa-cloud fs-2 text-info mb-2"></i>
                                <h6>Storage</h6>
                                <span class="badge bg-info">Local Files</span>
                            </div>
                        </div>
                    </div>
                    
                    <hr class="my-4">
                    
                    <div class="row">
                        <div class="col-md-4">
                            <h6>Platform Statistics</h6>
                            <ul class="list-unstyled">
                                <li><strong>Total Users:</strong> {{ platformStats.totalUsers ?? 0 }}</li>
                                <li><strong>Active Items:</strong> {{ platformStats.activeItems ?? 0 }}</li>
                                <li><strong>Active Loans:</strong> {{ platformStats.activeLoans ?? 0 }}</li>
                                <li><strong>Pending Requests:</strong> {{ platformStats.pendingRequests ?? 0 }}</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6>Recent Activity</h6>
                            <ul class="list-unstyled">
                                <li><small class="text-muted">Last login: {{ stats.lastLogin ?? 'Unknown' }}</small></li>
                                <li><small class="text-muted">Last item added: {{ stats.lastItemAdded ?? 'Unknown' }}</small></li>
                                <li><small class="text-muted">Last loan: {{ stats.lastLoan ?? 'Unknown' }}</small></li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6>System Actions</h6>
                            <div class="d-grid gap-2">
                                <button class="btn btn-outline-primary btn-sm" onclick="exportData()">
                                    <i class="fas fa-download me-1"></i>Export Data
                                </button>
                                <button class="btn btn-outline-warning btn-sm" onclick="clearCache()">
                                    <i class="fas fa-broom me-1"></i>Clear Cache
                                </button>
                                <button class="btn btn-outline-danger btn-sm" onclick="maintenanceMode()">
                                    <i class="fas fa-tools me-1"></i>Maintenance Mode
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Site Information Form
document.getElementById('siteInfoForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = {
        siteName: document.getElementById('siteName').value,
        siteDescription: document.getElementById('siteDescription').value,
        primaryColor: document.getElementById('primaryColor').value,
        contactEmail: document.getElementById('contactEmail').value,
        timezone: document.getElementById('timezone').value
    };
    
    // TODO: Send to API endpoint
    showBootstrapAlert('Success', 'Site information updated successfully', 'success');
});

// Lending Policies Form
document.getElementById('lendingPoliciesForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = {
        maxLoanDuration: document.getElementById('maxLoanDuration').value,
        defaultLoanDuration: document.getElementById('defaultLoanDuration').value,
        requestExpiryDays: document.getElementById('requestExpiryDays').value,
        requireOwnerApproval: document.getElementById('requireOwnerApproval').value,
        allowRentals: document.getElementById('allowRentals').value,
        requireAgreements: document.getElementById('requireAgreements').value
    };
    
    // TODO: Send to API endpoint
    showBootstrapAlert('Success', 'Lending policies updated successfully', 'success');
});

// Member Management Form
document.getElementById('memberManagementForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = {
        registrationOpen: document.getElementById('registrationOpen').value,
        requireEmailVerification: document.getElementById('requireEmailVerification').value,
        maxItemsPerUser: document.getElementById('maxItemsPerUser').value,
        membershipLevels: document.getElementById('membershipLevels').value
    };
    
    // TODO: Send to API endpoint
    showBootstrapAlert('Success', 'Member management settings updated successfully', 'success');
});

// Notifications Form
document.getElementById('notificationForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = {
        emailNotifications: document.getElementById('emailNotifications').value,
        chatFeature: document.getElementById('chatFeature').value,
        reminderFrequency: document.getElementById('reminderFrequency').value,
        adminNotifications: document.getElementById('adminNotifications').value
    };
    
    // TODO: Send to API endpoint
    showBootstrapAlert('Success', 'Notification settings updated successfully', 'success');
});

// System Actions
function exportData() {
    showBootstrapAlert('Info', 'Data export feature coming soon', 'info');
}

function clearCache() {
    showBootstrapAlert('Success', 'Cache cleared successfully', 'success');
}

function maintenanceMode() {
    if (confirm('Enable maintenance mode? This will prevent users from accessing the site.')) {
        showBootstrapAlert('Warning', 'Maintenance mode enabled', 'warning');
    }
}

// Bootstrap alert function
function showBootstrapAlert(title, message, type = 'info') {
    const existingAlert = document.getElementById('bootstrap-alert');
    if (existingAlert) existingAlert.remove();
    
    const alertHTML = `
        <div id="bootstrap-alert" class="alert alert-${type} alert-dismissible fade show position-fixed" 
             style="top: 20px; right: 20px; z-index: 9999; min-width: 300px; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
            <div class="d-flex align-items-start">
                <div class="me-3">
                    ${type === 'success' ? '<i class="fas fa-check-circle text-success fs-4"></i>' : 
                      type === 'danger' ? '<i class="fas fa-exclamation-triangle text-danger fs-4"></i>' : 
                      type === 'warning' ? '<i class="fas fa-exclamation-circle text-warning fs-4"></i>' :
                      '<i class="fas fa-info-circle text-info fs-4"></i>'}
                </div>
                <div class="flex-grow-1">
                    <h6 class="alert-heading mb-1">${title}</h6>
                    <p class="mb-0 small">${message}</p>
                </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', alertHTML);
    setTimeout(() => {
        const alert = document.getElementById('bootstrap-alert');
        if (alert) alert.style.opacity = '0.5';
    }, 1000);
    setTimeout(() => {
        const alert = document.getElementById('bootstrap-alert');
        if (alert) new bootstrap.Alert(alert).close();
    }, 2000);
}
</script>

{% endblock %}