@extends('layouts.app')

@section('title', 'Widgets')

@section('navigation')
    <a href="{{ route('dashboard') }}">Dashboard</a>
    <a href="{{ route('dashboard.settings') }}">Settings</a>
    <a href="{{ route('dashboard.events') }}">Events</a>
    <a href="{{ route('dashboard.widgets') }}" class="active">Widgets</a>
@endsection

@section('content')
<div class="eb-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <div>
            <h2>EventBookings Widgets</h2>
            <p>Add EventBookings widgets to your Shopify theme to display events on your storefront.</p>
        </div>
        <div>
            <a href="{{ config('app.url') }}/widget-examples.html" target="_blank" class="eb-btn eb-btn-secondary">
                View Live Examples
            </a>
        </div>
    </div>
</div>

<div class="eb-card">
    <h3>1. Events List Widget</h3>
    <p>Display a list of all visible events from your EventBookings account.</p>

    <div style="background: #f4f6f8; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
        <h4>HTML Code:</h4>
        <textarea readonly rows="8" style="width: 100%; font-family: monospace; font-size: 12px;" id="events-list-code">
<!-- EventBookings Events List Widget -->
<link rel="stylesheet" href="{{ config('app.url') }}/css/eventbookings-widget.css">
<div data-eb-widget="events-list"
     data-eb-limit="10"
     data-eb-show-description="true"
     data-eb-show-location="true">
    Loading events...
</div>
<script src="{{ config('app.url') }}/js/eventbookings-widget.js"></script></textarea>
    </div>

    <div style="margin-top: 1rem;">
        <h4>Customization Options:</h4>
        <ul>
            <li><code>data-eb-limit</code>: Maximum number of events to display (default: 10)</li>
            <li><code>data-eb-show-description</code>: Show event descriptions (default: true)</li>
            <li><code>data-eb-show-location</code>: Show event locations (default: true)</li>
            <li><code>data-eb-show-date</code>: Show event dates (default: true)</li>
            <li><code>data-eb-class</code>: Additional CSS classes for styling</li>
            <li><code>data-eb-auto-refresh</code>: Auto-refresh interval in seconds (minimum: 30)</li>
        </ul>
    </div>

    <button class="eb-btn eb-btn-secondary" onclick="copyToClipboard('events-list-code')">Copy Code</button>
</div>

<div class="eb-card">
    <h3>2. Events Grid Widget</h3>
    <p>Display events in a responsive grid layout, perfect for showcasing multiple events.</p>

    <div style="background: #f4f6f8; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
        <h4>HTML Code:</h4>
        <textarea readonly rows="8" style="width: 100%; font-family: monospace; font-size: 12px;" id="events-grid-code">
<!-- EventBookings Events Grid Widget -->
<link rel="stylesheet" href="{{ config('app.url') }}/css/eventbookings-widget.css">
<div data-eb-widget="events-grid"
     data-eb-limit="6"
     data-eb-show-description="false"
     data-eb-show-location="true">
    Loading events...
</div>
<script src="{{ config('app.url') }}/js/eventbookings-widget.js"></script></textarea>
    </div>

    <button class="eb-btn eb-btn-secondary" onclick="copyToClipboard('events-grid-code')">Copy Code</button>
</div>

<div class="eb-card">
    <h3>3. Featured Events Widget</h3>
    <p>Display only events marked as "featured" in the Events management section.</p>

    <div style="background: #f4f6f8; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
        <h4>HTML Code:</h4>
        <textarea readonly rows="8" style="width: 100%; font-family: monospace; font-size: 12px;" id="featured-events-code">
<!-- EventBookings Featured Events Widget -->
<link rel="stylesheet" href="{{ config('app.url') }}/css/eventbookings-widget.css">
<div data-eb-widget="featured-events"
     data-eb-limit="3"
     data-eb-show-description="true"
     data-eb-show-location="true">
    Loading featured events...
</div>
<script src="{{ config('app.url') }}/js/eventbookings-widget.js"></script></textarea>
    </div>

    <button class="eb-btn eb-btn-secondary" onclick="copyToClipboard('featured-events-code')">Copy Code</button>
</div>

<div class="eb-card">
    <h3>4. Single Event Widget</h3>
    <p>Display detailed information for a specific event. Get the event UUID from the Events management section.</p>

    <div style="background: #f4f6f8; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
        <h4>HTML Code:</h4>
        <textarea readonly rows="9" style="width: 100%; font-family: monospace; font-size: 12px;" id="single-event-code">
<!-- EventBookings Single Event Widget -->
<link rel="stylesheet" href="{{ config('app.url') }}/css/eventbookings-widget.css">
<div data-eb-widget="single-event"
     data-eb-event-uuid="YOUR_EVENT_UUID_HERE"
     data-eb-show-description="true"
     data-eb-show-location="true">
    Loading event details...
