{{-- resources/views/globals/index.blade.php --}}
@extends('layouts.app')

@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 Header & Footer - {{ $website->name }}</h1>
    <div>
        <div class="btn-group me-2" role="group">
            <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                <i class="bi bi-plus-circle me-1"></i> Create New
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a class="dropdown-item" href="#" onclick="event.preventDefault(); showCreateModal('header')">
                        <i class="bi bi-layout-text-window me-2"></i> New Header
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#" onclick="event.preventDefault(); showCreateModal('footer')">
                        <i class="bi bi-layout-text-window-reverse me-2"></i> New Footer
                    </a>
                </li>
            </ul>
        </div>

        @if($website->activeTheme)
        <div class="btn-group me-2" role="group">
            <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                <i class="bi bi-arrow-clockwise me-1"></i> Restore from Theme
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a class="dropdown-item" href="#" onclick="event.preventDefault(); confirmRestore('header')">
                        <i class="bi bi-layout-text-window me-2"></i> Restore Header
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#" onclick="event.preventDefault(); confirmRestore('footer')">
                        <i class="bi bi-layout-text-window-reverse me-2"></i> Restore Footer
                    </a>
                </li>
            </ul>
        </div>
        @endif

        <a href="{{ route('website.show', $website) }}" class="btn btn-secondary btn-sm">← Back to Dashboard</a>
    </div>
</div>

<p class="text-muted">Customize your website's header and footer. Theme components will be used by default, or you can create custom versions.</p>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- Theme Components (from active theme) --}}
@if($themeComponents->count() > 0)
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-palette me-2"></i>Theme Headers & Footers</h5>
    </div>
    <div class="card-body">
        <p class="text-muted mb-3">These are from your active theme. Click "Customize" to create your own version.</p>
        <div class="list-group">
            @foreach($themeComponents as $component)
                <div class="list-group-item d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-1">
                            <i class="bi bi-{{ $component->type === 'header' ? 'layout-text-window' : 'layout-text-window-reverse' }} me-2"></i>
                            {{ $component->name }}
                        </h5>
                        <small class="text-muted">
                            <span class="badge bg-info">Theme {{ ucfirst($component->type) }}</span>
                            @if($component->description)
                                - {{ $component->description }}
                            @endif
                        </small>
                    </div>
                    <form action="{{ route('globals.customize-theme', [$website, $component->id]) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-outline-primary">
                            <i class="bi bi-pencil me-1"></i> Customize
                        </button>
                    </form>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endif

{{-- Custom Sections (user customized) --}}
@if($customSections->count() > 0)
<div class="card">
    <div class="card-header bg-success text-white">
        <h5 class="mb-0"><i class="bi bi-brush me-2"></i>Your Custom Headers & Footers</h5>
    </div>
    <div class="card-body">
        <p class="text-muted mb-3">These are your customized versions. They override the theme defaults.</p>
        <div class="list-group">
            @foreach($customSections as $section)
                <div class="list-group-item d-flex justify-content-between align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="mb-1">
                            <i class="bi bi-{{ $section->type === 'header' ? 'layout-text-window' : 'layout-text-window-reverse' }} me-2"></i>
                            {{ $section->name }}
                            @if($section->is_default)
                                <span class="badge bg-primary ms-2">Default</span>
                            @endif
                        </h5>
                        <small class="text-muted">
                            <span class="badge bg-success">Custom {{ ucfirst($section->type) }}</span>
                            - Created {{ $section->created_at->diffForHumans() }}
                        </small>
                    </div>
                    <div class="btn-group" role="group">
                        <a href="{{ route('globals.edit', [$website, $section]) }}" class="btn btn-primary btn-sm">
                            <i class="bi bi-pencil me-1"></i> Edit
                        </a>

                        @if(!$section->is_default)
                            <form action="{{ route('globals.set-default', [$website, $section]) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-outline-primary btn-sm" title="Set as default">
                                    <i class="bi bi-star me-1"></i> Set Default
                                </button>
                            </form>
                        @endif

                        <button type="button" class="btn btn-outline-danger btn-sm"
                                onclick="confirmDelete('{{ $section->id }}', '{{ $section->type }}', '{{ $section->name }}')"
                                title="Delete section">
                            <i class="bi bi-trash"></i>
                        </button>

                        <form id="delete-form-{{ $section->id }}"
                              action="{{ route('globals.destroy', [$website, $section]) }}"
                              method="POST"
                              class="d-none">
                            @csrf
                            @method('DELETE')
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endif

