@extends('layouts.app')

@section('title', 'Test Notification System')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-vial"></i>
                        Test Notification System
                    </h3>
                </div>
                
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5><i class="fas fa-info-circle"></i> Test Your Multi-Channel Notifications</h5>
                        <p class="mb-0">Use this page to test email, SMS, and in-app notifications. Make sure to configure your notification settings first.</p>
                    </div>

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show">
                            <i class="fas fa-check-circle"></i>
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert">
                                <span>&times;</span>
                            </button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert">
                                <span>&times;</span>
                            </button>
                        </div>
                    @endif

                    <div class="row">
                        <!-- Test Email -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-envelope"></i>
                                        Email Notification Test
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p>Test email notifications to your registered email address.</p>
                                    <form action="{{ route('notifications.test') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="channel" value="email">
                                        <div class="mb-3">
                                            <label class="form-label">Your Email:</label>
                                            <input type="email" class="form-control" value="{{ $testUser->email ?? '' }}" readonly>
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-paper-plane"></i>
                                            Send Test Email
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Test SMS -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-mobile-alt"></i>
                                        SMS Notification Test
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p>Test SMS notifications to your mobile phone.</p>
                                    <form action="{{ route('notifications.test') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="channel" value="sms">
                                        <div class="mb-3">
                                            <label for="test_phone" class="form-label">Phone Number:</label>
                                            <input type="tel" class="form-control" id="test_phone" name="test_phone" 
                                                   placeholder="+1234567890" value="{{ $testUser->phone ?? '' }}">
                                            <small class="form-text text-muted">Include country code (e.g., +1 for US)</small>
                                        </div>
                                        <button type="submit" class="btn btn-success">
                                            <i class="fas fa-sms"></i>
                                            Send Test SMS
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Test In-App -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-bell"></i>
                                        In-App Notification Test
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p>Test in-app notifications that appear in your notification center.</p>
                                    <form action="{{ route('notifications.test') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="channel" value="database">
                                        <div class="mb-3">
                                            <p class="mb-0">
                                                <strong>User:</strong> {{ $testUser->name ?? 'Not logged in' }}<br>
                                                <strong>Target:</strong> In-app notification center
                                            </p>
                                        </div>
                                        <button type="submit" class="btn btn-info">
                                            <i class="fas fa-plus-circle"></i>
                                            Create Test Notification
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Test All Channels -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100">
                                <div class="card-header bg-warning text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-broadcast-tower"></i>
                                        Multi-Channel Test
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p>Test all available notification channels simultaneously.</p>
                                    <form action="{{ route('notifications.test') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="channel" value="all">
                                        <div class="mb-3">
                                            <label for="test_phone_all" class="form-label">Phone Number (for SMS):</label>
                                            <input type="tel" class="form-control" id="test_phone_all" name="test_phone" 
                                                   placeholder="+1234567890" value="{{ $testUser->phone ?? '' }}">
                                        </div>
                                        <button type="submit" class="btn btn-warning">
                                            <i class="fas fa-rocket"></i>
                                            Send to All Channels
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Configuration Status -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>
                                        <i class="fas fa-cog"></i>
                                        Configuration Status
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <h6><i class="fas fa-envelope text-primary"></i> Email</h6>
                                            <ul class="list-unstyled">
                                                <li>
                                                    <i class="fas fa-check text-success"></i>
                                                    SMTP Configured
                                                </li>
                                                <li>
                                                    <i class="fas fa-check text-success"></i>
                                                    Templates Available
                                                </li>
                                                <li>
                                                    <i class="fas fa-check text-success"></i>
                                                    Rate Limiting Active
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-4">
                                            <h6><i class="fas fa-mobile-alt text-success"></i> SMS</h6>
                                            <ul class="list-unstyled">
                                                <li>
                                                    <i class="fas fa-{{ config('services.twilio.enabled') ? 'check text-success' : 'times text-danger' }}"></i>
                                                    Twilio {{ config('services.twilio.enabled') ? 'Enabled' : 'Disabled' }}
                                                </li>
                                                <li>
                                                    <i class="fas fa-{{ config('services.twilio.sid') ? 'check text-success' : 'times text-danger' }}"></i>
                                                    Account {{ config('services.twilio.sid') ? 'Configured' : 'Not Configured' }}
                                                </li>
                                                <li>
                                                    <i class="fas fa-check text-success"></i>
                                                    Rate Limiting Active
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-4">
                                            <h6><i class="fas fa-bell text-info"></i> In-App</h6>
                                            <ul class="list-unstyled">
                                                <li>
                                                    <i class="fas fa-check text-success"></i>
                                                    Database Ready
                                                </li>
                                                <li>
                                                    <i class="fas fa-check text-success"></i>
                                                    Real-time Updates
                                                </li>
                                                <li>
                                                    <i class="fas fa-check text-success"></i>
                                                    Widget Integrated
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Links -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>
                                        <i class="fas fa-link"></i>
                                        Quick Links
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="btn-group-vertical w-100" role="group">
                                        <a href="{{ route('notifications.index') }}" class="btn btn-outline-primary mb-2">
                                            <i class="fas fa-bell"></i>
                                            View All Notifications
                                        </a>
                                        <a href="{{ route('notifications.history') }}" class="btn btn-outline-info mb-2">
                                            <i class="fas fa-history"></i>
                                            Notification History & Analytics
                                        </a>
                                        <a href="{{ route('notifications.preferences') }}" class="btn btn-outline-secondary mb-2">
                                            <i class="fas fa-cog"></i>
                                            Notification Preferences
                                        </a>
                                        <a href="{{ route('tasks.index') }}" class="btn btn-outline-success">
                                            <i class="fas fa-tasks"></i>
                                            Task Management
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection