{% extends "layouts/base.html" %}
{% block title %}Schedule Match - {{ tryout.title }} - TryoutPro{% endblock %}
{% block page_title %}Schedule Match{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / <a href="{{ url_for('tryouts.list_tryouts') }}">Tryouts</a> / <a href="{{ url_for('tryouts.view_tryout', tryout_id=tryout.id) }}">{{ tryout.title }}</a> / Schedule Match</span>{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-futbol"></i> Schedule Match for {{ tryout.title }}</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('matches.create_match', tryout_id=tryout.id) }}" class="form" id="createMatchForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            
            <div class="form-group">
                <label for="match_type">Match Type</label>
                <select name="match_type" id="match_type" class="form-select" onchange="toggleMatchType()" required>
                    <option value="team_vs_team">Team vs Team</option>
                    <option value="player_vs_player">Player vs Player</option>
                    <option value="player_scrim">Player Scrim</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="title">Match Title</label>
                <input type="text" name="title" id="title" class="form-input" placeholder="e.g., Alpha vs Bravo Scrimmage" required>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="date">Date</label>
                    <input type="date" name="date" id="date" class="form-input" value="{{ tryout.date.strftime('%Y-%m-%d') }}" required>
                </div>
                <div class="form-group">
                    <label for="location">Location</label>
                    <input type="text" name="location" id="location" class="form-input" placeholder="Match location">
                </div>
            </div>
            
            <!-- Merged Availability Grid -->
            {% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}
            <hr class="section-divider">
            <h4 class="section-title"><i class="fas fa-clock"></i> Select Match Time</h4>
            <p class="text-muted small">Click time slots consecutively to set match duration. Available players will be auto-selected below.</p>
            
            <div id="merged-disponibility-selected" class="merged-disponibility-selected-display hidden">
                <span>Selected time:</span>
                <span class="selected-time-badge" id="selected-time-badge"></span>
                <button type="button" class="btn btn-sm btn-outline" onclick="clearTimeSelection()">Change</button>
            </div>
            
            <div id="merged-disponibility-grid" class="merged-disponibility-grid">
                <p class="text-muted">Loading availability...</p>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="start_time">Start Time <span class="text-muted">(Required)</span></label>
                    <input type="time" name="start_time" id="start_time" class="form-input" required>
                </div>
                <div class="form-group">
                    <label for="end_time">End Time <span class="text-muted">(Set by clicking consecutive slots)</span></label>
                    <input type="time" name="end_time" id="end_time" class="form-input" required>
                </div>
            </div>
            {% else %}
            <!-- Fallback time inputs for users without disponibility access -->
            <div class="form-row">
                <div class="form-group">
                    <label for="start_time">Start Time</label>
                    <input type="time" name="start_time" id="start_time" class="form-input">
                </div>
                <div class="form-group">
                    <label for="end_time">End Time</label>
                    <input type="time" name="end_time" id="end_time" class="form-input">
                </div>
            </div>
            {% endif %}
            
            <div class="form-group">
                <label for="description">Description</label>
                <textarea name="description" id="description" class="form-textarea" placeholder="Optional notes about this match"></textarea>
            </div>
            
            <!-- Team vs Team Selection -->
            <div id="team-vs-team-section">
                <hr class="section-divider">
                <h4 class="section-title"><i class="fas fa-users"></i> Select Teams</h4>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="team1_id">Team 1</label>
                        <select name="team1_id" id="team1_id" class="form-select">
                            <option value="">-- Select Team 1 --</option>
                            {% for team in teams %}
                            <option value="{{ team.id }}">{{ team.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="team2_id">Team 2</label>
                        <select name="team2_id" id="team2_id" class="form-select">
                            <option value="">-- Select Team 2 --</option>
                            {% for team in teams %}
                            <option value="{{ team.id }}">{{ team.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Player vs Player Selection -->
            <div id="player-vs-player-section" class="hidden">
                <hr class="section-divider">
                <h4 class="section-title"><i class="fas fa-user-friends"></i> Select Players</h4>
                
                <!-- Randomize Teams Section -->
                <div class="randomize-section">
                    <div class="randomize-controls">
                        <label><i class="fas fa-random"></i> Randomize Teams:</label>
                        <input type="number" id="team1-size" class="randomize-input" min="1" value="1" onchange="updateRandomizePreview()">
                        <span>vs</span>
                        <span id="team2-size-preview" class="randomize-preview">0</span>
                        <button type="button" class="btn btn-sm randomize-btn" onclick="randomizeTeams()">
                            <i class="fas fa-random"></i> Randomize
                        </button>
                    </div>
                    <p class="text-muted small" id="randomize-hint">Select players then click Randomize to split them into teams.</p>
                </div>
                
                <p class="text-muted small"><i class="fas fa-info-circle"></i> Green indicators show player availability for the match date/time</p>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>Team 1 Players</label>
                        <div class="checkbox-grid" id="team1-players-list">
                            {% for player in all_players %}
                            <label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
                                <input type="checkbox" name="team1_player_ids" value="{{ player.id }}" onchange="handleTeamSelection(this, 1)">
                                {{ player.full_name }}
                                <span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Team 2 Players</label>
                        <div class="checkbox-grid" id="team2-players-list">
                            {% for player in all_players %}
                            <label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
                                <input type="checkbox" name="team2_player_ids" value="{{ player.id }}" onchange="handleTeamSelection(this, 2)">
                                {{ player.full_name }}
                                <span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Player Scrim Selection -->
            <div id="player-scrim-section" class="hidden">
                <hr class="section-divider">
                <h4 class="section-title"><i class="fas fa-users"></i> Select Players</h4>
                
                <p class="text-muted small"><i class="fas fa-info-circle"></i> Green indicators show player availability for the match date/time</p>
                
                <div class="form-group">
                    <label>Players</label>
                    <div class="checkbox-grid" id="scrim-players-list">
                        {% for player in all_players %}
                        <label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
                            <input type="checkbox" name="player_ids" value="{{ player.id }}">
                            {{ player.full_name }}
                            <span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Schedule Match
                </button>
                <a href="{{ url_for('tryouts.view_tryout', tryout_id=tryout.id) }}" class="btn btn-secondary">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Time slots from 12pm (12:00) to 12am (24:00)
var TIME_SLOTS = [];
for (var h = 12; h <= 24; h++) {
    for (var m = 0; m < 60; m += 30) {
        if (h === 24 && m > 0) continue;
        var displayHour;
        var displayAmpm;
        if (h === 24) {
            displayHour = 12;
            displayAmpm = 'AM';
        } else if (h > 12) {
            displayHour = h - 12;
            displayAmpm = 'PM';
        } else {
            displayHour = h;
            displayAmpm = 'PM';
        }
        var timeStr = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
        var displayTime = displayHour + ':' + (m < 10 ? '0' : '') + m + ' ' + displayAmpm;
        TIME_SLOTS.push({ time: timeStr, display: displayTime });
    }
}

var DAYS = [
    { value: 0, name: 'Monday' },
    { value: 1, name: 'Tuesday' },
    { value: 2, name: 'Wednesday' },
    { value: 3, name: 'Thursday' },
    { value: 4, name: 'Friday' },
    { value: 5, name: 'Saturday' },
    { value: 6, name: 'Sunday' }
];

var selectedDate = '';
var selectedSlots = []; // Array of selected time slots: ['17:00', '17:30', '18:00']
var allDisponibilities = {};
var canViewDisponibilities = {% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}true{% else %}false{% endif %};
var totalPlayers = {{ all_players|length }};

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Only load disponibilities if user has permission
    {% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}
    fetchDisponibilities();
    {% endif %}
    
    // Set up date change listener
    document.getElementById('date').addEventListener('change', function() {
        selectedDate = this.value;
        if (allDisponibilitiesInitialized()) {
            renderMergedDisponibilityGrid();
        }
    });
    
    // Initialize date
    selectedDate = document.getElementById('date').value;
    
    // Initialize match type sections
    toggleMatchType();
});

function allDisponibilitiesInitialized() {
    return Object.keys(allDisponibilities).length > 0;
}

function fetchDisponibilities() {
    if (!canViewDisponibilities) return;
    fetch('{{ url_for("users.get_disponibilities") }}')
        .then(function(response) { return response.json(); })
        .then(function(data) {
            allDisponibilities = data;
            renderMergedDisponibilityGrid();
        })
        .catch(function(error) {
            console.error('Error fetching disponibilities:', error);
        });
}

function renderMergedDisponibilityGrid() {
    var grid = document.getElementById('merged-disponibility-grid');
    if (!grid || !canViewDisponibilities) return;
    
    // Calculate day of week from selected date
    var dateParts = selectedDate.split('-');
    var dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
    var jsDay = dateObj.getDay();
    var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1; // Convert to Mon=0 format
    
    var html = '<div style="margin-bottom: 10px;"><strong>Click time slots consecutively to set match duration</strong></div>';
    
    // Always show only the selected day (not all days)
    DAYS.forEach(function(day) {
        if (day.value !== dayOfWeek) return; // Skip days that don't match
        
        var dayRow = '<div class="merged-disponibility-day-row">';
        dayRow += '<div class="merged-disponibility-day-label">' + day.name + '</div>';
        dayRow += '<div class="merged-disponibility-time-blocks">';
        
        TIME_SLOTS.forEach(function(slot) {
            var count = getAvailabilityCount(day.value, slot.time);
            var percentage = totalPlayers > 0 ? count / totalPlayers : 0;
            var cssClass = 'merged-disponibility-time-block';
            
            if (percentage >= 0.75) {
                cssClass += ' high-availability';
            } else if (percentage >= 0.5) {
                cssClass += ' medium-availability';
            } else {
                cssClass += ' low-availability';
            }
            
            // Check if this slot is in selectedSlots
            if (selectedSlots.includes(slot.time)) {
                cssClass += ' selected';
            }
            
            dayRow += '<div class="' + cssClass + '" data-day="' + day.value + '" data-time="' + slot.time + '" ' +
                       'onclick="toggleTimeSlot(' + day.value + ', \'' + slot.time + '\', this)">' +
                       slot.display +
                       '<span class="merged-disponibility-count">' + count + '</span>' +
                       '</div>';
        });
        
        dayRow += '</div></div>';
        html += dayRow;
    });
    
    grid.innerHTML = html;
}

function getAvailabilityCount(dayOfWeek, timeStr) {
    var count = 0;
    var timeParts = timeStr.split(':');
    var minutes = parseInt(timeParts[0]) * 60 + parseInt(timeParts[1]);
    
    for (var playerId in allDisponibilities) {
        var playerData = allDisponibilities[playerId];
        if (playerData && playerData.disponibilities) {
            var isAvailable = playerData.disponibilities.some(function(d) {
                if (d.day_of_week !== dayOfWeek) return false;
                var startParts = d.start_time.split(':');
                var endParts = d.end_time.split(':');
                var dispMinutes = parseInt(startParts[0]) * 60 + parseInt(startParts[1]);
                var endMinutes = parseInt(endParts[0]) * 60 + parseInt(endParts[1]);
                
                return minutes >= dispMinutes && minutes < endMinutes;
            });
            if (isAvailable) count++;
        }
    }
    return count;
}

function getSlotsForPlayer(playerId, dayOfWeek) {
    /**Get list of available time slots for a specific player on a given day.
     * Returns array of time strings in 'HH:MM' format.
     */
    var playerData = allDisponibilities[playerId];
    if (!playerData || !playerData.disponibilities) return [];
    
    var availableSlots = [];
    TIME_SLOTS.forEach(function(slot) {
        var timeParts = slot.time.split(':');
        var minutes = parseInt(timeParts[0]) * 60 + parseInt(timeParts[1]);
        
        var isAvailable = playerData.disponibilities.some(function(d) {
            if (d.day_of_week !== dayOfWeek) return false;
            var startParts = d.start_time.split(':');
            var endParts = d.end_time.split(':');
            var dispMinutes = parseInt(startParts[0]) * 60 + parseInt(startParts[1]);
            var endMinutes = parseInt(endParts[0]) * 60 + parseInt(endParts[1]);
            
            return minutes >= dispMinutes && minutes < endMinutes;
        });
        
        if (isAvailable) {
            availableSlots.push(slot.time);
        }
    });
    
    return availableSlots;
}

function toggleTimeSlot(dayOfWeek, timeStr, element) {
    var slotIndex = TIME_SLOTS.findIndex(function(s) { return s.time === timeStr; });
    
    if (selectedSlots.length === 0) {
        // First click - start new selection
        selectedSlots = [timeStr];
    } else {
        var firstSelectedIndex = TIME_SLOTS.findIndex(function(s) { return s.time === selectedSlots[0]; });
        
        if (slotIndex === firstSelectedIndex) {
            // Clicking the first selected slot again - keep it as single slot
            selectedSlots = [timeStr];
        } else if (slotIndex < firstSelectedIndex) {
            // Clicking before the first slot - extend selection backward
            var newSlots = [];
            for (var i = slotIndex; i <= firstSelectedIndex; i++) {
                newSlots.push(TIME_SLOTS[i].time);
            }
            selectedSlots = newSlots;
        } else if (slotIndex > firstSelectedIndex) {
            // Clicking after the first slot - extend selection forward
            var newSlots = [];
            for (var i = firstSelectedIndex; i <= slotIndex; i++) {
                newSlots.push(TIME_SLOTS[i].time);
            }
            selectedSlots = newSlots;
        } else {
            // Already selected, toggle off
            selectedSlots = selectedSlots.filter(function(t) { return t !== timeStr; });
        }
    }
    
    // Update form inputs
    var startTime = selectedSlots[0] || '';
    var endTime = selectedSlots[selectedSlots.length - 1] || '';
    
    // Calculate end time as 30 min after last slot (end of that block)
    if (endTime) {
        var timeParts = endTime.split(':');
        var endHour = parseInt(timeParts[0]);
        var endMin = parseInt(timeParts[1]) + 30;
        if (endMin >= 60) {
            endMin = 0;
            endHour++;
        }
        endTime = (endHour < 10 ? '0' : '') + endHour + ':' + (endMin < 10 ? '0' : '') + endMin;
    }
    
    document.getElementById('start_time').value = startTime;
    document.getElementById('end_time').value = endTime;
    
    // Update selected display
    if (selectedSlots.length > 0) {
        document.getElementById('merged-disponibility-selected').classList.remove('hidden');
        document.getElementById('selected-time-badge').textContent = 
            formatTimeDisplay(selectedSlots[0]) + ' - ' + formatTimeDisplay(endTime);
    } else {
        document.getElementById('merged-disponibility-selected').classList.add('hidden');
    }
    
    // Update grid highlighting
    document.querySelectorAll('.merged-disponibility-time-block').forEach(function(el) {
        el.classList.remove('selected');
    });
    selectedSlots.forEach(function(slot) {
        var selectedEl = document.querySelector('.merged-disponibility-time-block[data-time="' + slot + '"]');
        if (selectedEl) selectedEl.classList.add('selected');
    });
    
    // Fetch and auto-select available players for all selected slots
    if (selectedSlots.length > 0) {
        fetchAvailablePlayersForSlots();
    }
}

function formatTimeDisplay(timeStr) {
    var parts = timeStr.split(':');
    var h = parseInt(parts[0]);
    var m = parts[1];
    var displayHour;
    var ampm;
    if (h === 0) {
        displayHour = 12;
        ampm = 'AM';
    } else if (h < 12) {
        displayHour = h;
        ampm = 'AM';
    } else if (h === 12) {
        displayHour = 12;
        ampm = 'PM';
    } else {
        displayHour = h - 12;
        ampm = 'PM';
    }
    return displayHour + ':' + m + ' ' + ampm;
}

function fetchAvailablePlayersForSlots() {
    if (!selectedDate || selectedSlots.length === 0) return;
    
    // Get day of week
    var dateParts = selectedDate.split('-');
    var dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
    var jsDay = dateObj.getDay();
    var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1;
    
    // Find players available at ANY of the selected slots
    var availableIds = [];
    for (var playerId in allDisponibilities) {
        var playerSlots = getSlotsForPlayer(parseInt(playerId), dayOfWeek);
        var hasSlot = selectedSlots.some(function(slot) {
            return playerSlots.includes(slot);
        });
        if (hasSlot) {
            availableIds.push(parseInt(playerId));
        }
    }
    
    // Auto-select available players
    var matchType = document.getElementById('match_type').value;
    
    if (matchType === 'player_vs_player') {
        document.querySelectorAll('input[name="team1_player_ids"], input[name="team2_player_ids"]').forEach(function(cb) {
            cb.checked = availableIds.includes(parseInt(cb.value));
        });
    } else if (matchType === 'player_scrim') {
        document.querySelectorAll('input[name="player_ids"]').forEach(function(cb) {
            cb.checked = availableIds.includes(parseInt(cb.value));
        });
    }
    
    updateRandomizePreview();
}

function clearTimeSelection() {
    selectedSlots = [];
    document.getElementById('start_time').value = '';
    document.getElementById('end_time').value = '';
    document.getElementById('merged-disponibility-selected').classList.add('hidden');
    document.querySelectorAll('.merged-disponibility-time-block').forEach(function(el) {
        el.classList.remove('selected');
    });
}

function updateRandomizePreview() {
    var checkedCount = document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="player_ids"]:checked').length;
    var team1Size = parseInt(document.getElementById('team1-size').value) || 1;
    var team2Size = checkedCount - team1Size;
    
    if (team2Size < 0) team2Size = 0;
    
    document.getElementById('team2-size-preview').textContent = team2Size;
}

function randomizeTeams() {
    var allChecked = [];
    
    // Get all checked players
    document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="team2_player_ids"]:checked').forEach(function(cb) {
        allChecked.push(parseInt(cb.value));
    });
    
    if (allChecked.length === 0) {
        alert('Please select at least one player before randomizing teams.');
        return;
    }
    
    // Shuffle players
    for (var i = allChecked.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = allChecked[i];
        allChecked[i] = allChecked[j];
        allChecked[j] = temp;
    }
    
    // Split based on team1-size input
    var team1Size = parseInt(document.getElementById('team1-size').value) || 1;
    var team1Players = allChecked.slice(0, team1Size);
    var team2Players = allChecked.slice(team1Size);
    
    // Uncheck all first
    document.querySelectorAll('input[name="team1_player_ids"], input[name="team2_player_ids"]').forEach(function(cb) {
        cb.checked = false;
    });
    
    // Check players in their respective teams
    team1Players.forEach(function(pid) {
        var cb = document.querySelector('input[name="team1_player_ids"][value="' + pid + '"]');
        if (cb) cb.checked = true;
    });
    
    team2Players.forEach(function(pid) {
        var cb = document.querySelector('input[name="team2_player_ids"][value="' + pid + '"]');
        if (cb) cb.checked = true;
    });
    
    updateRandomizePreview();
}

