@extends('setting.nav')
@section('styles')
    <style>
        @keyframes shake {
            0% {
                transform: translateX(0);
            }

            10% {
                transform: translateX(-5px);
            }

            20% {
                transform: translateX(5px);
            }

            30% {
                transform: translateX(-5px);
            }

            40% {
                transform: translateX(5px);
            }

            50% {
                transform: translateX(-5px);
            }

            60% {
                transform: translateX(5px);
            }

            70% {
                transform: translateX(-5px);
            }

            80% {
                transform: translateX(5px);
            }

            90% {
                transform: translateX(-5px);
            }

            100% {
                transform: translateX(0);
            }
        }

        .shake {
            animation: shake 1s;
        }

        .blinking {
            background-color: red;
            animation: blinkRedYellow 0.2s infinite;
        }

        @keyframes blinkRedYellow {
            0% {
                background-color: red;
            }

            50% {
                background-color: yellow;
            }

            100% {
                background-color: red;
            }
        }

        .dashboard-container {
            background: #ffffff;
            border-radius: 12px;
            padding: 30px;
            margin-top: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
    </style>
@endsection
@section('title', 'All Employee')
@section('content')

    <div class="containerfluid dashboard-container" style="padding:0 20px; !important">
        {{-- <h1>📋 Employee Insights DashBoard</h1><br /> --}}
        <!-- Card -->
        <div class="card border-0 shadow-sm" style="border-radius: 1rem;">
            <div class="card-header d-flex justify-content-between align-items-center text-white"
                style="position: sticky; top: 0; border-radius: 1rem 1rem 0 0; background: linear-gradient(135deg, #4e73df, #1cc88a); font-size: 1.25rem; font-weight: 600;">
                <span>📋 Employee Insights DashBoard</span>
                <div style="width: 250px;">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search mails..."
                        style="border-radius: 30px; padding: 0.4rem 1rem;">
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    @if ($employees->isEmpty())
                        <h2 class="text-center text-danger">No mails available</h2>
                    @else
                        {{-- <p>Welcome to the employee section.</p> --}}
                        <table class="table table-striped" id="employee-table">
                            <thead style="position: sticky; top: 0; z-index: 1;">
                                <tr>
                                    <th>ID</th>
                                    {{-- <th>User ID</th> --}}
                                    <th>Email</th>
                                    {{-- <th>Total Mail</th> --}}
                                    <th>😊 Positive</th>
                                    <th>😞 Negative</th>
                                    <th>😐 Neutral</th>
                                    <th>⏳ Pending Reply</th>
                                    <th>📬 Replied Mail</th>
                                    <th>🚀 Promotion</th>
                                    <th>⚙️ Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($employees as $emp)
                                    <tr id="row-{{ $loop->iteration }}" data-emp-id="{{ $emp->id }}">
                                        <td id="cell-{{ $loop->iteration }}-index">{{ $loop->iteration }} </td>
                                        {{-- <td id="cell-{{ $loop->iteration }}-user_id">{{ $emp->id }}</td> --}}
                                        <td id="cell-{{ $loop->iteration }}-email">{{ $emp->email }}</td>
                                        {{-- <td id="cell-{{ $loop->iteration }}-total">{{ $emp->total_mail }}</td> --}}
                                        {{-- <td id="cell-{{ $loop->iteration }}-positive">{{ $emp->is_login == 1 ? '-' : $emp->is_not_spam }}
                        </td>
                        <td id="cell-{{ $loop->iteration }}-negative">{{ $emp->is_login == 1 ? '-' : $emp->is_spam }}</td>
                        <td id="cell-{{ $loop->iteration }}-send">{{ $emp->is_login == 1 ? '-' : $emp->send_mail }}</td>
                        <td id="cell-{{ $loop->iteration }}-neutral">{{ $emp->is_login == 1 ? '-' : $emp->neutral }}</td>
                        <td id="cell-{{ $loop->iteration }}-promotion">{{ $emp->is_login == 1 ? '-' : $emp->promotion }}
                        </td> --}}
                                        <td>
                                            <a id="cell-{{ $loop->iteration }}-positive"
                                                href="{{ route('employee.process', ['id' => $emp->id, 'value' => 'positive']) }}">
                                                {{ $emp->is_not_spam }}
                                            </a>
                                        </td>
                                        <td>
                                            <a id="cell-{{ $loop->iteration }}-negative"
                                                href="{{ route('employee.process', ['id' => $emp->id, 'value' => 'negative']) }}">
                                                {{ $emp->is_spam }}
                                            </a>
                                        </td>
                                        <td>
                                            <a id="cell-{{ $loop->iteration }}-neutral"
                                                href="{{ route('employee.process', ['id' => $emp->id, 'value' => 'neutral']) }}">
                                                {{ $emp->neutral }}
                                            </a>
                                        </td>
                                        <td>
                                            <a id="cell-{{ $loop->iteration }}-send"
                                                href="{{ route('employee.process', ['id' => $emp->id, 'value' => 'send']) }}">
                                                {{ $emp->send_mail }}
                                            </a>
                                        </td>
                                        <td>
                                            <a id="cell-{{ $loop->iteration }}-replied"
                                                href="{{ route('employee.process', ['id' => $emp->id, 'value' => 'replied']) }}">
                                                {{ $emp->replied }}
                                            </a>
                                        </td>
                                        <td>
                                            <a id="cell-{{ $loop->iteration }}-promotion"
                                                href="{{ route('employee.process', ['id' => $emp->id, 'value' => 'promotion']) }}">
                                                {{ $emp->promotion }}
                                            </a>
                                        </td>
                                        <td>
                                            {{-- @if ($emp->is_login != 1) --}}
                                            <a href="javascript:void(0);"
                                                class="btn btn-sm btn-success row-{{ $loop->iteration }}"
                                                onclick="storeNewEmail('row-{{ $loop->iteration }}','{{ $emp->email }}', '{{ $emp->app_email_pass }}', '{{ $emp->id }}', 'cell-{{ $loop->iteration }}-positive', 'cell-{{ $loop->iteration }}-negative', 'cell-{{ $loop->iteration }}-send', 'cell-{{ $loop->iteration }}-neutral', 'cell-{{ $loop->iteration }}-promotion','cell-{{ $loop->iteration }}-replied')">
                                                Fetch
                                            </a>
                                            <a href="#" class="btn btn-sm btn-dark fetch-summary-btn"
                                                data-emp-id="{{ $emp->id }}" data-emp-name="{{ $emp->email }}"
                                                data-bs-toggle="modal" data-bs-target="#summaryModal">
                                                Summary
                                            </a>
                                            <a href="{{ route('mail.info', $emp->id) }}"
                                                class="btn btn-sm btn-primary">View</a>
                                            {{-- @else
                                <a href="{{ route('set_app_password', ['id' => $emp->id]) }}">Please Set App Password</a>
                            @endif --}}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </div>
            <!-- Summary Modal -->
            <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="summaryModal" tabindex="-1"
                aria-labelledby="summaryModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="summaryModalLabel">Employee Email Summary</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="summary-container">
                            <!-- Summary will be loaded here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="alert_message_html" class="position-fixed end-0 bottom-0 p-3" style="z-index: 1055;"></div>
    @endsection

    @section('scripts')
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />

        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <!-- DataTables JS -->
        <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function() {
                var table = $('#employee-table').DataTable({
                    ordering: true,
                    info: true,
                    pagingType: 'full_numbers',
                    language: {
                        search: "",
                        searchPlaceholder: "Search..."
                    },
                    dom: 't<"d-flex justify-content-between align-items-center p-3"p>'
                });

                // Custom search functionality
                $('#customSearch').on('keyup', function() {
                    table.search(this.value).draw();
                });

                // Styling for pagination buttons
                setTimeout(function() {
                    $('.dataTables_paginate .paginate_button').addClass('btn btn-sm btn-outline-secondary mx-1')
                        .css({
                            borderRadius: '30px'
                        });
                }, 100);
            });
        </script>
        <!-- Include DataTables scripts -->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

        <script>
            $(document).ready(function() {
                // $('#employee-table').DataTable();
                $(document).on('click', '.fetch-summary-btn', function(e) {
                    e.preventDefault();

                    const userId = $(this).data('emp-id');
                    const email_name = $(this).data('emp-name');
                    $('#summaryModalLabel').text('Employee Email Summary :- ' + email_name);
                    // alert(userId);
                    // return;
                    $('#summary-container').html('<p class="text-muted">Loading summary...</p>');

                    $.ajax({
                        url: "{{ route('summary') }}",
                        method: 'GET',
                        data: {
                            user_id: userId
                        },
                        success: function(response) {
                            console.log(response);
                            // alert("i am success");
                            if (response.status) {
                                $('#summary-container').html(response.summary);
                            } else {
                                // console.log(response.message);
                                if (response.code === 422) {
                                    $('#summary-container').html('<p class="text-danger">' +
                                        response.message + '</p>');
                                } else if (response.code === 404) {
                                    console.log(
                                        "i am fetch-summary-btn success ajax function else block 404"
                                    );
                                    console.log(response.message);
                                    $('#summary-container').html(
                                        '<p class="text-danger"> Please Try Later</p>');
                                } else if (response.code === 204) {
                                    console.log(
                                        "i am fetch-summary-btn success ajax function else block 204"
                                    );
                                    console.log(response.message);
                                    $('#summary-container').html(
                                        '<p class="text-danger"> Please Try Later</p>');
                                } else {
                                    console.log(
                                        "i am fetch-summary-btn success ajax function else block"
                                    );
                                    console.log(response.message);
                                    $('#summary-container').html(
                                        '<p class="text-danger">Please Try Later</p>');
                                }
                                // $('#summary-container').html(
                                //     '<p class="text-danger">Please try later.</p>');
                            }
                        },
                        error: function(xhr) {
                            let errorMsg = '';

                            // if (response.code === 422) {
                            //     errorMsg =
                            //         'Error block Have No messages for this user Plase Click Fetch Button If Get New Message Then I will How You Thier Summary.';
                            // } else if (response.code === 404) {
                            //     errorMsg = response.user_id || 'Invalid user ID.';
                            // } else if (response.code === 204) {
                            //     errorMsg = 'Error block User not found.';
                            // } else {
                            //     errorMsg = 'Error block Failed to load summary.';
                            // }
                            // console.log(errorMsg);
                            errorMsg = 'please try later.';

                            $('#summary-container').html('<p class="text-danger">' + errorMsg +
                                '</p>');
                            // $('#summary-container').html(
                            //     '<p class="text-danger">Failed to load summary.</p>');
                            console.log(xhr);
                        }
                    });
                });
            });

            function shakeRow(rowId) {
                const row = document.getElementById(rowId);
                row.classList.add('shake');
                row.classList.add('table-success');
                setTimeout(() => {
                    row.classList.remove('shake');
                    row.classList.remove('table-success');
                }, 2000);
            }

            function addblinkRow(rowId) {
                const row = document.getElementsByClassName(rowId);
                row[0].classList.add('blinking');
            }

            function removeblinkRow(rowId) {
                const row = document.getElementsByClassName(rowId);
                row[0].classList.remove('blinking');
            }

            function storeNewEmail(rowid, email, app_pass, user_id, idPositive, idNegative, idSend, idNeutral, idPromotion,
                idReplied) {
                if (!email || !app_pass || !user_id) {
                    alert("Email, App Password, or User ID is missing!");
                    return;
                }
                if (!rowid || !user_id || !idPositive || !idNegative || !idSend || !idNeutral || !idPromotion || !idReplied) {
                    alert("Missing required parameters!");
                    return;
                }

                var apiUrl = "{{ route('store_new_email') }}";
                addblinkRow(rowid);
                // alert("here");
                // return;
                $.ajax({
                    url: apiUrl,
                    type: "GET",
                    data: {
                        email: email,
                        app_pass: app_pass,
                        user_id: user_id
                    },
                    success: function(response) {
                        removeblinkRow(rowid);
                        console.log(response);
                        if (response?.code == 250) {
                            // alert("Your API is not working. Check if Gemini API is running.");
                            alert("Please try later");
                            return;
                        }
                        if (response?.code == 503) {
                            // alert(
                            //     "The model is overloaded. Please try again later. Ai is For some time UNAVAILABLE"
                            // );
                            alert("Please try later");
                            return;
                        }

                        if (response?.code == 429) {
                            // alert("Too many requests to email server. Please wait and try again.");
                            alert("Please try later");
                            return;
                        }
                        if (response?.code == 430) {
                            // alert("App Password is Expire Please Provide a App Appasword For This Mail :- " +
                            //     email);
                            alert("Please try later");
                            return;
                        }
                        fetchMailStats(user_id, idPositive, idNegative, idSend, idNeutral, idPromotion, idReplied)

                        const uniqueId = "emailAlert_" + Date.now();
                        const message = response.store_data > 0 ?
                            `${email} Get ${response.store_data} new emails received!` :
                            `No new emails! For :-  ${email}`;
                        if (response.store_data > 0) {
                            // shakeRow("row-1"); // shake karo agar naye email aaye ho
                            shakeRow(rowid);
                        }
                        const alertHTML = `
                <div id="${uniqueId}" class="position-relative mb-2">
                    <div class="alert alert-success" role="alert">
                        ${message}
                    </div>
                </div>
            `;

                        $("#alert_message_html").append(alertHTML);

                        setTimeout(function() {
                            $("#" + uniqueId).fadeOut("slow", function() {
                                $(this).remove();
                            });
                        }, 3000);
                    },
                    error: function(xhr) {
                        removeblinkRow(rowid);
                        // alert(xhr.responseText || "An error occurred while fetching emails.");
                        alert("Please try later");
                        console.error(xhr);
                    }
                });
            }

            function fetchMailStats(userId, idPositive, idNegative, idSend, idNeutral, idPromotion, idReplied) {
                // Check if any parameter is missing
                if (!userId || !idPositive || !idNegative || !idSend || !idNeutral || !idPromotion || !idReplied) {
                    alert("Missing required parameters!");
                    return;
                }

                var apiUrl = "{{ route('mail_states') }}?user_id=" + userId;

                $.ajax({
                    url: apiUrl,
                    type: "GET",
                    contentType: "application/json",
                    success: function(response) {
                        if (response.status) {
                            $("#" + idPositive).text(response.data.countis_not_spam);
                            $("#" + idNegative).text(response.data.countis_spam);
                            $("#" + idSend).text(response.data.send_mail);
                            $("#" + idNeutral).text(response.data.neutral);
                            $("#" + idPromotion).text(response.data.promotion);
                            $("#" + idReplied).text(response.data.replied_mail);
                        } else {
                            console.error("Error:", response.message);
                        }
                    },
                    error: function(xhr) {
                        console.log('Error in fetchMailStats()');
                        console.log(xhr);
                        console.error("API Call Failed:", xhr.responseText);
                        // alert(xhr.responseText);
                        alert("Please try later");
                    }
                });
            }
        </script>
    @endsection