@extends('layouts.app')

@section('title', 'Notification Types')

@section('content')
<div class="mb-8">
    <h1 class="section-title">Notification Types</h1>
    <p class="section-subtitle">PHPFlasher supports four notification types for different scenarios.</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    {{-- Success --}}
    <div class="card">
        <div class="h-2 bg-emerald-500"></div>
        <div class="card-body">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <div class="p-3 bg-emerald-100 rounded-xl">
                        <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">Success</h2>
                        <p class="text-gray-500">Positive feedback</p>
                    </div>
                </div>
            </div>

            <p class="text-gray-600 mb-4">Use success notifications for completed actions, confirmations, and positive feedback.</p>

            <div class="space-y-2 mb-6">
                <button onclick="showNotification({type: 'success', message: 'Your profile has been updated successfully!'})"
                        class="btn btn-success w-full justify-start">
                    Profile Updated
                </button>
                <button onclick="showNotification({type: 'success', message: 'Your account has been created. Welcome aboard!', title: 'Account Created'})"
                        class="btn btn-success w-full justify-start">
                    Account Created
                </button>
                <button onclick="showNotification({type: 'success', message: 'Payment of $99.00 confirmed. Receipt sent to your email.', title: 'Payment Successful'})"
                        class="btn btn-success w-full justify-start">
                    Payment Confirmed
                </button>
            </div>

            <div class="code-block">
                <div class="code-header">
                    <span>PHP</span>
                </div>
                <pre class="!m-0"><code class="language-php">flash()->success('Profile updated successfully!');

// With title
flash()->success('Welcome aboard!', 'Account Created');</code></pre>
            </div>
        </div>
    </div>

    {{-- Error --}}
    <div class="card">
        <div class="h-2 bg-rose-500"></div>
        <div class="card-body">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <div class="p-3 bg-rose-100 rounded-xl">
                        <svg class="w-8 h-8 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">Error</h2>
                        <p class="text-gray-500">Failures and issues</p>
                    </div>
                </div>
            </div>

            <p class="text-gray-600 mb-4">Use error notifications for validation failures, server errors, and problems.</p>

            <div class="space-y-2 mb-6">
                <button onclick="showNotification({type: 'error', message: 'Invalid email or password. Please try again.'})"
                        class="btn btn-danger w-full justify-start">
                    Login Failed
                </button>
                <button onclick="showNotification({type: 'error', message: 'Your card was declined. Please try another payment method.', title: 'Payment Failed'})"
                        class="btn btn-danger w-full justify-start">
                    Payment Declined
                </button>
                <button onclick="showNotification({type: 'error', message: 'Unable to connect to server. Please check your connection.', title: 'Connection Error'})"
                        class="btn btn-danger w-full justify-start">
                    Server Error
                </button>
            </div>

            <div class="code-block">
                <div class="code-header">
                    <span>PHP</span>
                </div>
                <pre class="!m-0"><code class="language-php">flash()->error('Invalid credentials.');

// With title
flash()->error('Please try again.', 'Payment Failed');</code></pre>
            </div>
        </div>
    </div>

    {{-- Warning --}}
    <div class="card">
        <div class="h-2 bg-amber-500"></div>
        <div class="card-body">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <div class="p-3 bg-amber-100 rounded-xl">
                        <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">Warning</h2>
                        <p class="text-gray-500">Caution alerts</p>
                    </div>
                </div>
            </div>

            <p class="text-gray-600 mb-4">Use warning notifications to alert users about potential issues or important notices.</p>

            <div class="space-y-2 mb-6">
                <button onclick="showNotification({type: 'warning', message: 'Your session will expire in 5 minutes.'})"
                        class="btn btn-warning w-full justify-start">
                    Session Expiring
                </button>
                <button onclick="showNotification({type: 'warning', message: 'You have unsaved changes that will be lost.', title: 'Unsaved Changes'})"
                        class="btn btn-warning w-full justify-start">
                    Unsaved Changes
                </button>
                <button onclick="showNotification({type: 'warning', message: 'Only 2 items left in stock!', title: 'Low Stock'})"
                        class="btn btn-warning w-full justify-start">
                    Low Stock Alert
                </button>
            </div>

            <div class="code-block">
                <div class="code-header">
                    <span>PHP</span>
                </div>
                <pre class="!m-0"><code class="language-php">flash()->warning('Session expiring soon.');

// With title
flash()->warning('Only 2 left!', 'Low Stock');</code></pre>
            </div>
        </div>
    </div>

    {{-- Info --}}
    <div class="card">
        <div class="h-2 bg-sky-500"></div>
        <div class="card-body">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <div class="p-3 bg-sky-100 rounded-xl">
                        <svg class="w-8 h-8 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">Info</h2>
                        <p class="text-gray-500">Neutral information</p>
                    </div>
                </div>
            </div>

            <p class="text-gray-600 mb-4">Use info notifications for tips, updates, and general information.</p>

            <div class="space-y-2 mb-6">
                <button onclick="showNotification({type: 'info', message: 'A new version is available. Click here to update.'})"
                        class="btn btn-info w-full justify-start">
                    Update Available
                </button>
                <button onclick="showNotification({type: 'info', message: 'Tip: You can use keyboard shortcuts for faster navigation.', title: 'Pro Tip'})"
                        class="btn btn-info w-full justify-start">
                    Helpful Tip
                </button>
                <button onclick="showNotification({type: 'info', message: 'Your report is being generated and will be ready shortly.'})"
                        class="btn btn-info w-full justify-start">
                    Processing Status
                </button>
            </div>

            <div class="code-block">
                <div class="code-header">
                    <span>PHP</span>
                </div>
                <pre class="!m-0"><code class="language-php">flash()->info('New version available!');

// With title
flash()->info('Use shortcuts!', 'Pro Tip');</code></pre>
            </div>
        </div>
    </div>
</div>
@endsection