function toggleMatchType() {
    var matchType = document.getElementById('match_type').value;
    var teamSection = document.getElementById('team-vs-team-section');
    var playerVsPlayerSection = document.getElementById('player-vs-player-section');
    var scrimSection = document.getElementById('player-scrim-section');
    
    // Hide all sections first
    teamSection.classList.add('hidden');
    playerVsPlayerSection.classList.add('hidden');
    scrimSection.classList.add('hidden');
    
    // Show relevant section
    if (matchType === 'team_vs_team') {
        teamSection.classList.remove('hidden');
    } else if (matchType === 'player_vs_player') {
        playerVsPlayerSection.classList.remove('hidden');
    } else if (matchType === 'player_scrim') {
        scrimSection.classList.remove('hidden');
    }
    
    // Update indicators when match type changes
    updateDisponibilityIndicators();
}

function handleTeamSelection(checkbox, teamSide) {
    var otherSide = teamSide === 1 ? 2 : 1;
    var otherCheckboxes = document.querySelectorAll('input[name="team' + otherSide + '_player_ids"]');
    var playerId = checkbox.value;
    
    otherCheckboxes.forEach(function(other) {
        if (other.value === playerId) {
            other.checked = false;
        }
    });
    
    updateRandomizePreview();
}

function updateDisponibilityIndicators() {
    if (!canViewDisponibilities) return;
    
    var dateInput = document.getElementById('date').value;
    var startTimeInput = document.getElementById('start_time').value;
    
    if (!dateInput || !startTimeInput) return;
    
    var dateParts = dateInput.split('-');
    var dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
    var jsDay = dateObj.getDay();
    var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1;
    
    // Find the first selected start slot
    var slotIndex = TIME_SLOTS.findIndex(function(s) { return s.time === startTimeInput; });
    
    document.querySelectorAll('.disponibility-indicator').forEach(function(indicator) {
        var playerId = indicator.getAttribute('data-player-id');
        var playerData = allDisponibilities[playerId];
        
        if (playerData && playerData.disponibilities) {
            var playerSlots = getSlotsForPlayer(parseInt(playerId), dayOfWeek);
            var isAvailable = selectedSlots.some(function(slot) {
                return playerSlots.includes(slot);
            });
            
            indicator.style.display = 'inline-block';
            indicator.style.width = '12px';
            indicator.style.height = '12px';
            indicator.style.borderRadius = '50%';
            indicator.style.marginLeft = '8px';
            indicator.style.backgroundColor = isAvailable ? '#10b981' : '#9ca3af';
        } else {
            indicator.style.display = 'none';
        }
    });
}
</script>
{% endblock %}