{% extends "layouts/base.html" %}
{% block title %}One on One - TryoutPro{% endblock %}
{% block page_title %}One on One{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / One on One</span>{% endblock %}

{% block content %}
<!-- My One on One Requests Tracker -->
<div class="card mb-4">
    <div class="card-header">
        <h3><i class="fas fa-list-check"></i> My One on One Requests</h3>
    </div>
    <div class="card-body">
        {% if my_requests %}
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Coach</th>
                        <th>Team</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Discussion Points</th>
                        <th>Status</th>
                        <th>Coach Response</th>
                    </tr>
                </thead>
                <tbody>
                    {% for req in my_requests %}
                    <tr>
                        <td>{{ req.coach.full_name if req.coach else 'Unknown Coach' }}</td>
                        <td>{{ req.team.name if req.team else '—' }}</td>
                        <td>{{ req.date.strftime('%b %d, %Y') }}</td>
                        <td>{{ req.start_time.strftime('%I:%M %p') }} - {{ req.end_time.strftime('%I:%M %p') }}</td>
                        <td>{{ req.points or 'N/A' }}</td>
                        <td>
                            {% if req.status == 'pending' %}
                            <span class="badge badge-warning"><i class="fas fa-clock"></i> Pending</span>
                            {% elif req.status == 'approved' %}
                            <span class="badge badge-success"><i class="fas fa-check-circle"></i> Approved</span>
                            {% elif req.status == 'rejected' %}
                            <span class="badge badge-danger"><i class="fas fa-times-circle"></i> Rejected</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if req.status == 'approved' %}
                            <span class="text-success">Session confirmed!</span>
                            {% elif req.status == 'rejected' %}
                                {% if req.coach_rejection_message %}
                                <span class="text-danger small">{{ req.coach_rejection_message }}</span>
                                {% else %}
                                <span class="text-muted small">Coach is unavailable</span>
                                {% endif %}
                            {% else %}
                            <span class="text-muted small">Awaiting coach response...</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-muted">You haven't made any One on One requests yet.</p>
        {% endif %}
    </div>
</div>

