@extends('layouts.app')
@section('title')
    Campaign Details
@endsection
@section('content')
    <style>
        .recipient-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            padding: 0;
            max-height: 400px;
            overflow-y: auto;
        }

        .recipient-list li {
            margin: 5px;
        }
    </style>
    <div class="page-heading">
        <div class="page-title">
            <div class="row">
                <div class="col-12 col-md-6 order-md-1 order-last">
                    <h3>Campaign</h3>
                    <p class="text-subtitle text-muted">Show</p>
                </div>
                <div class="col-12 col-md-6 order-md-2 order-first">
                    <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('home')}}">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{route('campaigns.index')}}">Campaign</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Details</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <section class="section">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3">
                            <h3 class="text-center">Summary</h3>
                            <p><strong>Campaign Status:<b>
                                        @if($campaign->status == 0)
                                            Queue
                                        @elseif($campaign->status == 1)
                                            Processing
                                        @elseif($campaign->status == 2)
                                            Completed
                                        @elseif($campaign->status == 3)
                                            Failed
                                        @elseif($campaign->status == 4)
                                            Cancelled
                                        @endif
                                    </b> </strong></p>
                            <p><strong>Total Recipients:</strong> {{count($campaign->contacts)}}</p>
                            <p><strong>Queued Recipients:</strong> {{count($campaign->queueContacts)}}</p>
                            <p><strong>Bounced Recipients:</strong> {{count($campaign->bouncedContacts)}}</p>
                            <h5 class="text-center">Sent Recipients Lists
                                ({{$campaign->successful_recipients}})</h5>
                            <ul class="recipient-list">
                                @if(count($campaign->completedContacts) > 0)
                                    @foreach($campaign->completedContacts as $recipient)
                                        <li>{{$recipient->email}} &nbsp;</li>
                                    @endforeach
                                @else
                                    <li>No recipients sent</li>
                                @endif
                            </ul>
                        </div>
                        <div class="col-9 mt-4">
                            <h3 style="margin-bottom: 20px;">{{$campaign->subject}}</h3>
                            <iframe id="emailIframe" style="width:100%; height:600px;"></iframe>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>

    <script>
        window.onload = function () {
            var iframe = document.getElementById('emailIframe');
            var emailHtml = {!! json_encode($campaign->message) !!};
            iframe.contentWindow.document.open();
            iframe.contentWindow.document.write(emailHtml);
            iframe.contentWindow.document.close();
        }
    </script>
@endsection