Blame | Last modification | View Log | RSS feed
<section class="wrapper"><div class="row"><div class="col-lg-12"><h3 class="page-header"><i class="icon_document_alt"></i> PLAN A BEAT</h3><ol class="breadcrumb"><li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li><li><i class="icon_document_alt"></i>Plan a Beat</li></ol></div></div><!-- Main Tabs --><ul class="nav nav-tabs" id="beat-main-tabs" style="margin-bottom:15px;"><li class="active"><a href="#beat-tab-create" data-toggle="tab"><strong>Create Beat</strong></a></li><li><a href="#beat-tab-calendar" data-toggle="tab"><strong>Calendar</strong></a></li></ul><div class="tab-content"><div class="tab-pane active" id="beat-tab-create"><!-- Step 1: Select Auth User --><div class="row" id="beat-step-user"><div class="col-lg-2 form-group"><label>Category</label><select id="beat-category" class="form-control input-sm"><option value="4">Sales</option></select></div><div class="col-lg-2 form-group"><label>Level</label><select id="beat-level" class="form-control input-sm"><option value="">Select Level</option>#foreach($et in $escalationTypes)<option value="$et">$et</option>#end</select></div><div class="col-lg-3 form-group"><label>Auth User</label><select id="beat-auth-user" class="form-control input-sm"><option value="">Select Auth User</option></select></div><div class="col-lg-2 form-group"><label> </label><br><button class="btn btn-primary btn-sm beat-load-user" type="button">Load</button></div></div><!-- Step 2: Set Start Location --><div id="beat-step-location" style="display:none;"><div class="panel panel-info"><div class="panel-heading"><strong>Set Start Location (Base)</strong></div><div class="panel-body"><div class="row"><div class="col-lg-4"><input type="text" id="beat-location-search" class="form-control input-sm"placeholder="Search location..."><div id="beat-base-info" style="margin-top:10px;color:#888;"></div></div><div class="col-lg-6"><div id="beat-location-map" style="height:250px;border:1px solid #ddd;"></div></div><div class="col-lg-2"><button class="btn btn-success btn-sm beat-confirm-location" type="button">ConfirmStart</button></div></div></div></div></div><!-- Step 3: Multi-Day Planning --><div id="beat-step-plan" style="display:none;"><!-- Day Tabs --><ul class="nav nav-tabs" id="beat-day-tabs"><li class="active"><a href="#beat-day-1" data-toggle="tab">Day 1</a></li></ul><!-- Day Content --><div class="tab-content" id="beat-day-content"><div class="tab-pane active" id="beat-day-1"></div></div><!-- Progress Bar --><div style="margin:10px 0;"><div style="display:flex;align-items:center;gap:10px;"><span><strong>Day Time:</strong></span><div style="flex:1;background:#eee;border-radius:10px;height:20px;overflow:hidden;"><div id="beat-time-bar"style="height:100%;background:#27AE60;width:0%;transition:width 0.3s;border-radius:10px;text-align:center;color:#fff;font-size:11px;line-height:20px;">0h / 9h</div></div><button class="btn btn-warning btn-sm beat-end-day" type="button">End Day</button><button class="btn btn-info btn-sm beat-finish-plan" type="button">Finish Planning</button></div></div><!-- Partner + Lead Lists and Map --><div style="display:flex;gap:10px;"><div style="width:420px;min-width:420px;"><!-- Partners Panel --><div class="panel panel-default" style="margin-bottom:5px;"><div class="panel-heading" style="padding:5px 10px;"><strong>Partners</strong><label class="pull-right" style="margin:0;font-weight:normal;"><input type="checkbox"id="beat-select-all-partners">Select All</label></div><div style="padding:3px;"><input type="text" id="beat-partner-search" placeholder="Search partners..."class="form-control input-sm"></div><div style="max-height:250px;overflow-y:auto;padding:0;"><table class="table table-condensed table-hover" style="margin-bottom:0;"><tbody id="beat-partner-list"></tbody></table></div></div><!-- Leads Panel --><div class="panel panel-default" style="margin-bottom:5px;"><div class="panel-heading" style="padding:5px 10px;background:#FFF3E0;"><strong>Leads (Follow-up)</strong></div><div style="max-height:200px;overflow-y:auto;padding:0;"><table class="table table-condensed table-hover" style="margin-bottom:0;"><tbody id="beat-lead-list"></tbody></table></div></div><!-- Selected Route --><div class="panel panel-success" style="margin-bottom:0;"><div class="panel-heading" style="padding:5px 10px;"><strong>Selected Route</strong> — <span id="beat-selected-count">0</span> stops</div><div style="max-height:200px;overflow-y:auto;padding:0;"><table class="table table-condensed" style="margin-bottom:0;"><tbody id="beat-selected-list"></tbody></table></div><div class="panel-footer" style="padding:5px 10px;"><button class="btn btn-success btn-sm pull-right save-beat-plan" type="button"style="display:none;">Save Beat Plan</button><div class="clearfix"></div></div></div></div><div style="flex:1;"><div id="beat-route-summary"style="display:none;background:#2C3E50;color:#FFF;padding:10px 15px;margin-bottom:5px;border-radius:4px;font-size:14px;"></div><div id="beat-map" style="height:600px;width:100%;border:1px solid #ddd;"></div></div></div></div><!-- Step 4: Day Break Modal --><div class="modal fade" id="beatDayBreakModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header" style="background:#2C3E50;color:#fff;"><h4 class="modal-title">Day Break</h4></div><div class="modal-body"><p id="beat-daybreak-info" style="font-size:16px;"></p><hr><p><strong>Where does the user stay tonight?</strong></p><div class="radio"><label><input type="radio" name="beatStayOption" value="HOME" checked> Goback home (Base Location)</label></div><div class="radio"><label><input type="radio" name="beatStayOption" value="HOTEL"> Stay athotel/other location</label></div><div id="beat-hotel-fields" style="display:none;margin-left:25px;"><input type="text" id="beat-hotel-name" class="form-control input-sm"placeholder="Hotel / Location name" style="margin-bottom:5px;"><input type="text" id="beat-hotel-search" class="form-control input-sm"placeholder="Search location on map..."><div id="beat-hotel-map"style="height:200px;border:1px solid #ddd;margin-top:5px;"></div></div></div><div class="modal-footer"><button class="btn btn-primary beat-continue-next-day" type="button">Continue to Next Day</button></div></div></div></div><!-- Step 5: Calendar Date Assignment Modal --><div class="modal fade" id="beatCalendarModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header" style="background:#2C3E50;color:#fff;"><h4 class="modal-title">Assign Dates to Plan</h4></div><div class="modal-body"><div class="row"><div class="col-lg-7"><p><strong>Select start date:</strong></p><input type="date" id="beat-cal-start" class="form-control input-sm"style="width:200px;"><br><p><strong>Mark leave days (click to toggle):</strong></p><div id="beat-calendar-grid" style="font-family:monospace;"></div></div><div class="col-lg-5"><h4>Plan Summary</h4><div id="beat-plan-summary"></div><hr><h4>Date Assignments</h4><div id="beat-date-assignments"></div></div></div></div><div class="modal-footer"><button class="btn btn-success beat-submit-plan" type="button">Save & Submit Plan</button></div></div></div></div></div><!-- end beat-tab-create --><!-- ============ CALENDAR TAB ============ --><div class="tab-pane" id="beat-tab-calendar"><div class="row" style="margin-bottom:10px;"><div class="col-lg-2 form-group"><label>Category</label><select id="cal-category" class="form-control input-sm"><option value="4">Sales</option></select></div><div class="col-lg-2 form-group"><label>Level</label><select id="cal-level" class="form-control input-sm"><option value="">Select Level</option>#foreach($et in $escalationTypes)<option value="$et">$et</option>#end</select></div><div class="col-lg-3 form-group"><label>Auth User</label><select id="cal-auth-user" class="form-control input-sm"><option value="">Select Auth User</option></select></div><div class="col-lg-2 form-group"><label> </label><br><button class="btn btn-primary btn-sm cal-load" type="button">Load Calendar</button></div></div><div id="cal-container" style="display:none;"><div style="display:flex;gap:15px;"><!-- Left: Beat List --><div style="width:260px;min-width:260px;"><div class="panel panel-default"><div class="panel-heading"><strong>Beats</strong></div><div id="cal-beat-list" style="max-height:600px;overflow-y:auto;padding:10px;"></div></div></div><!-- Right: Calendar Grid --><div style="flex:1;"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;"><button class="btn btn-default btn-sm cal-prev-month">< Prev</button><h4 id="cal-month-title" style="margin:0;"></h4><button class="btn btn-default btn-sm cal-next-month">Next ></button></div><div id="cal-grid"></div><div style="margin-top:10px;font-size:12px;color:#777;"><span style="display:inline-block;width:14px;height:14px;background:#f5f5f5;border:1px solid #ddd;vertical-align:middle;"></span>Sunday <span style="display:inline-block;width:14px;height:14px;background:#FFF9C4;border:1px solid #ddd;vertical-align:middle;"></span>Holiday <span style="display:inline-block;width:14px;height:14px;background:#FFCDD2;border:1px solid #ddd;vertical-align:middle;"></span>Running (locked) <span style="display:inline-block;width:14px;height:14px;background:#E8F5E9;border:1px solid #ddd;vertical-align:middle;"></span>Scheduled <span style="display:inline-block;width:14px;height:14px;background:#E0E0E0;border:1px solid #ddd;vertical-align:middle;"></span>Completed</div></div></div></div></div><!-- end beat-tab-calendar --></div><!-- end tab-content --></section><style>.beat-distance-label {background: #2C3E50;padding: 2px 6px;border-radius: 10px;white-space: nowrap;}.beat-partner-row.selected {background: #E8F5E9;}.beat-lead-row.selected {background: #FFF3E0;}#beat-selected-list tr {cursor: move;}.beat-day-tab-done {color: #27AE60;}/* Calendar styles */.cal-table {width: 100%;border-collapse: collapse;table-layout: fixed;}.cal-table th {text-align: center;padding: 8px;background: #34495E;color: #fff;font-size: 13px;}.cal-table td {border: 1px solid #ddd;height: 90px;vertical-align: top;padding: 4px;font-size: 12px;position: relative;}.cal-table td.cal-sunday {background: #f5f5f5;color: #ccc;}.cal-table td.cal-holiday {background: #FFF9C4;}.cal-table td.cal-blocked {cursor: not-allowed;}.cal-table td.cal-available {cursor: pointer;}.cal-table td.cal-available:hover {background: #E3F2FD;}.cal-date-num {font-weight: bold;font-size: 13px;}.cal-beat-chip {display: block;margin: 2px 0;padding: 2px 5px;border-radius: 3px;color: #fff;font-size: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;}.cal-beat-chip.cal-running {animation: pulse-border 1.5s infinite;}@keyframes pulse-border {0%, 100% {box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);}50% {box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2);}}.cal-beat-chip.cal-completed {opacity: 0.5;text-decoration: line-through;}.cal-beat-card {border: 1px solid #ddd;border-radius: 6px;padding: 10px;margin-bottom: 8px;cursor: pointer;transition: box-shadow 0.2s;}.cal-beat-card:hover {box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}.cal-beat-card.cal-active {border: 2px solid #3498DB;box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);}</style><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=places&callback=initBeatMap&v=weekly"async defer></script>