@extends('layouts.app')


@section('title', 'Emails')

{{-- custom css --}}
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/inbox.css') }}">
@endpush


@section('content')
<x-content-body>

    {{-- <x-breadcrumbs :breadcrumbs="$breadcrumbs" /> --}}

    <div class="card" x-data="{
            activeTab: 'inbox',
            selectedEmailRecord: null,
            singleEmailView: false,
            description: '',
            showSubject: '',
        
            getLimitedText(text, limit) {
                return text.length > limit ? text.substring(0, limit) + '...' : text;
            },
        
            deleteEmail(id) {
                const url = this.getUrl(id);
                handleAjaxRecordDeletionWithConfirmation(url, 'Email Deleted Successfully');
            },
        
            getUrl(id) {
                // This method constructs the delete URL correctly
                return '{{ route('inboxes.destroy', ['inbox' => 'PLACEHOLDER']) }}'.replace('PLACEHOLDER', id);
            },
            // Method to parse and format the CC emails
            parseCCEmails(cc) {
                if (!cc) return ''; // Check if cc is null or undefined
        
                // Properly format the string before parsing as JSON
                cc = cc.replace(/\\n/g, ''); // Remove any newline characters
                try {
                    let parsedEmails = JSON.parse(cc); // Parse the cc_email JSON string
                    if (Array.isArray(parsedEmails)) {
                        return parsedEmails.join(', '); // Join the emails into a comma-separated list
                    } else {
                        return 'Invalid email format'; // If not an array, return error message
                    }
                } catch (error) {
                    console.error('Error parsing CC emails:', error);
                    return 'Invalid email format'; // Return this in case of a parsing error
                }
            }
        }">
        <div class="card-body">
            <div class="row">
                <!-- first col for profile information -->
                <div class="col-xl-2 col-xxl-2 col-lg-2 p-0">
                    <div class="d-flex">
                        <div class="email-left-box px-0">
                            <div class="p-0">
                                <a href="javascript:void(0)" class="btn btn-primary btn-block" data-bs-toggle="modal"
                                    data-bs-target="#sendEmailModal">Compose</a>
                            </div>
                            <div class="mail-list rounded mt-4">
                                <a href="javascript:void(0)" class="list-group-item"
                                    :class="{ 'active': activeTab === 'inbox' }" x-on:click="activeTab = 'inbox'">
                                    <i class="fa fa-inbox font-18 align-middle me-2"></i>
                                    Inbox ({{count($inboxEmails ?? 0)}})
                                </a>
                                <a href="javascript:void(0)" class="list-group-item"
                                    :class="{ 'active': activeTab === 'sent' }" x-on:click="activeTab = 'sent'">
                                    <i class="fa fa-paper-plane font-18 align-middle me-2"></i>
                                    Sent ({{count($sentEmails ?? 0)}})
                                </a>
                                <a href="javascript:void(0)" class="list-group-item"
                                    :class="{ 'active': activeTab === 'important' }"
                                    x-on:click="activeTab = 'important'">
                                    <i class="fa fa-star font-18 align-middle me-2"></i>
                                    Important ({{count($importantEmails ?? 0)}})
                                </a>
                                <a href="javascript:void(0)" class="list-group-item"
                                    :class="{ 'active': activeTab === 'drafts' }" x-on:click="activeTab = 'drafts'">
                                    <i class="mdi mdi-file-document-box font-18 align-middle me-2"></i>
                                    Drafts ({{count($draftEmails ?? 0)}})
                                </a>
                                <a href="javascript:void(0)" class="list-group-item"
                                    :class="{ 'active': activeTab === 'trash' }" x-on:click="activeTab = 'trash'">
                                    <i class="fa fa-trash font-18 align-middle me-2"></i>
                                    Trash ({{count($trashEmails ?? 0)}})
                                </a>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- second column for timeline and chat module  -->
                <div :class="singleEmailView ? 'col-xl-4 col-xxl-4 col-lg-4' : 'col-10'">
                    <div class="flex">
                        <div class=" ms-sm-0 ">
                            <div role="toolbar" class="toolbar ms-1 ms-sm-0">
                                <div class="btn-group mb-1">
                                    <div class="form-check custom-checkbox">
                                        <input type="checkbox" class="form-check-input" id="checkAll">
                                        <label class="form-check-label" for="checkAll"></label>
                                    </div>
                                </div>
                                <div class="btn-group mb-1">
                                    <a href="{{ route('inboxes.index') }}" class="btn btn-primary btn-sm light px-3"
                                        rel="noopener noreferrer">
                                        <i class="ti-reload"></i>
                                    </a>
                                </div>
                                <div class="btn-group mb-1">
                                    <button aria-expanded="false" data-bs-toggle="dropdown"
                                        class="btn btn-sm btn-primary px-3 light dropdown-toggle" type="button">More
                                        <span class="caret"></span>
                                    </button>
                                    <div class="dropdown-menu"> <a href="javascript: void(0);"
                                            class="dropdown-item">Mark as Unread</a> <a href="javascript: void(0);"
                                            class="dropdown-item">Add to Tasks</a>
                                        <a href="javascript: void(0);" class="dropdown-item">Add Star</a> <a
                                            href="javascript: void(0);" class="dropdown-item">Mute</a>
                                    </div>
                                </div>
                            </div>
                            <div class="email-list mt-3 vh-100 overflow-auto">
                                <!-- Inbox Email List -->
                                <div x-show="activeTab === 'inbox'">
                                    <h5>Inbox Emails</h5>
                                    @forelse ($inboxEmails ?? [] as $email)
                                    <div x-data="{ description: @js($email['snippet']), showSubject: @js($email['subject']) }">
                                        <div class="message"
                                            @click="selectedEmailRecord = {{ json_encode($email) }}; singleEmailView = true">
                                            <div class="d-flex align-items-center">
                                                <div class="custom-checkbox me-2">
                                                    <input type="checkbox" class="form-check-input" id="">
                                                    <label class="form-check-label" for="checkbox2"></label>
                                                </div>
                                                <a href="javascript:void(0)" class="col-mail col-mail-2">
                                                    <div class="" style="margin-top: -10px">
                                                        <strong
                                                            x-text="getLimitedText((showSubject), singleEmailView ? 40 : 100)"></strong>
                                                    </div>
                                                    <div class="subject" style="margin-top: 4px">
                                                        <span
                                                            x-text="getLimitedText((description), singleEmailView ? 40 : 150)"></span>
                                                    </div>
                                                    <div class="date">
                                                        {{ \Carbon\Carbon::parse($email['date'])->format('h:i a') }}
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <p>No inbox emails.</p>
                                    @endforelse
                                    @if(count($inboxEmails) > 9)

                                    <div class="pagination-container mx-5 mt-4 d-flex justify-content-between">
                                        {{-- Previous Page Button --}}
                                        @if ($previousPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $previousPageToken]) }}" class="btn btn-primary">
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </button>
                                        @endif

                                        {{-- Next Page Button --}}
                                        @if ($nextPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $nextPageToken]) }}" class="btn btn-primary">
                                            Next <i class="fa fa-arrow-right"></i>
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            Next <i class="fa fa-arrow-right"></i>
                                        </button>
                                        @endif
                                    </div>
                                    @endif
                                </div>

                                <!-- Sent Email List -->
                                <div x-show="activeTab === 'sent'">
                                    <h5>Sent Email</h5>
                                    @forelse ($sentEmails as $email)
                                    <div x-data="{ description: @js($email['snippet']), showSubject: @js($email['subject']) }">
                                        <div class="message"
                                            @click="selectedEmailRecord = {{ json_encode($email) }}; singleEmailView = true">
                                            <div class="d-flex align-items-center">
                                                <div class="custom-checkbox me-2">
                                                    <input type="checkbox" class="form-check-input" id="">
                                                    <label class="form-check-label" for="checkbox2"></label>
                                                </div>
                                                <a href="javascript:void(0)" class="col-mail col-mail-2">
                                                    <div class="" style="margin-top: -10px">
                                                        <strong
                                                            x-text="getLimitedText((showSubject), singleEmailView ? 40 : 100)"></strong>
                                                    </div>
                                                    <div class="subject" style="margin-top: 4px">
                                                        <span
                                                            x-text="getLimitedText((description), singleEmailView ? 40 : 150)"></span>
                                                    </div>
                                                    <div class="date">
                                                        {{ \Carbon\Carbon::parse($email['date'])->format('h:i a') }}
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <p>No Send emails</p>
                                    @endforelse
                                    @if(count($sentEmails) > 9)
                                    <div class="pagination-container mx-5 mt-4 d-flex justify-content-between">
                                        {{-- Previous Page Button --}}
                                        @if ($previousPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $previousPageToken]) }}" class="btn btn-primary">
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </button>
                                        @endif

                                        {{-- Next Page Button --}}
                                        @if ($nextPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $nextPageToken]) }}" class="btn btn-primary">
                                            Next <i class="fa fa-arrow-right"></i>
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            Next <i class="fa fa-arrow-right"></i>
                                        </button>
                                        @endif
                                    </div>
                                    @endif
                                </div>

                                <!-- Important Email List -->
                                <div x-show="activeTab === 'important'">
                                    <h5>Important Emails</h5>
                                    @forelse ($importantEmails ?? [] as $email)
                                    <div x-data="{ description: @js($email['snippet']), showSubject: @js($email['subject']) }">
                                        <div class="message"
                                            @click="selectedEmailRecord = {{ json_encode($email) }}; singleEmailView = true">
                                            <div class="d-flex align-items-center">
                                                <div class="custom-checkbox me-2">
                                                    <input type="checkbox" class="form-check-input" id="">
                                                    <label class="form-check-label" for="checkbox2"></label>
                                                </div>
                                                <a href="javascript:void(0)" class="col-mail col-mail-2">
                                                    <div class="" style="margin-top: -10px">
                                                        <strong
                                                            x-text="getLimitedText((showSubject), singleEmailView ? 40 : 100)"></strong>
                                                    </div>
                                                    <div class="subject" style="margin-top: 4px">
                                                        <span
                                                            x-text="getLimitedText((description), singleEmailView ? 40 : 150)"></span>
                                                    </div>
                                                    <div class="date">
                                                        {{ \Carbon\Carbon::parse($email['date'])->format('h:i a') }}
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <p>No important emails.</p>
                                    @endforelse
                                    @if(count($importantEmails) > 9)
                                    <div class="pagination-container mx-5 mt-4 d-flex justify-content-between">
                                        {{-- Previous Page Button --}}
                                        @if ($previousPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $previousPageToken]) }}" class="btn btn-primary">
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </button>
                                        @endif

                                        {{-- Next Page Button --}}
                                        @if ($nextPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $nextPageToken]) }}" class="btn btn-primary">
                                            Next <i class="fa fa-arrow-right"></i>
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            Next <i class="fa fa-arrow-right"></i>
                                        </button>
                                        @endif
                                    </div>
                                    @endif
                                </div>

                                <!-- Drafts Email List -->
                                <div x-show="activeTab === 'drafts'">
                                    <h5>Draft Emails</h5>
                                    @forelse ($draftEmails ?? [] as $email)
                                    <div x-data="{ description: @js($email['snippet']), showSubject: @js($email['subject']) }">
                                        <div class="message"
                                            @click="selectedEmailRecord = {{ json_encode($email) }}; singleEmailView = true">
                                            <div class="d-flex align-items-center">
                                                <div class="custom-checkbox me-2">
                                                    <input type="checkbox" class="form-check-input" id="">
                                                    <label class="form-check-label" for="checkbox2"></label>
                                                </div>
                                                <a href="javascript:void(0)" class="col-mail col-mail-2">
                                                    <div class="" style="margin-top: -10px">
                                                        <strong
                                                            x-text="getLimitedText((showSubject), singleEmailView ? 40 : 100)"></strong>
                                                    </div>
                                                    <div class="subject" style="margin-top: 4px">
                                                        <span
                                                            x-text="getLimitedText((description), singleEmailView ? 40 : 150)"></span>
                                                    </div>
                                                    <div class="date">
                                                        {{ \Carbon\Carbon::parse($email['date'])->format('h:i a') }}
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <p>No draft emails.</p>
                                    @endforelse
                                    @if(count($draftEmails) > 9)

                                    <div class="pagination-container mx-5 mt-4 d-flex justify-content-between">
                                        {{-- Previous Page Button --}}
                                        @if ($previousPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $previousPageToken]) }}" class="btn btn-primary">
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </button>
                                        @endif

                                        {{-- Next Page Button --}}
                                        @if ($nextPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $nextPageToken]) }}" class="btn btn-primary">
                                            Next <i class="fa fa-arrow-right"></i>
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            Next <i class="fa fa-arrow-right"></i>
                                        </button>
                                        @endif
                                    </div>
                                    @endif
                                </div>

                                <!-- Trash Email List -->
                                <div x-show="activeTab === 'trash'">
                                    <h5>Trash Emails</h5>
                                    @forelse ($trashEmails ?? [] as $email)
                                    <div x-data="{ description: @js($email['snippet']), showSubject: @js($email['subject']) }">
                                        <div class="message"
                                            @click="selectedEmailRecord = {{ json_encode($email) }}; singleEmailView = true">
                                            <div class="d-flex align-items-center">
                                                <div class="custom-checkbox me-2">
                                                    <input type="checkbox" class="form-check-input" id="">
                                                    <label class="form-check-label" for="checkbox2"></label>
                                                </div>
                                                <a href="javascript:void(0)" class="col-mail col-mail-2">
                                                    <div class="" style="margin-top: -10px">
                                                        <strong
                                                            x-text="getLimitedText((showSubject), singleEmailView ? 40 : 100)"></strong>
                                                    </div>
                                                    <div class="subject" style="margin-top: 4px">
                                                        <span
                                                            x-text="getLimitedText((description), singleEmailView ? 40 : 150)"></span>
                                                    </div>
                                                    <div class="date">
                                                        {{ \Carbon\Carbon::parse($email['date'])->format('h:i a') }}
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <p>No emails in trash.</p>
                                    @endforelse
                                    @if(count($trashEmails) > 9)
                                    <div class="pagination-container mx-5 mt-4 d-flex justify-content-between">
                                        {{-- Previous Page Button --}}
                                        @if ($previousPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $previousPageToken]) }}" class="btn btn-primary">
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            <i class="fa fa-arrow-left"></i> Previous
                                        </button>
                                        @endif

                                        {{-- Next Page Button --}}
                                        @if ($nextPageToken)
                                        <a href="{{ route('inboxes.index', ['pageToken' => $nextPageToken]) }}" class="btn btn-primary">
                                            Next <i class="fa fa-arrow-right"></i>
                                        </a>
                                        @else
                                        <button class="btn" disabled>
                                            Next <i class="fa fa-arrow-right"></i>
                                        </button>
                                        @endif
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- third column for show single email -->
                <x-inbox.single-email />

            </div>
        </div>
    </div>
    </div>





    <!-- Email Sending Modal -->
    <div class="modal fade modal-lg modal-bottom-right" id="sendEmailModal" tabindex="-1"
        aria-labelledby="sendEmailModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            {{-- <div class="modal-content"> --}}

            <div class="modal-dialog modal-medium-fixed">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="sendEmailModalLabel">Send Email</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <form id="compose_email_modal">
                        <div class="modal-body py-3">
                            <div class="mb-3">
                                <label for="toEmail" class="form-label">To</label>
                                <input type="email" class="form-control form-control-sm" name="to"
                                    placeholder="Recipient email">
                            </div>
                            <div class="mb-3">
                                <label for="ccEmail" class="form-label">CC Email</label>
                                <select name="cc_email[]" class="form-control form-control-sm multiple_cc_emails"
                                    multiple>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="subject" class="form-label">Subject</label>
                                <input type="text" class="form-control form-control-sm" name="subject"
                                    placeholder="Email subject">
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control form-control-sm" name="description" rows="4" placeholder="Email body"></textarea>
                            </div>
                            {{-- </form> --}}
                        </div>
                        <div class="border-0 modal-footer pe-4 px-0 py-0 ">
                            <button type="button" class="btn btn-secondary btn-sm"
                                data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary btn-sm submit">Send</button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- </div> --}}
        </div>
    </div>
