@extends('layouts.admin')

@section('title', __('newsletter.subscriber_details'))

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <!-- Subscriber Information -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('newsletter.subscriber_details') }}</h3>
                    <div class="card-tools">
                        <a href="{{ route('admin.newsletter.subscribers.edit', ['locale' => app()->getLocale(), 'id' => $subscriber->id]) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit"></i> {{ __('newsletter.edit') }}
                        </a>
                        <a href="{{ route('admin.newsletter.subscribers.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> {{ __('newsletter.back_to_list') }}
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 text-center">
                            @if($subscriber->profile_picture)
                                <img src="{{ asset('storage/' . $subscriber->profile_picture) }}" alt="Profile Picture" class="img-circle img-fluid mb-3" style="max-width: 150px; max-height: 150px;">
                            @else
                                <div class="img-circle bg-secondary d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 150px; height: 150px;">
                                    <i class="fas fa-user text-white" style="font-size: 60px;"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-9">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4>{{ $subscriber->first_name }} {{ $subscriber->last_name }}</h4>
                                    <p class="text-muted">{{ $subscriber->email }}</p>

                                    <div class="mb-2">
                                        <strong>{{ __('newsletter.status') }}:</strong>
                                        <span class="badge badge-{{ $subscriber->status === 'active' ? 'success' : ($subscriber->status === 'inactive' ? 'warning' : 'danger') }}">
                                            {{ __('newsletter.status_' . $subscriber->status) }}
                                        </span>
                                    </div>

                                    <div class="mb-2">
                                        <strong>{{ __('newsletter.preferred_language') }}:</strong>
                                        <span class="badge badge-{{ $subscriber->language === 'en' ? 'primary' : 'primary' }}">
                                            {{ $subscriber->language === 'en' ? 'English' : 'العربية' }}
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-2">
                                        <strong>{{ __('newsletter.subscribed_since') }}:</strong><br>
                                        <small class="text-muted">{{ $subscriber->created_at->format('F d, Y \a\t H:i') }}</small>
                                    </div>

                                    <div class="mb-2">
                                        <strong>{{ __('newsletter.last_updated') }}:</strong><br>
                                        <small class="text-muted">{{ $subscriber->updated_at->format('F d, Y \a\t H:i') }}</small>
                                    </div>

                                    @if($subscriber->unsubscribed_at)
                                        <div class="mb-2">
                                            <strong>{{ __('newsletter.unsubscribed_at') }}:</strong><br>
                                            <small class="text-muted">{{ $subscriber->unsubscribed_at->format('F d, Y \a\t H:i') }}</small>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            @if($subscriber->metadata)
                                <div class="mt-3">
                                    <strong>{{ __('newsletter.additional_info') }}:</strong>
                                    <div class="mt-2">
                                        <pre class="bg-light p-2 rounded">{{ json_encode($subscriber->metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Campaign History -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('newsletter.campaign_history') }}</h3>
                </div>
                <div class="card-body p-0">
                    @if($subscriber->campaigns->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped mb-0">
                                <thead>
                                    <tr>
                                        <th>{{ __('newsletter.campaign_name') }}</th>
                                        <th>{{ __('newsletter.sent_at') }}</th>
                                        <th>{{ __('newsletter.status') }}</th>
                                        <th>{{ __('newsletter.status') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($subscriber->campaigns as $campaign)
                                        <tr>
                                            <td>
                                                <strong>{{ $campaign->name }}</strong><br>
                                                <small class="text-muted">{{ $campaign->template->name ?? __('newsletter.no_template') }}</small>
                                            </td>
                                            <td>{{ $campaign->sent_at ? $campaign->sent_at->format('M d, Y H:i') : __('newsletter.not_sent') }}</td>
                                            <td>
                                                <span class="badge badge-{{ $campaign->status === 'sent' ? 'success' : ($campaign->status === 'sending' ? 'warning' : 'secondary') }}">
                                                    {{ __('newsletter.status_' . $campaign->status) }}
                                                </span>
                                            </td>
                                            <td>
                                                @php
                                                    $campaignSubscriber = $campaign->campaignSubscribers()->where('newsletter_subscription_id', $subscriber->id)->first();
                                                @endphp
                                                @if($campaignSubscriber)
                                                    <div class="btn-group">
                                                        @if($campaignSubscriber->opened_at)
                                                            <span class="badge badge-success">
                                                                <i class="fas fa-eye"></i> {{ __('newsletter.opened') }}
                                                            </span>
                                                        @else
                                                            <span class="badge badge-secondary">
                                                                <i class="fas fa-eye-slash"></i> {{ __('newsletter.not_opened') }}
                                                            </span>
                                                        @endif

                                                        @if($campaignSubscriber->clicked_at)
                                                            <span class="badge badge-info ml-1">
                                                                <i class="fas fa-mouse-pointer"></i> {{ __('newsletter.clicked') }}
                                                            </span>
                                                        @endif
                                                    </div>
                                                @else
                                                    <span class="text-muted">{{ __('newsletter.not_in_campaign') }}</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-envelope-open-text fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">{{ __('newsletter.no_campaigns_sent') }}</h5>
                            <p class="text-muted">{{ __('newsletter.no_campaigns_sent_desc') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Statistics Card -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('newsletter.engagement_stats') }}</h3>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="mb-3">
                                <h4 class="text-primary">{{ $stats['total_campaigns_sent'] }}</h4>
                                <p class="text-muted mb-0">{{ __('newsletter.total_campaigns') }}</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <h4 class="text-success">{{ $subscriber->campaignSubscribers()->where('status', 'opened')->count() }}</h4>
                                <p class="text-muted mb-0">{{ __('newsletter.emails_opened') }}</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <h4 class="text-info">{{ $subscriber->campaignSubscribers()->where('status', 'clicked')->count() }}</h4>
                                <p class="text-muted mb-0">{{ __('newsletter.emails_clicked') }}</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <h4 class="text-warning">{{ number_format($stats['open_rate'], 1) }}%</h4>
                                <p class="text-muted mb-0">{{ __('newsletter.open_rate') }}</p>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="mb-2">
                        <strong>{{ __('newsletter.click_rate') }}:</strong>
                        <span class="float-right">{{ number_format($stats['click_rate'], 1) }}%</span>
                    </div>

                    <div class="progress mb-3">
                        <div class="progress-bar bg-info" style="width: {{ $stats['open_rate'] }}%"></div>
                    </div>

                    <small class="text-muted">{{ __('newsletter.stats_based_on_sent_campaigns') }}</small>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('newsletter.quick_actions') }}</h3>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <form method="POST" action="{{ route('admin.newsletter.subscribers.toggleStatus', $subscriber) }}" style="display: inline;">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-{{ $subscriber->isActive() ? 'warning' : 'success' }} btn-sm w-100">
                                <i class="fas fa-{{ $subscriber->isActive() ? 'pause' : 'play' }}"></i>
                                {{ $subscriber->isActive() ? __('newsletter.deactivate') : __('newsletter.activate') }}
                            </button>
                        </form>

                        <button type="button" class="btn btn-danger btn-sm w-100" onclick="confirmDelete()">
                            <i class="fas fa-trash"></i> {{ __('newsletter.delete_subscriber') }}
                        </button>
                    </div>
                </div>
            </div>

            <!-- Activity Timeline -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('newsletter.activity_timeline') }}</h3>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <i class="fas fa-user-plus text-success mr-2"></i>
                            {{ __('newsletter.subscribed') }}
                            <br><small class="text-muted">{{ $subscriber->created_at->diffForHumans() }}</small>
                        </li>

                        @if($subscriber->unsubscribed_at)
                            <li class="list-group-item">
                                <i class="fas fa-user-times text-danger mr-2"></i>
                                {{ __('newsletter.unsubscribed') }}
                                <br><small class="text-muted">{{ $subscriber->unsubscribed_at->diffForHumans() }}</small>
                            </li>
                        @endif

                        @foreach($subscriber->campaignSubscribers()->orderBy('created_at', 'desc')->take(5)->get() as $activity)
                            <li class="list-group-item">
                                @if($activity->status === 'opened')
                                    <i class="fas fa-eye text-info mr-2"></i>
                                    {{ __('newsletter.opened_campaign') }}
                                @elseif($activity->status === 'clicked')
                                    <i class="fas fa-mouse-pointer text-primary mr-2"></i>
                                    {{ __('newsletter.clicked_campaign') }}
                                @else
                                    <i class="fas fa-envelope text-secondary mr-2"></i>
                                    {{ __('newsletter.received_campaign') }}
                                @endif
                                <br><small class="text-muted">{{ $activity->created_at->diffForHumans() }}</small>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ __('newsletter.confirm_delete') }}</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{ __('newsletter.delete_subscriber_confirm') }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('newsletter.cancel') }}</button>
                <form method="POST" action="{{ route('admin.newsletter.subscribers.destroy', $subscriber) }}" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">{{ __('newsletter.delete') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function confirmDelete() {
    $('#deleteModal').modal('show');
}
</script>
@endsection