<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>История поездок</title>
    <script src="data.js?v=3" defer></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #FFFFFF;
            padding: 12px;
            color: #000;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
        }

        .date-header {
            font-size: 14px;
            font-weight: 500;
            color: #909090;
            margin-bottom: 12px;
            margin-top: 24px;
            padding-left: 6px;
        }

        .date-header:first-child {
            margin-top: 0;
        }

        .ride-card {
            background: #F5F4F2;
            border-radius: 20px;
            padding: 16px 20px 16px 12px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            box-shadow: none;
            cursor: pointer;
        }

        .ride-card.with-help {
            flex-direction: column;
            align-items: stretch;
            padding-bottom: 24px;
        }

        .ride-main {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .taxi-icon {
            min-width: 56px;
            height: 32px;
            margin-right: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0;
        }

        .taxi-icon img {
            width: 56px;
            height: 32px;
            display: block;
            object-fit: contain;
        }

        .taxi-icon img.delivery-icon {
            width: 68px;
            height: 40px;
        }

        .ride-info {
            flex: 1;
            min-width: 0;
        }

        .ride-title {
            font-size: 17px;
            font-weight: 500;
            color: #000;
            margin-bottom: 2px;
            letter-spacing: -0.3px;
        }

        .ride-address {
            font-size: 13px;
            color: #999;
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ride-price {
            font-size: 17px;
            font-weight: 450;
            color: #000;
            margin-left: 12px;
            flex-shrink: 0;
            margin-top: 0;
        }

        .help-button {
            width: 100%;
            margin-top: 24px;
            padding: 8px;
            background: transparent;
            border: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            color: #000;
        }

        .help-button:hover {
            background-color: transparent;
            opacity: 0.7;
        }

        .help-icon {
            width: 24px;
            height: 24px;
            color: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                <select id="personFilter" onchange="filterTrips()" style="padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; font-size: 14px;">
                    <option value="">Все персонажи</option>
                </select>
                <select id="monthFilter" onchange="filterTrips()" style="padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; font-size: 14px;">
                    <option value="">Все месяцы</option>
                </select>
            </div>
            <a href="admin.html" style="padding: 8px 16px; background: #007AFF; color: white; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 600;">Управление</a>
        </div>

        <div id="tripContainer"></div>
    </div>

    <script>
        // Функции для работы с API встроены напрямую
        const API_URL = 'api.php';

        async function loadData() {
            try {
                const response = await fetch(`${API_URL}?action=get`);
                const data = await response.json();
                return data;
            } catch (error) {
                console.error('Ошибка загрузки данных:', error);
                return { persons: [], trips: [] };
            }
        }

        async function getPersons() {
            const data = await loadData();
            return data.persons || [];
        }

        async function getTrips() {
            const data = await loadData();
            return data.trips || [];
        }

        // Проверка загрузки data.js
        if (typeof getPersons === 'undefined') {
            document.getElementById('tripContainer').innerHTML = '<p style="color: red; padding: 20px;">Ошибка: data.js не загружен. Проверьте доступность файла.</p>';
        }

        // Ждем загрузки всех скриптов
        window.addEventListener('DOMContentLoaded', () => {
            init();
        });

        const months = [
            'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
            'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'
        ];

        const monthsGenitive = [
            'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
            'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'
        ];

        const weekDays = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];

        async function initFilters() {
            const persons = await getPersons();
            const trips = await getTrips();
            console.log('Персонажи:', persons);
            console.log('Поездки:', trips);
            const personFilter = document.getElementById('personFilter');
            const monthFilter = document.getElementById('monthFilter');

            // Заполнить персонажей
            personFilter.innerHTML = '<option value="">Все персонажи</option>' +
                persons.map(p => `<option value="${p.id}">${p.name}</option>`).join('');

            // Получить уникальные месяцы из поездок
            const uniqueMonths = new Set();
            trips.forEach(t => {
                const date = new Date(t.date);
                const monthYear = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
                uniqueMonths.add(monthYear);
            });

            // Сортировать месяцы
            const sortedMonths = Array.from(uniqueMonths).sort().reverse();
            monthFilter.innerHTML = '<option value="">Все месяцы</option>' +
                sortedMonths.map(m => {
                    const [year, month] = m.split('-');
                    return `<option value="${m}">${months[parseInt(month) - 1]} ${year}</option>`;
                }).join('');
        }

        async function filterTrips() {
            const personId = document.getElementById('personFilter').value;
            const monthYear = document.getElementById('monthFilter').value;
            
            let trips = await getTrips();
            const persons = await getPersons();

            // Фильтр по персонажу
            if (personId) {
                trips = trips.filter(t => t.personId === parseInt(personId));
            }

            // Фильтр по месяцу
            if (monthYear) {
                const [year, month] = monthYear.split('-');
                trips = trips.filter(t => {
                    const date = new Date(t.date);
                    return date.getFullYear() === parseInt(year) && 
                           date.getMonth() === parseInt(month) - 1;
                });
            }

            await displayTrips(trips, persons);
        }

        async function displayTrips(trips, persons) {
            // Сортировка по дате и времени
            trips.sort((a, b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time));

            // Группировка по датам
            const groupedByDate = {};
            trips.forEach(trip => {
                if (!groupedByDate[trip.date]) {
                    groupedByDate[trip.date] = [];
                }
                groupedByDate[trip.date].push(trip);
            });

            const container = document.getElementById('tripContainer');
            let html = '';

            // Сортировка дат от новых к старым
            const sortedDates = Object.keys(groupedByDate).sort((a, b) => {
                return new Date(b) - new Date(a);
            });

            sortedDates.forEach(date => {
                const dateObj = new Date(date);
                const day = dateObj.getDate();
                const month = monthsGenitive[dateObj.getMonth()];
                const weekDay = weekDays[dateObj.getDay()];
                
                html += `<div class="date-header">${day} ${month}, ${weekDay}</div>`;

                // Сортировка поездок внутри даты по времени (поздние первые)
                groupedByDate[date].sort((a, b) => {
                    const timeA = a.time.split(':').map(Number);
                    const timeB = b.time.split(':').map(Number);
                    return (timeB[0] * 60 + timeB[1]) - (timeA[0] * 60 + timeA[1]);
                });

                groupedByDate[date].forEach(trip => {
                    const icon = trip.tariff === 'Доставка' ? 'dilevery.png' : 'car.png';
                    const iconClass = trip.tariff === 'Доставка' ? 'delivery-icon' : '';
                    const titlePrefix = trip.tariff === 'Доставка' ? '' : 'Такси ';
                    const separator = trip.tariff === 'Доставка' ? ' → ' : ' ';
                    html += `
                        <div class="ride-card">
                            <div class="taxi-icon">
                                <img src="${icon}" class="${iconClass}" alt="Такси">
                            </div>
                            <div class="ride-info">
                                <div class="ride-title">${titlePrefix}${trip.tariff}, ${trip.time}</div>
                                <div class="ride-address">${trip.from}${separator}${trip.to}</div>
                            </div>
                            <div class="ride-price">${trip.price}₽</div>
                        </div>
                    `;
                });
            });

            if (html === '') {
                const allPersons = await getPersons();
                const allTrips = await getTrips();
                let message = '<div style="text-align: center; padding: 40px;">';
                message += '<p style="color: #999; margin-bottom: 12px;">Нет поездок для отображения</p>';
                message += `<p style="color: #ccc; font-size: 13px;">Всего персонажей: ${allPersons.length}, всего поездок: ${allTrips.length}</p>`;
                if (allTrips.length === 0) {
                    message += '<p style="color: #007AFF; font-size: 14px; margin-top: 12px;"><a href="admin.html" style="color: #007AFF;">Добавьте первую поездку</a></p>';
                }
                message += '</div>';
                container.innerHTML = message;
            } else {
                container.innerHTML = html;
            }
        }

        // Загрузка при старте
        async function init() {
            console.log('=== НАЧАЛО ЗАГРУЗКИ ===');
            try {
                await initFilters();
                console.log('Фильтры инициализированы');
                await filterTrips();
                console.log('Поездки отфильтрованы');
            } catch (error) {
                console.error('ОШИБКА:', error);
                document.getElementById('tripContainer').innerHTML = '<p style="color: red; padding: 20px;">Ошибка загрузки: ' + error.message + '</p>';
            }
        }
    </script>
</body>
</html>