@extends('layouts/contentNavbarLayout')
@section('title', 'Create Company Challenge')

@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('companyChallenges.index') }}">Company Challenges</a></li>
        <li class="breadcrumb-item active">Create</li>
    </ol>
</nav>
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="mb-1 fw-bold text-primary">
                        <i class="mdi mdi-plus-circle me-2"></i>Create Company Challenge
                    </h1>
                    <p class="text-muted mb-0">Set up a new company-wide challenge</p>
                </div>
                <div>
                    <a href="{{ route('companyChallenges.index') }}" class="btn btn-outline-secondary">
                        <i class="mdi mdi-arrow-left me-1"></i>Back to Challenges
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Form -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="mdi mdi-trophy me-2"></i>Challenge Details
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('companyChallenges.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <!-- Basic Information -->
                            <div class="col-lg-8">
                                <div class="row g-3">
                                    <!-- Title -->
                                    <div class="col-12">
                                        <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="Enter challenge title" required>
                                        @error('title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Description -->
                                    <div class="col-12">
                                        <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>

                                    <!-- Company Selection -->
                                    <div class="col-md-6">
                                        <label for="company_id" class="form-label fw-semibold">
                                            <i class="mdi mdi-domain me-1"></i>Company *
                                        </label>
                                        <select class="form-select @error('company_id') is-invalid @enderror" 
                                                id="company_id" name="company_id" required>
                                            <option value="">Select Company</option>
                                            @foreach($companies as $company)
                                                <option value="{{ $company->id }}" {{ old('company_id') == $company->id ? 'selected' : '' }}>
                                                    {{ $company->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('company_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Challenge Type -->
                                    <div class="col-md-6">
                                        <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>

                                    <!-- Date Range -->
                                    <div class="col-md-6">
                                        <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') }}" 
                                               min="{{ date('Y-m-d') }}" required>
                                        @error('start_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <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>

                                    <!-- Required Steps -->
                                    <div class="col-md-6">
                                        <label for="required_steps" class="form-label fw-semibold">
                                            <i class="mdi mdi-shoe-print 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="1000" step="100" placeholder="e.g., 10000" required onchange="updateMapOptions()">
                                        <small class="text-muted">Minimum 1,000 steps required</small>
                                        @error('required_steps')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Challenge Map -->
                                    <div class="col-12">
                                        <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>

                                    <!-- Challenge Status -->
                                    <div class="col-md-6">
                                        <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>

                                    <!-- Image Upload -->
                                    <div class="col-md-6">
                                        <label for="image" class="form-label fw-semibold">
                                            <i class="mdi mdi-image me-1"></i>Challenge Image *
                                        </label>
                                        <input type="file" class="form-control @error('image') is-invalid @enderror" 
                                               id="image" name="image" accept="image/*" required>
                                        <small class="text-muted">Max size: 2MB. Formats: JPEG, PNG, JPG, GIF</small>
                                        @error('image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Prize Configuration -->
                            <div class="col-lg-4">
                                <div class="card border-primary">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0">
                                            <i class="mdi mdi-gift me-1"></i>Prize Configuration
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Points Prize Toggle -->
                                        <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" value="1" {{ old('is_points_prize') ? 'checked' : '' }}>
                                                <label class="form-check-label fw-semibold" for="is_points_prize">
                                                    Enable Points Prize
                                                </label>
                                            </div>
                                        </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 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...">{{ old('prize_description') }}</textarea>
                                             @error('prize_description')
                                                 <div class="invalid-feedback">{{ $message }}</div>
                                             @enderror
                                         </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('companyChallenges.index') }}" class="btn btn-outline-secondary">
                                        <i class="mdi mdi-arrow-left 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>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Toggle prize sections based on checkbox
document.getElementById('is_points_prize').addEventListener('change', function() {
    const pointsSection = document.getElementById('points_prize_section');
    
    if (this.checked) {
        pointsSection.style.display = 'block';
        document.getElementById('points_prize').required = true;
    } else {
        pointsSection.style.display = 'none';
        document.getElementById('points_prize').required = false;
    }
});

// End date validation
document.getElementById('start_date').addEventListener('change', function() {
    const endDateInput = document.getElementById('end_date');
    endDateInput.min = this.value;
    
    if (endDateInput.value && endDateInput.value <= this.value) {
        endDateInput.value = '';
    }
});

// Map management
let availableMaps = [];

// Fetch maps when page loads
document.addEventListener('DOMContentLoaded', function() {
    fetchMaps();
});

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