</div>
<script src="{{ config('app.url') }}/js/eventbookings-widget.js"></script></textarea>
    </div>

    <p><strong>Note:</strong> Replace <code>YOUR_EVENT_UUID_HERE</code> with the actual UUID of the event you want to display.</p>

    <button class="eb-btn eb-btn-secondary" onclick="copyToClipboard('single-event-code')">Copy Code</button>
</div>

<div class="eb-card">
    <h3>How to Add Widgets to Your Theme</h3>

    <div style="margin-top: 1rem;">
        <h4>Method 1: Shopify Theme Editor (Recommended)</h4>
        <ol>
            <li>Go to your Shopify admin → Online Store → Themes</li>
            <li>Click "Customize" on your current theme</li>
            <li>Navigate to the page where you want to add the widget</li>
            <li>Add a new "Custom HTML" or "Custom Liquid" section</li>
            <li>Paste the widget code from above</li>
            <li>Save your changes</li>
        </ol>
    </div>

    <div style="margin-top: 1.5rem;">
        <h4>Method 2: Theme Code Editor</h4>
        <ol>
            <li>Go to your Shopify admin → Online Store → Themes</li>
            <li>Click "Actions" → "Edit code" on your current theme</li>
            <li>Find the template file where you want to add the widget</li>
            <li>Paste the widget code in the desired location</li>
            <li>Save the file</li>
        </ol>
    </div>

    <div style="margin-top: 1.5rem;">
        <h4>Method 3: Create a New Page Template</h4>
        <ol>
            <li>Go to your Shopify admin → Online Store → Pages</li>
            <li>Create a new page (e.g., "Events")</li>
            <li>In the page content, switch to HTML view</li>
            <li>Paste the widget code</li>
            <li>Save the page and add it to your navigation menu</li>
        </ol>
    </div>
</div>

<div class="eb-card">
    <h3>Widget Styling</h3>
    <p>The widgets come with basic styling that matches most themes. You can customize the appearance by adding CSS to your theme.</p>

    <div style="background: #f4f6f8; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
        <h4>Example CSS Customization:</h4>
        <textarea readonly rows="8" style="width: 100%; font-family: monospace; font-size: 12px;">
/* Customize EventBookings widgets */
.eb-widget {
    font-family: 'Helvetica', sans-serif;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.eb-event-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.eb-event-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.eb-event-date {
    color: #666;
    font-size: 14px;
}</textarea>
    </div>

    <p><strong>Note:</strong> Add this CSS to your theme's main stylesheet or in a custom CSS section.</p>
</div>

<div class="eb-card">
    <h3>Need Help?</h3>
    <p>If you need assistance adding widgets to your theme or have questions about customization:</p>
    <ul>
        <li>Check the <a href="#" target="_blank">EventBookings documentation</a></li>
        <li>Contact our support team</li>
        <li>Consider hiring a Shopify Expert for custom implementation</li>
    </ul>
</div>
@endsection

@push('scripts')
<script>
function copyToClipboard(elementId) {
    const textarea = document.getElementById(elementId);
    if (!textarea) {
        showAlert('Could not find code to copy.', 'error');
        return;
    }

    const text = textarea.value;

    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(function() {
            showAlert('Widget code copied to clipboard!', 'success');
        }).catch(function(err) {
            console.error('Could not copy text: ', err);
            fallbackCopyToClipboard(text);
        });
    } else {
        fallbackCopyToClipboard(text);
    }
}

function fallbackCopyToClipboard(text) {
    // Fallback for older browsers
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
        const successful = document.execCommand('copy');
        if (successful) {
            showAlert('Widget code copied to clipboard!', 'success');
        } else {
            showAlert('Could not copy code. Please copy manually.', 'error');
        }
    } catch (err) {
        console.error('Fallback copy failed: ', err);
        showAlert('Could not copy code. Please copy manually.', 'error');
    }

    document.body.removeChild(textArea);
}

// Show simple alert message
function showAlert(message, type) {
    // Create alert element
    const alert = document.createElement('div');
    alert.className = `eb-alert eb-alert-${type}`;
    alert.style.position = 'fixed';
    alert.style.top = '20px';
    alert.style.right = '20px';
    alert.style.zIndex = '9999';
    alert.style.padding = '12px 16px';
    alert.style.borderRadius = '4px';
    alert.style.backgroundColor = type === 'success' ? '#d4edda' : '#f8d7da';
    alert.style.border = `1px solid ${type === 'success' ? '#c3e6cb' : '#f5c6cb'}`;
    alert.style.color = type === 'success' ? '#155724' : '#721c24';
    alert.style.maxWidth = '300px';
    alert.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
    alert.textContent = message;

    document.body.appendChild(alert);

    // Remove after 3 seconds
    setTimeout(() => {
        if (alert.parentNode) {
            alert.parentNode.removeChild(alert);
        }
    }, 3000);
}
</script>
@endpush