<x-app-layout title="Settings">
    <x-settings.page title="Organization settings">
        <form method="POST" action="{{ route('meet.settings.update') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf @method('PUT')

            <x-settings.card title="Organization" description="Name, type, timezone, and logo for {{ $organization->name }}.">
                <div class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Organization name</label>
                        <input type="text" name="name" value="{{ old('name', $organization->name) }}" @disabled(! $canManage) required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700">Organization type</label>
                        <select name="org_type" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                            @foreach ($orgTypes as $value => $label)
                                <option value="{{ $value }}" @selected(old('org_type', data_get($organization->settings, 'org_type', 'business')) === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700">Timezone</label>
                        <select name="timezone" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                            @foreach (timezone_identifiers_list() as $tz)
                                <option value="{{ $tz }}" @selected(old('timezone', $organization->timezone) === $tz)>{{ $tz }}</option>
                            @endforeach
                        </select>
                    </div>

                    @if ($canManage)
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Logo</label>
                            <input type="file" name="logo" accept="image/png,image/jpeg,image/webp,image/svg+xml" class="mt-2 block w-full text-sm">
                            @if (\App\Support\OrganizationBranding::hasCustomLogo($organization))
                                <label class="mt-2 flex items-center gap-2 text-sm"><input type="checkbox" name="remove_logo" value="1"> Remove current logo</label>
                            @endif
                        </div>

                        <button type="submit" class="btn-primary">Save settings</button>
                    @endif
                </div>
            </x-settings.card>
        </form>

        @if ($isAdmin ?? false)
            <x-settings.card title="Advanced" description="Security, calendar sync, and webhook integrations.">
                <ul class="space-y-3 text-sm">
                    <li class="flex flex-wrap items-start justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                        <div>
                            <p class="font-semibold text-slate-900">Security policy</p>
                            <p class="mt-0.5 text-slate-600">Meeting access rules, recording defaults, and session timeouts.</p>
                        </div>
                        <a href="{{ route('meet.settings.security') }}" class="shrink-0 font-semibold text-indigo-600 hover:text-indigo-700">Configure</a>
                    </li>
                    <li class="flex flex-wrap items-start justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                        <div>
                            <p class="font-semibold text-slate-900">Calendar connections</p>
                            <p class="mt-0.5 text-slate-600">Sync scheduled meetings to Ladill Mail, Google Calendar, or Microsoft 365.</p>
                        </div>
                        <a href="{{ route('meet.settings.calendar') }}" class="shrink-0 font-semibold text-indigo-600 hover:text-indigo-700">Manage</a>
                    </li>
                    <li class="flex flex-wrap items-start justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                        <div>
                            <p class="font-semibold text-slate-900">Webhooks</p>
                            <p class="mt-0.5 text-slate-600">Notify sibling Ladill apps when meetings are created or updated.</p>
                        </div>
                        <a href="{{ route('meet.settings.webhooks') }}" class="shrink-0 font-semibold text-indigo-600 hover:text-indigo-700">Manage</a>
                    </li>
                </ul>
            </x-settings.card>
        @endif

        <p class="text-sm text-slate-500">{{ $branchCount }} branch(es) configured.</p>
    </x-settings.page>
</x-app-layout>
