@extends('layouts.app')

@section('content')
<x-app-layout>  
<div class="bg-gray-50 py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-xl mx-auto">
            <div class="text-center mb-8">
                <h1 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Newsletter Subscription
                </h1>
                <p class="mt-4 text-lg text-gray-500">
                    Stay updated with the latest news, product updates, and industry insights from AlgoMine.
                </p>
            </div>
            
            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6" role="alert">
                    <span class="block sm:inline">{{ session('success') }}</span>
                </div>
            @endif
            
            @if(session('error'))
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6" role="alert">
                    <span class="block sm:inline">{{ session('error') }}</span>
                </div>
            @endif
            
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="p-6">
                    <form action="{{ route('newsletter.subscribe.submit') }}" method="POST">
                        @csrf
                        
                        <div class="mb-4">
                            <label for="email" class="block text-sm font-medium text-gray-700">Email *</label>
                            <input type="email" name="email" id="email" value="{{ old('email') }}" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-rose-500 focus:ring focus:ring-rose-500 focus:ring-opacity-50" 
                                placeholder="your@email.com" required>
                            @error('email')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div class="mb-4">
                            <label for="name" class="block text-sm font-medium text-gray-700">Name (Optional)</label>
                            <input type="text" name="name" id="name" value="{{ old('name') }}" 
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-rose-500 focus:ring focus:ring-rose-500 focus:ring-opacity-50"
                                placeholder="Your Name">
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input type="checkbox" name="terms" id="terms" value="1" {{ old('terms') ? 'checked' : '' }}
                                        class="rounded border-gray-300 text-rose-600 shadow-sm focus:border-rose-500 focus:ring focus:ring-rose-500 focus:ring-opacity-50" 
                                        required>
                                </div>
                                <div class="ml-3 text-sm">
                                    <label for="terms" class="font-medium text-gray-700">I agree to receive newsletters</label>
                                    <p class="text-gray-500">You can unsubscribe at any time using the unsubscribe link in our emails.</p>
                                    @error('terms')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <button type="submit" class="w-full bg-rose-600 hover:bg-rose-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                                Subscribe
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="text-center mt-6 text-sm text-gray-500">
                <p>We respect your privacy and will never share your information with third parties.</p>
            </div>
        </div>
    </div>
</div>
</x-app-layout>
@endsection