@extends('layouts.app')

@section('content')
<div class="chatwoot app-wrapper">
    <div class="main-content main-content--full">
        <!-- Header -->
        <div class="page-header">
            <div class="page-header__content">
                <div>
                    <h1 class="page-header__title">Configuration</h1>
                    <p class="page-header__subtitle">Manage system settings and attributes</p>
                </div>
            </div>
        </div>

        <!-- Configuration Options -->
        <div class="configuration-container">
            <div class="configuration-grid">
                <!-- Dialog Attributes Card -->
                <div class="configuration-card">
                    <div class="configuration-card__icon">
                        <svg class="icon icon--large" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                        </svg>
                    </div>
                    <div class="configuration-card__content">
                        <h3 class="configuration-card__title">Dialog Attributes</h3>
                        <p class="configuration-card__description">
                            Configure custom attributes for conversations and dialogs. Add fields like priority, category, or any other metadata you need to track.
                        </p>
                        <div class="configuration-card__stats">
                            <span class="badge badge--success">Active</span>
                            <span class="text-secondary">{{ \App\Models\DialogAttribute::count() }} attributes</span>
                        </div>
                    </div>
                    <div class="configuration-card__actions">
                        <a href="{{ route('admin.configuration.dialog-attributes') }}" class="button button--primary button--block">
                            <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            Manage Dialog Attributes
                        </a>
                    </div>
                </div>

                <!-- Dialog Statuses Card -->
                <div class="configuration-card">
                    <div class="configuration-card__icon">
                        <svg class="icon icon--large" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="configuration-card__content">
                        <h3 class="configuration-card__title">Dialog Statuses</h3>
                        <p class="configuration-card__description">
                            Manage custom statuses for conversations. Create statuses like Open, Closed, Pending, or any other workflow states you need.
                        </p>
                        <div class="configuration-card__stats">
                            <span class="badge badge--success">Active</span>
                            <span class="text-secondary">{{ \App\Models\DialogStatus::count() }} statuses</span>
                        </div>
                    </div>
                    <div class="configuration-card__actions">
                        <a href="{{ route('admin.configuration.dialog-statuses') }}" class="button button--primary button--block">
                            <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                            </svg>
                            Manage Dialog Statuses
                        </a>
                    </div>
                </div>

                <!-- Contact Attributes Card -->
                <div class="configuration-card configuration-card--disabled">
                    <div class="configuration-card__icon">
                        <svg class="icon icon--large" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                    <div class="configuration-card__content">
                        <h3 class="configuration-card__title">Contact Attributes</h3>
                        <p class="configuration-card__description">
                            Configure custom attributes for contacts. Store additional information about your customers like preferences, tags, or custom identifiers.
                        </p>
                        <div class="configuration-card__stats">
                            <span class="badge badge--secondary">Coming Soon</span>
                        </div>
                    </div>
                    <div class="configuration-card__actions">
                        <button class="button button--secondary button--block" disabled>
                            <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            </svg>
                            Not Available Yet
                        </button>
                    </div>
                </div>

                <!-- System Settings Card -->
                <div class="configuration-card configuration-card--disabled">
                    <div class="configuration-card__icon">
                        <svg class="icon icon--large" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                        </svg>
                    </div>
                    <div class="configuration-card__content">
                        <h3 class="configuration-card__title">System Settings</h3>
                        <p class="configuration-card__description">
                            Configure global system settings, API keys, webhooks, and integration preferences for your chat platform.
                        </p>
                        <div class="configuration-card__stats">
                            <span class="badge badge--secondary">Coming Soon</span>
                        </div>
                    </div>
                    <div class="configuration-card__actions">
                        <button class="button button--secondary button--block" disabled>
                            <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            </svg>
                            Not Available Yet
                        </button>
                    </div>
                </div>

                <!-- Automation Rules Card -->
                <div class="configuration-card configuration-card--disabled">
                    <div class="configuration-card__icon">
                        <svg class="icon icon--large" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <div class="configuration-card__content">
                        <h3 class="configuration-card__title">Automation Rules</h3>
                        <p class="configuration-card__description">
                            Set up automatic actions based on triggers. Route conversations, send auto-replies, or update attributes automatically.
                        </p>
                        <div class="configuration-card__stats">
                            <span class="badge badge--secondary">Coming Soon</span>
                        </div>
                    </div>
                    <div class="configuration-card__actions">
                        <button class="button button--secondary button--block" disabled>
                            <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            </svg>
                            Not Available Yet
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style scoped>
/* Page Layout */
.main-content--full {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.page-header {
    background: white;
    border-bottom: 1px solid var(--border-light);
    padding: 24px 32px;
    margin-bottom: 0;
}

.page-header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.page-header__subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Configuration Container */
.configuration-container {
    padding: 32px;
}

.configuration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

/* Configuration Card */
.configuration-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    position: relative;
}

.configuration-card:hover:not(.configuration-card--disabled) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.configuration-card--disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.configuration-card__icon {
    width: 48px;
    height: 48px;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--color-primary);
}

.configuration-card--disabled .configuration-card__icon {
    color: var(--text-secondary);
}

.configuration-card__content {
    flex: 1;
    margin-bottom: 20px;
}

.configuration-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.configuration-card__description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.configuration-card__stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.configuration-card__stats .text-secondary {
    font-size: 13px;
}

.configuration-card__actions {
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .configuration-container {
        padding: 20px;
    }
    
    .configuration-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .page-header {
        padding: 20px;
    }
}
</style>
@endsection