<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="page-title">Модуль франчайзера</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
        }

        .header {
            background: #2196F3;
            color: white;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .header h1 {
            font-size: 24px;
        }

        .lang-switcher {
            display: flex;
            gap: 10px;
        }

        .lang-btn {
            background: rgba(255,255,255,0.2);
            border: 1px solid white;
            color: white;
            padding: 5px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .lang-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .lang-btn.active {
            background: white;
            color: #2196F3;
        }

        .nav {
            background: white;
            padding: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .nav ul {
            list-style: none;
            display: flex;
            gap: 0;
        }

        .nav li {
            flex: 1;
        }

        .nav a {
            display: block;
            padding: 15px 30px;
            text-decoration: none;
            color: #333;
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
            text-align: center;
        }

        .nav a:hover {
            background: #f5f5f5;
            border-bottom-color: #2196F3;
        }

        .nav a.active {
            border-bottom-color: #2196F3;
            color: #2196F3;
            font-weight: bold;
        }

        .container {
            max-width: 1400px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .section {
            display: none;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .section.active {
            display: block;
        }

        .section h2 {
            margin-bottom: 20px;
            color: #333;
            border-bottom: 2px solid #2196F3;
            padding-bottom: 10px;
        }

        /* Загрузка файлов */
        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 20px;
        }

        .upload-area:hover {
            border-color: #2196F3;
            background: #f5f5f5;
        }

        .upload-area.dragover {
            border-color: #2196F3;
            background: #e3f2fd;
        }

        .file-input {
            display: none;
        }

        .upload-btn {
            background: #2196F3;
            color: white;
            border: none;
            padding: 10px 30px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }

        .upload-btn:hover {
            background: #1976D2;
        }

        .upload-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .file-info {
            margin-top: 20px;
            padding: 15px;
            background: #e3f2fd;
            border-radius: 4px;
            display: none;
        }

        .error-list {
            margin-top: 20px;
            padding: 15px;
            background: #ffebee;
            border-radius: 4px;
            border-left: 4px solid #f44336;
            display: none;
        }

        .success-message {
            margin-top: 20px;
            padding: 15px;
            background: #e8f5e9;
            border-radius: 4px;
            border-left: 4px solid #4CAF50;
            display: none;
        }

        /* Календарь */
        .calendar-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .calendar-nav {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .calendar-nav button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
        }

        .calendar-nav button:hover {
            background: #1976D2;
        }

        .view-mode {
            display: flex;
            gap: 5px;
        }

        .view-btn {
            background: #f5f5f5;
            border: 1px solid #ccc;
            padding: 8px 15px;
            cursor: pointer;
            border-radius: 4px;
        }

        .view-btn.active {
            background: #2196F3;
            color: white;
            border-color: #2196F3;
        }

        .filter-section {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .filter-section select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .calendar {
            width: 100%;
        }

        .calendar-week,
        .calendar-month {
            display: grid;
            gap: 10px;
            margin-top: 20px;
        }

        .calendar-week {
            grid-template-columns: repeat(7, 1fr);
        }

        .calendar-month {
            grid-template-columns: repeat(7, 1fr);
        }

        .calendar-day {
            border: 1px solid #ddd;
            padding: 10px;
            min-height: 100px;
            background: white;
            border-radius: 4px;
            position: relative;
        }

        .calendar-day-header {
            font-weight: bold;
            margin-bottom: 5px;
            color: #666;
        }

        .calendar-event {
            padding: 5px;
            margin: 5px 0;
            border-radius: 3px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .calendar-event:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .event-planned {
            background: #4CAF50;
            color: white;
        }

        .event-soon {
            background: #FFC107;
            color: #333;
        }

        .event-overdue {
            background: #F44336;
            color: white;
        }

        .calendar-year {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .month-mini {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            background: white;
        }

        .month-mini-header {
            text-align: center;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2196F3;
        }

        .month-mini-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }

        .month-mini-day {
            padding: 5px;
            text-align: center;
            font-size: 12px;
            border-radius: 2px;
        }

        .month-mini-day.has-event {
            font-weight: bold;
        }

        /* Tooltip */
        .tooltip {
            position: fixed;
            background: rgba(0,0,0,0.9);
            color: white;
            padding: 10px;
            border-radius: 4px;
            font-size: 14px;
            pointer-events: none;
            z-index: 1000;
            display: none;
            max-width: 300px;
        }

        /* График работ */
        .schedule-controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .schedule-grid {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background: #2196F3;
            color: white;
            position: sticky;
            top: 0;
        }

        .task-card {
            background: #e3f2fd;
            padding: 8px;
            margin: 4px 0;
            border-radius: 4px;
            border-left: 4px solid #2196F3;
            cursor: move;
            transition: all 0.2s;
        }

        .task-card:hover {
            transform: scale(1.02);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .task-card.emergency {
            background: #ffebee;
            border-left-color: #f44336;
        }

        .task-card.dragging {
            opacity: 0.5;
        }

        .drop-zone {
            min-height: 50px;
            border: 2px dashed transparent;
            padding: 5px;
        }

        .drop-zone.drag-over {
            border-color: #2196F3;
            background: #e3f2fd;
        }

        .confirm-btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
        }

        .confirm-btn:hover {
            background: #45a049;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            z-index: 2000;
            display: none;
            max-width: 400px;
        }

        .notification.success {
            background: #4CAF50;
            color: white;
        }

        .notification.error {
            background: #f44336;
            color: white;
        }

        .notification.warning {
            background: #FFC107;
            color: #333;
        }

        /* Модальный диалог для создания события */
        .modal-dialog {
            display: none;
            position: fixed;
            z-index: 3000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background: white;
            margin: 10% auto;
            padding: 0;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 500px;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 {
            margin: 0;
            color: #333;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 28px;
            font-weight: bold;
            color: #aaa;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }

        .close-btn:hover {
            color: #000;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 20px;
            border-top: 1px solid #e0e0e0;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            font-family: inherit;
        }

        .form-control:focus {
            outline: none;
            border-color: #2196F3;
            box-shadow: 0 0 5px rgba(33, 150, 243, 0.3);
        }

        textarea.form-control {
            resize: vertical;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #2196F3;
            color: white;
        }

        .btn-primary:hover {
            background: #1976D2;
        }

        .btn-secondary {
            background: #f5f5f5;
            color: #333;
            border: 1px solid #ccc;
        }

        .btn-secondary:hover {
            background: #eeeeee;
        }

        .btn-success {
            background: #4CAF50;
            color: white;
        }

        .btn-success:hover {
            background: #45a049;
        }

        .create-event-btn {
            margin-left: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 id="header-title" data-lang-key="module_franchiser">Модуль франчайзера</h1>
        <div class="lang-switcher">
            <button class="lang-btn active" onclick="setLanguage('ru')">RU</button>
            <button class="lang-btn" onclick="setLanguage('en')">EN</button>
        </div>
    </div>

    <nav class="nav">
        <ul>
            <li><a href="#" class="nav-link active" data-section="ta" data-lang-key="menu_ta">ТА</a></li>
            <li><a href="#" class="nav-link" data-section="calendar" data-lang-key="menu_calendar">Календарь обслуживания</a></li>
            <li><a href="#" class="nav-link" data-section="schedule" data-lang-key="menu_schedule">График работ</a></li>
        </ul>
    </nav>

    <div class="container">
        <!-- Секция ТА -->
        <div id="ta-section" class="section active">
            <h2 data-lang-key="ta_title">Загрузка торговых автоматов</h2>
            
            <div class="upload-area" id="uploadArea">
                <p data-lang-key="upload_text">Перетащите файл сюда или нажмите для выбора</p>
                <p style="color: #666; font-size: 14px; margin-top: 10px;" data-lang-key="upload_formats">Поддерживаемые форматы: .xlsx, .csv</p>
                <input type="file" id="fileInput" class="file-input" accept=".xlsx,.csv">
            </div>

            <button id="uploadBtn" class="upload-btn" disabled data-lang-key="upload_button1">Загрузить файл</button>

            <div id="fileInfo" class="file-info"></div>
            <div id="errorList" class="error-list"></div>
            <div id="successMessage" class="success-message"></div>
        </div>

        <!-- Секция Календарь -->
        <div id="calendar-section" class="section">
            <h2 data-lang-key="calendar_title">Календарь обслуживания</h2>
            
            <div class="calendar-controls">
                <div class="calendar-nav">
                    <button onclick="previousPeriod()" data-lang-key="prev">Назад</button>
                    <span id="currentPeriod">Январь 2026</span>
                    <button onclick="nextPeriod()" data-lang-key="next">Вперед</button>
                </div>

                <div class="view-mode">
                    <button class="view-btn" onclick="setCalendarView('week')" data-lang-key="view_week">Неделя</button>
                    <button class="view-btn active" onclick="setCalendarView('month')" data-lang-key="view_month">Месяц</button>
                    <button class="view-btn" onclick="setCalendarView('year')" data-lang-key="view_year">Год</button>
                </div>

                <div class="filter-section">
                    <label data-lang-key="filter_label">Фильтр:</label>
                    <select id="machineFilter" onchange="filterCalendar()">
                        <option value="all" data-lang-key="filter_all">Все ТА</option>
                    </select>
                </div>
            </div>

            <div id="calendarView" class="calendar"></div>

            <div style="margin-top: 20px; display: flex; gap: 20px;">
                <div><span class="event-planned" style="padding: 5px 10px; border-radius: 3px;" data-lang-key="legend_planned">Плановое ТО</span></div>
                <div><span class="event-soon" style="padding: 5px 10px; border-radius: 3px;" data-lang-key="legend_soon">Приближается (< 5 дней)</span></div>
                <div><span class="event-overdue" style="padding: 5px 10px; border-radius: 3px;" data-lang-key="legend_overdue">Просрочено</span></div>
            </div>
        </div>

        <!-- Секция График работ -->
        <div id="schedule-section" class="section">
            <h2 data-lang-key="schedule_title">График работ</h2>
            
            <div class="schedule-controls">
                <div class="filter-section">
                    <label data-lang-key="employee_filter">Сотрудник:</label>
                    <select id="employeeFilter" onchange="filterSchedule()">
                        <option value="all" data-lang-key="filter_all_employees">Все сотрудники</option>
                    </select>
                </div>

                <div class="view-mode">
                    <button class="view-btn active" onclick="setScheduleView('day')" data-lang-key="view_day">День</button>
                    <button class="view-btn" onclick="setScheduleView('week')" data-lang-key="view_week">Неделя</button>
                </div>

                <button class="upload-btn" onclick="generateDailyRequests()" style="background: #FF9800;">
                    Создать заявки на сегодня
                </button>
                
                <button class="upload-btn" onclick="createEmergencyRequest(1)" style="background: #F44336;">
                    Тест: Авария ТА #1
                </button>

                <button class="confirm-btn" onclick="confirmSchedule()" data-lang-key="confirm_schedule">Сформировать</button>
            </div>

            <div id="scheduleView" class="schedule-grid"></div>
        </div>
    </div>

    <div id="tooltip" class="tooltip"></div>
    <div id="notification" class="notification"></div>
    <script src="static/franchisee.js"></script>
</body>
</html>