@php
    $hasHeader = $customSections->where('type', 'header')->count() > 0;
    $hasFooter = $customSections->where('type', 'footer')->count() > 0;
@endphp

@if(!$hasHeader || !$hasFooter)
<div class="alert alert-warning">
    <h6><i class="bi bi-exclamation-triangle me-2"></i>Missing Sections</h6>
    <p class="mb-2">Your website is missing the following sections:</p>
    <ul class="mb-2">
        @if(!$hasHeader)
            <li><strong>Header</strong> - Click "Create New" → "New Header" to add one</li>
        @endif
        @if(!$hasFooter)
            <li><strong>Footer</strong> - Click "Create New" → "New Footer" to add one</li>
        @endif
    </ul>
    @if($website->activeTheme)
        <p class="mb-0"><em>Tip: Use "Restore from Theme" to quickly add headers/footers from your active theme.</em></p>
    @endif
</div>
@endif

@if($themeComponents->count() === 0 && $customSections->count() === 0)
<div class="alert alert-info">
    <i class="bi bi-info-circle me-2"></i>
    No headers or footers found. Click "Create New" above to get started, or activate a theme first.
</div>
@endif

<div class="alert alert-info mt-4">
    <h6><i class="bi bi-lightbulb me-2"></i>How it works:</h6>
    <ul class="mb-0">
        <li><strong>Theme Components:</strong> Use your theme's default header/footer designs</li>
        <li><strong>Custom Components:</strong> Your personalized versions that override theme defaults</li>
        <li><strong>Default Section:</strong> The section marked as "Default" will be used on your website</li>
        <li><strong>Multiple Sections:</strong> You can have multiple header/footer versions and switch between them</li>
        <li><strong>Create New:</strong> Start from scratch with a blank header or footer</li>
        <li><strong>Restore from Theme:</strong> Copy the header/footer from your active theme</li>
        <li><strong>Need help?</strong> Customizing creates a copy you can edit without affecting the original theme</li>
    </ul>
</div>

<!-- Create New Section Modal -->
<div class="modal fade" id="createSectionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New <span id="modal-section-type"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="create-section-form" action="{{ route('globals.create', $website) }}" method="POST">
                @csrf
                <input type="hidden" name="type" id="create-type">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="section-name" class="form-label">Section Name (Optional)</label>
                        <input type="text" class="form-control" id="section-name" name="name" placeholder="e.g., Main Header, Alt Footer">
                        <small class="text-muted">Leave blank to use default name</small>
                    </div>
                    <div class="alert alert-info mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        This will create a blank <span id="modal-type-text"></span> that you can customize in the builder.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-plus-circle me-1"></i> Create
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Restore Forms -->
<form id="restore-header-form" action="{{ route('globals.restore-from-theme', $website) }}" method="POST" class="d-none">
    @csrf
    <input type="hidden" name="type" value="header">
</form>

<form id="restore-footer-form" action="{{ route('globals.restore-from-theme', $website) }}" method="POST" class="d-none">
    @csrf
    <input type="hidden" name="type" value="footer">
</form>

@push('scripts')
<script>
function confirmDelete(sectionId, type, name) {
    if (confirm('Are you sure you want to delete the ' + type + ' section "' + name + '"?\n\nNote: You must have at least one ' + type + ' section.')) {
        document.getElementById('delete-form-' + sectionId).submit();
    }
}

function showCreateModal(type) {
    document.getElementById('create-type').value = type;
    document.getElementById('modal-section-type').textContent = type.charAt(0).toUpperCase() + type.slice(1);
    document.getElementById('modal-type-text').textContent = type;

    const modal = new bootstrap.Modal(document.getElementById('createSectionModal'));
    modal.show();
}

function confirmRestore(type) {
    const typeName = type.charAt(0).toUpperCase() + type.slice(1);

    if (confirm('Are you sure you want to restore the ' + typeName + ' from your active theme?\n\nThis will:\n- Create a new ' + type + ' if none exists\n- Update the existing theme ' + type + ' if it exists\n- Not affect your custom sections')) {
        document.getElementById('restore-' + type + '-form').submit();
    }
}
</script>
@endpush
@endsection