@extends('admin.layouts.app')

@section('title', 'Edit ' . ucfirst(str_replace('_', ' ', $sectionKey)) . ' Section')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Edit {{ ucfirst(str_replace('_', ' ', $sectionKey)) }} Section</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="{{ route('admin.eu-uk.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to EU/UK Management
            </a>
            <a href="{{ route('admin.eu-uk.preview') }}" class="btn btn-outline-primary" target="_blank">
                <i class="bi bi-eye"></i> Preview Page
            </a>
        </div>
    </div>
</div>

@if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-pencil-square me-2"></i>
                    {{ ucfirst(str_replace('_', ' ', $sectionKey)) }} Content
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.eu-uk.update-section', $sectionKey) }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="mb-3">
                        <label for="title" class="form-label">Section Title</label>
                        <input type="text" class="form-control" id="title" name="title" 
                               value="{{ old('title', $section->title ?? '') }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="content" class="form-label">Content</label>
                        <textarea class="form-control" id="content" name="content" rows="8" required>{{ old('content', $section->content ?? '') }}</textarea>
                        <div class="form-text">You can use HTML tags for formatting.</div>
                    </div>
                    
                    @if($sectionKey === 'eu_uk_hero')
                        <div class="mb-3">
                            <label for="data" class="form-label">Statistics Data (JSON)</label>
                            <textarea class="form-control" id="data" name="data" rows="6">{{ old('data', $section->data ?? '') }}</textarea>
                            <div class="form-text">
                                Format: {"statistics": [{"number": "500+", "label": "Students Helped"}, ...]}
                            </div>
                        </div>
                    @elseif($sectionKey === 'eu_uk_eligibility')
                        <div class="mb-3">
                            <label for="data" class="form-label">Eligibility Criteria (JSON)</label>
                            <textarea class="form-control" id="data" name="data" rows="6">{{ old('data', $section->data ?? '') }}</textarea>
                            <div class="form-text">
                                Format: {"criteria": ["Criterion 1", "Criterion 2", ...]}
                            </div>
                        </div>
                    @elseif($sectionKey === 'eu_uk_process')
                        <div class="mb-3">
                            <label for="data" class="form-label">Process Steps (JSON)</label>
                            <textarea class="form-control" id="data" name="data" rows="8">{{ old('data', $section->data ?? '') }}</textarea>
                            <div class="form-text">
                                Format: {"steps": [{"number": "1", "title": "Step Title", "description": "Step Description"}, ...]}
                            </div>
                        </div>
                    @elseif($sectionKey === 'eu_uk_contact_form')
                        <div class="mb-3">
                            <label for="data" class="form-label">Form Configuration (JSON)</label>
                            <textarea class="form-control" id="data" name="data" rows="10">{{ old('data', $section->data ?? '') }}</textarea>
                            <div class="form-text">
                                Format: {"fields": [{"name": "field_name", "label": "Field Label", "type": "text", "required": true}, ...], "submit_button": "Submit Text"}
                            </div>
                        </div>
                    @elseif($sectionKey === 'eu_uk_contact_info')
                        <div class="mb-3">
                            <label for="data" class="form-label">Contact Information (JSON)</label>
                            <textarea class="form-control" id="data" name="data" rows="6">{{ old('data', $section->data ?? '') }}</textarea>
                            <div class="form-text">
                                Format: {"email": "contact@example.com", "phone": "+1234567890", "availability": "Mon-Fri 9AM-5PM"}
                            </div>
                        </div>
                    @else
                        <div class="mb-3">
                            <label for="data" class="form-label">Additional Data (JSON)</label>
                            <textarea class="form-control" id="data" name="data" rows="4">{{ old('data', $section->data ?? '') }}</textarea>
                            <div class="form-text">Optional JSON data for this section.</div>
                        </div>
                    @endif
                    
                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-2"></i>
                            Update Section
                        </button>
                        <a href="{{ route('admin.eu-uk.index') }}" class="btn btn-secondary">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    Section Information
                </h6>
            </div>
            <div class="card-body">
                <dl class="row">
                    <dt class="col-sm-4">Section Key:</dt>
                    <dd class="col-sm-8"><code>{{ $sectionKey }}</code></dd>
                    
                    <dt class="col-sm-4">Last Updated:</dt>
                    <dd class="col-sm-8">
                        @if($section && $section->updated_at)
                            {{ $section->updated_at->format('M d, Y H:i') }}
                        @else
                            Never
                        @endif
                    </dd>
                    
                    <dt class="col-sm-4">Status:</dt>
                    <dd class="col-sm-8">
                        @if($section)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-warning">Not Created</span>
                        @endif
                    </dd>
                </dl>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="bi bi-lightbulb me-2"></i>
                    Tips
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        Use HTML tags for rich formatting
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        JSON data must be valid format
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        Preview changes before saving
                    </li>
                    <li>
                        <i class="bi bi-check-circle text-success me-2"></i>
                        Changes are applied immediately
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Auto-format JSON data on blur
document.getElementById('data')?.addEventListener('blur', function() {
    try {
        const jsonData = JSON.parse(this.value);
        this.value = JSON.stringify(jsonData, null, 2);
    } catch (e) {
        // Invalid JSON, leave as is
    }
});
</script>
@endpush