@extends('layouts.app')

@section('content')

<div>
    <!-- Pages Header -->
    <div class="panelHeader">
        <h3 class="panelHeaderTitle">Pending Mail</h3>
        <!-- Modal toggle -->

        <a href="{{ route('admin.email.campaign') }}" class="button">
            <i class="fa-solid fa-plus"></i>
            My Campaigns
        </a>
    </div>


    <div class="mb-4 px-4">
        <div class="relative mt-5 ">
            <div class="grid sm:grid-cols-3 gap-8">
                <a href="{{route('admin.email.pending')}}"
                    class="p-8 text-white flex flex-col gap-1 rounded overflow-hidden relative !bg-amber-50 dashboardCard">
                    <span class="text-xl font-syne font-medium firstLetter before:!text-amber-100 text-gray-700">Pending
                        Mail</span>
                    <span class="text-3xl font-bold [letter-spacing:2px] text-darkblue">{{$pendingMail}}</span>
                </a>

                <a href="{{route('admin.email.failed')}}"
                    class="p-8  text-white flex flex-col gap1  rounded overflow-hidden relative !bg-cyan-50 dashboardCard">
                    <span class="text-xl font-syne font-medium firstLetter before:!text-cyan-100 text-gray-700">Failed
                        Mail</span>
                    <span class="text-3xl font-bold [letter-spacing:2px] text-darkblue">{{$failedMail}}</span>
                </a>

                <a href="{{route('admin.email.bounce')}}"
                    class="p-8  text-white flex flex-col gap1  rounded overflow-hidden relative !bg-pink-50 dashboardCard">
                    <span class="text-xl font-syne font-medium firstLetter before:!text-pink-100 text-gray-700">Bounce
                        Mail</span>
                    <span class="text-3xl font-bold [letter-spacing:2px] text-darkblue">{{$bounceMail}}</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Blog Table -->
    <div class="custom-data-table">
        <table class="table" id="dataTable">
            <thead>
                <tr>
                    <th width="20">
                        SL
                    </th>

                    <th>
                        Date
                    </th>

                    <th>
                        Queue
                    </th>

                    <th>
                        Email
                    </th>
                </tr>
            </thead>

            <tbody>

                @if (!empty($results))
                @foreach ($results as $key => $row)

                                <tr>
                    <th>
                        {{ $key+ $results->firstItem() }}
                    </th>

                    <td>
                        {{ dateFormat($row->created_at, 'M d, Y') }}
                    </td>

                    <td>
                        {{ strFilter($row->queue) }}
                    </td>

                    <td>
                        {{ $data->data->email }}
                    </td>
                </tr>
                @endforeach
                @endif
            </tbody>
        </table>

        <!-- Display pagination links -->
        {{ $results->links() }}
    </div>
</div>
@endsection

@push('headerPartial')
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
<link rel="stylesheet" href="{{ asset('css/custom-data-table.css') }}">
<script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script>
<style>
    .firstLetter::before {
        content: attr(data-capitalized-text);
        font-weight: bold;
        color: #f788208a;
        position: absolute;
        right: 25px;
        bottom: 25px;
        font-size: 55px;
    }
</style>

@endpush

@push('footerPartial')
<script>
    const actionUrl = "{{route('admin.email.send')}}";
    new DataTable('#dataTable', {
        info: false,
        paging: false,
        scrollX: true,
        layout: {
            topStart: {
                buttons: [
                    {
                        text: 'Send Email',
                        attr: {class: 'button text-white', style: "background: green;padding: 5px 10px;float: left; margin-right: 10px" },
                        action: function (e, dt, node, config) {
                            window.location = actionUrl;
                        }
                    },
                ]
            }
        }
    });

        document.addEventListener('DOMContentLoaded', () => {
            const spanElements = document.querySelectorAll('.firstLetter');
            spanElements.forEach(spanElement => {
                let textContent = spanElement.textContent.trim();
                let firstLetter = textContent.charAt(0).toUpperCase();

                spanElement.setAttribute('data-capitalized-text', firstLetter);
            });
        });
</script>
@endpush