@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-4 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">
                <i class="bi bi-shop me-2 text-primary"></i>Marketplace
            </h1>
            <p class="text-muted mb-0">Manage your eCommerce, booking, and payment solutions</p>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-primary" onclick="refreshAnalytics()">
                <i class="bi bi-arrow-clockwise me-1"></i>Refresh Stats
            </button>
        </div>
    </div>

    <!-- Analytics Overview -->
    <div class="row mb-4" id="analytics-cards">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(to right, #2948ff, #396afc);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-cart3 display-4 mb-2"></i>
                    <h3 class="mb-1" id="ecommerce-orders">-</h3>
                    <p class="mb-1 opacity-75">eCommerce Orders</p>
                    <small class="opacity-75" id="ecommerce-revenue">RM 0.00 revenue</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-calendar-event display-4 mb-2"></i>
                    <h3 class="mb-1" id="booking-orders">-</h3>
                    <p class="mb-1 opacity-75">Bookings</p>
                    <small class="opacity-75" id="booking-revenue">RM 0.00 revenue</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-credit-card display-4 mb-2"></i>
                    <h3 class="mb-1" id="payment-forms-orders">-</h3>
                    <p class="mb-1 opacity-75">Payment Forms</p>
                    <small class="opacity-75" id="payment-forms-revenue">RM 0.00 revenue</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-envelope display-4 mb-2"></i>
                    <h3 class="mb-1" id="marketing-campaigns">-</h3>
                    <p class="mb-1 opacity-75">Marketing Campaigns</p>
                    <small class="opacity-75" id="marketing-reach">0 reach</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Marketplace Modules -->
    <div class="row">
        <!-- eCommerce Module -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-cart3 me-2 text-primary"></i>eCommerce Store
                        </h5>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="ecommerce-toggle"
                                   {{ $website->ecommerce_enabled ? 'checked' : '' }}
                                   onchange="toggleModule('ecommerce', this.checked)">
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Sell physical and digital products with inventory management, variations, and categories.
                    </p>
                    <div class="mb-3">
                        <small class="text-muted">FEATURES:</small>
                        <ul class="small mt-2 mb-0">
                            <li>Product catalog management</li>
                            <li>Inventory tracking</li>
                            <li>Shopping cart & checkout</li>
                            <li>Order management</li>
                        </ul>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0">
                    <div class="d-flex gap-2">
                        <a href="{{ route('products.index', $website) }}"
                           class="btn btn-primary btn-sm flex-fill {{ !$website->ecommerce_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-box-seam me-1"></i>Manage Products
                        </a>
                        <a href="{{ route('orders.index', $website) }}"
                           class="btn btn-outline-primary btn-sm {{ !$website->ecommerce_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-list-ul"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Booking Module -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-calendar-event me-2 text-primary"></i>Booking System
                        </h5>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="booking-toggle"
                                   {{ $website->booking_enabled ? 'checked' : '' }}
                                   onchange="toggleModule('booking', this.checked)">
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Accept bookings for services, accommodations, or events with calendar management.
                    </p>
                    <div class="mb-3">
                        <small class="text-muted">FEATURES:</small>
                        <ul class="small mt-2 mb-0">
                            <li>Property/service listings</li>
                            <li>Availability calendar</li>
                            <li>Time slot management</li>
                            <li>Booking confirmations</li>
                        </ul>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0">
                    <div class="d-flex gap-2">
                        <a href="{{ route('booking.resources.index', $website) }}"
                           class="btn btn-primary btn-sm flex-fill {{ !$website->booking_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-building me-1"></i>Manage Resources
                        </a>
                        <a href="{{ route('booking.calendar', $website) }}"
                           class="btn btn-outline-primary btn-sm {{ !$website->booking_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-calendar3"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Forms Module -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-credit-card me-2 text-primary"></i>Payment Forms
                        </h5>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="payment-forms-toggle"
                                   {{ $website->payment_forms_enabled ? 'checked' : '' }}
                                   onchange="toggleModule('payment_forms', this.checked)">
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Create custom payment forms for donations, subscriptions, or one-time payments.
                    </p>
                    <div class="mb-3">
                        <small class="text-muted">FEATURES:</small>
                        <ul class="small mt-2 mb-0">
                            <li>Custom form builder</li>
                            <li>Shareable payment links</li>
                            <li>Custom branding</li>
                            <li>Payment tracking</li>
                        </ul>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0">
                    <div class="d-flex gap-2">
                        <a href="{{ route('payment-forms.index', $website) }}"
                           class="btn btn-primary btn-sm flex-fill {{ !$website->payment_forms_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-plus-circle me-1"></i>Create Form
                        </a>
                        <a href="{{ route('payment-forms.analytics', $website) }}"
                           class="btn btn-outline-primary btn-sm {{ !$website->payment_forms_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-graph-up"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Marketing Module -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-megaphone me-2 text-primary"></i>Marketing Suite
                        </h5>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="marketing-toggle"
                                   {{ $website->marketing_enabled ? 'checked' : '' }}
                                   onchange="toggleModule('marketing', this.checked)">
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Engage customers with email campaigns, social media management, and WhatsApp automation.
                    </p>
                    <div class="mb-3">
                        <small class="text-muted">FEATURES:</small>
                        <ul class="small mt-2 mb-0">
                            <li>Email marketing campaigns</li>
                            <li>Social media management</li>
                            <li>WhatsApp Business integration</li>
                            <li>Customer segmentation</li>
                            <li>Marketing automation</li>
                        </ul>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0">
                    <div class="d-flex gap-2">
                        <a href="{{ route('marketing.index', $website) }}"
                           class="btn btn-primary btn-sm flex-fill {{ !$website->marketing_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-rocket me-1"></i>Launch Campaign
                        </a>
                        <a href="{{ route('marketing.analytics', $website) }}"
                           class="btn btn-outline-primary btn-sm {{ !$website->marketing_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-graph-up"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Marketplace Integration Module -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-arrow-left-right me-2 text-primary"></i>Marketplace Integration
                        </h5>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="marketplace-integration-toggle"
                                   {{ $website->marketplace_integration_enabled ? 'checked' : '' }}
                                   onchange="toggleModule('marketplace_integration', this.checked)">
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Sync your products to popular marketplaces like TikTok Shop, Lazada, and Shopee.
                    </p>
                    <div class="mb-3">
                        <small class="text-muted">FEATURES:</small>
                        <ul class="small mt-2 mb-0">
                            <li>TikTok Shop integration</li>
                            <li>Lazada marketplace sync</li>
                            <li>Shopee product management</li>
                            <li>Inventory synchronization</li>
                            <li>Order tracking</li>
                        </ul>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0">
                    <div class="d-flex gap-2">
                        <a href="{{ route('marketplace-integration.index', $website) }}"
                           class="btn btn-primary btn-sm flex-fill {{ !$website->marketplace_integration_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-arrow-repeat me-1"></i>Manage Sync
                        </a>
                        <a href="{{ route('marketplace-integration.analytics', $website) }}"
                           class="btn btn-outline-primary btn-sm {{ !$website->marketplace_integration_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-graph-up"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- eKYC Module -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-shield-check me-2 text-primary"></i>eKYC Verification
                        </h5>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="ekyc-toggle"
                                   {{ $website->ekyc_enabled ? 'checked' : '' }}
                                   onchange="toggleModule('ekyc', this.checked)">
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Require identity verification (KYC) during customer registration using Sumsub services.
                    </p>
                    <div class="mb-3">
                        <small class="text-muted">FEATURES:</small>
                        <ul class="small mt-2 mb-0">
                            <li>ID document verification</li>
                            <li>Selfie & liveness check</li>
                            <li>Automated approval</li>
                            <li>Webhook status updates</li>
                        </ul>
                    </div>
                    @if($website->ekyc_enabled)
                    <div class="alert alert-info py-2 mb-0">
                        <small><i class="bi bi-info-circle me-1"></i>Customers must verify identity before accessing their account.</small>
                    </div>
                    @endif
                </div>
                <div class="card-footer bg-transparent border-0">
                    <div class="d-flex gap-2">
                        <a href="{{ route('websites.settings', $website) }}"
                           class="btn btn-primary btn-sm flex-fill {{ !$website->ekyc_enabled ? 'disabled' : '' }}">
                            <i class="bi bi-gear me-1"></i>Configure API Keys
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions Section -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-lightning me-2 text-primary"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="d-grid">
                                <a href="{{ route('orders.index', $website) }}" class="btn btn-outline-primary">
                                    <i class="bi bi-list-ul me-2"></i>View All Orders
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-grid">
                                <button type="button" class="btn btn-outline-success" onclick="viewReports()">
                                    <i class="bi bi-graph-up me-2"></i>View Reports
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-grid">
                                <a href="{{ route('websites.settings', $website) }}" class="btn btn-outline-info">
                                    <i class="bi bi-gear me-2"></i>Payment Settings
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let analyticsData = {};

// Load analytics on page load
document.addEventListener('DOMContentLoaded', function() {
    refreshAnalytics();
});

// Toggle module function
function toggleModule(module, enabled) {
    const formData = new FormData();
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    formData.append('_method', 'PUT');
    formData.append(module + '_enabled', enabled ? '1' : '0');

    fetch('{{ route("marketplace.settings", $website) }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        // Show success message
        showAlert('success', `${module.charAt(0).toUpperCase() + module.slice(1).replace('_', ' ')} module ${enabled ? 'enabled' : 'disabled'} successfully!`);

        // Update button states
        updateButtonStates();

        // Refresh analytics
        setTimeout(refreshAnalytics, 500);
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', 'Failed to update module settings. Please try again.');

        // Revert toggle state
        document.getElementById(module.replace('_', '-') + '-toggle').checked = !enabled;
    });
}

