Subversion Repositories SmartDukaan

            <th>Beat</th>

            <th>Day</th>

            <th>Planned</th>

                #set($userBeats = $row.get("beats"))

                #if($userBeats && $userBeats.size() > 0)

                    <td>

                        #foreach($b in $userBeats)

                            <span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:#if($b.get(

                                'beatColor'))$b.get('beatColor')#else#3498db#end;margin-right:5px;"></span>$b.get(

                            "beatName")<br>

                        #end

                    </td>

                    <td>

                        #foreach($b in $userBeats)

                            $b.get("dayNumber")<br>

                        #end

                    </td>

                    <td>

                        #foreach($b in $userBeats)

                            <strong>$b.get("totalCount")</strong><br>

                        #end

                    </td>

                #else

                    <td colspan="3" style="color:#999; text-align:center; font-style:italic;">No beat scheduled</td>

                #end

                <td style="white-space:nowrap;">

                       style="cursor:pointer; margin-right:6px;"><i class="fa fa-map-marker"

                                                                    style="color:#1abc9c; font-size:18px;"></i></a>

                    #if($userBeats && $userBeats.size() > 0)

                        #foreach($b in $userBeats)

                            <button class="btn btn-xs btn-info beat-view-calendar" title="View Calendar"

                                    data-userid="$b.get('authUserId')"

                                    data-username="$row.get('username').replace('"', '\"')"><i class="fa fa-eye"></i>

                            </button>

                            <button class="btn btn-xs btn-warning beat-edit-on-date" title="Edit Beat"

                                    data-userid="$b.get('authUserId')"

                                    data-username="$row.get('username').replace('"', '\"')"

                                    data-beatid="$b.get('beatId')"

                                    data-date="$b.get('scheduleDate')"><i class="fa fa-edit"></i></button>

                            <button class="btn btn-xs btn-success beat-assign-visit" title="Assign Visit"

                                    data-userid="$b.get('authUserId')"

                                    data-username="$row.get('username').replace('"', '\"')"

                                    data-beatid="$b.get('beatId')"

                                    data-date="$b.get('scheduleDate')"><i class="fa fa-plus-circle"></i></button>

                            <br>

                        #end

                    #end

                </td>

<!-- Beat calendar modal (iframe loads /beatPlanWindow with auto-selected user) -->

<div class="modal fade" id="reportBeatCalendarModal" tabindex="-1" style="overflow-y:auto;">

    <div class="modal-dialog" style="width:95%; max-width:1300px; margin-top:20px;">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"

                        onclick="$('#reportBeatCalendarFrame').attr('src','');">×

                </button>

                <h4 class="modal-title" id="reportBeatCalendarTitle">Calendar</h4>

            </div>

            <div class="modal-body" style="padding:0;">

                <iframe id="reportBeatCalendarFrame" style="width:100%; height:80vh; border:none;"></iframe>

            </div>

        </div>

    </div>

</div>

