@php
    use Illuminate\Support\Carbon;
    $wz = $page->weeztixConfig;
    $existing = $wz !== null
        ? [
            'company_guid' => $wz->company_guid,
            'company_name' => $wz->company_name,
            'coupon_guid' => $wz->coupon_guid,
            'coupon_name' => $wz->coupon_name,
            'code_prefix' => $wz->code_prefix,
            'usage_count' => $wz->usage_count,
        ]
        : null;
@endphp

@extends('layouts.admin')

@section('title', __('Weeztix') . ' — ' . $page->title)

@section('mobile_title', __('Weeztix'))

@section('content')
    <div
        class="mx-auto max-w-3xl"
        x-data="weeztixSetup(@js([
            'pageId' => $page->id,
            'companiesUrl' => route('admin.weeztix.companies'),
            'couponsUrl' => route('admin.weeztix.coupons'),
            'csrf' => csrf_token(),
            'isConnected' => $wz?->is_connected ?? false,
            'tokenExpiresAt' => $wz?->token_expires_at instanceof Carbon ? $wz->token_expires_at->timezone(config('app.timezone'))->format('Y-m-d H:i') : null,
            'callbackUrl' => route('admin.weeztix.callback', absolute: true),
            'existing' => $existing,
            'strings' => [
                'genericError' => __('Er ging iets mis. Probeer het opnieuw.'),
                'selectCompany' => __('Selecteer een bedrijf.'),
                'loadCouponsError' => __('Kon kortingsbonnen niet laden.'),
            ],
        ]))"
    >
        <div class="mb-8">
            <a href="{{ route('admin.pages.edit', $page) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">← {{ __('Terug naar pagina') }}</a>
            <h1 class="mt-4 text-2xl font-semibold text-slate-900">{{ __('Weeztix') }}</h1>
            <p class="mt-2 text-sm text-slate-600">{{ __('Pagina:') }} <span class="font-medium text-slate-800">{{ $page->title }}</span></p>
        </div>

        @include('admin.pages._save_flash')

        @if ($errors->any())
            <div class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900" role="alert">
                <p class="font-medium">{{ __('Controleer het volgende:') }}</p>
                <ul class="mt-2 list-disc space-y-1 pl-5">
                    @foreach ($errors->all() as $message)
                        <li>{{ $message }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if ($wz !== null && $wz->is_connected)
            <div class="mb-8 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">
                <p class="font-medium">{{ __('Verbonden met Weeztix') }}</p>
                @if ($wz->token_expires_at)
                    <p class="mt-1 text-emerald-800">
                        {{ __('Toegangstoken verloopt om:') }}
                        <span class="font-mono text-xs">{{ $wz->token_expires_at->timezone(config('app.timezone'))->format('Y-m-d H:i') }}</span>
                    </p>
                @endif
            </div>
        @elseif ($wz !== null && ! $wz->is_connected)
            <div class="mb-8 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
                <p class="font-medium">{{ __('Niet verbonden') }}</p>
                <p class="mt-1 text-amber-900">{{ __('Je moet opnieuw verbinden om kortingscodes aan te maken. Gebruik de knop “Verbind met Weeztix”.') }}</p>
            </div>
        @endif

        @if ($wz !== null)
            <form action="{{ route('admin.pages.weeztix.destroy', $page) }}" method="post" class="mb-8"
                onsubmit="return confirm(@js(__('Weeztix-integratie voor deze pagina verwijderen? Opgeslagen tokens worden gewist.')));">
                @csrf
                @method('DELETE')
                <button type="submit" class="text-sm font-semibold text-red-700 underline hover:text-red-800">
                    {{ __('Weeztix loskoppelen') }}
                </button>
            </form>
        @endif

        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
            <div x-show="errorMessage !== ''" x-cloak class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" x-text="errorMessage"></div>

            <section class="space-y-4 border-b border-slate-100 pb-8">
                <h2 class="text-lg font-semibold text-slate-900">{{ __('Stap 1: OAuth-gegevens') }}</h2>
                <p class="text-sm leading-relaxed text-slate-600">
                    {{ __('Maak eerst een OAuth-client in het Weeztix-dashboard en stel de redirect-URI exact in op:') }}
                </p>
                <p class="rounded-lg bg-slate-50 px-3 py-2 font-mono text-xs text-slate-800 break-all" x-text="callbackUrl"></p>
                <p class="text-sm text-slate-600">
                    {{ __('Maak daarna een korting (coupon) in Weeztix; die kies je hierna in stap 2.') }}
                </p>

                <form method="post" action="{{ route('admin.pages.weeztix.update', $page) }}" class="space-y-4">
                    @csrf
                    @method('PUT')
                    <div>
                        <label for="weeztix_client_id" class="block text-sm font-medium text-slate-700">{{ __('Client ID') }}</label>
                        <input
                            id="weeztix_client_id"
                            name="client_id"
                            type="text"
                            autocomplete="off"
                            value="{{ old('client_id') }}"
                            class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                            placeholder="{{ $wz !== null ? __('Laat leeg om ongewijzigd te laten') : '' }}"
                            @if ($wz === null) required @endif
                        >
                    </div>
                    <div>
                        <label for="weeztix_client_secret" class="block text-sm font-medium text-slate-700">{{ __('Client secret') }}</label>
                        <input
                            id="weeztix_client_secret"
                            name="client_secret"
                            type="password"
                            autocomplete="off"
                            value=""
                            class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                            placeholder="{{ $wz !== null ? __('Laat leeg om ongewijzigd te laten') : '' }}"
                            @if ($wz === null) required @endif
                        >
                    </div>
                    <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-700">
                        {{ __('Gegevens opslaan') }}
                    </button>
                </form>

                @if ($wz !== null)
                    <div class="pt-2">
                        <a
                            href="{{ route('admin.pages.weeztix.oauth.redirect', $page) }}"
                            class="inline-flex rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500"
                        >
                            {{ __('Verbind met Weeztix') }}
                        </a>
                    </div>
                @endif
            </section>

            @if ($wz !== null)
                <section class="space-y-4 pt-8">
                    <h2 class="text-lg font-semibold text-slate-900">{{ __('Stap 2: Bedrijf en kortingsbon') }}</h2>
                    <p class="text-sm text-slate-600">{{ __('Na een geslaagde verbinding kun je een bedrijf en bestaande coupon uit Weeztix kiezen.') }}</p>

                    <form method="post" action="{{ route('admin.pages.weeztix.update', $page) }}" class="space-y-4">
                        @csrf
                        @method('PUT')

                        <div>
                            <label for="weeztix_company" class="block text-sm font-medium text-slate-700">{{ __('Bedrijf') }}</label>
                            <select
                                id="weeztix_company"
                                name="company_guid"
                                x-model="companyGuid"
                                @change="onCompanyChange()"
                                class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                            >
                                <option value="">{{ __('Selecteer een bedrijf…') }}</option>
                                <template x-for="c in companies" :key="c.guid">
                                    <option :value="c.guid" x-text="(c.name || c.guid)"></option>
                                </template>
                            </select>
                            <input type="hidden" name="company_name" :value="companyName">
                        </div>

                        <div>
                            <label for="weeztix_coupon" class="block text-sm font-medium text-slate-700">{{ __('Coupon (kortingssjabloon)') }}</label>
                            <select
                                id="weeztix_coupon"
                                name="coupon_guid"
                                x-model="couponGuid"
                                @change="syncCouponName()"
                                class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                            >
                                <option value="">{{ __('Selecteer een coupon…') }}</option>
                                <template x-for="c in coupons" :key="c.guid">
                                    <option :value="c.guid" x-text="c.name"></option>
                                </template>
                            </select>
                            <input type="hidden" name="coupon_name" :value="couponName">
                        </div>

                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label for="weeztix_code_prefix" class="block text-sm font-medium text-slate-700">{{ __('Codevoorvoegsel') }}</label>
                                <input
                                    id="weeztix_code_prefix"
                                    name="code_prefix"
                                    type="text"
                                    maxlength="32"
                                    x-model="codePrefix"
                                    value="{{ old('code_prefix', $wz->code_prefix ?? 'PREREG') }}"
                                    class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                >
                            </div>
                            <div>
                                <label for="weeztix_usage_count" class="block text-sm font-medium text-slate-700">{{ __('Gebruik per code') }}</label>
                                <input
                                    id="weeztix_usage_count"
                                    name="usage_count"
                                    type="number"
                                    min="1"
                                    max="99999"
                                    x-model.number="usageCount"
                                    value="{{ old('usage_count', $wz->usage_count ?? 1) }}"
                                    class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                >
                            </div>
                        </div>

                        <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                            {{ __('Configuratie opslaan') }}
                        </button>
                    </form>
                </section>
            @endif
        </div>
    </div>
@endsection