@extends('admin.master_layout')
@section('title')
<title>{{ __('Contact Emails') }}</title>
@endsection

@push('css')
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Other CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
    .ck-editor__editable_inline {
        min-height: 300px;
    }
    .select2-container {
        width: 100% !important;
    }
    #searchInput {
        margin-bottom: 15px;
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .badge {
        margin-right: 5px;
    }
    .select2-container .select2-selection--multiple {
        min-height: 38px;
        border: 1px solid #ced4da;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        border-color: #006fe6;
        color: #fff;
        padding: 3px 8px;
        margin-top: 4px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
        margin-right: 5px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #fff;
        opacity: 0.8;
    }
    .group-count {
        color: #666;
        font-size: 0.9em;
    }
    .btn-group {
        gap: 5px;
    }
    .btn-group .btn {
        border-radius: 4px !important;
    }
    .pagination {
        margin-bottom: 0;
    }
    .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    .table-active {
        background-color: rgba(0, 123, 255, 0.1) !important;
    }
    .table-active:hover {
        background-color: rgba(0, 123, 255, 0.15) !important;
    }
</style>
@endpush

@section('admin-content')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>{{ __('Send Email to Contacts') }}</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="{{ route('admin.dashboard') }}">{{ __('admin.Dashboard') }}</a></div>
                <div class="breadcrumb-item">{{ __('Contact Emails') }}</div>
            </div>
        </div>
        <form action="{{ route('admin.send-contact-email') }}" method="POST" id="emailForm">
        @csrf
                            
        <div class="section-body">
            <!-- Send Email Card -->
            <div class="row mt-4">
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            <h4>{{ __('Send Email to Contacts') }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>{{ __('Email Template') }}</label>
                                        <select name="template" id="template" class="form-control">
                                            <option value="">{{ __('Select Template') }}</option>
                                            @foreach($emailTemplates as $template)
                                                <option value="{{ $template->id }}">{{ $template->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>{{ __('admin.Subject') }}</label>
                                        <input type="text" name="subject" id="subject" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>{{ __('admin.Message') }}</label>
                                <textarea name="message" id="message" class="editor"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">{{ __('admin.Send Email') }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contacts List Card -->
            <div class="row mt-4">
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            <h4>{{ __('Contact List') }}</h4>
                        </div>
                        <div class="card-body">
    <!-- Groups and Actions Row -->
                            <div class="row mb-4">
                                <!-- Group Selection -->
                                <div class="col-md-4">
                                    <div class="form-group mb-0">
                                        <label class="mb-2">{{ __('Select Groups') }}</label>
                                        <select class="form-control select2" id="groupSelect" multiple>
                                            <option value="">{{ __('All Groups') }}</option>
                                            @foreach($groups as $group)
                                                <option value="{{ $group->id }}">
                                                    <span class="group-name">{{ $group->name }}</span>
                                                    <span class="group-count">({{ $group->contacts->count() }} contacts)</span>
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Action Buttons -->
                                <div class="col-md-8">
                                    <div class="d-flex justify-content-end h-100 align-items-end">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary" id="sendSelected">
                                                <i class="fas fa-envelope"></i> {{ __('Send Email to Selected') }}
                                            </button>
                                            <button type="button" class="btn btn-info" id="sendAll">
                                                <i class="fas fa-envelope-open"></i> {{ __('Send Email to All') }}
                                            </button>
                                            <button type="button" class="btn btn-secondary" id="selectAll">
                                                <i class="fas fa-check-square"></i> {{ __('Select All') }}
                                            </button>
                                            <button type="button" class="btn btn-secondary" id="deselectAll">
                                                <i class="fas fa-square"></i> {{ __('Deselect All') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Search Input -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <input type="text" id="searchInput" class="form-control" placeholder="{{ __('Search contacts...') }}">
                                </div>
                            </div>

                            <!-- Contacts Table -->
                            <div class="table-responsive">
                                <table class="table table-striped" id="contactTable">
                                    <thead>
                                        <tr>
                                            <th width="5%"><input type="checkbox" id="checkAll"></th>
                                            <th width="25%">{{ __('admin.Name') }}</th>
                                            <th width="35%">{{ __('admin.Email') }}</th>
                                            <th width="35%">{{ __('Groups') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="contactsTableBody">
                                        @include('admin.partials.contacts_table')
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pagination -->
                            <div class="d-flex justify-content-between align-items-center mt-4">
                                <div class="pagination-info">
                                    {{ __('Showing page') }} {{ $contacts->currentPage() }} {{ __('of') }} {{ $contacts->lastPage() }}
                                </div>
                                <div class="pagination-links">
                                    {{ $contacts->links('pagination::bootstrap-4') }}
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        </form>
    </section>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    let messageEditor;
    let currentPage = 1;
    let selectedGroups = [];
    let selectedContacts = new Set();
    let highlightedContacts = new Set();

    // Initialize CKEditor
    ClassicEditor.create(document.querySelector('#message'))
    .then(editor => {
        messageEditor = editor;
    })
    .catch(error => console.error(error));

    // Initialize Select2 with custom template
    $('.select2').select2({
        placeholder: "{{__('Select Groups')}}",
        allowClear: true,
        templateResult: formatGroup,
        templateSelection: formatGroupSelection
    });

    function formatGroup(group) {
        if (!group.id) return group.text;
        return $(`<span>${group.text}</span>`);
    }

    function formatGroupSelection(group) {
        if (!group.id) return group.text;
        return $(`<span>${group.text.split('(')[0]}</span>`);
    }

    // Initialize select2
    $('#groupSelect').select2({
        placeholder: "{{ __('Select Groups') }}",
        allowClear: true,
        width: '100%'
    });

    // Modified group selection handler
    $('#groupSelect').on('change', function() {
        const selectedGroups = $(this).val() || [];
        highlightedContacts.clear();
        
        if (selectedGroups.length > 0) {
            $('#contactTable tbody tr').each(function() {
                const $row = $(this);
                const contactId = $row.find('.contact-checkbox').val();
                const contactGroupIds = $row.find('.contact-groups').data('groups').toString().split(',');
                
                const belongsToSelectedGroup = selectedGroups.some(groupId => 
                    contactGroupIds.includes(groupId.toString())
                );

                if (belongsToSelectedGroup) {
                    highlightedContacts.add(contactId);
                }
            });
        }
        
        loadContacts(1, selectedGroups, true);
    });

    // Modified loadContacts function
    function loadContacts(page, selectedGroups = [], autoCheck = false) {
        $.ajax({
            url: '{{ route("admin.contacts_email") }}',
            method: 'GET',
            data: { page: page },
            success: function(response) {
                $('#contactsTableBody').html(response.html);
                $('.pagination-links').html(response.pagination);
                
                $('#contactTable tbody tr').each(function() {
                    const $row = $(this);
                    const checkbox = $row.find('.contact-checkbox');
                    const contactId = checkbox.val();

                    if (highlightedContacts.has(contactId)) {
                        $row.addClass('table-active');
                        if (autoCheck) {
                            checkbox.prop('checked', true);
                            selectedContacts.add(contactId);
                        }
                    }

                    if (selectedContacts.has(contactId)) {
                        checkbox.prop('checked', true);
                    }
                });
                
                updateSelectAllCheckbox();
                currentPage = page;
            },
            error: function(xhr) {
                console.error('Error loading contacts:', xhr);
                toastr.error('{{ __("Error loading contacts") }}');
            }
        });
    }

    // Handle pagination clicks
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        const page = $(this).attr('href').split('page=')[1];
        const selectedGroups = $('#groupSelect').val() || [];
        loadContacts(page, selectedGroups, false);
    });

    // Modified checkbox handlers
    $(document).on('change', '#checkAll', function() {
        const isChecked = $(this).prop('checked');
        $('.contact-checkbox:not(:disabled)').each(function() {
            $(this).prop('checked', isChecked);
            if (isChecked) {
                selectedContacts.add($(this).val());
            } else {
                selectedContacts.delete($(this).val());
            }
        });
    });

    $(document).on('change', '.contact-checkbox', function() {
        const contactId = $(this).val();
        if ($(this).is(':checked')) {
            selectedContacts.add(contactId);
        } else {
            selectedContacts.delete(contactId);
        }
        updateSelectAllCheckbox();
    });

    function updateSelectAllCheckbox() {
        const visibleCheckboxes = $('.contact-checkbox:not(:disabled)');
        const checkedVisibleCheckboxes = visibleCheckboxes.filter(':checked');
        
        $('#checkAll').prop({
            'checked': visibleCheckboxes.length > 0 && 
                      visibleCheckboxes.length === checkedVisibleCheckboxes.length,
            'indeterminate': checkedVisibleCheckboxes.length > 0 && 
                           checkedVisibleCheckboxes.length < visibleCheckboxes.length
        });
    }

    // Modified Select All button handler
    $('#selectAll').on('click', function() {
        const selectedGroups = $('#groupSelect').val() || [];
        if (selectedGroups.length === 0) {
            // If no groups selected, select all visible contacts
            $('.contact-checkbox:not(:disabled)').each(function() {
                $(this).prop('checked', true);
                selectedContacts.add($(this).val());
            });
        } else {
            // If groups selected, reload and select all filtered contacts
            loadContacts(currentPage, selectedGroups, true);
        }
        updateSelectAllCheckbox();
    });

    // Modified Deselect All button handler
    $('#deselectAll').on('click', function() {
        $('.contact-checkbox').each(function() {
            $(this).prop('checked', false);
            selectedContacts.delete($(this).val());
        });
        updateSelectAllCheckbox();
    });

    // Handle email template selection
    $('#template').change(function() {
        var templateId = $(this).val();
        if (templateId) {
            $.ajax({
                url: "{{ route('admin.get-email-template') }}",
                type: "GET",
                data: { id: templateId },
                success: function(response) {
                    $('#subject').val(response.subject);
                    if (messageEditor) {
                        messageEditor.setData(response.description);
                    }
                },
                error: function() {
                    toastr.error('{{ __("admin.Error loading template") }}');
                }
            });
        } else {
            $('#subject').val('');
            if (messageEditor) {
                messageEditor.setData('');
            }
        }
    });

    // Modified send email to selected contacts
    $('#sendSelected').on('click', function(e) {
        e.preventDefault();
        
        if (selectedContacts.size === 0) {
            toastr.error("{{__('Please select at least one contact')}}");
            return;
        }

        const formData = new FormData($('#emailForm')[0]);
        formData.append('contact_ids', Array.from(selectedContacts));

        sendEmail(formData);
    });

    // Modified send email to all contacts
    $('#sendAll').on('click', function() {
        $('.contact-checkbox').each(function() {
            selectedContacts.add($(this).val());
            $(this).prop('checked', true);
        });
        updateSelectAllCheckbox();
        $('#sendSelected').click();
    });

    // Function to send email
    function sendEmail(formData) {
        Swal.fire({
            title: "{{__('Sending emails...')}}",
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: "{{ route('admin.send-contact-email') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                Swal.close();
                if (response.success) {
                    toastr.success("{{__('Email sent successfully')}}");
                } else {
                    toastr.error(response.message || "{{__('Error sending email')}}");
                }
            },
            error: function() {
                Swal.close();
                toastr.error("{{__('Error sending email')}}");
            }
        });
    }

    // Add some CSS for visual distinction
    $('<style>')
        .text(`
            .table-active {
                background-color: rgba(0, 123, 255, 0.1) !important;
            }
            .table-active:hover {
                background-color: rgba(0, 123, 255, 0.15) !important;
            }
        `)
        .appendTo('head');
});
</script>

@endsection