<script>

    $(document).on('click', '.beat-view-calendar', function () {

        var userId = $(this).data('userid');

        var userName = $(this).data('username') || '';

        var url = context + '/beatPlanWindow?autoUserId=' + userId

                + '&autoUserName=' + encodeURIComponent(userName);

        $('#reportBeatCalendarTitle').text('Calendar - ' + userName);

        $('#reportBeatCalendarFrame').attr('src', url);

        $('#reportBeatCalendarModal').modal('show');

    });

    $(document).on('click', '.beat-edit-on-date', function () {

        var userId = $(this).data('userid');

        var userName = $(this).data('username') || '';

        var beatId = $(this).data('beatid');

        var date = $(this).data('date');

        var url = context + '/beatPlanWindow?autoUserId=' + userId

                + '&autoUserName=' + encodeURIComponent(userName)

                + '&editBeatId=' + beatId + '&editDate=' + date;

        $('#reportBeatCalendarTitle').text('Edit Beat - ' + userName + ' on ' + date);

        $('#reportBeatCalendarFrame').attr('src', url);

        $('#reportBeatCalendarModal').modal('show');

    });

    // ---------- ASSIGN VISIT (mirrors Beat Day View; IDs/classes prefixed with `r` to avoid collisions) ----------

    var rAvContext = {authUserId: null, userName: '', date: '', beatId: null, allParties: [], agendaOptions: []};

    var R_AGENDA_MULTISELECT_OPTS = {

        includeSelectAllOption: false,

        maxHeight: 220,

        buttonWidth: '240px',

        numberDisplayed: 2,

        nonSelectedText: 'Pick agenda(s)',

        nSelectedText: ' agendas',

        allSelectedText: 'All agendas',

        enableFiltering: true,

        enableCaseInsensitiveFiltering: true

    };

    function rAgendaSelectHtml(p) {

        var preset = {};

        (p.existingAgendas || []).forEach(function (a) {

            preset[a] = true;

        });

        var html = '<select multiple class="r-av-party-agenda" data-fofoid="' + p.fofoStoreId + '">';

        rAvContext.agendaOptions.forEach(function (opt) {

            html += '<option value="' + opt + '"' + (preset[opt] ? ' selected' : '') + '>' + opt + '</option>';

        });

        html += '</select>';

        return html;

    }

    function rRebuildDefaultAgenda() {

        var $sel = $('#rAvDefaultAgenda');

        try {

                $sel.multiselect('destroy');

        } catch (e) {

        }

        var html = '';

        rAvContext.agendaOptions.forEach(function (opt) {

            html += '<option value="' + opt + '">' + opt + '</option>';

        });

            $sel.html(html);

        var defaultOpts = $.extend({}, R_AGENDA_MULTISELECT_OPTS);

        defaultOpts.nonSelectedText = 'Pick agenda(s) to apply';

            $sel.multiselect(defaultOpts);

    }

    function rInitRowMultiselects() {

        $('.r-av-party-agenda').each(function () {

            var $sel = $(this);

            try {

                    $sel.multiselect('destroy');

            } catch (e) {

            }

                $sel.multiselect(R_AGENDA_MULTISELECT_OPTS);

        });

    }

    function rUpdateAvSelectedCount() {

        var n = $('.r-av-party-chk:checked').length;

        $('#rAvSelectedCount').text(n + ' selected');

        $('#rAvSubmit').prop('disabled', n === 0);

    }

    function rRenderAvParties(list) {

        if (!list || list.length === 0) {

            $('#rAvPartyList').html('<div style="padding:20px; color:#999; text-align:center;">No parties found.</div>');

            return;

        }

        var html = '<table class="table table-condensed table-hover" style="margin-bottom:0; font-size:13px;">';

        html += '<thead><tr>'

                + '<th style="width:30px;"><input type="checkbox" id="rAvSelectAll" title="Select all"></th>'

                + '<th>Code</th><th>Outlet</th><th>City</th>'

                + '<th style="width:260px;">Agenda</th>'

                + '<th style="width:260px;">Description</th>'

                + '</tr></thead><tbody>';

        list.forEach(function (p) {

            var safeName = (p.outletName || '').replace(/"/g, '"');

            var existingDesc = (p.existingDescription || '').replace(/"/g, '"');

            html += '<tr>'

                    + '<td><input type="checkbox" class="r-av-party-chk" '

                    + 'data-fofoid="' + p.fofoStoreId + '" '

                    + 'data-name="' + safeName + '" '

                    + 'data-lat="' + (p.latitude || '') + '" '

                    + 'data-lng="' + (p.longitude || '') + '"></td>'

                    + '<td>' + (p.code || '') + '</td>'

                    + '<td>' + (p.outletName || '') + '</td>'

                    + '<td>' + (p.city || '') + '</td>'

                    + '<td>' + rAgendaSelectHtml(p) + '</td>'

                    + '<td><textarea class="form-control input-sm r-av-party-desc"'

                    + ' data-fofoid="' + p.fofoStoreId + '"'

                    + ' rows="2" placeholder="Optional notes..."'

                    + ' style="resize:vertical; min-height:34px;">' + existingDesc + '</textarea></td>'

                    + '</tr>';

        });

        html += '</tbody></table>';

        $('#rAvPartyList').html(html);

        rInitRowMultiselects();

        rUpdateAvSelectedCount();

    }

    $(document).on('click', '.beat-assign-visit', function () {

        rAvContext.authUserId = $(this).data('userid');

        rAvContext.userName = $(this).data('username') || '';

        rAvContext.date = $(this).data('date');

        rAvContext.beatId = $(this).data('beatid');

        rAvContext.allParties = [];

        $('#rAvTitle').text('Assign Visit - ' + rAvContext.userName + ' on ' + rAvContext.date);

        $('#rAvSearch').val('');

        $('#rAvPartyList').html('<div style="padding:20px; color:#999; text-align:center;">Loading parties...</div>');

        $('#rAvMsg').text('');

        $('#rAvSelectedCount').text('0 selected');

        $('#rAvSubmit').prop('disabled', true);

        $('#rAssignVisitModal').modal('show');

        $.get(context + '/beatPlan/assignVisit/parties', {

            authUserId: rAvContext.authUserId,

            date: rAvContext.date,

            beatId: rAvContext.beatId

        }).done(function (r) {

            var data = r.response || r;

            rAvContext.allParties = (data.parties || []).filter(function (p) {

                return !p.inBeat;

            });

            rAvContext.agendaOptions = data.agendaOptions || [];

            if (!data.dtrUserId) {

                $('#rAvPartyList').html('<div style="padding:20px; color:#c62828; text-align:center;">'

                        + 'This user has no dtr.users record (cannot create visit tasks).</div>');

                return;

            }

            rRebuildDefaultAgenda();

            rRenderAvParties(rAvContext.allParties);

        }).fail(function (xhr) {

            $('#rAvPartyList').html('<div style="padding:20px; color:#c62828; text-align:center;">'

                    + 'Error loading parties: ' + (xhr.responseText || xhr.statusText) + '</div>');

        });

    });

    $(document).on('input', '#rAvSearch', function () {

        var q = $(this).val().toLowerCase().trim();

        if (!q) {

            rRenderAvParties(rAvContext.allParties);

            return;

        }

        var filtered = rAvContext.allParties.filter(function (p) {

            return (p.code || '').toLowerCase().indexOf(q) !== -1

                    || (p.outletName || '').toLowerCase().indexOf(q) !== -1

                    || (p.city || '').toLowerCase().indexOf(q) !== -1;

        });

        rRenderAvParties(filtered);

    });

    $(document).on('change', '#rAvSelectAll', function () {

        $('.r-av-party-chk').prop('checked', this.checked);

        rUpdateAvSelectedCount();

    });

    $(document).on('change', '.r-av-party-chk', rUpdateAvSelectedCount);

    $(document).on('click', '#rAvApplyAgenda', function () {

        var defValues = $('#rAvDefaultAgenda').val() || [];

        if (defValues.length === 0) {

            alert('Pick at least one agenda above first');

            return;

        }

        $('.r-av-party-chk:checked').each(function () {

            var fid = $(this).data('fofoid');

            var $sel = $('.r-av-party-agenda[data-fofoid="' + fid + '"]');

            var existing = $sel.val() || [];

            var merged = existing.slice();

            defValues.forEach(function (v) {

                if (merged.indexOf(v) === -1) merged.push(v);

            });

                $sel.val(merged);

            try {

                    $sel.multiselect('refresh');

            } catch (e) {

            }

        });

    });

    $(document).on('click', '#rAvSubmit', function () {

        var picks = [];

        var missing = 0;

        $('.r-av-party-chk:checked').each(function () {

            var fid = parseInt($(this).data('fofoid'));

            var agendas = $('.r-av-party-agenda[data-fofoid="' + fid + '"]').val() || [];

            var description = ($('.r-av-party-desc[data-fofoid="' + fid + '"]').val() || '').trim();

            if (agendas.length === 0) missing++;

            picks.push({

                fofoStoreId: fid,

                outletName: $(this).data('name'),

                latitude: $(this).data('lat') ? String($(this).data('lat')) : null,

                longitude: $(this).data('lng') ? String($(this).data('lng')) : null,

                agendas: agendas,

                description: description

            });

        });

        if (picks.length === 0) return;

        if (missing > 0) {

            if (!confirm(missing + ' selected row(s) have no agenda. Submit anyway with default "Visit"?')) return;

        }

        var btn = $(this);

        btn.prop('disabled', true).text('Assigning...');

        $('#rAvMsg').text('');

        $.ajax({

            url: context + '/beatPlan/assignVisit/submit',

            type: 'POST',

            contentType: 'application/json',

            data: JSON.stringify({

                authUserId: rAvContext.authUserId,

                planDate: rAvContext.date,

                parties: picks

            }),

            success: function (r) {

                var d = r.response || r;

                $('#rAvMsg').html('<span style="color:#2e7d32;">' + (d.message || 'Saved') + '</span>');

                btn.prop('disabled', false).text('Save Assignments');

                setTimeout(function () {

                    $('#rAssignVisitModal').modal('hide');

                }, 1500);

            },

            error: function (xhr) {

                var msg = 'Failed';

                try {

                    msg = (JSON.parse(xhr.responseText).response.message) || msg;

                } catch (e) {

                }

                $('#rAvMsg').html('<span style="color:#c62828;">' + msg + '</span>');

                btn.prop('disabled', false).text('Save Assignments');

            }

        });

    });

</script>

<!-- Assign Visit Modal (mirrors Beat Day View; prefixed IDs to avoid collisions) -->

<div class="modal fade" id="rAssignVisitModal" tabindex="-1" style="overflow-y:auto;">

    <div class="modal-dialog" style="width:90%; max-width:900px; margin-top:30px;">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal">&times;</button>

                <h4 class="modal-title" id="rAvTitle">Assign Visit</h4>

            </div>

            <div class="modal-body">

                <div style="display:flex; gap:10px; align-items:flex-start; margin-bottom:10px;">

                    <div style="flex:1;">

                        <label style="font-size:11px; color:#666; font-weight:normal; margin-bottom:2px;">

                            Agenda - applies to selected rows

                        </label>

                        <select id="rAvDefaultAgenda" multiple></select>

                    </div>

                    <button type="button" class="btn btn-default btn-sm" id="rAvApplyAgenda" style="margin-top:18px;"

                            title="Add the picked agendas into all selected rows (merges with existing)">

                        Apply to Selected

                    </button>

                </div>

                <div style="display:flex; gap:10px; align-items:center; margin-bottom:10px;">

                    <input type="text" id="rAvSearch" class="form-control input-sm"

                           placeholder="Search by code, outlet name or city..." style="flex:1;">

                    <span id="rAvSelectedCount" style="font-size:12px; color:#666;">0 selected</span>

                </div>

                <div id="rAvPartyList"

                     style="max-height:50vh; overflow-y:auto; border:1px solid #e5e5e5; border-radius:4px;"></div>

                <div id="rAvMsg" style="margin-top:10px; font-size:12px;"></div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

                <button type="button" class="btn btn-success" id="rAvSubmit" disabled>Save Assignments</button>

            </div>

        </div>

    </div>

</div>