@php
    $receiverTypes  = config('app.calendar_receiver_types');
    $targetTypes    = config('app.calendar_target_types');
    $allActions     = ['create', 'reschedule', 'cancel'];
    $savedActions   = old('allowed_actions', $calendar->allowed_actions ?? null);
    // null means all allowed — treat as all checked
    $checkedActions = $savedActions ?? $allActions;
@endphp

@if ($errors->any())
    <div class="mb-4 p-4 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded-md text-sm">
        <ul class="list-disc list-inside space-y-1">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

{{-- Name & Status --}}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 mb-6">
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Calendar Name</label>
        <input type="text" name="name"
               value="{{ old('name', $calendar->name ?? '') }}"
               class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm"
               required>
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
        <select name="is_active"
                class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm">
            <option value="1" {{ old('is_active', $calendar->is_active ?? true) ? 'selected' : '' }}>Active</option>
            <option value="0" {{ !old('is_active', $calendar->is_active ?? true) ? 'selected' : '' }}>Inactive</option>
        </select>
    </div>
</div>

{{-- Allowed Actions --}}
<div class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
    <p class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 tracking-wide mb-1">
        Allowed Actions
    </p>
    <p class="text-xs text-gray-400 dark:text-gray-500 mb-3">
        Controls which actions this calendar will forward to the target. Uncheck to silently skip that action type.
    </p>
    <div class="flex gap-6">
        @foreach($allActions as $action)
            <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                <input type="checkbox"
                       name="allowed_actions[]"
                       value="{{ $action }}"
                       {{ in_array($action, $checkedActions) ? 'checked' : '' }}
                       class="rounded border-gray-300 dark:border-gray-600 text-indigo-600">
                {{ ucfirst($action) }}
            </label>
        @endforeach
    </div>
</div>

{{-- Timezone --}}
<div class="mb-6">
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        Clinic Timezone
        <span class="font-normal text-gray-400 dark:text-gray-500">— used to correctly convert appointment times to UTC</span>
    </label>
    <input type="text" name="timezone"
           value="{{ old('timezone', $calendar->timezone ?? 'America/Edmonton') }}"
           placeholder="America/Edmonton"
           class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm">
    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Examples: America/Edmonton, America/Regina, America/Vancouver, America/Toronto</p>
</div>

{{-- Treatment Name (Cal.com → ClinicSyncPro only) --}}
<div class="mb-6">
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        Treatment Name
        <span class="font-normal text-gray-400 dark:text-gray-500">— required for Cal.com → ClinicSyncPro calendars</span>
    </label>
    <input type="text" name="treatment_name"
           value="{{ old('treatment_name', $calendar->treatment_name ?? '') }}"
           placeholder="e.g. 60 minute therapeutic massage (Tracy Schneider-Steeves) (75min)"
           class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm">
    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
        Must match Jane exactly — case-sensitive. Format: <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">Treatment Name (Practitioner Name) (Duration)</code>
    </p>
</div>

{{-- Receiver --}}
<div class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
    <p class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 tracking-wide mb-3">
        Receiver
        <span class="normal-case font-normal text-gray-400 dark:text-gray-500 ml-1">— who is sending to us</span>
    </p>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type</label>
            <select name="receiver_type"
                    class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm">
                @foreach($receiverTypes as $type)
                    <option value="{{ $type }}" {{ old('receiver_type', $calendar->receiver_type ?? '') === $type ? 'selected' : '' }}>
                        {{ ucfirst($type) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Username / Email / User ID
                <span class="font-normal text-gray-400 dark:text-gray-500">— (If receiving from ClinicSyncPro we need the user ID)</span>
            </label>
            <input type="text" name="receiver_username"
                   value="{{ old('receiver_username', $calendar->receiver_username ?? '') }}"
                   class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm">
        </div>
        <div class="sm:col-span-2">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Webhook URL
                <span class="font-normal text-gray-400 dark:text-gray-500">(give this to the sender)</span>
            </label>
            @if(isset($calendar) && $calendar->exists)
                <div class="flex items-center gap-2">
                    <code class="flex-1 text-xs bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 px-3 py-2 rounded-md break-all">
                        {{ $calendar->webhookUrl() }}
                    </code>
                    <button type="button"
                            onclick="navigator.clipboard.writeText('{{ $calendar->webhookUrl() }}')"
                            class="shrink-0 px-3 py-2 text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition">
                        Copy
                    </button>
                </div>
            @else
                <p class="text-xs text-gray-400 dark:text-gray-500 italic">Generated after saving.</p>
            @endif
        </div>
    </div>
</div>

{{-- Target --}}
<div class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
    <p class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 tracking-wide mb-3">
        Target
        <span class="normal-case font-normal text-gray-400 dark:text-gray-500 ml-1">— where we forward to</span>
    </p>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type</label>
            <select name="target_type"
                    class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm">
                @foreach($targetTypes as $type)
                    <option value="{{ $type }}" {{ old('target_type', $calendar->target_type ?? '') === $type ? 'selected' : '' }}>
                        {{ ucfirst($type) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
            <input type="text" name="target_username"
                   value="{{ old('target_username', $calendar->target_username ?? '') }}"
                   class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Base URL</label>
            <input type="url" name="target_url"
                   value="{{ old('target_url', $calendar->target_url ?? '') }}"
                   placeholder="https://..."
                   class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm">
        </div>
        <div class="sm:col-span-2">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label>
            <input type="password" name="target_api_key"
                   value="{{ old('target_api_key', $calendar->target_api_key ?? '') }}"
                   class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm"
                   autocomplete="off">
        </div>
    </div>
</div>