@extends('layouts.portal.app')

@section('title', "Settings Team & Roles InsightsReady")

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="{{ asset("portal-assets/portal.css") }}"/>
    <style>
        :root {
            --brand: #4ea3a1;
            --brand-600: #3a8b89;
            --brand-700: #2f7a78;
            --accent: #c27652;
            --ink-900: #111827;
            --ink-800: #1f2937;
            --ink-700: #4b5563;
            --ink-500: #6b7280;
            --border: #e5e7eb;
            --panel: #ffffff;
            --bg: #f6f7fb;
            --radius: 16px;
            --shadow: 0 12px 28px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
            --focus: 0 0 0 3px rgba(78, 163, 161, .25);
        }

        *, *::before, *::after {
            box-sizing: border-box
        }

        html, body {
            height: 100%
        }

        body {
            margin: 0;
            font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
            color: var(--ink-900);
            background: var(--bg)
        }

        a {
            color: inherit;
            text-decoration: none
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px
        }

        /* ===== App Bar ===== */
        .appbar {
            position: sticky;
            top: 0;
            z-index: 10;
            background: rgba(255, 255, 255, .9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border)
        }

        .appbar__wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .brand img {
            height: 26px
        }

        .brand span {
            font-weight: 800
        }

        .tabs {
            display: flex;
            align-items: center;
            gap: 20px
        }

        .tab {
            padding: 8px 2px;
            color: var(--ink-700);
            font-weight: 600
        }

        .tab.is-active {
            color: var(--brand-700);
            position: relative
        }

        .tab.is-active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -12px;
            height: 3px;
            border-radius: 4px;
            background: var(--brand)
        }

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

        .avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(145deg, #dfeff0, #cfe6e5);
            border: 1px solid #cfe2e2
        }

        /* ===== Portal Layout ===== */
        .portal {
            display: grid;
            grid-template-columns:1fr;
            gap: 20px;
            padding: 20px 0 60px
        }

        @media (min-width: 980px) {
            .portal {
                grid-template-columns:260px 1fr
            }
        }

        /* Sidebar */
        .side {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 14px
        }

        .side h3 {
            margin: 6px 10px 10px;
            font-size: 16px;
            color: var(--ink-700)
        }

        .snav {
            display: grid;
            gap: 4px
        }

        .sitem {
            display: block;
            padding: 10px 12px;
            border-radius: 10px;
            color: var(--ink-800);
            font-weight: 600
        }

        .sitem:hover {
            background: #f6faf9
        }

        .sitem.is-active {
            background: #eef5f5;
            color: var(--brand-700)
        }

        /* Content */
        .panel {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 14px
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 6px 12px
        }

        h1 {
            font-size: 20px;
            margin: 0
        }

        .btn {
            appearance: none;
            border: 1px solid var(--border);
            background: #fff;
            padding: 10px 12px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: .2s ease box-shadow, .2s ease background
        }

        .btn:hover {
            box-shadow: var(--shadow)
        }

        .btn--brand {
            background: var(--brand);
            color: #fff;
            border-color: transparent
        }

        .btn--brand:hover {
            background: var(--brand-600)
        }

        .members {
            display: grid;
            gap: 12px;
            padding: 0;
            margin: 0;
            list-style: none
        }

        .member {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px 14px
        }

        .member h4 {
            margin: 0 0 2px;
            font-size: 15px
        }

        .sub {
            color: var(--ink-700);
            font-size: 14px
        }

        .input-text {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 14px;
            font-family: inherit;
            color: var(--ink-900);
            background: #fff;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .input-text:focus {
            border-color: var(--brand);
            box-shadow: var(--focus);
            outline: none;
        }

    </style>
@endpush

@section('content')
    <main class="container portal">
        <!-- Sidebar -->
        <aside class="side">
            <h3>Settings</h3>
            <nav class="snav">
                <a class="sitem" href="#">Profile</a>
                <a class="sitem" href="#">Workspace</a>
                <a class="sitem" href="#">Team & Roles</a>
                <a class="sitem" href="#">API Tokens</a>
                <a class="sitem" href="#">Notifications</a>
                <a class="sitem is-active" href="#">Extensions</a>
            </nav>
        </aside>

        <!-- Content -->
        <section class="panel">
            <div class="panel-head">
                <h1>Extensions</h1>
            </div>

            @foreach($installedApps as $companyApp)
                @php
                    $schema = json_decode($companyApp->config_schema ?? '[]', true);
                    $values = $companyApp->pivot->settings ? json_decode($companyApp->pivot->settings, true) : [];
                @endphp

                <div class="member" style="margin-bottom: 20px;">
                    <h3>{{ $companyApp->name }}</h3>
                    <form method="POST" action="{{ route('settings.extensions.update', $companyApp->pivot->id) }}">
                        @csrf
                        @method('PUT')

                        @foreach($schema as $field)
                            <div style="margin-bottom: 10px;">
                                <label>{{ $field['label'] }}</label>
                                @if($field['type'] === 'select')
                                    <select name="{{ $field['name'] }}">
                                        @foreach($field['options'] ?? [] as $option)
                                            <option value="{{ $option }}"
                                                    @if(($values[$field['name']] ?? '') == $option) selected @endif>
                                                {{ $option }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <input type="{{ $field['type'] }}"
                                           name="{{ $field['name'] }}"
                                           value="{{ $values[$field['name']] ?? '' }}"
                                           class="input-text"
                                           @if($field['required']) required @endif>
                                @endif
                            </div>
                        @endforeach

                        <button class="btn btn--brand" type="submit">Save Settings</button>
                    </form>
                </div>
            @endforeach
        </section>
    </main>
@endsection