@extends('layouts.app')

@section('content')

<div>
    <!-- Pages Header -->
    <div class="panelHeader">
        <h3 class="panelHeaderTitle">Bounce 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>
                        Email
                    </th>

                    <th width="100">
                        Action
                    </th>
                </tr>
            </thead>

            <tbody>

                @if (!empty($results) && $results->isNotEmpty())
                @foreach ($results as $key => $row)
                <tr>
                    <th>
                        {{ $key+ $results->firstItem() }}
                    </th>

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

                    <td>
                        {{ $row->email }}
                    </td>
                    <td>
                        <a href="{{ route('admin.email.bounce.destroy', $row->email) }}"
                            style="font-weight: bold; color: red;"
                            onclick="return confirm('Do you want to delete this data?')">
                            Delete
                        </a>
                    </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 clearAllUrl = "{{route('admin.email.bounce.clear')}}";
        new DataTable('#dataTable', {
            info: false,
            paging: false,
            scrollX: true,
            layout: {
                topStart: {
                    buttons: [
                        {
                            text: 'Delete All',
                            attr: {class: 'button text-white', style: "background: red; padding: 5px 10px" },
                            action: function (e, dt, node, config) {
                                window.location = clearAllUrl;
                            }
                        }
                    ]
                }
            }
        });

        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