@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Notification Settings</h1>
        <p class="text-gray-600 mt-2">Manage how you receive notifications and communications</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- Sidebar Navigation -->
        <div class="lg:col-span-1">
            <div class="sticky top-4 space-y-2">
                <a href="#channels" class="block px-4 py-2 rounded-lg bg-blue-100 text-blue-900 font-semibold">
                    Channels
                </a>
                <a href="#preferences" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors">
                    Preferences
                </a>
                <a href="#quiet-hours" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors">
                    Quiet Hours
                </a>
                <a href="#frequency" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors">
                    Frequency
                </a>
            </div>
        </div>

        <!-- Main Content -->
        <div class="lg:col-span-3">
            <form action="{{ route('notification-settings.update') }}" method="POST" class="space-y-8">
                @csrf
                @method('PATCH')

                <!-- Notification Channels -->
                <section id="channels" class="bg-white rounded-lg shadow-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">Notification Channels</h2>
                    
                    <div class="space-y-4">
                        <!-- Email -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">Email Notifications</h3>
                                <p class="text-sm text-gray-600">Receive updates via email</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="email_notifications" value="1" {{ $settings->email_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>

                        <!-- SMS -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">SMS Notifications</h3>
                                <p class="text-sm text-gray-600">Receive text message updates</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="sms_notifications" value="1" {{ $settings->sms_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>

                        <!-- Push Notifications -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">Push Notifications</h3>
                                <p class="text-sm text-gray-600">In-app and browser notifications</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="push_notifications" value="1" {{ $settings->push_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>
                    </div>

                    <!-- Phone Number for SMS -->
                    <div class="mt-6 pt-6 border-t border-gray-200">
                        <label class="block text-sm font-semibold text-gray-900 mb-2">Phone Number for SMS</label>
                        <input type="tel" name="phone_number" value="{{ $settings->phone_number }}" placeholder="+33 6 12 34 56 78" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>

                    <!-- Test Buttons -->
                    <div class="mt-6 grid grid-cols-3 gap-3">
                        <button type="button" onclick="testEmail()" class="bg-blue-100 hover:bg-blue-200 text-blue-900 py-2 rounded-lg font-semibold text-sm transition-colors">
                            Test Email
                        </button>
                        <button type="button" onclick="testSMS()" class="bg-blue-100 hover:bg-blue-200 text-blue-900 py-2 rounded-lg font-semibold text-sm transition-colors">
                            Test SMS
                        </button>
                        <button type="button" onclick="testPush()" class="bg-blue-100 hover:bg-blue-200 text-blue-900 py-2 rounded-lg font-semibold text-sm transition-colors">
                            Test Push
                        </button>
                    </div>
                </section>

                <!-- Notification Preferences -->
                <section id="preferences" class="bg-white rounded-lg shadow-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">Notification Preferences</h2>
                    
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">Booking Notifications</h3>
                                <p class="text-sm text-gray-600">New bookings and confirmations</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="booking_notifications" value="1" {{ $settings->booking_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>

                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">Payment Notifications</h3>
                                <p class="text-sm text-gray-600">Payment received and invoices</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="payment_notifications" value="1" {{ $settings->payment_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>

                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">Review Notifications</h3>
                                <p class="text-sm text-gray-600">New reviews and ratings</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="review_notifications" value="1" {{ $settings->review_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>

                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">Message Notifications</h3>
                                <p class="text-sm text-gray-600">New messages from clients</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="message_notifications" value="1" {{ $settings->message_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>

                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">Auction Notifications</h3>
                                <p class="text-sm text-gray-600">Auction bids and updates</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="auction_notifications" value="1" {{ $settings->auction_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>

                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                                <h3 class="font-semibold text-gray-900">Promotion Notifications</h3>
                                <p class="text-sm text-gray-600">Special offers and promotions</p>
                            </div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="promotion_notifications" value="1" {{ $settings->promotion_notifications ? 'checked' : '' }} class="w-6 h-6 text-blue-600 rounded">
                            </label>
                        </div>
                    </div>
                </section>

                <!-- Quiet Hours -->
                <section id="quiet-hours" class="bg-white rounded-lg shadow-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">Quiet Hours</h2>
                    <p class="text-gray-600 mb-6">Set times when you don't want to receive notifications (non-emergency only)</p>

                    <div class="flex items-center mb-6">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" name="quiet_hours_enabled" value="1" {{ $settings->quiet_hours_enabled ? 'checked' : '' }} id="quietHoursToggle" class="w-6 h-6 text-blue-600 rounded">
                            <span class="ml-3 text-gray-900 font-semibold">Enable Quiet Hours</span>
                        </label>
                    </div>

                    <div id="quietHoursSettings" class="{{ !$settings->quiet_hours_enabled ? 'opacity-50 pointer-events-none' : '' }}">
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-semibold text-gray-900 mb-2">Start Time</label>
                                <input type="time" name="quiet_start" value="{{ $settings->quiet_start }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-900 mb-2">End Time</label>
                                <input type="time" name="quiet_end" value="{{ $settings->quiet_end }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Notification Frequency -->
                <section id="frequency" class="bg-white rounded-lg shadow-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">Notification Frequency</h2>

                    <div class="space-y-3">
                        <label class="flex items-center p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                            <input type="radio" name="notification_frequency" value="immediate" {{ $settings->notification_frequency === 'immediate' ? 'checked' : '' }} class="w-4 h-4 text-blue-600">
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-900">Immediate</h3>
                                <p class="text-sm text-gray-600">Get notified right away</p>
                            </div>
                        </label>

                        <label class="flex items-center p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                            <input type="radio" name="notification_frequency" value="hourly" {{ $settings->notification_frequency === 'hourly' ? 'checked' : '' }} class="w-4 h-4 text-blue-600">
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-900">Hourly Digest</h3>
                                <p class="text-sm text-gray-600">Get a summary every hour</p>
                            </div>
                        </label>

                        <label class="flex items-center p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                            <input type="radio" name="notification_frequency" value="daily" {{ $settings->notification_frequency === 'daily' ? 'checked' : '' }} class="w-4 h-4 text-blue-600">
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-900">Daily Digest</h3>
                                <p class="text-sm text-gray-600">Get a summary once a day</p>
                            </div>
                        </label>

                        <label class="flex items-center p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                            <input type="radio" name="notification_frequency" value="weekly" {{ $settings->notification_frequency === 'weekly' ? 'checked' : '' }} class="w-4 h-4 text-blue-600">
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-900">Weekly Digest</h3>
                                <p class="text-sm text-gray-600">Get a summary once a week</p>
                            </div>
                        </label>
                    </div>
                </section>

                <!-- Save Button -->
                <div class="flex gap-3">
                    <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition-colors">
                        Save Settings
                    </button>
                    <a href="{{ route('dashboard') }}" class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-800 py-3 rounded-lg font-semibold text-center transition-colors">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const quietHoursToggle = document.getElementById('quietHoursToggle');
    const quietHoursSettings = document.getElementById('quietHoursSettings');

    quietHoursToggle.addEventListener('change', function() {
        if (this.checked) {
            quietHoursSettings.classList.remove('opacity-50', 'pointer-events-none');
        } else {
            quietHoursSettings.classList.add('opacity-50', 'pointer-events-none');
        }
    });

    async function testEmail() {
        const button = event.target;
        button.disabled = true;
        button.textContent = 'Sending...';

        try {
            const response = await fetch('{{ route('notification-settings.test-email') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    'Content-Type': 'application/json',
                }
            });

            const data = await response.json();
            alert(data.message);
        } catch (error) {
            alert('Error sending test email');
        } finally {
            button.disabled = false;
            button.textContent = 'Test Email';
        }
    }

    async function testSMS() {
        const phoneNumber = document.querySelector('input[name="phone_number"]').value;
        if (!phoneNumber) {
            alert('Please enter a phone number first');
            return;
        }

        const button = event.target;
        button.disabled = true;
        button.textContent = 'Sending...';

        try {
            const response = await fetch('{{ route('notification-settings.test-sms') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ phone: phoneNumber })
            });

            const data = await response.json();
            alert(data.message);
        } catch (error) {
            alert('Error sending test SMS');
        } finally {
            button.disabled = false;
            button.textContent = 'Test SMS';
        }
    }

    async function testPush() {
        alert('Push notifications require a registered device. Configure in your mobile app settings.');
    }
</script>
@endsection