@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
            <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                <div>
                    <p class="text-sm font-medium uppercase tracking-wide text-sky-600">{{ __('app.settings_badge') }}</p>
                    <h1 class="mt-2 text-3xl font-semibold text-slate-900">{{ __('app.sipcaller_settings_title') }}</h1>
                    <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-600">{{ __('app.sipcaller_settings_description') }}</p>
                </div>
                <div class="rounded-xl bg-slate-50 p-4 text-sm text-slate-600 ring-1 ring-slate-200">
                    <p><span class="font-semibold text-slate-900">{{ __('app.portal_domain') }}:</span> {{ $portal?->portal_domain ?? $context['portal_domain'] ?? __('app.not_available') }}</p>
                    <p><span class="font-semibold text-slate-900">{{ __('app.installation_status') }}:</span> {{ $portal ? __('app.portal_detected') : __('app.portal_missing') }}</p>
                    <p><span class="font-semibold text-slate-900">{{ __('app.active_account') }}:</span> {{ $account?->account_id ?? __('app.not_available') }}</p>
                </div>
            </div>
        </div>

        @if ($errors->any())
            <div class="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                <ul class="space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if ($connectionError)
            <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700">
                {{ $connectionError }}
            </div>
        @endif

        <div class="grid gap-6 lg:grid-cols-[2fr_1fr]">
            <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
                <h2 class="text-lg font-semibold text-slate-900">{{ __('app.connection_form_title') }}</h2>
                <form method="POST" action="{{ route('settings.sipcaller.update') }}" class="mt-6 space-y-5">
                    @csrf
                    <input type="hidden" name="member_id" value="{{ old('member_id', $portal?->member_id ?? $context['member_id'] ?? '') }}">
                    <input type="hidden" name="portal_domain" value="{{ old('portal_domain', $portal?->portal_domain ?? $context['portal_domain'] ?? '') }}">

                    <div>
                        <label for="account_id" class="block text-sm font-medium text-slate-900">{{ __('app.account_id') }}</label>
                        <input id="account_id" name="account_id" type="text" value="{{ old('account_id', $account?->account_id) }}" class="mt-2 block w-full rounded-xl border border-slate-300 px-4 py-3 text-sm">
                    </div>

                    <div>
                        <label for="api_key_token" class="block text-sm font-medium text-slate-900">{{ __('app.api_key_token') }}</label>
                        <input id="api_key_token" name="api_key_token" type="password" value="{{ old('api_key_token', $account?->api_key_token) }}" class="mt-2 block w-full rounded-xl border border-slate-300 px-4 py-3 text-sm">
                    </div>

                    <div>
                        <label for="default_campaign_id" class="block text-sm font-medium text-slate-900">{{ __('app.default_campaign_id') }}</label>
                        <input id="default_campaign_id" name="default_campaign_id" type="text" value="{{ old('default_campaign_id', $account?->default_campaign_id) }}" class="mt-2 block w-full rounded-xl border border-slate-300 px-4 py-3 text-sm">
                    </div>

                    <div>
                        <label for="webhook_secret" class="block text-sm font-medium text-slate-900">{{ __('app.webhook_secret') }}</label>
                        <input id="webhook_secret" name="webhook_secret" type="text" value="{{ old('webhook_secret', $account?->webhook_secret) }}" class="mt-2 block w-full rounded-xl border border-slate-300 px-4 py-3 text-sm">
                    </div>

                    <div class="flex flex-wrap gap-3">
                        <button type="submit" class="rounded-xl bg-sky-600 px-5 py-3 text-sm font-medium text-white">{{ __('app.save_settings') }}</button>
                        <a href="{{ route('settings.sipcaller.edit', ['portal_domain' => $portal?->portal_domain ?? $context['portal_domain'] ?? '', 'member_id' => $portal?->member_id ?? $context['member_id'] ?? '', 'load_campaigns' => 1]) }}" class="rounded-xl bg-slate-900 px-5 py-3 text-sm font-medium text-white">{{ __('app.load_campaigns') }}</a>
                    </div>
                </form>
            </section>

            <section class="space-y-6">
                <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
                    <h2 class="text-lg font-semibold text-slate-900">{{ __('app.connection_status_title') }}</h2>
                    <ul class="mt-4 space-y-2 text-sm leading-6 text-slate-600">
                        <li>{{ $portal ? __('app.portal_detected') : __('app.portal_missing') }}</li>
                        <li>{{ $account ? __('app.active_account_detected') : __('app.active_account_missing') }}</li>
                        <li>{{ $campaignOptions !== [] ? __('app.campaigns_loaded', ['count' => count($campaignOptions)]) : __('app.campaigns_not_loaded') }}</li>
                    </ul>
                </div>

                <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
                    <h2 class="text-lg font-semibold text-slate-900">{{ __('app.available_campaigns_title') }}</h2>
                    @if ($campaignOptions === [])
                        <p class="mt-4 text-sm leading-6 text-slate-600">{{ __('app.no_campaigns_available') }}</p>
                    @else
                        <ul class="mt-4 space-y-2 text-sm text-slate-600">
                            @foreach ($campaignOptions as $campaign)
                                <li class="rounded-xl bg-slate-50 px-3 py-2 ring-1 ring-slate-200">
                                    <span class="font-medium text-slate-900">{{ $campaign['name'] }}</span>
                                    <span class="block text-xs text-slate-500">ID: {{ $campaign['id'] }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </section>
        </div>
    </div>
@endsection