@include('partials.messages')

<style>
    .multi-select-dropdown { position: relative; }
    .multi-select-dropdown .dropdown-menu.show { display: block; }
</style>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">@lang('Filters')</h5>
        <form method="POST" action="{{ route('emails.send_bulk') }}" id="bulkEmailForm" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="MAX_FILE_SIZE" value="10485760"><!-- 10MB max -->

            <div class="row">
                <div class="col-md-3">
                    <label>@lang('All Users')</label>
                    <div class="d-flex align-items-center">
                        <input type="hidden" value="0" name="all_users">
                        <input type="checkbox" name="all_users" id="switch-all-users" class="switch" value="1">
                        <label for="switch-all-users"></label>
                    </div>
                </div>

                <div class="col-md-3">
                    <label>@lang('Groups')</label>
                    <div class="dropdown multi-select-dropdown" data-filter-group="group">
                        <button type="button" class="btn btn-outline-secondary form-control text-start dropdown-toggle">
                            <span class="ms-summary">@lang('Select Groups')</span>
                        </button>
                        <div class="dropdown-menu w-100 p-2" style="max-height:260px;overflow-y:auto">
                            @foreach($groups as $group)
                                <div class="form-check">
                                    <input class="form-check-input ms-checkbox" type="checkbox" name="group[]" value="{{ $group->id }}" id="group-{{ $group->id }}">
                                    <label class="form-check-label" for="group-{{ $group->id }}">{{ $group->name }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <label>@lang('Roles')</label>
                    <div class="dropdown multi-select-dropdown" data-filter-group="role_county">
                        <button type="button" class="btn btn-outline-secondary form-control text-start dropdown-toggle">
                            <span class="ms-summary">@lang('Select Roles')</span>
                        </button>
                        <div class="dropdown-menu w-100 p-2" style="max-height:260px;overflow-y:auto">
                            @foreach($roles as $roleId => $roleName)
                                <div class="form-check">
                                    <input class="form-check-input ms-checkbox" type="checkbox" name="role[]" value="{{ $roleId }}" id="role-{{ $roleId }}">
                                    <label class="form-check-label" for="role-{{ $roleId }}">{{ $roleName }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <label>@lang('Counties')</label>
                    <div class="dropdown multi-select-dropdown" data-filter-group="role_county">
                        <button type="button" class="btn btn-outline-secondary form-control text-start dropdown-toggle">
                            <span class="ms-summary">@lang('Select Counties')</span>
                        </button>
                        <div class="dropdown-menu w-100 p-2" style="max-height:260px;overflow-y:auto">
                            @foreach($counties as $countyId => $countyName)
                                <div class="form-check">
                                    <input class="form-check-input ms-checkbox" type="checkbox" name="county[]" value="{{ $countyId }}" id="county-{{ $countyId }}">
                                    <label class="form-check-label" for="county-{{ $countyId }}">{{ $countyName }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="col-md-3 mt-3 mt-md-0">
                    <label>@lang('Projects')</label>
                    <div class="dropdown multi-select-dropdown" data-filter-group="project">
                        <button type="button" class="btn btn-outline-secondary form-control text-start dropdown-toggle">
                            <span class="ms-summary">@lang('Select Projects')</span>
                        </button>
                        <div class="dropdown-menu w-100 p-2" style="max-height:260px;overflow-y:auto">
                            @foreach($projects as $projectId => $projectName)
                                <div class="form-check">
                                    <input class="form-check-input ms-checkbox" type="checkbox" name="project_id[]" value="{{ $projectId }}" id="project-{{ $projectId }}">
                                    <label class="form-check-label" for="project-{{ $projectId }}">{{ $projectName }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group mt-4">
                <label for="subject">@lang('Subject')</label>
                <input type="text" name="subject" class="form-control" id="subject" required>
            </div>

            <div class="form-group mt-4">
                <label for="message">@lang('Message')</label>
                <textarea name="message" id="message" class="form-control" rows="5" required></textarea>
            </div>

            <div class="form-group mt-4">
                <label for="attachments">@lang('Attachments')</label>
                <input type="file" name="attachments[]" class="form-control-file" id="attachments" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.zip,.rar,.txt" multiple>
                <small class="form-text text-muted">You may attach multiple files (each up to 10MB).</small>
                <div id="attachments-list" class="mt-2 text-muted" style="font-size:.95rem">No files selected.</div>
            </div>

            <button type="submit" class="btn btn-primary" disabled>@lang('Send Bulk Email')</button>
        </form>
    </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
$(document).ready(function() {

    // ── Manual dropdown toggle (avoids Bootstrap 4 vs 5 data-attribute
    // mismatch entirely — data-bs-toggle only works on Bootstrap 5) ──
    $('.multi-select-dropdown > button').on('click', function(e) {
        e.stopPropagation();
        const $menu = $(this).siblings('.dropdown-menu');
        const isOpen = $menu.hasClass('show');
        $('.multi-select-dropdown .dropdown-menu').removeClass('show'); // close any other open ones
        if (!isOpen && !$(this).prop('disabled')) {
            $menu.addClass('show');
        }
    });

    // Clicking inside the menu (checkbox or label) shouldn't close it
    $('.multi-select-dropdown .dropdown-menu').on('click', function(e) {
        e.stopPropagation();
    });

    // Click anywhere else closes all open dropdowns
    $(document).on('click', function() {
        $('.multi-select-dropdown .dropdown-menu').removeClass('show');
    });

    // Escape key closes them too
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape') {
            $('.multi-select-dropdown .dropdown-menu').removeClass('show');
        }
    });

    // ── Summary label on each dropdown button ───────────────────────
    function updateSummary($dropdown) {
        const $checked = $dropdown.find('.ms-checkbox:checked');
        const $summary = $dropdown.find('.ms-summary');
        if ($checked.length === 0) {
            $summary.text($summary.data('placeholder'));
        } else if ($checked.length === 1) {
            $summary.text($checked.first().closest('.form-check').find('label').text());
        } else {
            $summary.text($checked.length + ' selected');
        }
    }

    // Store each summary's original placeholder text once, on load
    $('.ms-summary').each(function() {
        $(this).data('placeholder', $(this).text());
    });

    $('.multi-select-dropdown').each(function() {
        updateSummary($(this));
    });

    $('.multi-select-dropdown').on('change', '.ms-checkbox', function() {
        const $dropdown = $(this).closest('.multi-select-dropdown');
        updateSummary($dropdown);
        evaluateFormState();
    });

    // ── Mutual exclusivity + submit button state ────────────────────
    function clearGroup(groupName) {
        $(`.multi-select-dropdown[data-filter-group="${groupName}"] .ms-checkbox`).prop('checked', false);
        $(`.multi-select-dropdown[data-filter-group="${groupName}"]`).each(function() {
            updateSummary($(this));
        });
    }

    function setGroupDisabled(groupName, disabled) {
        $(`.multi-select-dropdown[data-filter-group="${groupName}"] button`).prop('disabled', disabled);
        if (disabled) clearGroup(groupName);
    }

    function anyChecked(groupName) {
        return $(`.multi-select-dropdown[data-filter-group="${groupName}"] .ms-checkbox:checked`).length > 0;
    }

    function evaluateFormState() {
        const allUsers = $('#switch-all-users').is(':checked');
        const hasGroup = anyChecked('group');
        const hasRoleOrCounty = anyChecked('role_county');

        if (allUsers) {
            setGroupDisabled('group', true);
            setGroupDisabled('role_county', true);
        } else if (hasGroup) {
            setGroupDisabled('role_county', true);
            setGroupDisabled('group', false);
        } else if (hasRoleOrCounty) {
            setGroupDisabled('group', true);
            setGroupDisabled('role_county', false);
        } else {
            setGroupDisabled('group', false);
            setGroupDisabled('role_county', false);
        }

        // Project filter is independent — stays enabled regardless, since
        // the backend layers it on top of whichever primary filter is active.
        setGroupDisabled('project', false);

        const ready = allUsers || hasGroup || hasRoleOrCounty;
        $('#bulkEmailForm button[type="submit"]').prop('disabled', !ready);
    }

    $('#switch-all-users').change(evaluateFormState);
    evaluateFormState();

    $('#bulkEmailForm').on('submit', function(event) {
        var message = $('textarea[name="message"]').val();
        var subject = $('#subject').val();

        if (message.trim() === '') {
            alert('Please enter a message before sending.');
            event.preventDefault();
            return;
        }

        if (subject.trim() === '') {
            alert('Please enter a subject before sending.');
            event.preventDefault();
            return;
        }

        if ($('#switch-all-users').is(':checked')) {
            if (!confirm('Are you sure you want to send bulk emails to all users excluding those in groups?')) {
                event.preventDefault();
            }
        }
    });

    function setupAttachmentManager(inputId, listId) {
        const input = document.getElementById(inputId);
        const list = document.getElementById(listId);
        if (!input || !list || typeof DataTransfer === 'undefined') {
            return;
        }

        let selectedFiles = [];

        function fileKey(file) {
            return [file.name, file.size, file.lastModified].join('|');
        }

        function renderFiles() {
            if (!selectedFiles.length) {
                list.innerHTML = 'No files selected.';
                return;
            }
            list.innerHTML = selectedFiles.map(file => {
                return `<div class="d-flex justify-content-between align-items-center py-1">
                    <span>${file.name}</span>
                    <button type="button" class="btn btn-sm btn-link text-danger remove-file" data-key="${fileKey(file)}">Remove</button>
                </div>`;
            }).join('');
            list.querySelectorAll('.remove-file').forEach(btn => {
                btn.addEventListener('click', function() {
                    const key = this.dataset.key;
                    selectedFiles = selectedFiles.filter(file => fileKey(file) !== key);
                    updateInputFiles();
                    renderFiles();
                });
            });
        }

        function updateInputFiles() {
            const dt = new DataTransfer();
            selectedFiles.forEach(file => dt.items.add(file));
            input.files = dt.files;
        }

        input.addEventListener('change', function() {
            for (const file of Array.from(input.files)) {
                const key = fileKey(file);
                if (!selectedFiles.some(existing => fileKey(existing) === key)) {
                    selectedFiles.push(file);
                }
            }
            updateInputFiles();
            renderFiles();
        });

        renderFiles();
    }

    setupAttachmentManager('attachments', 'attachments-list');

    if (typeof $.fn.summernote !== 'undefined') {
        $('#message').summernote({
            height: 220,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview']]
            ]
        });
    }
});
</script>