@extends('layouts.app')

@section('title', 'Direct Outreach — Manual Email')

@section('content')
<div class="row">
    <div class="col-md-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Manual Email</h2>
                <div class="clearfix"></div>
            </div>

            <div class="x_content">
                {{-- Mode toggle: filter segment vs CSV upload --}}
                <div class="row" style="margin-bottom:16px;">
                    <div class="col-md-12">
                        <label class="control-label" style="margin-right:12px;">Send to:</label>
                        <label style="margin-right:20px; font-weight:normal;">
                            <input type="radio" name="outreachMode" value="filter" checked> Filter segment
                        </label>
                        <label style="font-weight:normal;">
                            <input type="radio" name="outreachMode" value="csv"> Upload CSV (user IDs)
                        </label>
                    </div>
                </div>
                {{-- Section 1: filters --}}
                <form id="outreachFilterForm" class="form-horizontal">
                    @csrf
                    <div id="outreachFilterFields">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="control-label">Signup From Date</label>
                            <input type="date" name="dDateFrom" id="dDateFrom" class="form-control">
                            <span class="text-danger error" id="error_dDateFrom"></span>
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Signup To Date</label>
                            <input type="date" name="dDateTo" id="dDateTo" class="form-control">
                            <span class="text-danger error" id="error_dDateTo"></span>
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Smoking Status</label>
                            <select name="SmokingStatus" class="form-control">
                                <option value="">All</option>
                                <option value="Free">Free</option>
                                <option value="Relapsed">Relapsed</option>
                                <option value="Restarted">Restarted</option>
                                <option value="Smoker">Smoker</option>
                            </select>
                            <span class="text-danger error" id="error_SmokingStatus"></span>
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Country</label>
                            <select name="vCountry" class="form-control">
                                <option value="">All</option>
                                @foreach ($countries as $c)
                                    <option value="{{ $c->vCountry }}">{{ $c->vCountry }}</option>
                                @endforeach
                            </select>
                            <span class="text-danger error" id="error_vCountry"></span>
                        </div>
                    </div>

                    <div class="row" style="margin-top:12px;">
                        
                        <div class="col-md-3">
                            <label class="control-label">Device</label>
                            <select name="vDeviceType" class="form-control">
                                <option value="">All</option>
                                <option value="android">Android</option>
                                <option value="ios">iOS</option>
                            </select>
                            <span class="text-danger error" id="error_vDeviceType"></span>
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Subscribed ?</label><br>
                            <input type="hidden" name="bSubscribed" value="0">
                            <input type="checkbox" class="js-switch" id="bSubscribed" name="bSubscribed" value="1">
                            <span class="text-danger error" id="error_bSubscribed"></span>
                        </div>


                        <div class="col-md-3">
                            <label class="control-label">Previously Subscribed ?</label>
                            <select name="bPreviouslySubscribed" class="form-control">
                                <option value="">No filter</option>
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                            <span class="text-danger error" id="error_bPreviouslySubscribed"></span>
                        </div>
                        
                        <div class="col-md-3">
                            <label class="control-label">First Sub Date</label>
                            <select name="dFirstSubDate" class="form-control">
                                <option value="">No filter</option>
                                <option value="null">Null</option>
                                <option value="notnull">Not Null</option>
                            </select>
                            <span class="text-danger error" id="error_dFirstSubDate"></span>
                        </div>
                    </div>

                    <div class="row" style="margin-top:12px;">
                        <div class="col-md-3">
                            <label class="control-label">Active ?</label>
                            <select name="bActive" class="form-control">
                                <option value="">No filter</option>
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                            <span class="text-danger error" id="error_bActive"></span>
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Test User ?</label><br>
                            <input type="hidden" name="bTestUser" value="0">
                            <input type="checkbox" id="bTestUser" class="js-switch" name="bTestUser" value="1">
                            <span class="text-danger error" id="error_bTestUser"></span>
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Transact Subscribed ?</label>
                            <select name="bTransactSubscribed" class="form-control">
                                <option value="">No filter</option>
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                            <span class="text-danger error" id="error_bTransactSubscribed"></span>
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Email Subscribed ?</label>
                            <select name="bEmailSubscribed" class="form-control">
                                <option value="">No filter</option>
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                            <span class="text-danger error" id="error_bEmailSubscribed"></span>
                        </div>
                    </div>

                    </div>

                    {{-- CSV upload (hidden unless CSV mode) --}}
                    <div id="outreachCsvFields" class="row" style="display:none;">
                        <div class="col-md-6">
                            <label class="control-label">CSV file — one user ID per line (optional header row is ignored)</label>
                            <input type="file" id="outreachCsvFile" name="csvFile" accept=".csv,.txt" class="form-control">
                            <span class="text-danger error" id="error_csvFile"></span>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px;">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-success" id="applyFiltersBtn">Apply</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        {{-- Section 2: shown after Apply --}}
        <div id="outreachSendSection" class="x_panel" style="margin-top:20px; display:none;">
            <div class="x_title"><h3>Send Email</h3><div class="clearfix"></div></div>
            <div class="x_content">
                <p id="outreachUserCountMessage"><strong><span id="outreachUserCount">0</span></strong> users fall within this criteria</p>
                <div class="form-group">
                    <label class="control-label">Postmark Template</label>
                    <input type="text" id="outreachTemplateAlias" class="form-control">
                    <span class="text-danger error" id="error_outreachTemplateAlias"></span>
                </div>
                <button type="button" class="btn btn-primary" id="sendOutreachBtn">Send Email</button>

                <div id="outreachProgressWrap" style="margin-top:20px; display:none;">
                    <div class="progress">
                        <div id="outreachProgressBar" class="progress-bar progress-bar-success" style="width:0%">0%</div>
                    </div>
                    <p id="outreachProgressLabel">Starting...</p>
                </div>
            </div>
        </div>

        {{-- Confirm modal --}}
        <div id="outreachConfirmModal" class="modal" tabindex="-1" role="dialog" style="display:none;">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header"><h4 class="modal-title">Confirm Send</h4></div>
                    <div class="modal-body"><p id="outreachConfirmBody"></p></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="outreachConfirmNo">No</button>
                        <button type="button" class="btn btn-primary" id="outreachConfirmYes">Yes</button>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

