@extends('layouts/contentNavbarLayout')

@section('title', 'Create Personal Challenge')

@section('vendor-style')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
@endsection

@section('page-style')
<style>
.preview-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 0.5rem;
    border: 2px dashed #dee2e6;
}

.prize-toggle {
    cursor: pointer;
}

.prize-toggle:hover {
    background-color: #f8f9fa;
}

.form-section {
    background: #f8f9fa;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e9ecef;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.frequency-card {
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.frequency-card:hover {
    border-color: #28a745;
    background-color: #f8f9fa;
}

.frequency-card.active {
    border-color: #28a745;
    background-color: #d4edda;
}

.frequency-card i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
</style>
@endsection

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('personalChallenges.index') }}">Personal Challenges</a></li>
        <li class="breadcrumb-item active">Create</li>
    </ol>
</nav>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h4 class="card-title mb-0">
                            <i class="mdi mdi-plus-circle me-2 text-success"></i>Create Personal Challenge
                        </h4>
                        <p class="card-text text-muted mb-0">Create a new personal challenge for individual progress</p>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="{{ route('personalChallenges.index') }}" class="btn btn-secondary">
                            <i class="mdi mdi-arrow-left me-1"></i>Back to List
                        </a>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <form action="{{ route('personalChallenges.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="mdi mdi-alert-circle me-2"></i>{{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <!-- Basic Information -->
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="mdi mdi-information-outline me-2"></i>Basic Information
                        </div>
                        
                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="title" class="form-label">Challenge Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                           id="title" name="title" value="{{ old('title') }}" 
                                           placeholder="Enter challenge title" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" name="description" rows="4" 
                                              placeholder="Describe the challenge..." required>{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="image" class="form-label">Challenge Image</label>
                                    <input type="file" class="form-control @error('image') is-invalid @enderror" 
                                           id="image" name="image" accept="image/*" onchange="previewImage(this)">
                                    @error('image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="mt-2">
                                        <img id="imagePreview" class="preview-image" style="display: none;" alt="Preview">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Challenge Configuration -->
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="mdi mdi-cog-outline me-2"></i>Challenge Configuration
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="type" class="form-label">Challenge Type <span class="text-danger">*</span></label>
                                    <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                                        <option value="">Select Challenge Type</option>
                                        <option value="walking" {{ old('type') === 'walking' ? 'selected' : '' }}>Walking Challenge</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Frequency <span class="text-danger">*</span></label>
                                    <div class="row g-3">
                                        <div class="col-4">
                                            <div class="frequency-card" data-frequency="daily">
                                                <i class="mdi mdi-calendar-today text-danger"></i>
                                                <div class="fw-bold">Daily</div>
                                                <small class="text-muted">Every day</small>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="frequency-card" data-frequency="weekly">
                                                <i class="mdi mdi-calendar-week text-primary"></i>
                                                <div class="fw-bold">Weekly</div>
                                                <small class="text-muted">Every week</small>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="frequency-card" data-frequency="monthly">
                                                <i class="mdi mdi-calendar-month text-info"></i>
                                                <div class="fw-bold">Monthly</div>
                                                <small class="text-muted">Every month</small>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="frequency" id="frequency" value="{{ old('frequency') }}">
                                    @error('frequency')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('start_date') is-invalid @enderror" 
                                           id="start_date" name="start_date" value="{{ old('start_date') }}" required>
                                    @error('start_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="end_date" class="form-label">End Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('end_date') is-invalid @enderror" 
                                           id="end_date" name="end_date" value="{{ old('end_date') }}" required>
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                    <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                        <option value="">Select Status</option>
                                        <option value="active" {{ old('status') === 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                        <option value="finished" {{ old('status') === 'finished' ? 'selected' : '' }}>Finished</option>
                                        <option value="canceled" {{ old('status') === 'canceled' ? 'selected' : '' }}>Canceled</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Goal Settings -->
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="mdi mdi-target me-2"></i>Goal Settings
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_steps_goal" name="is_steps_goal" 
                                               {{ old('is_steps_goal') ? 'checked' : '' }} onchange="toggleStepsGoal()">
                                        <label class="form-check-label" for="is_steps_goal">
                                            Set Steps Goal
                                        </label>
                                    </div>
                                    <small class="text-muted">Enable if users need to reach a specific number of steps to complete the challenge</small>
                                </div>

                                <div id="stepsGoalSection" style="display: {{ old('is_steps_goal') ? 'block' : 'none' }};">
                                    <div class="mb-3">
                                        <label for="steps_goal" class="form-label">Required Steps</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="mdi mdi-walk"></i></span>
                                            <input type="number" class="form-control @error('steps_goal') is-invalid @enderror" 
                                                   id="steps_goal" name="steps_goal" value="{{ old('steps_goal') }}" 
                                                   min="1" placeholder="e.g., 10000" onchange="updateMapOptions()">
                                            <span class="input-group-text">steps</span>
                                        </div>
                                        @error('steps_goal')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <!-- Challenge Map Selection (Optional) -->
                                <div class="mb-3">
                                    <label for="challenge_map_id" class="form-label">Challenge Map (Optional)</label>
                                    <select class="form-select @error('challenge_map_id') is-invalid @enderror" id="challenge_map_id" name="challenge_map_id">
                                        <option value="">No Map Selected</option>
                                    </select>
                                    @error('challenge_map_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Select a compatible map or leave empty for no map</small>
                                    <div id="map-preview" class="mt-2" style="display: none;">
                                        <div class="border rounded p-2 bg-light">
                                            <strong id="map-name"></strong>
                                            <p id="map-description" class="mb-1 text-muted"></p>
                                            <small><strong>Checkpoints:</strong> <span id="map-checkpoints"></span> | <strong>Total Steps:</strong> <span id="map-steps"></span></small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Prize Settings -->
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="mdi mdi-trophy-outline me-2"></i>Prize Settings
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_points_prize" name="is_points_prize" 
                                               {{ old('is_points_prize') ? 'checked' : '' }} onchange="togglePointsPrize()">
                                        <label class="form-check-label" for="is_points_prize">
                                            Award Points
                                        </label>
                                    </div>
                                    <small class="text-muted">Enable to award points for completing the challenge</small>
                                </div>

                                <div id="pointsPrizeSection" style="display: {{ old('is_points_prize') ? 'block' : 'none' }};">
                                    <div class="mb-3">
                                        <label for="points_prize" class="form-label">Points to Award</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="mdi mdi-star"></i></span>
                                            <input type="number" class="form-control @error('points_prize') is-invalid @enderror" 
                                                   id="points_prize" name="points_prize" value="{{ old('points_prize') }}" 
                                                   min="1" placeholder="e.g., 100">
                                            <span class="input-group-text">points</span>
                                        </div>
                                        @error('points_prize')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="prize_description" class="form-label">Prize Description</label>
                                    <textarea class="form-control @error('prize_description') is-invalid @enderror" 
                                              id="prize_description" name="prize_description" rows="3" 
                                              placeholder="Describe what users get for completing the challenge...">{{ old('prize_description') }}</textarea>
                                    @error('prize_description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Auto-Enrollment Settings -->
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="mdi mdi-account-group-outline me-2"></i>Enrollment Settings
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="auto_enroll_all_users" name="auto_enroll_all_users" 
                                               {{ old('auto_enroll_all_users') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="auto_enroll_all_users">
                                            Auto-enroll all existing users
                                        </label>
                                    </div>
                                    <small class="text-muted">
                                        If checked, all existing users will be automatically enrolled in this challenge when it's created.
                                        New users can still join manually through the mobile app.
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="d-flex gap-3 pt-3">
                        <button type="submit" class="btn btn-success">
                            <i class="mdi mdi-check me-1"></i>Create Challenge
                        </button>
                        <a href="{{ route('personalChallenges.index') }}" class="btn btn-secondary">
                            <i class="mdi mdi-close me-1"></i>Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
// Image preview
function previewImage(input) {
    const preview = document.getElementById('imagePreview');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        }
        reader.readAsDataURL(input.files[0]);
    } else {
        preview.style.display = 'none';
    }
}

// Frequency selection
document.querySelectorAll('.frequency-card').forEach(card => {
    card.addEventListener('click', function() {
        document.querySelectorAll('.frequency-card').forEach(c => c.classList.remove('active'));
        
        this.classList.add('active');
        
        document.getElementById('frequency').value = this.dataset.frequency;
    });
});

// Set initial frequency if exists
const oldFrequency = '{{ old("frequency") }}';
if (oldFrequency) {
    document.querySelector(`[data-frequency="${oldFrequency}"]`)?.classList.add('active');
}

// Toggle steps goal section
function toggleStepsGoal() {
    const checkbox = document.getElementById('is_steps_goal');
    const section = document.getElementById('stepsGoalSection');
    section.style.display = checkbox.checked ? 'block' : 'none';
}

// Toggle points prize section
function togglePointsPrize() {
    const checkbox = document.getElementById('is_points_prize');
    const section = document.getElementById('pointsPrizeSection');
    section.style.display = checkbox.checked ? 'block' : 'none';
}

// Set minimum date to today
document.getElementById('start_date').min = new Date().toISOString().split('T')[0];

// Update end date minimum when start date changes
document.getElementById('start_date').addEventListener('change', function() {
    const endDate = document.getElementById('end_date');
    endDate.min = this.value;
    if (endDate.value && endDate.value <= this.value) {
        endDate.value = '';
    }
});

// Map management
let availableMaps = [];

async function fetchMaps() {
    try {
        const response = await fetch('/api/challenge-maps');
        availableMaps = await response.json();
        updateMapOptions();
    } catch (error) {
        console.error('Error fetching maps:', error);
    }
}

function updateMapOptions() {
    const stepsGoal = parseInt(document.getElementById('steps_goal').value) || 0;
    const mapSelect = document.getElementById('challenge_map_id');
    const currentValue = mapSelect.value;
    
    // Clear existing options except the first one
    mapSelect.innerHTML = '<option value="">No Map Selected</option>';
    
    if (stepsGoal > 0 && availableMaps.length > 0) {
        availableMaps.forEach(map => {
            const option = document.createElement('option');
            option.value = map.id;
            option.dataset.map = JSON.stringify(map);
            
            if (map.total_steps === stepsGoal) {
                option.textContent = `${map.name} (${map.total_steps.toLocaleString()} steps) ✓`;
                option.classList.add('compatible');
            } else {
                option.textContent = `${map.name} (${map.total_steps.toLocaleString()} steps) - Incompatible`;
                option.disabled = true;
                option.classList.add('incompatible');
            }
            
            mapSelect.appendChild(option);
        });
        
        // Restore selection if it was valid
        if (currentValue && mapSelect.querySelector(`option[value="${currentValue}"]`)) {
            mapSelect.value = currentValue;
            showMapPreview();
        }
    }
}

// Show map preview when selection changes
document.getElementById('challenge_map_id').addEventListener('change', function() {
    showMapPreview();
});

function showMapPreview() {
    const mapSelect = document.getElementById('challenge_map_id');
    const preview = document.getElementById('map-preview');
    
    if (mapSelect.value) {
        const selectedOption = mapSelect.selectedOptions[0];
        const mapData = JSON.parse(selectedOption.dataset.map);
        
        document.getElementById('map-name').textContent = mapData.name;
        document.getElementById('map-description').textContent = mapData.description || 'No description';
        document.getElementById('map-checkpoints').textContent = mapData.checkpoints_count || mapData.checkpoints?.length || 0;
        document.getElementById('map-steps').textContent = mapData.total_steps.toLocaleString();
        
        preview.style.display = 'block';
    } else {
        preview.style.display = 'none';
    }
}

// Initialize maps when page loads
document.addEventListener('DOMContentLoaded', function() {
    fetchMaps();
});
</script>
@endsection