@extends('layouts.app')

@section('title', 'Dashboard')

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

@section('content')
<div class="eb-card">
    <h2>Dashboard Overview</h2>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;">
        <!-- Shop Information -->
        <div class="eb-card">
            <h3>Shop Information</h3>
            @if($shopData)
                <p><strong>Name:</strong> {{ $shopData['name'] ?? 'N/A' }}</p>
                <p><strong>Domain:</strong> {{ $shopData['domain'] ?? $store->shop_domain }}</p>
                <p><strong>Email:</strong> {{ $shopData['email'] ?? 'N/A' }}</p>
                <p><strong>Plan:</strong> {{ $shopData['plan_name'] ?? 'N/A' }}</p>
            @else
                <p>Shop information not available</p>
            @endif
        </div>

        <!-- EventBookings Connection Status -->
        <div class="eb-card">
            <h3>EventBookings Connection</h3>
            @if($isConnected)
                <div style="color: #008060;">
                    <strong>✓ Connected</strong>
                </div>
                <p>Your EventBookings account is connected and ready to use.</p>
                <a href="{{ route('dashboard.events') }}" class="eb-btn">Manage Events</a>
            @else
                <div style="color: #d82c0d;">
                    <strong>✗ Not Connected</strong>
                </div>
                @if($connectionError)
                    <p style="color: #d82c0d; font-size: 0.9em;">{{ $connectionError }}</p>
                @endif
                <p>Connect your EventBookings account to start managing events.</p>
                <a href="{{ route('dashboard.settings') }}" class="eb-btn">Connect Account</a>
            @endif
        </div>

        <!-- Quick Actions -->
        <div class="eb-card">
            <h3>Quick Actions</h3>
            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                <a href="{{ route('dashboard.settings') }}" class="eb-btn eb-btn-secondary">Configure Settings</a>
                @if($isConnected)
                    <a href="{{ route('dashboard.events') }}" class="eb-btn eb-btn-secondary">View Events</a>
                    <a href="{{ route('dashboard.widgets') }}" class="eb-btn eb-btn-secondary">Setup Widgets</a>
                @endif
            </div>
        </div>
    </div>
</div>

@if($isConnected)
<div class="eb-card">
    <h3>Getting Started</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
        <div>
            <h4>1. Configure Events</h4>
            <p>Go to the Events page to manage which events are visible on your storefront and mark events as featured.</p>
            <a href="{{ route('dashboard.events') }}" class="eb-btn eb-btn-secondary">Manage Events</a>
        </div>
        <div>
            <h4>2. Add Widgets</h4>
            <p>Use the Widgets page to get code snippets for embedding EventBookings widgets in your Shopify theme.</p>
            <a href="{{ route('dashboard.widgets') }}" class="eb-btn eb-btn-secondary">Get Widget Code</a>
        </div>
    </div>
</div>
@else
<div class="eb-card">
    <h3>Welcome to EventBookings for Shopify</h3>
    <p>To get started, you'll need to connect your EventBookings account. This allows the app to fetch your events and display them on your Shopify store.</p>

    <div style="margin-top: 1.5rem;">
        <h4>What you'll need:</h4>
        <ul>
            <li>Your EventBookings Client ID</li>
            <li>Your EventBookings Client Secret</li>
        </ul>
        <p>These can be found in your EventBookings account settings under API Access.</p>
        <a href="{{ route('dashboard.settings') }}" class="eb-btn">Connect EventBookings Account</a>
    </div>
</div>
@endif
@endsection