@extends('dashboard.layouts.main')

@section('content')
<style>
    select.form-control {
        color: black;
    }

    #progressContainer {
        width: 100%;
        max-width: 600px;
        margin: 20px auto;
        text-align: center;
    }

    #progressBar {
        width: 100%;
        height: 25px;
    }

    #progressText {
        margin-top: 10px;
        font-size: 16px;
        font-weight: bold;
    }

    .loader {
        border: 16px solid transparent;
        border-top: 16px solid blue;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .table-striped tbody tr:nth-child(odd) {
        background-color: #f9f9f9;
    }

    .table-striped tbody tr:nth-child(even) {
        background-color: #ffffff;
    }
</style>


<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h4>Attachment List</h4>
            <button id="processButton"  style="display: none;" class="btn btn-secondary center">Submit</button>
        </div>
        <div class="card-body">
            @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
            @endif
           
            <form action="" method="POST" id="bulkDeleteForm">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selectAll"> Download All </th>
                            <th>Attachment Name</th>
                            <th>Type</th>
                            <th>Attachment File Size</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($attachments as $index => $attachment)

                            <tr>
                                <td><input type="checkbox" name="selected_emails[]" value="{{ $attachment->id }}" class="emailCheckbox"></td>
                                <td> <a href="{{route('admin.gmail.download.attachment', ['id' => $attachment->id])}}"> {{ $attachment->attachment_name }} </a></td>
                                <td>{{ $attachment->type }}</td>
                                <td>{{ $attachment->size }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </form>
            
        </div>
    </div>
</div>


<script>
    // Function to toggle "Select All" checkbox
    function toggleSelectAll() {
        const selectAllCheckbox = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.emailCheckbox');
        checkboxes.forEach((checkbox) => {
            checkbox.checked = selectAllCheckbox.checked;
        });
    }

</script>

<script src="{{asset('dashboard/assets/vendors/js/jquery.min.js')}}"></script>



 <script>
    $(document).ready(function() {
        const fetchManualBtnProcess = $('#processButton');
        const progressContainer = $('#progressContainer');

        // Listen for the search form submission
       

        // Optional: Handle pagination click event
       
         // Submit with Fetch Emails (Automatic) Button
         fetchManualBtnProcess.on('click', function(event) {
            event.preventDefault();
            fetchManualBtnProcess.hide();
           
            

            const selectedEmails = [];
            document.querySelectorAll('.emailCheckbox:checked').forEach((checkbox) => {
                selectedEmails.push(checkbox.value);
            });
            if (selectedEmails.length === 0) {
                $("#processButton").show();
                alert('No emails selected!');
                return;
            }


            progressContainer.show();

            // Send emails to the server via AJAX
            $.ajax({
                url: "{{ route('admin.emails.manual.queue') }}",
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}" // Laravel CSRF Token
                },
                contentType: "application/json",
                data: JSON.stringify({
                    selected_emails: selectedEmails
                }),
                success: function(data) {
                    if (data && data.job_id) {
                        startPolling(data.job_id);
                        alert('Emails have been queued for processing.');
                        $("#confirmationModal").modal("hide");
                    } else {
                        alert('Error: ' + (data.message || 'Failed to queue emails.'));
                    }

                },
                error: function(error) {
                    console.error('Error:', error);
                    alert('An error occurred while queuing the emails.');
                    loader.hide(); // Hide the loader
                    errorMessage.show(); // Show error message
                    $("#processButton").show();
                }
               
            });
        });
    });

  
</script>

<script>

$(document).ready(function () {
    $("#fetchAutomaticBtn").on("click", function () {
        let userResponse = confirm("Do you want to proceed?");
        if (userResponse) {
            $("#confirmationModal").modal("show");
            // Add your logic for proceeding
        } else {
            // Add your logic for canceling
        }
    });


    $("#manualButton").on("click", function () {
        $("#processButton").show();
        $("#confirmationModal").modal("hide");
        $('#fetchAutomaticBtn').addClass('disabled'); 
        $('#fetchAutomaticBtn').css('pointer-events', 'none'); 
         
    });

});

</script>

@endsection