@extends('admin.layouts.master')
@section('title')
{{ translate('Newsletter- Detail') }}
@endsection

@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">

        <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
            <div class="grow">
                <h5 class="text-16">{{ translate('Overview') }}</h5>
            </div>
            <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                    <a href="#!" class="text-slate-400 dark:text-zink-200">{{ translate('Newsletter') }}</a>
                </li>
                <li class="text-slate-700 dark:text-zink-100">
                    {{ translate('Overview') }}
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-12">

            <!--end col-->
            <div class="xl:col-span-12">
                <div class="card bg-slate-100">
                    <div class="card-header p-4">

                        <br><br>
                    </div>
                    <div class="card-body">

                        <div class="card m-12">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Newsletter') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Emails (Users)') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $emailsString }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Subject') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $newsletter->subject }}</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Content') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{!! $newsletter->content !!}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div><!--end col-->
        </div><!--end grid-->


    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')
<script src="{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>
<!-- product overview init js-->
<script src="{{asset('admin/assets/js/pages/apps-ecommerce-product-overview.init.js')}}"></script>
<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>
@endsection