Subversion Repositories SmartDukaan

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_calendar"></i> Scheduled Beats - Day View</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_group"></i> Partner Acquisition</li>
                <li><i class="icon_calendar"></i> Beat Day View</li>
            </ol>
        </div>
    </div>

    <div class="row" style="margin-bottom:10px;">
        <div class="col-lg-12" style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
            <label style="margin:0;">From:</label>
            <input type="date" id="dayViewStart" class="form-control input-sm" style="width:160px;">
            <label style="margin:0;">To:</label>
            <input type="date" id="dayViewEnd" class="form-control input-sm" style="width:160px;">
            <button class="btn btn-primary btn-sm" id="dayViewLoad">Load</button>
            <span id="dayViewSummary" style="color:#777; font-size:12px; margin-left:10px;"></span>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover" id="dayViewTable">
                    <thead>
                    <tr>
                        <th>User</th>
                        <th>Date</th>
                        <th>Beat</th>
                        <th>Day</th>
                        <th>Partners</th>
                        <th>Leads</th>
                        <th>Total Visits</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody id="dayViewRows">
                    <tr>
                        <td colspan="8" style="text-align:center; color:#999;">Pick a date range and click Load.</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>


<script>
    (function () {
        // Default: today → today + 7 days
        var today = new Date();
        var week = new Date();
        week.setDate(today.getDate() + 7);

        function fmt(d) {
            return d.getFullYear() + '-' + ('0' + (d.getMonth() + 1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2);
        }

        $('#dayViewStart').val(fmt(today));
        $('#dayViewEnd').val(fmt(week));
        loadDayView();
    })();

    $(document).on('click', '#dayViewLoad', function () {
        loadDayView();
    });

    function loadDayView() {
        var s = $('#dayViewStart').val();
        var e = $('#dayViewEnd').val();
        if (!s || !e) {
            alert('Pick a date range');
            return;
        }
        $('#dayViewRows').html('<tr><td colspan="8" style="text-align:center;">Loading...</td></tr>');
        $('#dayViewSummary').text('');
        $.get(context + '/beatPlan/scheduledList', {startDate: s, endDate: e}).done(function (r) {
            var data = r.response || r;
            renderDayViewRows(data.rows || []);
            $('#dayViewSummary').text(data.rows.length + ' beats scheduled between ' + data.startDate + ' and ' + data.endDate);
        }).fail(function (xhr) {
            $('#dayViewRows').html('<tr><td colspan="8" style="color:#d9534f; text-align:center;">Error: ' + (xhr.responseText || xhr.statusText) + '</td></tr>');
        });
    }

    function renderDayViewRows(rows) {
        if (!rows || rows.length === 0) {
            $('#dayViewRows').html('<tr><td colspan="8" style="text-align:center; color:#999;">No beats scheduled in this range.</td></tr>');
            return;
        }
        var html = '';
        rows.forEach(function (r) {
            html += '<tr>'
                    + '<td>' + r.userName + '</td>'
                    + '<td><span class="label label-primary">' + r.scheduleDate + '</span></td>'
                    + '<td><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:' + (r.beatColor || '#3498db') + ';margin-right:6px;"></span>' + r.beatName + '</td>'
                    + '<td>' + r.dayNumber + '</td>'
                    + '<td>' + r.partnerCount + '</td>'
                    + '<td>' + (r.leadCount > 0 ? '<span class="label label-warning">' + r.leadCount + '</span>' : '0') + '</td>'
                    + '<td><strong>' + r.visitCount + '</strong></td>'
                    + '<td>'
                    + '<button class="btn btn-xs btn-info view-user-calendar" data-userid="' + r.authUserId + '" data-username="' + r.userName + '">View Calendar</button> '
                    + '<button class="btn btn-xs btn-warning edit-beat-on-date" '
                    + 'data-userid="' + r.authUserId + '" data-username="' + r.userName + '" '
                    + 'data-beatid="' + r.beatId + '" data-date="' + r.scheduleDate + '">Edit</button>'
                    + '</td>'
                    + '</tr>';
        });
        $('#dayViewRows').html(html);
    }

    // View -> open user's calendar inside the dashboard in a modal iframe (pre-selected)
    $(document).on('click', '.view-user-calendar', function () {
        var userId = $(this).data('userid');
        var userName = $(this).data('username') || '';
        var url = context + '/beatPlanWindow?autoUserId=' + userId
                + '&autoUserName=' + encodeURIComponent(userName);
        $('#userCalendarTitle').text('Calendar - ' + userName);
        $('#userCalendarFrame').attr('src', url);
        $('#userCalendarModal').modal('show');
    });

    // Edit a beat on a specific date — opens beatPlanWindow in edit mode for that run
    $(document).on('click', '.edit-beat-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;
        $('#userCalendarTitle').text('Edit Beat - ' + userName + ' on ' + date);
        $('#userCalendarFrame').attr('src', url);
        $('#userCalendarModal').modal('show');
    });
</script>

<!-- Calendar modal (iframe loads /beatPlanWindow with auto-selected user) -->
<div class="modal fade" id="userCalendarModal" 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="$('#userCalendarFrame').attr('src','');">&times;
                </button>
                <h4 class="modal-title" id="userCalendarTitle">Calendar</h4>
            </div>
            <div class="modal-body" style="padding:0;">
                <iframe id="userCalendarFrame" style="width:100%; height:80vh; border:none;"></iframe>
            </div>
        </div>
    </div>
</div>