@extends('layouts.app')

@section('title', 'Profile - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">Profile &amp; Preferences</h1>
@endsection

@section('content')
    @if (session('success'))
        <div class="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-800" x-data x-init="setTimeout(() => $el.remove(), 3000)">
            {{ session('success') }}
        </div>
    @endif

    <div class="space-y-8">
        {{-- Profile --}}
        <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
            <h2 class="mb-4 text-base font-semibold text-gray-900">Profile</h2>
            <form method="post" action="{{ route('settings.profile.update') }}" class="max-w-md space-y-4">
                @csrf
                @method('PUT')
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                    <input id="name" type="text" name="name" value="{{ old('name', $user->name) }}" required class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                    <input id="email" type="email" name="email" value="{{ old('email', $user->email) }}" required class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    @error('email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="timezone" class="block text-sm font-medium text-gray-700">Timezone</label>
                    <select id="timezone" name="timezone" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($timezones as $value => $label)
                            <option value="{{ $value }}" {{ old('timezone', $user->timezone) === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('timezone')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Save profile</button>
            </form>
        </div>

        {{-- Notification preferences --}}
        @php
            $prefs = $user->notification_preferences ?? [];
            $emailEnabled = $prefs['email_enabled'] ?? true;
            $slackDmEnabled = $prefs['slack_dm_enabled'] ?? false;
            $slackChannelEnabled = $prefs['slack_channel_enabled'] ?? false;
            $teamNotificationsEnabled = $prefs['team_notifications_enabled'] ?? false;
            $pushEnabled = $prefs['push_enabled'] ?? false;
            $quietHoursEnabled = $prefs['quiet_hours_enabled'] ?? false;
            $startTime = $prefs['start_time'] ?? '22:00';
            $endTime = $prefs['end_time'] ?? '08:00';
            $hasSupervisees = $user->supervisees()->exists();
        @endphp
        <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
            <h2 class="mb-4 text-base font-semibold text-gray-900">Notification preferences</h2>
            <form method="post" action="{{ route('settings.profile.preferences.update') }}" class="max-w-md space-y-4">
                @csrf
                @method('PUT')
                <div class="space-y-3">
                    <label class="flex items-center gap-2">
                        <input type="hidden" name="email_enabled" value="0" />
                        <input type="checkbox" name="email_enabled" value="1" {{ old('email_enabled', $emailEnabled) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                        <span class="text-sm text-gray-700">Email notifications</span>
                    </label>
                    <label class="flex items-center gap-2">
                        <input type="hidden" name="slack_dm_enabled" value="0" />
                        <input type="checkbox" name="slack_dm_enabled" value="1" {{ old('slack_dm_enabled', $slackDmEnabled) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                        <span class="text-sm text-gray-700">Slack DM</span>
                    </label>
                    <label class="flex items-center gap-2">
                        <input type="hidden" name="slack_channel_enabled" value="0" />
                        <input type="checkbox" name="slack_channel_enabled" value="1" {{ old('slack_channel_enabled', $slackChannelEnabled) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                        <span class="text-sm text-gray-700">Slack channel</span>
                    </label>
                    @if ($hasSupervisees)
                        <label class="flex items-center gap-2">
                            <input type="hidden" name="team_notifications_enabled" value="0" />
                            <input type="checkbox" name="team_notifications_enabled" value="1" {{ old('team_notifications_enabled', $teamNotificationsEnabled) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                            <span class="text-sm text-gray-700">Team Notifications (deadline &amp; overdue for direct reports)</span>
                        </label>
                    @endif
                    <label class="flex items-center gap-2">
                        <input type="hidden" name="push_enabled" value="0" />
                        <input type="checkbox" name="push_enabled" value="1" {{ old('push_enabled', $pushEnabled) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                        <span class="text-sm text-gray-700">Push notifications</span>
                    </label>
                </div>
                <div class="border-t border-gray-200 pt-4">
                    <h3 class="mb-2 text-sm font-medium text-gray-900">Quiet hours</h3>
                    <label class="flex items-center gap-2 mb-3">
                        <input type="hidden" name="quiet_hours_enabled" value="0" />
                        <input type="checkbox" name="quiet_hours_enabled" value="1" {{ old('quiet_hours_enabled', $quietHoursEnabled) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                        <span class="text-sm text-gray-700">Enable quiet hours</span>
                    </label>
                    <div class="flex gap-4">
                        <div>
                            <label for="start_time" class="block text-xs text-gray-500">Start</label>
                            <input id="start_time" type="time" name="start_time" value="{{ old('start_time', $startTime) }}" class="mt-1 block rounded-md border border-gray-300 px-3 py-2 text-sm" />
                        </div>
                        <div>
                            <label for="end_time" class="block text-xs text-gray-500">End</label>
                            <input id="end_time" type="time" name="end_time" value="{{ old('end_time', $endTime) }}" class="mt-1 block rounded-md border border-gray-300 px-3 py-2 text-sm" />
                        </div>
                    </div>
                </div>
                <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Save preferences</button>
            </form>
        </div>
    </div>
@endsection