@extends('layout.front.master')

@section('title', trans('Newsletter Preferences'))

@section('content')
    <!-- Newsletter Preferences Section -->
    <section class="section bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-primary text-white text-center">
                            <h3 class="card-title mb-0">
                                <i class="fas fa-cog me-2"></i>{{ trans('Newsletter Preferences') }}
                            </h3>
                        </div>

                        <div class="card-body p-5">
                            <!-- Success/Error Messages -->
                            <div id="newsletter-messages" class="d-none">
                                <div class="alert alert-dismissible fade show" role="alert">
                                    <span class="message-text"></span>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            </div>

                            <!-- Newsletter Subscription Status -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h5 class="text-primary">{{ trans('Subscription Status') }}</h5>
                                    <div class="bg-light p-3 rounded">
                                        <div id="subscription-status">
                                            <div class="d-flex align-items-center">
                                                <div class="spinner-border spinner-border-sm me-2" role="status">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                                <span>{{ trans('Checking subscription status...') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Email Management Form -->
                            <div class="row">
                                <div class="col-12">
                                    <h5 class="text-primary mb-3">{{ trans('Manage Your Subscription') }}</h5>

                                    <!-- Check Subscription Form -->
                                    <form id="check-subscription-form" class="mb-4">
                                        <div class="input-group">
                                            <input type="email" id="email-input" class="form-control form-control-lg"
                                                   placeholder="{{ trans('Enter your email address') }}" required>
                                            <button class="btn btn-primary btn-lg" type="submit">
                                                <i class="fas fa-search me-1"></i>{{ trans('Check Status') }}
                                            </button>
                                        </div>
                                    </form>

                                    <!-- Action Buttons -->
                                    <div id="action-buttons" class="text-center d-none">
                                        <button id="subscribe-btn" class="btn btn-success me-2" style="display: none;">
                                            <i class="fas fa-plus me-1"></i>{{ trans('Subscribe') }}
                                        </button>
                                        <button id="unsubscribe-btn" class="btn btn-warning me-2" style="display: none;">
                                            <i class="fas fa-minus me-1"></i>{{ trans('Unsubscribe') }}
                                        </button>
                                        <button id="resubscribe-btn" class="btn btn-info" style="display: none;">
                                            <i class="fas fa-redo me-1"></i>{{ trans('Resubscribe') }}
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Newsletter Information -->
                            <div class="row mt-5">
                                <div class="col-12">
                                    <div class="bg-light p-4 rounded">
                                        <h6 class="text-primary mb-3">{{ trans('About Our Newsletter') }}</h6>
                                        <ul class="list-unstyled mb-0">
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {{ trans('Weekly updates about our latest properties') }}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {{ trans('Market insights and real estate tips') }}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {{ trans('Exclusive access to new listings') }}
                                            </li>
                                            <li>
                                                <i class="fas fa-check text-success me-2"></i>
                                                {{ trans('Unsubscribe anytime with one click') }}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- Privacy Notice -->
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="text-center">
                                        <small class="text-muted">
                                            <i class="fas fa-shield-alt me-1"></i>
                                            {{ trans('We respect your privacy and will never share your email address with third parties.') }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentEmail = '';

    // CSRF Token setup
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Check subscription form
    $('#check-subscription-form').on('submit', function(e) {
        e.preventDefault();

        const email = $('#email-input').val();
        currentEmail = email;

        if (!email) {
            showMessage('{{ trans("Please enter a valid email address") }}', 'danger');
            return;
        }

        // Show loading
        $('#subscription-status').html(`
            <div class="d-flex align-items-center">
                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                <span>{{ trans("Checking subscription status...") }}</span>
            </div>
        `);

        // Check subscription status
        $.ajax({
            url: '{{ route("modules.newsletter.frontend.check-subscription") }}',
            type: 'POST',
            data: { email: email },
            success: function(response) {
                if (response.success) {
                    updateSubscriptionStatus(response.subscribed, email);
                    showActionButtons(response.subscribed);
                } else {
                    showMessage(response.message, 'danger');
                }
            },
            error: function() {
                showMessage('{{ trans("Error checking subscription status") }}', 'danger');
                $('#subscription-status').html(`
                    <div class="text-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {{ trans("Error checking subscription status") }}
                    </div>
                `);
            }
        });
    });

    // Subscribe button
    $('#subscribe-btn').on('click', function() {
        subscribeEmail(currentEmail);
    });

    // Unsubscribe button
    $('#unsubscribe-btn').on('click', function() {
        unsubscribeEmail(currentEmail);
    });

    // Resubscribe button
    $('#resubscribe-btn').on('click', function() {
        resubscribeEmail(currentEmail);
    });

    function updateSubscriptionStatus(isSubscribed, email) {
        const statusHtml = isSubscribed
            ? `<div class="text-success">
                <i class="fas fa-check-circle me-2"></i>
                <strong>${email}</strong> {{ trans("is subscribed to our newsletter") }}
               </div>`
            : `<div class="text-muted">
                <i class="fas fa-times-circle me-2"></i>
                <strong>${email}</strong> {{ trans("is not subscribed to our newsletter") }}
               </div>`;

        $('#subscription-status').html(statusHtml);
    }

    function showActionButtons(isSubscribed) {
        $('#action-buttons').removeClass('d-none');
        $('#subscribe-btn, #unsubscribe-btn, #resubscribe-btn').hide();

        if (isSubscribed) {
            $('#unsubscribe-btn').show();
        } else {
            $('#subscribe-btn, #resubscribe-btn').show();
        }
    }

    function subscribeEmail(email) {
        $.ajax({
            url: '{{ route("newsletter.subscribe") }}',
            type: 'POST',
            data: { email: email },
            success: function(response) {
                if (response.success) {
                    showMessage(response.message, 'success');
                    updateSubscriptionStatus(true, email);
                    showActionButtons(true);
                } else {
                    showMessage(response.message, 'danger');
                }
            },
            error: function(xhr) {
                const message = xhr.responseJSON?.message || '{{ trans("Subscription failed") }}';
                showMessage(message, 'danger');
            }
        });
    }

    function unsubscribeEmail(email) {
        if (confirm('{{ trans("Are you sure you want to unsubscribe?") }}')) {
            $.ajax({
                url: '{{ route("newsletter.unsubscribe") }}',
                type: 'POST',
                data: { email: email },
                success: function(response) {
                    if (response.success) {
                        showMessage(response.message, 'success');
                        updateSubscriptionStatus(false, email);
                        showActionButtons(false);
                    } else {
                        showMessage(response.message, 'danger');
                    }
                },
                error: function() {
                    showMessage('{{ trans("Unsubscribe failed") }}', 'danger');
                }
            });
        }
    }

    function resubscribeEmail(email) {
        $.ajax({
            url: '{{ route("modules.newsletter.frontend.resubscribe") }}',
            type: 'POST',
            data: { email: email },
            success: function(response) {
                if (response.success) {
                    showMessage(response.message, 'success');
                    updateSubscriptionStatus(true, email);
                    showActionButtons(true);
                } else {
                    showMessage(response.message, 'danger');
                }
            },
            error: function() {
                showMessage('{{ trans("Resubscribe failed") }}', 'danger');
            }
        });
    }

    function showMessage(message, type) {
        const alertClass = `alert-${type === 'danger' ? 'danger' : type === 'success' ? 'success' : 'info'}`;

        $('#newsletter-messages')
            .removeClass('d-none')
            .find('.alert')
            .removeClass('alert-success alert-danger alert-info')
            .addClass(alertClass)
            .find('.message-text')
            .text(message);

        // Auto hide after 5 seconds
        setTimeout(() => {
            $('#newsletter-messages').addClass('d-none');
        }, 5000);
    }
});
</script>
@endpush