@extends('layouts.main')

@section('title', 'Edit Workspace: ' . $workspace->name)

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar">{{ strtoupper(substr($workspace->name, 0, 1)) }}</div>
                        <div class="block-heading">
                            <h3>Edit Workspace</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="settings-icon-sm"></i>
                                Update workspace information
                            </h5>
                        </div>
                    </div>
                    <a href="{{ route('workspaces.show', $workspace->id) }}" class="btn btn-outline-secondary">
                        Cancel
                    </a>
                </div>

                <!-- Edit Form -->
                <form action="{{ route('workspaces.update', $workspace->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="name" class="form-label">
                                    Workspace Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control @error('name') is-invalid @enderror" 
                                       id="name" 
                                       name="name" 
                                       value="{{ old('name', $workspace->name) }}" 
                                       required 
                                       maxlength="255"
                                       placeholder="Enter workspace name">
                                @error('name')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" 
                                          name="description" 
                                          rows="4" 
                                          maxlength="1000"
                                          placeholder="Enter workspace description (optional)">{{ old('description', $workspace->description) }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                                <div class="form-text">
                                    Provide a brief description of what this workspace is used for.
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Created</label>
                                        <input type="text" 
                                               class="form-control" 
                                               value="{{ $workspace->created_at->format('M d, Y H:i A') }}" 
                                               readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Last Updated</label>
                                        <input type="text" 
                                               class="form-control" 
                                               value="{{ $workspace->updated_at->format('M d, Y H:i A') }}" 
                                               readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="alert alert-info">
                                    <strong>Note:</strong> Updating this workspace will affect all associated data pipelines and configurations.
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="save-icon"></i> Update Workspace
                                </button>
                                <a href="{{ route('workspaces.show', $workspace->id) }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                                <a href="{{ route('workspaces.index') }}" class="btn btn-outline-info">
                                    Back to Workspaces
                                </a>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="workspace-stats">
                                <h6 class="mb-3">Workspace Statistics</h6>
                                
                                <div class="stat-item mb-3 p-3 border rounded">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>Workspace Items</span>
                                        <span class="badge bg-primary">{{ $workspace->workspaceItems->count() }}</span>
                                    </div>
                                </div>

                                <div class="stat-item mb-3 p-3 border rounded">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>Active Items</span>
                                        <span class="badge bg-success">
                                            {{ $workspace->workspaceItems->count() }}
                                        </span>
                                    </div>
                                </div>

                                <div class="stat-item mb-3 p-3 border rounded">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>Inactive Items</span>
                                        <span class="badge bg-secondary">
                                            0
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="workspace-actions mt-4">
                                <h6 class="mb-3">Quick Actions</h6>
                                <div class="d-grid gap-2">
                                    <a href="{{ route('workspaces.show', $workspace->id) }}" class="btn btn-outline-primary btn-sm">
                                        <i class="view-icon"></i> View Workspace
                                    </a>
                                    <a href="#" class="btn btn-outline-success btn-sm">
                                        <i class="add-icon"></i> Add Pipeline
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add character counter for description
        const descriptionField = document.getElementById('description');
        const maxLength = 1000;
        
        if (descriptionField) {
            const counterDiv = document.createElement('div');
            counterDiv.className = 'form-text text-end mt-1';
            descriptionField.parentNode.appendChild(counterDiv);
            
            function updateCounter() {
                const remaining = maxLength - descriptionField.value.length;
                counterDiv.textContent = `${descriptionField.value.length}/${maxLength} characters`;
                counterDiv.className = remaining < 50 ? 'form-text text-end mt-1 text-warning' : 'form-text text-end mt-1';
            }
            
            descriptionField.addEventListener('input', updateCounter);
            updateCounter(); // Initial count
        }
    });
</script>
@endsection