// Refresh analytics data
function refreshAnalytics() {
    fetch('{{ route("marketplace.analytics", $website) }}')
    .then(response => response.json())
    .then(data => {
        analyticsData = data;
        updateAnalyticsCards(data);
    })
    .catch(error => {
        console.error('Error loading analytics:', error);
    });
}

// Update analytics cards
function updateAnalyticsCards(data) {
    document.getElementById('ecommerce-orders').textContent = data.ecommerce.total_orders;
    document.getElementById('ecommerce-revenue').textContent = 'RM ' + parseFloat(data.ecommerce.total_revenue).toFixed(2) + ' revenue';

    document.getElementById('booking-orders').textContent = data.booking.total_bookings;
    document.getElementById('booking-revenue').textContent = 'RM ' + parseFloat(data.booking.total_revenue).toFixed(2) + ' revenue';

    document.getElementById('payment-forms-orders').textContent = data.payment_forms.total_payments;
    document.getElementById('payment-forms-revenue').textContent = 'RM ' + parseFloat(data.payment_forms.total_revenue).toFixed(2) + ' revenue';

    document.getElementById('marketing-campaigns').textContent = data.marketing?.total_campaigns || 0;
    document.getElementById('marketing-reach').textContent = (data.marketing?.total_reach || 0) + ' reach';
}

