@extends('layouts/contentNavbarLayout')

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

@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/libs/select2/select2.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.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;
}
</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('globalChallenges.index') }}">Global 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"></i>Create Global Challenge
                        </h4>
                        <p class="card-text text-muted mb-0">Create a new global challenge for all users</p>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="{{ route('globalChallenges.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('globalChallenges.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="row">
                        <!-- Basic Information -->
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="mdi mdi-information-outline me-2"></i>Basic Information
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <label for="title" class="form-label fw-semibold">
                                                <i class="mdi mdi-format-title me-1"></i>Challenge Title
                                            </label>
                                            <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                                   id="title" name="title" value="{{ old('title') }}" 
                                                   placeholder="e.g., Global Walking Challenge 2025" required>
                                            @error('title')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-12 mb-3">
                                            <label for="description" class="form-label fw-semibold">
                                                <i class="mdi mdi-text me-1"></i>Description
                                            </label>
                                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                                      id="description" name="description" rows="4" 
                                                      placeholder="Describe the challenge details, goals, and benefits..." required>{{ old('description') }}</textarea>
                                            @error('description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="type" class="form-label fw-semibold">
                                                <i class="mdi mdi-run me-1"></i>Challenge Type
                                            </label>
                                            <select class="form-select @error('type') is-invalid @enderror" 
                                                    id="type" name="type" required>
                                                <option value="">Select Type</option>
                                                <option value="walking" {{ old('type') == 'walking' ? 'selected' : '' }}>Walking</option>
                                            </select>
                                            @error('type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="required_steps" class="form-label fw-semibold">
                                                <i class="mdi mdi-target me-1"></i>Required Steps
                                            </label>
                                            <input type="number" class="form-control @error('required_steps') is-invalid @enderror" 
                                                   id="required_steps" name="required_steps" value="{{ old('required_steps') }}" 
                                                   min="1" placeholder="e.g., 10000" required onchange="updateMapOptions()">
                                            @error('required_steps')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Challenge Map -->
                                        <div class="col-12 mb-3">
                                            <label for="challenge_map_id" class="form-label fw-semibold">
                                                <i class="mdi mdi-map me-1"></i>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>
                                            <small class="text-muted">Select a compatible map or leave empty for no map</small>
                                            @error('challenge_map_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <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 class="col-md-6 mb-3">
                                            <label for="status" class="form-label fw-semibold">
                                                <i class="mdi mdi-flag me-1"></i>Challenge Status
                                            </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="finished" {{ old('status') == 'finished' ? 'selected' : '' }}>Finished</option>
                                                <option value="canceled" {{ old('status') == 'canceled' ? 'selected' : '' }}>Canceled</option>
                                                <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                            </select>
                                            @error('status')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="start_date" class="form-label fw-semibold">
                                                <i class="mdi mdi-calendar-start me-1"></i>Start Date
                                            </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="col-md-6 mb-3">
                                            <label for="end_date" class="form-label fw-semibold">
                                                <i class="mdi mdi-calendar-end me-1"></i>End Date
                                            </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>
                                </div>
                            </div>
                        </div>

                        <!-- Prize Configuration -->
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="mdi mdi-trophy me-2"></i>Prize Configuration
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <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' : '' }}>
                                            <label class="form-check-label fw-semibold" for="is_points_prize">
                                                <i class="mdi mdi-star me-1"></i>Enable Points Prize
                                            </label>
                                        </div>
                                        <small class="text-muted">Enable this to offer points as a reward for completing the challenge</small>
                                    </div>

                                    <!-- Points Prize Amount -->
                                    <div class="mb-3" id="points_prize_section" style="display: none;">
                                        <label for="points_prize" class="form-label fw-semibold">
                                            <i class="mdi mdi-star me-1"></i>Points Amount
                                        </label>
                                        <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., 1000">
                                        @error('points_prize')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Prize Description -->
                                    <div class="mb-3">
                                        <label for="prize_description" class="form-label fw-semibold">
                                            <i class="mdi mdi-text-box me-1"></i>Prize Description
                                        </label>
                                        <textarea class="form-control @error('prize_description') is-invalid @enderror" 
                                                  id="prize_description" name="prize_description" rows="3" 
                                                  placeholder="Describe the prize details and how winners will be selected...">{{ old('prize_description') }}</textarea>
                                        @error('prize_description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Image Upload -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="mdi mdi-image me-2"></i>Challenge Image
                                    </h5>
                                </div>
                                <div class="card-body text-center">
                                    <div class="mb-3">
                                        <img id="image_preview" src="{{ asset('assets/img/default_image/challenge-default.png') }}" 
                                             alt="Preview" class="preview-image" style="display: block;">
                                    </div>
                                    <div class="mb-3">
                                        <input type="file" class="form-control @error('image') is-invalid @enderror" 
                                               id="image" name="image" accept="image/*">
                                        @error('image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <small class="text-muted">
                                        <i class="mdi mdi-information-outline me-1"></i>
                                        Recommended size: 800x600px. Max size: 2MB
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="row mt-4">
                        <div class="col-12 text-end">
                            <a href="{{ route('globalChallenges.index') }}" class="btn btn-secondary me-2">
                                <i class="mdi mdi-close me-1"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="mdi mdi-check me-1"></i>Create Challenge
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
@endsection

@section('page-script')
<script>
$(document).ready(function() {
    // Image preview
    $('#image').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#image_preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(file);
        }
    });

    // Toggle prize sections based on checkbox
    $('#is_points_prize').change(function() {
        const pointsSection = $('#points_prize_section');
        
        if (this.checked) {
            pointsSection.show();
            $('#points_prize').prop('required', true);
        } else {
            pointsSection.hide();
            $('#points_prize').prop('required', false);
        }
        updatePrizePreview();
    });

    // Map management
    fetchMaps();
});

// 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 requiredSteps = parseInt(document.getElementById('required_steps').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 (requiredSteps > 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 === requiredSteps) {
                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';
    }
}
</script>
@endsection