@extends('layouts.admin')

@section('title', 'Edit Assurance Page SEO')

@section('content_header')
<h1>Edit SEO for {{ $pageName }}</h1>
@stop

@section('content')
<div class="card card-primary">
    <div class="card-header">
        <h3 class="card-title">Edit SEO Content for {{ $pageName }}</h3>
    </div>
    <form action="{{ route('admin.assurance-pages.update', $slug) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="card-body">
            <div class="form-group">
                <label for="meta_title">Meta Title</label>
                <input type="text" name="meta_title" class="form-control" id="meta_title" 
                       placeholder="Enter meta title" maxlength="255"
                       value="{{ old('meta_title', $pageSeo->meta_title) }}">
                <small class="form-text text-muted">Recommended: 50-60 characters</small>
                @error('meta_title')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
            
            <div class="form-group">
                <label for="meta_description">Meta Description</label>
                <textarea name="meta_description" class="form-control" id="meta_description" rows="3"
                          placeholder="Enter meta description">{{ old('meta_description', $pageSeo->meta_description) }}</textarea>
                <small class="form-text text-muted">Recommended: 150-160 characters</small>
                @error('meta_description')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
            
            <div class="form-group">
                <label for="robots_content">Robots Content</label>
                <select name="robots_content" class="form-control" id="robots_content">
                    <option value="index, follow" {{ old('robots_content', $pageSeo->robots_content) == 'index, follow' ? 'selected' : '' }}>
                        index, follow
                    </option>
                    <option value="noindex, nofollow" {{ old('robots_content', $pageSeo->robots_content) == 'noindex, nofollow' ? 'selected' : '' }}>
                        noindex, nofollow
                    </option>
                    <option value="index, nofollow" {{ old('robots_content', $pageSeo->robots_content) == 'index, nofollow' ? 'selected' : '' }}>
                        index, nofollow
                    </option>
                    <option value="noindex, follow" {{ old('robots_content', $pageSeo->robots_content) == 'noindex, follow' ? 'selected' : '' }}>
                        noindex, follow
                    </option>
                </select>
                @error('robots_content')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="canonical_url">Canonical URL</label>
                <input type="url" name="canonical_url" class="form-control @error('canonical_url') is-invalid @enderror" id="canonical_url" 
                    placeholder="https://example.com" value="{{ old('canonical_url', $pageSeo->canonical_url) }}">
                <small class="form-text text-muted">Leave empty to use current page URL</small>
                @error('canonical_url')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>

            <!-- Open Graph Tags -->
            <hr>
            <div class="row">
                <div class="col-12">
                    <h5 class="text-primary mb-3">Open Graph Tags</h5>
                </div>
            </div>
            
            <div class="form-group">
                <label for="og_title">OG Title</label>
                <input type="text" name="og_title" class="form-control @error('og_title') is-invalid @enderror" id="og_title" 
                    placeholder="Leave empty to use Meta Title" value="{{ old('og_title', $pageSeo->og_title) }}">
                @error('og_title')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>
            
            <div class="form-group">
                <label for="og_description">OG Description</label>
                <textarea name="og_description" class="form-control @error('og_description') is-invalid @enderror" id="og_description" rows="2"
                    placeholder="Leave empty to use Meta Description">{{ old('og_description', $pageSeo->og_description) }}</textarea>
                @error('og_description')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>
            
            <div class="form-group">
                <label for="og_image">OG Image</label>
                <input type="url" name="og_image" class="form-control @error('og_image') is-invalid @enderror" id="og_image" 
                    placeholder="https://example.com/image.jpg" value="{{ old('og_image', $pageSeo->og_image) }}">
                @error('og_image')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>

            <!-- Twitter Card Tags -->
            <hr>
            <div class="row">
                <div class="col-12">
                    <h5 class="text-primary mb-3">Twitter Card Tags</h5>
                </div>
            </div>
            
            <div class="form-group">
                <label for="twitter_title">Twitter Title</label>
                <input type="text" name="twitter_title" class="form-control @error('twitter_title') is-invalid @enderror" id="twitter_title" 
                    placeholder="Leave empty to use Meta Title" value="{{ old('twitter_title', $pageSeo->twitter_title) }}">
                @error('twitter_title')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>
            
            <div class="form-group">
                <label for="twitter_description">Twitter Description</label>
                <textarea name="twitter_description" class="form-control @error('twitter_description') is-invalid @enderror" id="twitter_description" rows="2"
                    placeholder="Leave empty to use Meta Description">{{ old('twitter_description', $pageSeo->twitter_description) }}</textarea>
                @error('twitter_description')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>
            
            <div class="form-group">
                <label for="twitter_image">Twitter Image</label>
                <input type="url" name="twitter_image" class="form-control @error('twitter_image') is-invalid @enderror" id="twitter_image" 
                    placeholder="https://example.com/image.jpg" value="{{ old('twitter_image', $pageSeo->twitter_image) }}">
                @error('twitter_image')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>

            <!-- Custom Scripts Section -->
            <hr>
            <div class="row">
                <div class="col-12">
                    <h5 class="text-primary mb-3">Custom Scripts</h5>
                </div>
            </div>
            
            <div class="form-group">
                <label for="header_scripts">Header Scripts</label>
                <textarea name="header_scripts" 
                          class="form-control @error('header_scripts') is-invalid @enderror" 
                          id="header_scripts" 
                          rows="4"
                          placeholder="<script>...</script> or <meta name=... > or other HTML tags ONLY">{{ old('header_scripts', $pageSeo->header_scripts) }}</textarea>
                <small class="form-text text-muted">
                    <strong class="text-danger">⚠️ IMPORTANT:</strong> Only HTML tags (scripts, meta tags, etc.). <strong>DO NOT</strong> add plain text or descriptions here - they will appear as visible text on the website!<br>
                    <strong>Examples:</strong> <code>&lt;script&gt;...&lt;/script&gt;</code>, <code>&lt;meta name="..."&gt;</code>, <code>&lt;!-- comments --&gt;</code>
                </small>
                @error('header_scripts')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            
            <div class="form-group">
                <label for="body_scripts">Body Scripts (JSON-LD Schema)</label>
                <textarea name="body_scripts" 
                          class="form-control @error('body_scripts') is-invalid @enderror" 
                          id="body_scripts" 
                          rows="6"
                          placeholder="<script type='application/ld+json'>...</script> or other scripts ONLY">{{ old('body_scripts', $pageSeo->body_scripts) }}</textarea>
                <small class="form-text text-muted">
                    <strong class="text-danger">⚠️ IMPORTANT:</strong> Only HTML/JavaScript code. <strong>DO NOT</strong> add plain text - it will display on the website!<br>
                    <strong>Examples:</strong> JSON-LD schema, Google Analytics code, tracking pixels
                </small>
                @error('body_scripts')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            
            <div class="form-group">
                <label>Page Information</label>
                <div class="alert alert-info" data-auto-hide="false">
                    <strong>Page:</strong> {{ $pageName }}<br>
                    <strong>Slug:</strong> <code>{{ $slug }}</code><br>
                    <strong>URL:</strong> <code>/sustainability/assurance/{{ $slug }}</code>
                </div>
            </div>
        </div>
        
        <div class="card-footer">
            <button type="submit" class="btn btn-primary">Update SEO Content</button>
            <a href="{{ route('admin.assurance-pages.index') }}" class="btn btn-default float-right">Cancel</a>
        </div>
    </form>
</div>
@stop