@extends('dashboard.app')

@section('content')
<div class="container py-4">
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0">Edit Social Banner</h3>
        </div>
        <div class="card-body">
            <form action="{{ route('social_share.update', $socialBanner->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row">
                    <!-- Page Name -->
                    <div class="col-md-6 mb-3">
                        <label for="page_name" class="form-label">Page Name *</label>
                        <select name="page_name" id="page_name" class="form-select @error('page_name') is-invalid @enderror" required>
                            <option value="">Select Page</option>
                            @foreach($pageNames as $value => $label)
                                <option value="{{ $value }}" {{ $socialBanner->page_name == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('page_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Banner Image -->
                    <div class="col-md-6 mb-3">
                        <label for="banner_image" class="form-label">Banner Image</label>
                        <input type="file" name="banner_image" id="banner_image" 
                               class="form-control @error('banner_image') is-invalid @enderror"
                               accept="image/*">
                        @error('banner_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        
                        @if($socialBanner->banner_image)
                            <div class="mt-2">
                                <p class="mb-1">Current Image:</p>
                                <img src="{{ asset($socialBanner->banner_image) }}" alt="Current Banner" 
                                     class="img-thumbnail" style="max-width: 200px;">
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" name="remove_banner" id="remove_banner" value="1">
                                    <label class="form-check-label text-danger" for="remove_banner">
                                        Remove current banner image
                                    </label>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Meta Title -->
                <div class="mb-3">
                    <label for="meta_title" class="form-label">Meta Title (Max 255 characters)</label>
                    <input type="text" name="meta_title" id="meta_title" 
                           class="form-control @error('meta_title') is-invalid @enderror"
                           value="{{ old('meta_title', $socialBanner->meta_title) }}"
                           maxlength="255">
                    <div class="form-text">Characters remaining: <span id="title_count">255</span></div>
                    @error('meta_title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Meta Description -->
                <div class="mb-3">
                    <label for="meta_description" class="form-label">Meta Description</label>
                    <textarea name="meta_description" id="meta_description" 
                              class="form-control @error('meta_description') is-invalid @enderror"
                              rows="3">{{ old('meta_description', $socialBanner->meta_description) }}</textarea>
                    <div class="form-text">Recommended: 150-160 characters</div>
                    @error('meta_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Meta Keywords -->
                <div class="mb-3">
                    <label for="meta_keywords" class="form-label">Meta Keywords (Max 255 characters)</label>
                    <input type="text" name="meta_keywords" id="meta_keywords" 
                           class="form-control @error('meta_keywords') is-invalid @enderror"
                           value="{{ old('meta_keywords', $socialBanner->meta_keywords) }}"
                           maxlength="255">
                    <div class="form-text">Separate keywords with commas</div>
                    @error('meta_keywords')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ route('social_share.index') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Back to List
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save"></i> Update Social Banner
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Character counter for meta title
        const metaTitle = document.getElementById('meta_title');
        const titleCount = document.getElementById('title_count');
        
        if (metaTitle && titleCount) {
            updateTitleCount();
            metaTitle.addEventListener('input', updateTitleCount);
            
            function updateTitleCount() {
                const remaining = 255 - metaTitle.value.length;
                titleCount.textContent = remaining;
                titleCount.className = remaining < 0 ? 'text-danger' : 'text-success';
            }
        }

        // Image preview for edit
        const bannerImageInput = document.getElementById('banner_image');
        if (bannerImageInput) {
            bannerImageInput.addEventListener('change', function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        // Remove old preview if exists
                        const oldPreview = document.getElementById('newImagePreview');
                        if (oldPreview) oldPreview.remove();
                        
                        // Create new preview
                        const previewDiv = document.createElement('div');
                        previewDiv.id = 'newImagePreview';
                        previewDiv.className = 'mt-2';
                        previewDiv.innerHTML = `
                            <p class="mb-1">New Image Preview:</p>
                            <img src="${e.target.result}" alt="New Preview" class="img-thumbnail" style="max-width: 200px;">
                        `;
                        bannerImageInput.parentNode.appendChild(previewDiv);
                    }
                    reader.readAsDataURL(file);
                }
            });
        }
    });
</script>
@endpush