<x-app-layout title="Set up Meet">
    <div class="mx-auto max-w-xl">
        <h1 class="text-2xl font-semibold text-slate-900">Welcome to Ladill Meet</h1>
        <p class="mt-2 text-sm text-slate-600">Set up your organization to start hosting video meetings.</p>

        <form method="POST" action="{{ route('meet.onboarding.store') }}" enctype="multipart/form-data" class="mt-8 space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf

            <div>
                <label class="block text-sm font-medium text-slate-700">Organization name</label>
                <input type="text" name="organization_name" value="{{ old('organization_name', $user->name."'s Organization") }}" 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" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($orgTypes as $value => $label)
                        <option value="{{ $value }}" @selected(old('org_type', 'business') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Primary branch</label>
                <input type="text" name="branch_name" value="{{ old('branch_name', 'Head Office') }}" 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">Branch address</label>
                <input type="text" name="branch_address" value="{{ old('branch_address') }}"
                       class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Branch phone</label>
                <input type="tel" name="branch_phone" value="{{ old('branch_phone') }}"
                       class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Logo (optional)</label>
                <input type="file" name="logo" accept="image/png,image/jpeg,image/webp,image/svg+xml"
                       class="mt-2 block w-full text-sm text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-sky-50 file:px-3 file:py-2 file:text-sm file:font-medium file:text-sky-700">
            </div>

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

            <button type="submit" class="btn-primary btn-primary-lg w-full">
                Complete setup
            </button>
        </form>
    </div>
</x-app-layout>
