{{-- resources/views/pages/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">Pages - {{ $website->name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="{{ route('pages.create', $website) }}" class="btn btn-sm btn-primary">
                <i class="bi bi-plus-circle me-1"></i>New Page
            </a>
            {{-- <a href="{{ route('pages.custom-builder-new', $website) }}" class="btn btn-sm btn-success">
                <i class="bi bi-brush me-1"></i>Visual Builder
            </a> --}}
            <a href="{{ route('pages.builder-v2-new', $website) }}" class="btn btn-sm btn-info text-white">
                <i class="bi bi-magic me-1"></i>Visual Builder
            </a>
        </div>
        <a href="{{ route('website.show', $website) }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Website
        </a>
    </div>
</div>

@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

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">All Pages</h5>
    </div>
    <div class="card-body">
        @if($pages->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Slug</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Last Updated</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($pages as $page)
                            <tr>
                                <td>
                                    <strong>{{ $page->title }}</strong>
                                    @if($page->is_home)
                                        <span class="badge bg-primary ms-2">Home</span>
                                    @endif
                                </td>
                                <td>
                                    <code>{{ $page->slug }}</code>
                                </td>
                                <td>
                                    @if($page->isBuilderV2Page())
                                        <span class="badge bg-info">
                                            <i class="bi bi-magic me-1"></i>Visual Builder
                                        </span>
                                    @elseif($page->isBuilderPage())
                                        {{-- <span class="badge bg-success">
                                            <i class="bi bi-brush me-1"></i>Visual Builder
                                        </span> --}}
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="bi bi-file-text me-1"></i>Standard
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($page->is_published)
                                        <span class="badge bg-success">Published</span>
                                    @else
                                        <span class="badge bg-warning">Draft</span>
                                    @endif
                                </td>
                                <td>{{ $page->updated_at->format('M d, Y H:i') }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <!-- Set as Home Page (only show if not already home) -->
                                        @if(!$page->is_home)
                                            <button type="button" class="btn btn-sm btn-outline-success"
                                                    onclick="setAsHomePage({{ $page->id }})" title="Set as Home Page">
                                                <i class="bi bi-house"></i>
                                            </button>
                                        @endif

                                        <!-- Preview -->
                                        <a href="{{ route('preview.page', [$website, $page->slug]) }}"
                                           class="btn btn-sm btn-outline-primary" target="_blank" title="Preview">
                                            <i class="bi bi-eye"></i>
                                        </a>

                                        <!-- Builder V2 button (only for V2 pages) -->
                                        @if($page->isBuilderV2Page())
                                            <a href="{{ route('pages.builder-v2', [$website, $page]) }}"
                                               class="btn btn-sm btn-outline-info" title="Edit with Builder V2">
                                                <i class="bi bi-magic"></i>
                                            </a>
                                        @endif

                                        <!-- Standard Edit -->
                                        <a href="{{ route('pages.edit', [$website, $page]) }}"
                                           class="btn btn-sm btn-outline-secondary" title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>

                                        <!-- Delete -->
                                        <form method="POST" action="{{ route('pages.destroy', [$website, $page]) }}"
                                              class="d-inline" onsubmit="return confirm('Are you sure you want to delete this page?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>

                                    <!-- Page Actions Dropdown -->
                                    <div class="btn-group ms-2" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-info dropdown-toggle"
                                                data-bs-toggle="dropdown">
                                            <i class="bi bi-tools"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <form method="POST" action="{{ route('pages.duplicate', [$website, $page]) }}" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="dropdown-item">
                                                        <i class="bi bi-files me-2"></i>Duplicate Page
                                                    </button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-5">
                <i class="bi bi-file-earmark-text display-1 text-muted"></i>
                <h4 class="mt-3">No Pages Yet</h4>
                <p class="text-muted">Create your first page to get started with your website.</p>
                <div class="mt-4">
                    <a href="{{ route('pages.create', $website) }}" class="btn btn-primary me-2">
                        <i class="bi bi-plus-circle me-1"></i>Create Standard Page
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Quick Actions Card -->


<!-- Template Import Modal -->
<div class="modal fade" id="templateImportModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import HTML Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="template-import-form">
                    <div class="mb-3">
                        <label for="template-name" class="form-label">Page Title</label>
                        <input type="text" class="form-control" id="template-name" required>
                    </div>
                    <div class="mb-3">
                        <label for="template-slug" class="form-label">Page Slug</label>
                        <input type="text" class="form-control" id="template-slug" required>
                    </div>
                    <div class="mb-3">
                        <label for="template-html" class="form-label">HTML Content</label>
                        <textarea class="form-control" id="template-html" rows="10"
                                  placeholder="Paste your HTML content here..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="template-css" class="form-label">CSS (Optional)</label>
                        <textarea class="form-control" id="template-css" rows="5"
                                  placeholder="Paste your CSS here..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitTemplateImport()">
                    Import & Open in Visual Builder
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function importTemplate() {
    const modal = new bootstrap.Modal(document.getElementById('templateImportModal'));
    modal.show();

    // Auto-generate slug from title
    document.getElementById('template-name').addEventListener('input', function(e) {
        const title = e.target.value;
        const slug = generateSlug(title);
        document.getElementById('template-slug').value = slug;
    });
}

function submitTemplateImport() {
    const title = document.getElementById('template-name').value;
    const slug = document.getElementById('template-slug').value;
    const html = document.getElementById('template-html').value;
    const css = document.getElementById('template-css').value;

    if (!title || !slug || !html) {
        alert('Please fill in all required fields');
        return;
    }

    // Create a form to submit the data
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route("pages.import-template", $website) }}';

    // Add CSRF token
    const csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = '_token';
    csrfInput.value = '{{ csrf_token() }}';
    form.appendChild(csrfInput);

    // Add data
    const inputs = [
        { name: 'title', value: title },
        { name: 'slug', value: slug },
        { name: 'html', value: html },
        { name: 'css', value: css }
    ];

    inputs.forEach(data => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = data.name;
        input.value = data.value;
        form.appendChild(input);
    });

    document.body.appendChild(form);
    form.submit();
}

function generateSlug(text) {
    return text
        .toLowerCase()
        .replace(/[^\w\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-')
        .trim('-');
}

function setAsHomePage(pageId) {
    if (!confirm('Set this page as the home page?\n\nThis will unset any other page currently marked as home.')) {
        return;
    }

    fetch(`/websites/{{ $website->id }}/pages/${pageId}/set-home`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Home page updated successfully!');
            location.reload();
        } else {
            alert(data.message || 'Failed to set home page');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while setting the home page');
    });
}
</script>
@endsection