{% extends "base.html" %}

{% block content %}
<div class="container">
    <h2>{% if resource %}Edit {{ resource.name }}{% else %}Add New Resource{% endif %}</h2>
    <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        
        <div class="mb-3">
            <label for="name" class="form-label">Resource Name</label>
            <input type="text" class="form-control" id="name" name="name" 
                   value="{% if resource %}{{ resource.name }}{% endif %}" required>
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control" id="description" name="description" 
                      rows="3" required>{% if resource %}{{ resource.description }}{% endif %}</textarea>
        </div>
        
        <div class="mb-3">
            <label for="resource_type" class="form-label">Resource Type</label>
            <select class="form-select" id="resource_type" name="resource_type">
                <option value="workoffice" {% if resource and resource.resource_type == 'workoffice' %}selected{% endif %}>Work Office</option>
                <option value="meeting_room" {% if resource and resource.resource_type == 'meeting_room' %}selected{% endif %}>Meeting Room</option>
            </select>
            <small class="text-muted">Only 1 booking per type allowed at a time (can book multiple different types)</small>
        </div>
        
        <!-- Image upload -->
        <div class="mb-3">
            <label class="form-label">Resource Image (optional)</label>
            <div class="row">
                <div class="col-md-8">
                    <input type="file" class="form-control" id="image" name="image" accept=".png,.jpg,.jpeg,.gif,.webp">
                    <small class="text-muted">Upload an image of the resource (optional)</small>
                    {% if resource and resource.image_url %}
                    <div class="mt-2">
                        <img src="{{ url_for('static', filename=resource.image_url) }}" alt="Current image" class="img-thumbnail">
                    </div>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body text-center text-muted">
                            <i class="fas fa-cloud-upload-alt fa-3x mb-2"></i>
                            <p>Upload image of the resource</p>
                            <small>Supported formats: PNG, JPG, GIF, WEBP</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <hr>
        <h5>Permissions</h5>
        <div class="mb-3">
            <label class="form-label">Floor Map Position (optional)</label>
            <div class="row">
                <div class="col-md-6">
                    <label for="position_x" class="form-label">X Coordinate</label>
                    <input type="number" class="form-control" id="position_x" name="position_x" 
                           value="{% if resource and resource.position_x %}{{ resource.position_x }}{% endif %}"
                           placeholder="Enter X position">
                </div>
                <div class="col-md-6">
                    <label for="position_y" class="form-label">Y Coordinate</label>
                    <input type="number" class="form-control" id="position_y" name="position_y" 
                           value="{% if resource and resource.position_y %}{{ resource.position_y }}{% endif %}"
                           placeholder="Enter Y position">
                </div>
            </div>
            <small class="text-muted">Click on the floor map in Company Admin to get coordinates</small>
        </div>
        
        <hr>
        <h5>Permissions</h5>
        <div class="mb-3">
            <label for="permission_type" class="form-label">Who can use this resource?</label>
            <select class="form-select" id="permission_type" name="permission_type" required>
                <!-- New resource - no permission yet -->
                {% if not resource %}
                <option value="everyone" selected>Anyone in the company</option>
                <option value="group">Specific group only</option>
                <option value="users">Specific users only</option>
                {% else %}
                <!-- Existing resource - load permission from database -->
                {% if permission %}
                <option value="everyone" {% if permission.permission_type == 'everyone' %}selected{% endif %}>Anyone in the company</option>
                <option value="group" {% if permission.permission_type == 'group' %}selected{% endif %}>Specific group only</option>
                <option value="users" {% if permission.permission_type == 'users' %}selected{% endif %}>Specific users only</option>
                {% else %}
                <option value="everyone" selected>Anyone in the company</option>
                <option value="group">Specific group only</option>
                <option value="users">Specific users only</option>
                {% endif %}
                {% endif %}
            </select>
            <small class="text-muted">Select who should be able to book this resource</small>
        </div>
        
        <!-- Group selection -->
        <div class="mb-3" id="group_section" style="display: {% if permission and permission.permission_type == 'group' %}block{% else %}none{% endif %};">
            <label for="group_id" class="form-label">Select Group</label>
            <select class="form-select" id="group_id" name="group_id">
                <option value="">-- Select a group --</option>
                {% for group in groups %}
                <option value="{{ group.id }}" {% if permission and permission.group_id == group.id %}selected{% endif %}>{{ group.name }}</option>
                {% endfor %}
            </select>
        </div>
        
        <!-- User IDs selection -->
        <div class="mb-3" id="users_section" style="display: {% if permission and permission.permission_type == 'users' %}block{% else %}none{% endif %};">
            <label for="user_ids" class="form-label">Select Users (comma-separated IDs)</label>
            <input type="text" class="form-control" id="user_ids" name="user_ids" 
                   value="{% if permission and permission.user_ids %}{{ permission.user_ids }}{% endif %}"
                   placeholder="1,2,3">
            <small class="text-muted">Enter user IDs to grant access (comma-separated)</small>
            <br><br>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="loadUserIds()">
                Load User IDs
            </button>
        </div>
        
        <button type="submit" class="btn btn-primary">Save Changes</button>
        <a href="{{ url_for('company_admin') }}" class="btn btn-secondary">Cancel</a>
    </form>
</div>

<script>
function loadUserIds() {
    fetch('/api/get-users')
        .then(response => response.json())
        .then(userIds => {
            // Convert to string with commas
            const idsStr = userIds.join(',');
            document.getElementById('user_ids').value = idsStr;
        })
        .catch(error => console.error('Error loading user IDs:', error));
}

// Toggle sections based on permission type
document.addEventListener('DOMContentLoaded', function() {
    const permissionType = document.getElementById('permission_type');
    const groupSection = document.getElementById('group_section');
    const usersSection = document.getElementById('users_section');
    
    function updateVisibility() {
        const type = permissionType.value;
        if (type === 'group') {
            groupSection.style.display = 'block';
            usersSection.style.display = 'none';
        } else if (type === 'users') {
            groupSection.style.display = 'none';
            usersSection.style.display = 'block';
        } else {
            groupSection.style.display = 'none';
            usersSection.style.display = 'none';
        }
    }
    
    permissionType.addEventListener('change', updateVisibility);
    updateVisibility(); // Initial call
});
</script>

{% endblock %}