<script>
window.outreachRoutes = {
    compute: "{{ route('outreach.compute-segment') }}",
    dispatch: "{{ route('outreach.dispatch') }}",
    statusBase: "{{ url('outreach/manual-email/status') }}",
};
// If there's a running job when the page loads (e.g. after a refresh), resume polling
@php
    $activeJobData = $activeJob
        ? ['jobId' => $activeJob->iOutreachJobID, 'total' => $activeJob->iTotal, 'sent' => $activeJob->iSent, 'failed' => $activeJob->iFailed]
        : null;
@endphp
window.activeOutreachJob = {!! json_encode($activeJobData) !!};
</script>

@endsection

@push('scripts')
    <script type="module">
        $(function() {
            const progressWrap = document.getElementById('outreachProgressWrap');
            const progressBar = document.getElementById('outreachProgressBar');
            const progressLabel = document.getElementById('outreachProgressLabel');

            function currentOutreachMode() {
                return $('input[name="outreachMode"]:checked').val() || 'filter';
            }

            $('input[name="outreachMode"]').on('change', function() {
                $('.error').html('');
                $('#outreachSendSection').hide();
                progressWrap.style.display = 'none';
                if (currentOutreachMode() === 'csv') {
                    $('#outreachFilterFields').hide();
                    $('#outreachCsvFields').show();
                } else {
                    $('#outreachCsvFields').hide();
                    $('#outreachFilterFields').show();
                }
            });

            $("#applyFiltersBtn").click(function() {
                var mode = currentOutreachMode();
                $('.error').html('');
                progressWrap.style.display = 'none';

                if (mode === 'csv') {
                    if (!document.getElementById('outreachCsvFile').files[0]) {
                        alert('Please choose a CSV file.');
                        return false;
                    }
                } else {
                    var fromDate = $('#dDateFrom').val();
                    var toDate = $('#dDateTo').val();
                    if (fromDate == "" || toDate == "") {
                        alert('Please select both From and To dates.');
                        return false;
                    }
                    if (new Date(fromDate) > new Date(toDate)) {
                        alert("From date cannot be greater than the To date");
                        return false;
                    }
                }

                $(this).attr('disabled', true).text('Computing...');
                $('#outreachSendSection').hide(function () {
                    $('#outreachUserCount').text(0);
                });

                var ajaxOpts = {
                    url: '{{ route('outreach.compute-segment') }}',
                    type: 'POST',
                    success: function(response) {
                        $('#outreachSendSection').show(function () {
                            $('#outreachUserCount').text(response.count);
                        });
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function(key, messages) {
                                $('#error_' + key).html(messages[0]);
                            });
                        }
                    },
                    complete: function() {
                        $("#applyFiltersBtn").attr('disabled', false).text('Apply');
                    }
                };

                if (mode === 'csv') {
                    var fd = new FormData();
                    fd.append('mode', 'csv');
                    fd.append('csvFile', document.getElementById('outreachCsvFile').files[0]);
                    fd.append('_token', '{{ csrf_token() }}');
                    ajaxOpts.data = fd;
                    ajaxOpts.processData = false;
                    ajaxOpts.contentType = false;
                } else {
                    ajaxOpts.data = $('#outreachFilterForm').serialize() + '&mode=filter';
                }

                $.ajax(ajaxOpts);
            });

            $('#sendOutreachBtn').click(function() {
                $('#error_outreachTemplateAlias').html('');
                var templateAlias = $('#outreachTemplateAlias').val().trim();
                if (!templateAlias) {
                    $('#error_outreachTemplateAlias').html('Please enter a Postmark template alias.');
                    return;
                }

                $('#outreachConfirmBody').text(`Are you sure you want to send the ${templateAlias} email to ${$('#outreachUserCount').text()} users?`);
                $('#outreachConfirmModal').show();
            });

            $('#outreachConfirmYes').click(function() {
                $('#outreachConfirmModal').hide();
                $('#sendOutreachBtn').attr('disabled', true);

                progressWrap.style.display = 'block';
                progressBar.style.width = '0%';
                progressBar.textContent = '0%';
                progressBar.classList.remove('progress-bar-danger');
                progressBar.classList.add('progress-bar-success');
                progressLabel.textContent = 'Dispatching...';

                var templateAlias = $('#outreachTemplateAlias').val().trim();
                var mode = currentOutreachMode();

                var ajaxOpts = {
                    url: '{{ route('outreach.dispatch') }}',
                    type: 'POST',
                    success: function(response) {
                        if (!response || !response.jobId) {
                            progressLabel.textContent = 'Failed to dispatch.';
                            $('#sendOutreachBtn').attr('disabled', false);
                            return;
                        }
                        pollStatus(response.jobId);
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            $('#error_outreachTemplateAlias').html(xhr.responseJSON.error);
                            progressWrap.style.display = 'none';
                        } else {
                            progressLabel.textContent = 'Failed to dispatch.';
                        }
                        $('#sendOutreachBtn').attr('disabled', false);
                    }
                };

                if (mode === 'csv') {
                    var fd = new FormData();
                    fd.append('mode', 'csv');
                    fd.append('csvFile', document.getElementById('outreachCsvFile').files[0]);
                    fd.append('templateAlias', templateAlias);
                    fd.append('_token', '{{ csrf_token() }}');
                    ajaxOpts.data = fd;
                    ajaxOpts.processData = false;
                    ajaxOpts.contentType = false;
                } else {
                    ajaxOpts.data = $('#outreachFilterForm').serialize()
                        + '&mode=filter'
                        + '&templateAlias=' + encodeURIComponent(templateAlias);
                }

                $.ajax(ajaxOpts);
            });

            $('#outreachConfirmNo').click(function() {
                $('#outreachConfirmModal').hide();
            });

            // On page load: if there's an active running job, resume progress polling
            if (window.activeOutreachJob) {
                var aj = window.activeOutreachJob;
                $('#outreachSendSection').show();
                $('#outreachUserCount').text(aj.total);
                progressWrap.style.display = 'block';
                $('#sendOutreachBtn').attr('disabled', true);

                var done = (aj.sent || 0) + (aj.failed || 0);
                var pct = aj.total > 0 ? Math.round((done / aj.total) * 100) : 0;
                progressBar.style.width = pct + '%';
                progressBar.textContent = pct + '%';
                progressLabel.textContent = 'Resuming... Sent ' + aj.sent + ' / ' + aj.total + ' (failed ' + aj.failed + ')';

                pollStatus(aj.jobId);
            }

            function pollStatus(jobId) {
                var statusUrl = window.outreachRoutes.statusBase + '/' + encodeURIComponent(jobId);

                function tick() {
                    $.ajax({
                        url: statusUrl,
                        type: 'GET',
                        dataType: 'json',
                        success: function(s) {
                            if (s.state === 'invalid_template') {
                                progressLabel.textContent = s.error || 'Invalid Postmark template.';
                                progressBar.classList.remove('progress-bar-success');
                                progressBar.classList.add('progress-bar-danger');
                                $('#sendOutreachBtn').attr('disabled', false);
                                return;
                            }

                            var done = (s.sent || 0) + (s.failed || 0);
                            var pct = s.total > 0 ? Math.round((done / s.total) * 100) : 0;
                            progressBar.style.width = pct + '%';
                            progressBar.textContent = pct + '%';
                            progressLabel.textContent = 'Sent ' + (s.sent || 0) + ' / ' + s.total + ' (failed ' + (s.failed || 0) + ')';

                            if (s.state === 'complete') {
                                progressLabel.textContent = 'Done. Sent ' + s.sent + ', failed ' + s.failed + '.';
                                $('#sendOutreachBtn').attr('disabled', false);
                                return;
                            }

                            setTimeout(tick, 5000);
                        },
                        error: function() {
                            progressLabel.textContent = 'Lost progress tracking.';
                            $('#sendOutreachBtn').attr('disabled', false);
                        }
                    });
                }

                tick();
            }
        });
    </script>
@endpush