@layout("/common/_container.html"){
<style>
    .schedule-wrap { padding: 10px 20px; }
    .schedule-header { margin-bottom: 15px; }
    .schedule-header .line { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
    .schedule-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .schedule-copy .lbl { color: #333; min-width: 60px; }
    .schedule-copy input { width: 130px; }
    .schedule-switch { margin-left: 20px; display: flex; align-items: center; gap: 6px; }
    .calendar-panel { border: 1px solid #e5e6e7; margin-top: 15px; }
    .calendar-toolbar { height: 48px; display: flex; align-items: center; justify-content: center; gap: 16px; border-bottom: 1px solid #e5e6e7; }
    .calendar-toolbar .nav-btn { cursor: pointer; color: #1ab394; }
    .calendar-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
    .calendar-table th, .calendar-table td { border: 1px solid #e5e6e7; vertical-align: top; height: 88px; padding: 6px; }
    .calendar-table th { height: 36px; text-align: center; font-weight: 600; }
    .calendar-day { cursor: pointer; position: relative; }
    .calendar-day.other { color: #aaa; background: #fafafa; cursor: default; }
    .calendar-day.active { outline: 2px solid #1ab394; outline-offset: -2px; }
    .calendar-day .num { font-size: 14px; font-weight: 600; }
    .calendar-day .tag { margin-top: 6px; display: inline-block; padding: 2px 6px; border-radius: 2px; color: #fff; font-size: 12px; }
    .calendar-day .tag.ok { background: #1c84c6; }
    .calendar-day .tag.warn { background: #f8ac59; }
    .calendar-day .tag.none { background: #999; }
    .shift-panel { margin-top: 16px; display: none; }
    .driver-tag { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 8px; border-radius: 2px; color: #fff; background: #1c84c6; }
    .driver-tag.manual { background: #f8ac59; }
    .driver-tag .del { margin-left: 8px; cursor: pointer; }
</style>

<div class="schedule-wrap">
    <input type="hidden" id="lineId" value="${lineId!}"/>
    <input type="hidden" id="companyId" value="${companyId!}"/>
    <input type="hidden" id="autoPlanValue" value="${autoPlan!2}"/>

    <div class="schedule-header">
        <div class="line">排班管理</div>
        <div style="margin-bottom: 10px;">线路名称：<b id="lineName">${lineName!}</b>&nbsp;&nbsp;&nbsp;关联企业：<b id="companyName">${companyName!}</b></div>
        <div class="schedule-copy">
            <span class="lbl">排班复制</span>
            <span>复制日期</span>
            <input type="text" class="form-control" id="copyStartDate" placeholder="开始日期"/>
            <span>至</span>
            <input type="text" class="form-control" id="copyEndDate" placeholder="结束日期"/>
            <span>粘贴起始日期</span>
            <input type="text" class="form-control" id="targetStartDate" placeholder="选择日期"/>
            <button class="btn btn-primary btn-sm" onclick="TLineSchedule.copySchedule()">确认复制</button>
            <div class="schedule-switch">
                <span>开启智能排班</span>
                <input type="checkbox" id="autoPlanSwitch" onchange="TLineSchedule.onAutoPlanChange(this)">
            </div>
        </div>
    </div>

    <div class="calendar-panel">
        <div class="calendar-toolbar">
            <span class="nav-btn" onclick="TLineSchedule.prevMonth()">&lt; 上月</span>
            <span id="calendarMonthText"></span>
            <span class="nav-btn" onclick="TLineSchedule.nextMonth()">下月 &gt;</span>
        </div>
        <table class="calendar-table">
            <thead>
            <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
            </tr>
            </thead>
            <tbody id="calendarBody"></tbody>
        </table>
    </div>

    <div class="shift-panel" id="shiftPanel">
        <h4 id="selectedDayText"></h4>
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th style="width: 20%;">班次</th>
                <th style="width: 10%;">车次数</th>
                <th style="width: 55%;">司机（黄色为后台手动排班）</th>
                <th style="width: 15%;">操作</th>
            </tr>
            </thead>
            <tbody id="shiftTableBody"></tbody>
        </table>
    </div>
</div>

<script src="${ctxPath}/static/modular/system/tLine/tLine_schedule.js"></script>
<script>
    laydate.render({elem: '#copyStartDate'});
    laydate.render({elem: '#copyEndDate'});
    laydate.render({elem: '#targetStartDate'});
</script>
@}