@extends('admin.layouts.app')

@section('title', 'Edit Content Section')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">Edit Content Section: {{ $contentSection->title }}</h1>
                <div class="btn-group">
                    <a href="{{ route('admin.content-sections.show', $contentSection) }}" class="btn btn-outline-primary">
                        <i class="bi bi-eye"></i> View
                    </a>
                    <a href="{{ route('admin.content-sections.index') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.content-sections.update', $contentSection) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <div class="mb-3">
                            <label for="section_key" class="form-label">Section Key <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('section_key') is-invalid @enderror" 
                                   id="section_key" name="section_key" 
                                   value="{{ old('section_key', $contentSection->section_key) }}" 
                                   placeholder="e.g., hero, about, services" required>
                            <div class="form-text">Unique identifier for this content section (lowercase, no spaces)</div>
                            @error('section_key')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                   id="title" name="title" 
                                   value="{{ old('title', $contentSection->title) }}" 
                                   placeholder="Enter section title" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">Content</label>
                            <textarea class="form-control @error('content') is-invalid @enderror" 
                                      id="content" name="content" rows="6" 
                                      placeholder="Enter section content (HTML allowed)">{{ old('content', $contentSection->content) }}</textarea>
                            <div class="form-text">You can use HTML tags for formatting</div>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="image" class="form-label">Image</label>
                            @if($contentSection->image_path)
                                <div class="mb-2">
                                    <img src="{{ asset('storage/' . $contentSection->image_path) }}" 
                                         alt="Current image" class="img-thumbnail" style="max-height: 150px;">
                                    <div class="form-text">Current image</div>
                                </div>
                            @endif
                            <input type="file" class="form-control @error('image') is-invalid @enderror" 
                                   id="image" name="image" accept="image/*">
                            <div class="form-text">Upload a new image to replace the current one (optional)</div>
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sort_order" class="form-label">Sort Order</label>
                                    <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                           id="sort_order" name="sort_order" 
                                           value="{{ old('sort_order', $contentSection->sort_order) }}" 
                                           min="0" placeholder="0">
                                    <div class="form-text">Lower numbers appear first</div>
                                    @error('sort_order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Status</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="is_active" name="is_active" value="1" 
                                               {{ old('is_active', $contentSection->is_active) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">
                                            Active (visible on website)
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($contentSection->section_key === 'destinations')
                            <div class="mb-3">
                                <label class="form-label">Destinations</label>
                                <div id="destinations-wrapper">
                                    @if($contentSection->data && is_array($contentSection->data))
                                        @foreach($contentSection->data as $index => $destination)
                                            <div class="destination-entry mb-3 p-3 border rounded">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Destination Name</label>
                                                            <input type="text" class="form-control" name="destinations[{{ $index }}][name]" value="{{ $destination['name'] ?? '' }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Description</label>
                                                            <input type="text" class="form-control" name="destinations[{{ $index }}][description]" value="{{ $destination['description'] ?? '' }}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Flag Image</label>
                                                            <input type="file" class="form-control" name="destinations[{{ $index }}][flag]">
                                                            @if(isset($destination['flag_path']))
                                                                <div class="mt-2">
                                                                    <img src="{{ asset('storage/' . $destination['flag_path']) }}" alt="Flag" style="max-height: 50px;">
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-danger btn-sm remove-destination">Remove</button>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                <button type="button" id="add-destination" class="btn btn-success mt-2">Add Destination</button>
                            </div>
                        @else
                            <div class="mb-3">
                                <label for="data" class="form-label">Additional Data (JSON)</label>
                                <textarea class="form-control @error('data') is-invalid @enderror" 
                                          id="data" name="data" rows="4" 
                                          placeholder='{"key": "value"}'>{{ old('data', $contentSection->data ? json_encode($contentSection->data, JSON_PRETTY_PRINT) : '') }}</textarea>
                                <div class="form-text">Optional JSON data for custom fields (advanced users only)</div>
                                @error('data')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check"></i> Update Section
                            </button>
                            <a href="{{ route('admin.content-sections.show', $contentSection) }}" class="btn btn-outline-secondary">
                                <i class="bi bi-eye"></i> View
                            </a>
                            <a href="{{ route('admin.content-sections.index') }}" class="btn btn-secondary">
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Section Info</h5>
                </div>
                <div class="card-body">
                    <dl class="row small">
                        <dt class="col-sm-5">Created:</dt>
                        <dd class="col-sm-7">{{ $contentSection->created_at->format('M d, Y H:i') }}</dd>
                        
                        <dt class="col-sm-5">Last Updated:</dt>
                        <dd class="col-sm-7">{{ $contentSection->updated_at->format('M d, Y H:i') }}</dd>
                        
                        <dt class="col-sm-5">Status:</dt>
                        <dd class="col-sm-7">
                            @if($contentSection->is_active)
                                <span class="badge bg-success">Active</span>
                            @else
                                <span class="badge bg-secondary">Inactive</span>
                            @endif
                        </dd>
                    </dl>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Tips</h5>
                </div>
                <div class="card-body">
                    <h6>Section Key Guidelines:</h6>
                    <ul class="small">
                        <li>Use lowercase letters only</li>
                        <li>Use hyphens instead of spaces</li>
                        <li>Keep it descriptive but short</li>
                        <li>Examples: hero, about-us, services</li>
                    </ul>

                    <h6 class="mt-3">Content Tips:</h6>
                    <ul class="small">
                        <li>HTML tags are allowed for formatting</li>
                        <li>Use &lt;br&gt; for line breaks</li>
                        <li>Use &lt;strong&gt; for bold text</li>
                        <li>Use &lt;em&gt; for italic text</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (document.getElementById('add-destination')) {
        let destinationIndex = {{ $contentSection->data ? count($contentSection->data) : 0 }};
        
        document.getElementById('add-destination').addEventListener('click', function () {
            const wrapper = document.getElementById('destinations-wrapper');
            const newEntry = document.createElement('div');
            newEntry.className = 'destination-entry mb-3 p-3 border rounded';
            newEntry.innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Destination Name</label>
                            <input type="text" class="form-control" name="destinations[${destinationIndex}][name]">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <input type="text" class="form-control" name="destinations[${destinationIndex}][description]">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Flag Image</label>
                            <input type="file" class="form-control" name="destinations[${destinationIndex}][flag]">
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-danger btn-sm remove-destination">Remove</button>
            `;
            wrapper.appendChild(newEntry);
            destinationIndex++;
        });

        document.getElementById('destinations-wrapper').addEventListener('click', function (e) {
            if (e.target && e.target.classList.contains('remove-destination')) {
                e.target.closest('.destination-entry').remove();
            }
        });
    }
});
</script>
@endpush