</x-content-body>
@include('layouts.includes.modals.google_auth')

@endsection
@if (session('google_auth'))
<!-- <script>
    document.addEventListener('DOMContentLoaded', function() {
        var welcomeModal = new bootstrap.Modal(document.getElementById('welcomeModal'));
        welcomeModal.show();
    });
    document.getElementById('verifyButton').addEventListener('click', function () {
    window.location.href = "{{ url('/gmail/login') }}";
  });
</script> -->
@endif

{{-- custom js --}}
@push('js')
<script>
    // Email validation function
    function isValidEmail(email) {
        var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }

    // Initialize select2 for multiple emails input
    $('.multiple_cc_emails').select2({
        tags: true,
        tokenSeparators: [',', ' '],
        createTag: function(params) {
            var term = $.trim(params.term);

            if (term === '') return null;

            if (!isValidEmail(term)) return null; // Return null if the term is not a valid email

            return {
                id: term,
                text: term,
                newTag: true
            };
        }
    });




    $('form[id="compose_email_modal"]').validate({
        rules: {
            to: {
                required: true
            },
            subject: {
                required: true
            },
            description: {
                required: true,
            },
        },
        messages: {
            to: {
                required: "to is required"
            },
            subject: {
                required: "subject is required"
            },
            description: {
                required: "description date is required",
            },
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            element.after(error);
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid').addClass('is-valid');
        },
        errorClass: 'text-danger',
        submitHandler: function(form) {

            // handleAjaxRequestForContact(form, "#edit-task-form", editTaskRoute, null, allTasksRoute, null);

            handleAjaxRequest(form, "#compose_email_modal", @json(route('inboxes.store')), null,
                @json(route('inboxes.index')), "#sendEmailModal", null);
        }
    });
</script>
@endpush