<!-- One on One Request Section -->
<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-calendar-check"></i> Request One on One Session</h3>
    </div>
    <div class="card-body">
        {% if coach_options %}
        <form method="POST" action="{{ url_for('users.one_on_one') }}" class="form" id="oneOnOneForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

            <div class="form-row">
                <div class="form-group col-6">
                    <label for="coach_id">Select Coach</label>
                    <select name="coach_id" id="coach_id" class="form-select" onchange="onCoachChange()" required>
                        <option value="">-- Select Coach --</option>
                        {% for c in coach_options %}
                        <option value="{{ c.coach_id }}">{{ c.coach_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group col-6">
                    <label for="org_team_id">Select Team <span class="text-muted">(optional)</span></label>
                    <select name="org_team_id" id="org_team_id" class="form-select">
                        <option value="">-- Any Team --</option>
                    </select>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="date">Select Date</label>
                    <select name="date" id="date" class="form-select" onchange="updateTimeSlots()" required>
                        <option value="">-- Select Coach First --</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="start_time">Start Time</label>
                    <select name="start_time" id="start_time" class="form-select" onchange="updateEndTimeOptions()" required>
                        <option value="">-- Select Date First --</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="end_time">End Time</label>
                    <select name="end_time" id="end_time" class="form-select" required>
                        <option value="">-- Select Start Time First --</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="points">Discussion Points <span class="text-muted">(What would you like to discuss?)</span></label>
                <textarea name="points" id="points" class="form-textarea" placeholder="Enter topics you'd like to cover in your One on One session..." rows="4"></textarea>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-paper-plane"></i> Send Request
                </button>
            </div>
        </form>
        {% else %}
        <p class="text-muted">You need to be assigned to a team with a coach to request a One on One session.</p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Coach options injected server-side
const COACH_OPTIONS = {{ coach_options | tojson }};

// Time slots from 8:00 AM to 10:00 PM
const TIME_SLOTS = [];
for (let h = 8; h <= 22; h++) {
    for (let m = 0; m < 60; m += 30) {
        const displayHour = h > 12 ? h - 12 : h;
        const displayAmpm = h >= 12 ? 'PM' : 'AM';
        const timeStr = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
        const displayTime = displayHour + ':' + (m < 10 ? '0' : '') + m + ' ' + displayAmpm;
        TIME_SLOTS.push({ time: timeStr, display: displayTime });
    }
}

const DAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

let coachAvailability = [];

// Helper to convert "HH:MM" to minutes since midnight
function toMinutes(timeStr) {
    const parts = timeStr.split(':');
    return parseInt(parts[0]) * 60 + parseInt(parts[1]);
}

// Build date dropdown for the next 14 days filtered to days the coach has availability
function buildDateOptions() {
    const dateSelect = document.getElementById('date');
    dateSelect.innerHTML = '<option value="">-- Select Date --</option>';

    const availableDays = new Set(coachAvailability.map(av => av.day_of_week));
    if (availableDays.size === 0) {
        return;
    }

    const today = new Date();
    for (let i = 0; i < 14; i++) {
        const d = new Date(today);
        d.setDate(today.getDate() + i);
        if (availableDays.has(d.getDay())) {
            const value = d.toISOString().split('T')[0];
            const display = d.toLocaleDateString('en-US', {
                weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
            });
            const option = document.createElement('option');
            option.value = value;
            option.setAttribute('data-day', d.getDay());
            option.textContent = display;
            dateSelect.appendChild(option);
        }
    }

    // Reset dependent dropdowns
    document.getElementById('start_time').innerHTML = '<option value="">-- Select Date First --</option>';
    document.getElementById('end_time').innerHTML = '<option value="">-- Select Start Time First --</option>';
}

// Populate team dropdown for the selected coach
function updateTeamOptions(coachId) {
    const teamSelect = document.getElementById('org_team_id');
    teamSelect.innerHTML = '<option value="">-- Any Team --</option>';

    const coach = COACH_OPTIONS.find(c => c.coach_id === coachId);
    if (!coach) return;

    coach.teams.forEach(team => {
        const option = document.createElement('option');
        option.value = team.team_id;
        option.textContent = team.team_name;
        teamSelect.appendChild(option);
    });
}

// Fetch availability for the selected coach
function fetchCoachAvailability(coachId) {
    coachAvailability = [];
    if (!coachId) {
        buildDateOptions();
        return;
    }

    fetch(`/users/one-on-one/coaches/${coachId}/availability`)
        .then(response => response.json())
        .then(data => {
            coachAvailability = data.availability || [];
            buildDateOptions();
        })
        .catch(error => {
            console.error('Error loading coach availability:', error);
            coachAvailability = [];
            buildDateOptions();
        });
}

function onCoachChange() {
    const coachId = parseInt(document.getElementById('coach_id').value);
    updateTeamOptions(coachId);
    fetchCoachAvailability(coachId);
}

function updateTimeSlots() {
    const dateSelect = document.getElementById('date');
    const startTimeSelect = document.getElementById('start_time');

    const selectedOption = dateSelect.options[dateSelect.selectedIndex];
    if (!selectedOption || !selectedOption.value) {
        startTimeSelect.innerHTML = '<option value="">-- Select Date First --</option>';
        document.getElementById('end_time').innerHTML = '<option value="">-- Select Start Time First --</option>';
        return;
    }

    const dayOfWeek = parseInt(selectedOption.getAttribute('data-day'));

    const dayAvailability = coachAvailability.filter(av => av.day_of_week === dayOfWeek);

    const availableMinutes = [];
    dayAvailability.forEach(av => {
        const startMinutes = toMinutes(av.start_time);
        const endMinutes = toMinutes(av.end_time);
        for (let m = startMinutes; m < endMinutes; m += 30) {
            availableMinutes.push(m);
        }
    });
    availableMinutes.sort((a, b) => a - b);

    startTimeSelect.innerHTML = '<option value="">-- Select Start Time --</option>';
    availableMinutes.forEach(m => {
        const hour = Math.floor(m / 60);
        const minute = m % 60;
        const timeStr = (hour < 10 ? '0' : '') + hour + ':' + (minute < 10 ? '0' : '') + minute;
        const slotData = TIME_SLOTS.find(s => s.time === timeStr);
        if (slotData) {
            const option = document.createElement('option');
            option.value = slotData.time;
            option.textContent = slotData.display;
            startTimeSelect.appendChild(option);
        }
    });

    updateEndTimeOptions();
}

function updateEndTimeOptions() {
    const dateSelect = document.getElementById('date');
    const startTimeSelect = document.getElementById('start_time');
    const endTimeSelect = document.getElementById('end_time');

    const selectedOption = dateSelect.options[dateSelect.selectedIndex];
    if (!selectedOption || !selectedOption.value) {
        endTimeSelect.innerHTML = '<option value="">-- Select Start Time First --</option>';
        return;
    }

    const dayOfWeek = parseInt(selectedOption.getAttribute('data-day'));
    const selectedStart = startTimeSelect.value;

    if (!selectedStart) {
        endTimeSelect.innerHTML = '<option value="">-- Select Start Time First --</option>';
        return;
    }

    const dayAvailability = coachAvailability.filter(av => av.day_of_week === dayOfWeek);
    const availableMinutes = [];
    dayAvailability.forEach(av => {
        const startMinutes = toMinutes(av.start_time);
        const endMinutes = toMinutes(av.end_time);
        for (let m = startMinutes; m < endMinutes; m += 30) {
            availableMinutes.push(m);
        }
    });

    const startMinutesVal = toMinutes(selectedStart);
    const validEndTimes = availableMinutes.filter(m => m > startMinutesVal).sort((a, b) => a - b);

    endTimeSelect.innerHTML = '<option value="">-- Select End Time --</option>';
    validEndTimes.forEach(m => {
        const hour = Math.floor(m / 60);
        const minute = m % 60;
        const timeStr = (hour < 10 ? '0' : '') + hour + ':' + (minute < 10 ? '0' : '') + minute;
        const slotData = TIME_SLOTS.find(s => s.time === timeStr);
        if (slotData) {
            const option = document.createElement('option');
            option.value = slotData.time;
            option.textContent = slotData.display;
            endTimeSelect.appendChild(option);
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    if (COACH_OPTIONS.length > 0) {
        onCoachChange();
    }
});
</script>
{% endblock %}