// Update button states based on toggle states
function updateButtonStates() {
    const ecommerceEnabled = document.getElementById('ecommerce-toggle').checked;
    const bookingEnabled = document.getElementById('booking-toggle').checked;
    const paymentFormsEnabled = document.getElementById('payment-forms-toggle').checked;
    const marketingEnabled = document.getElementById('marketing-toggle').checked;
    const marketplaceIntegrationEnabled = document.getElementById('marketplace-integration-toggle').checked;

    // Update button disabled states and classes
    document.querySelectorAll('a[href*="products"], a[href*="orders"]').forEach(btn => {
        if (ecommerceEnabled) {
            btn.classList.remove('disabled');
        } else {
            btn.classList.add('disabled');
        }
    });

    document.querySelectorAll('a[href*="booking"]').forEach(btn => {
        if (bookingEnabled) {
            btn.classList.remove('disabled');
        } else {
            btn.classList.add('disabled');
        }
    });

    document.querySelectorAll('a[href*="payment-forms"]').forEach(btn => {
        if (paymentFormsEnabled) {
            btn.classList.remove('disabled');
        } else {
            btn.classList.add('disabled');
        }
    });

    document.querySelectorAll('a[href*="marketing"]').forEach(btn => {
        if (marketingEnabled) {
            btn.classList.remove('disabled');
        } else {
            btn.classList.add('disabled');
        }
    });

    document.querySelectorAll('a[href*="marketplace-integration"]').forEach(btn => {
        if (marketplaceIntegrationEnabled) {
            btn.classList.remove('disabled');
        } else {
            btn.classList.add('disabled');
        }
    });
}

// Show alert message
function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;

    // Insert alert at the top of the container
    const container = document.querySelector('.container-fluid');
    container.insertAdjacentHTML('afterbegin', alertHtml);

    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) {
            alert.remove();
        }
    }, 5000);
}

// View reports function
function viewReports() {
    // This could open a modal or navigate to a reports page
    showAlert('info', 'Reports feature coming soon!');
}
</script>

<style>
.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}
</style>
@endsection