@extends('layouts/contentNavbarLayout')
@section('title', 'Create Department 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('departmentChallenges.index') }}">Department Challenges</a></li>
        <li class="breadcrumb-item active">Create</li>
    </ol>
</nav>
<div class="container-fluid">
    <!-- Back Button -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ route('departmentChallenges.index') }}" class="btn btn-outline-secondary">
                <i class="mdi mdi-arrow-left me-1"></i>Back to Challenges
            </a>
        </div>
    </div>

    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-1 fw-bold text-primary">
                <i class="mdi mdi-plus-circle me-2"></i>Create New Department Challenge
            </h1>
            <p class="text-muted mb-0">Set up a challenge between two departments</p>
        </div>
    </div>

    <form action="{{ route('departmentChallenges.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <!-- Basic Information -->
            <div class="col-lg-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="mdi mdi-information 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">Challenge Title *</label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                       id="title" name="title" value="{{ old('title') }}" required
                                       placeholder="e.g., Spring Walking Challenge 2025">
                                @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">Description *</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="4" required
                                          placeholder="Describe the challenge rules and objectives...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="image" class="form-label fw-semibold">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">Upload an image for the challenge (max 2MB)</small>
                                @error('image')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="type" class="form-label fw-semibold">Challenge Type *</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>
                    </div>
                </div>

                <!-- Schedule -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="mdi mdi-calendar me-2"></i>Challenge Schedule
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="start_date" class="form-label fw-semibold">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">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 class="col-md-6 mb-3">
                                <label for="start_time" class="form-label fw-semibold">Start Time *</label>
                                <input type="time" class="form-control @error('start_time') is-invalid @enderror" 
                                       id="start_time" name="start_time" value="{{ old('start_time') }}" required>
                                @error('start_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="end_time" class="form-label fw-semibold">End Time *</label>
                                <input type="time" class="form-control @error('end_time') is-invalid @enderror" 
                                       id="end_time" name="end_time" value="{{ old('end_time') }}" required>
                                @error('end_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Company Selection -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="mdi mdi-domain me-2"></i>Company Selection
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="company_id" class="form-label fw-semibold">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' : '' }}
                                            data-departments="{{ $company->departments->toJson() }}">
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Select the company whose departments will compete</small>
                            @error('company_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Departments -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="mdi mdi-office-building me-2"></i>Competing Departments
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="first_department_id" class="form-label fw-semibold">First Department *</label>
                                <select class="form-select @error('first_department_id') is-invalid @enderror" 
                                        id="first_department_id" name="first_department_id" required disabled>
                                    <option value="">Select company first...</option>
                                </select>
                                @error('first_department_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="second_department_id" class="form-label fw-semibold">Second Department *</label>
                                <select class="form-select @error('second_department_id') is-invalid @enderror" 
                                        id="second_department_id" name="second_department_id" required disabled>
                                    <option value="">Select company first...</option>
                                </select>
                                @error('second_department_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Challenge Settings -->
            <div class="col-lg-4">
                <!-- Team Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="mdi mdi-account-group me-2"></i>Team Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="is_max_team_members" 
                                   name="is_max_team_members" value="1" 
                                   {{ old('is_max_team_members') ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="is_max_team_members">
                                Limit Team Size
                            </label>
                        </div>

                        <div class="mb-3" id="max_team_members_group" style="display: none;">
                            <label for="max_team_members" class="form-label fw-semibold">Maximum Team Members</label>
                            <input type="number" class="form-control @error('max_team_members') is-invalid @enderror" 
                                   id="max_team_members" name="max_team_members" value="{{ old('max_team_members') }}" 
                                   min="1" placeholder="e.g., 20">
                            <small class="text-muted">Maximum participants per team</small>
                            @error('max_team_members')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Goal Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="mdi mdi-target me-2"></i>Goal Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="is_steps_goal" 
                                   name="is_steps_goal" value="1" 
                                   {{ old('is_steps_goal') ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="is_steps_goal">
                                Set Steps Goal
                            </label>
                        </div>

                        <div class="mb-3" id="steps_goal_group" style="display: none;">
                            <label for="steps_goal" class="form-label fw-semibold">Steps Goal</label>
                            <input type="number" class="form-control @error('steps_goal') is-invalid @enderror" 
                                   id="steps_goal" name="steps_goal" value="{{ old('steps_goal') }}" 
                                   min="1000" placeholder="e.g., 100000">
                            <small class="text-muted">First team to reach this wins (if not reached, most steps wins)</small>
                            @error('steps_goal')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Challenge Status -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="mdi mdi-flag me-2"></i>Challenge Status
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="status" class="form-label fw-semibold">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>
                </div>

                <!-- Prize Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="mdi mdi-trophy me-2"></i>Prize Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <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">
                                Award Points Prize
                            </label>
                        </div>

                        <div class="mb-3" id="points_prize_group" style="display: none;">
                            <label for="points_prize" class="form-label fw-semibold">Points Prize</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., 500">
                            <small class="text-muted">Points awarded to winning team members</small>
                            @error('points_prize')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="prize_description" class="form-label fw-semibold">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 or reward for winners...">{{ old('prize_description') }}</textarea>
                            @error('prize_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="mdi mdi-check me-1"></i>Create Challenge
                            </button>
                            <a href="{{ route('departmentChallenges.index') }}" class="btn btn-outline-secondary">
                                <i class="mdi mdi-close me-1"></i>Cancel
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Company and department handling
    const companySelect = document.getElementById('company_id');
    const firstDept = document.getElementById('first_department_id');
    const secondDept = document.getElementById('second_department_id');
    
    function updateDepartments() {
        const selectedCompany = companySelect.options[companySelect.selectedIndex];
        
        if (selectedCompany.value) {
            const departments = JSON.parse(selectedCompany.dataset.departments || '[]');
            
            // Clear and enable department selects
            firstDept.innerHTML = '<option value="">Select first department...</option>';
            secondDept.innerHTML = '<option value="">Select second department...</option>';
            firstDept.disabled = false;
            secondDept.disabled = false;
            
            // Populate department options
            departments.forEach(dept => {
                const option1 = new Option(dept.name, dept.id);
                const option2 = new Option(dept.name, dept.id);
                firstDept.add(option1);
                secondDept.add(option2);
            });
            
            // Restore old values if they exist
            const oldFirst = '{{ old("first_department_id") }}';
            const oldSecond = '{{ old("second_department_id") }}';
            if (oldFirst) firstDept.value = oldFirst;
            if (oldSecond) secondDept.value = oldSecond;
            
        } else {
            // Disable department selects
            firstDept.innerHTML = '<option value="">Select company first...</option>';
            secondDept.innerHTML = '<option value="">Select company first...</option>';
            firstDept.disabled = true;
            secondDept.disabled = true;
        }
        
        updateDepartmentOptions();
    }
    
    function updateDepartmentOptions() {
        if (firstDept.disabled || secondDept.disabled) return;
        
        const firstValue = firstDept.value;
        const secondValue = secondDept.value;
        
        // Enable all options first
        Array.from(firstDept.options).forEach(option => option.disabled = false);
        Array.from(secondDept.options).forEach(option => option.disabled = false);
        
        // Disable selected options in the other select
        if (firstValue) {
            Array.from(secondDept.options).forEach(option => {
                if (option.value === firstValue) option.disabled = true;
            });
        }
        
        if (secondValue) {
            Array.from(firstDept.options).forEach(option => {
                if (option.value === secondValue) option.disabled = true;
            });
        }
    }
    
    companySelect.addEventListener('change', updateDepartments);
    firstDept.addEventListener('change', updateDepartmentOptions);
    secondDept.addEventListener('change', updateDepartmentOptions);
    
    // Initialize departments if company is pre-selected
    if (companySelect.value) {
        updateDepartments();
    }

    // Toggle max team members input
    const maxTeamMembersCheckbox = document.getElementById('is_max_team_members');
    const maxTeamMembersGroup = document.getElementById('max_team_members_group');
    
    function toggleMaxTeamMembers() {
        if (maxTeamMembersCheckbox.checked) {
            maxTeamMembersGroup.style.display = 'block';
        } else {
            maxTeamMembersGroup.style.display = 'none';
        }
    }
    
    maxTeamMembersCheckbox.addEventListener('change', toggleMaxTeamMembers);
    toggleMaxTeamMembers(); // Initial state

    // Toggle steps goal input
    const stepsGoalCheckbox = document.getElementById('is_steps_goal');
    const stepsGoalGroup = document.getElementById('steps_goal_group');
    
    function toggleStepsGoal() {
        if (stepsGoalCheckbox.checked) {
            stepsGoalGroup.style.display = 'block';
        } else {
            stepsGoalGroup.style.display = 'none';
        }
    }
    
    stepsGoalCheckbox.addEventListener('change', toggleStepsGoal);
    toggleStepsGoal(); // Initial state

    // Toggle points prize input
    const pointsPrizeCheckbox = document.getElementById('is_points_prize');
    const pointsPrizeGroup = document.getElementById('points_prize_group');
    
    function togglePointsPrize() {
        if (pointsPrizeCheckbox.checked) {
            pointsPrizeGroup.style.display = 'block';
        } else {
            pointsPrizeGroup.style.display = 'none';
        }
    }
    
    pointsPrizeCheckbox.addEventListener('change', togglePointsPrize);
    togglePointsPrize(); // Initial state
});
</script>
@endsection