@extends('layouts.app')
@section('title', 'Performance Intelligence Engine')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .gamification-grid {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 24px;
    }
    @media (max-width: 1200px) {
        .gamification-grid { grid-template-columns: 1fr; }
    }
    .config-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }
    .input-group-custom {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 16px;
        transition: all 0.3s ease;
    }
    .input-group-custom:focus-within {
        border-color: var(--accent-color);
        background: rgba(0, 255, 157, 0.02);
        box-shadow: 0 0 20px rgba(0, 255, 157, 0.05);
    }
    .badge-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        padding: 20px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .badge-card:hover {
        transform: translateY(-5px);
        border-color: var(--accent-color);
    }
    .badge-icon-preview {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 16px;
        background: rgba(255,255,255,0.05);
    }
    .rarity-common { color: #94a3b8; }
    .rarity-rare { color: #3b82f6; text-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
    .rarity-epic { color: #a855f7; text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
    .rarity-legendary { color: #eab308; text-shadow: 0 0 15px rgba(234, 179, 8, 0.6); }

    .preview-rank-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: rgba(255,255,255,0.02);
        border-radius: 12px;
        margin-bottom: 10px;
    }
    .rank-number {
        font-family: 'JetBrains Mono', monospace;
        font-weight: 900;
        color: var(--accent-color);
        font-size: 14px;
        width: 24px;
    }
</style>
@endpush

@section('content')

@include('components.page-header', [
    'title' => 'Performance Intelligence Engine',
    'description' => 'Architect the workforce reward system using structural point logic and automated badge recognition.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Gamification' => '#', 'Settings' => '#'],
    'actions' => '<button type="button" onclick="document.getElementById(\'settingsForm\').submit()" class="final-btn final-btn-primary"><i class="bi bi-cloud-check"></i> Synchronize Logic</button>'
])

<div class="gamification-grid">
    <div class="main-column">
        <!-- Section 1: Point Configuration -->
        <div class="final-card" style="margin-bottom: 24px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-gear-wide-connected"></i> Reward Logic Architecture</h3>
                <span class="final-badge badge-low">RECALCULATION: REAL-TIME</span>
            </div>
            
            <form id="settingsForm" method="POST" action="{{ route('gamification.settings.save') }}">
                @csrf
                <div class="config-section">
                    <div class="input-group-custom">
                        <label class="final-stat-label">Task Completion Points</label>
                        <input type="number" name="settings[task_completed_points]" value="{{ $settings['task_completed_points']->value ?? 10 }}" class="final-input" required>
                        <small class="final-secondary-text">Points awarded per successfully closed task.</small>
                    </div>
                    <div class="input-group-custom">
                        <label class="final-stat-label">Daily Productivity Points</label>
                        <input type="number" name="settings[daily_productivity_points]" value="{{ $settings['daily_productivity_points']->value ?? 5 }}" class="final-input" required>
                        <small class="final-secondary-text">Bonus for exceeding individual daily quotas.</small>
                    </div>
                    <div class="input-group-custom">
                        <label class="final-stat-label">Productivity Threshold %</label>
                        <input type="number" name="settings[daily_productivity_threshold]" value="{{ $settings['daily_productivity_threshold']->value ?? 80 }}" class="final-input" required>
                        <small class="final-secondary-text">Minimum performance score to trigger bonus.</small>
                    </div>
                    <div class="input-group-custom">
                        <label class="final-stat-label">QA Bonus Points</label>
                        <input type="number" name="settings[qa_report_points]" value="{{ $settings['qa_report_points']->value ?? 5 }}" class="final-input" required>
                        <small class="final-secondary-text">Reward for structural failure discovery.</small>
                    </div>
                    <div class="input-group-custom">
                        <label class="final-stat-label">QA Penalty Multiplier</label>
                        <input type="number" name="settings[qa_penalty_multiplier]" value="{{ $settings['qa_penalty_multiplier']->value ?? 2 }}" class="final-input" required>
                        <small class="final-secondary-text">Penalty weight for bugs returned to Dev.</small>
                    </div>
                    <div class="input-group-custom">
                        <label class="final-stat-label">Attendance Bonus</label>
                        <input type="number" name="settings[attendance_bonus]" value="{{ $settings['attendance_bonus']->value ?? 2 }}" class="final-input" required>
                        <small class="final-secondary-text">Points for consistent shift login.</small>
                    </div>
                    <div class="input-group-custom">
                        <label class="final-stat-label">Deadline Bonus</label>
                        <input type="number" name="settings[deadline_bonus]" value="{{ $settings['deadline_bonus']->value ?? 15 }}" class="final-input" required>
                        <small class="final-secondary-text">Points for early task delivery.</small>
                    </div>
                    <div class="input-group-custom">
                        <label class="final-stat-label">Late Penalty</label>
                        <input type="number" name="settings[late_penalty]" value="{{ $settings['late_penalty']->value ?? 10 }}" class="final-input" required>
                        <small class="final-secondary-text">Deduction for missed target fix dates.</small>
                    </div>
                    <div class="input-group-custom">
                        <label class="final-stat-label">Team Collaboration Bonus</label>
                        <input type="number" name="settings[collaboration_bonus]" value="{{ $settings['collaboration_bonus']->value ?? 5 }}" class="final-input" required>
                        <small class="final-secondary-text">Points for cross-module code reviews.</small>
                    </div>
                </div>
            </form>
        </div>

        <!-- Section 2: Reward Badges System -->
        <div class="final-card" style="margin-bottom: 24px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-award"></i> Architectural Badge Registry</h3>
                <button type="button" class="final-btn final-btn-secondary" onclick="document.getElementById('newBadgeForm').style.display='block'">
                    <i class="bi bi-plus-circle"></i> Mint New Badge
                </button>
            </div>

            <!-- New Badge Form (Hidden initially) -->
            <div id="newBadgeForm" style="display: none; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); border-radius: 20px; padding: 24px; margin-bottom: 24px;">
                <form method="POST" action="{{ route('gamification.badges.save') }}">
                    @csrf
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
                        <div>
                            <label class="final-stat-label">Badge Name</label>
                            <input type="text" name="name" class="final-input" placeholder="E.g., Logic Architect" required>
                        </div>
                        <div>
                            <label class="final-stat-label">Slug</label>
                            <input type="text" name="slug" class="final-input" placeholder="logic_architect" required>
                        </div>
                        <div>
                            <label class="final-stat-label">Min Points</label>
                            <input type="number" name="min_points" class="final-input" value="100" required>
                        </div>
                        <div>
                            <label class="final-stat-label">Rarity</label>
                            <select name="rarity" class="final-input">
                                <option value="common">Common</option>
                                <option value="rare">Rare</option>
                                <option value="epic">Epic</option>
                                <option value="legendary">Legendary</option>
                            </select>
                        </div>
                        <div>
                            <label class="final-stat-label">Icon Class</label>
                            <input type="text" name="icon" class="final-input" placeholder="bi-cpu" value="bi-cpu">
                        </div>
                        <div>
                            <label class="final-stat-label">Color Theme</label>
                            <input type="color" name="color" class="final-input" value="#00FF9D" style="height: 42px; padding: 4px;">
                        </div>
                    </div>
                    <div style="margin-top: 16px;">
                        <label class="final-stat-label">Unlock Condition Description</label>
                        <textarea name="unlock_condition" class="final-input" placeholder="Achieve 80% productivity score for 5 consecutive days..."></textarea>
                    </div>
                    <div style="margin-top: 16px; display: flex; gap: 12px;">
                        <button type="submit" class="final-btn final-btn-primary">Register Badge</button>
                        <button type="button" class="final-btn final-btn-secondary" onclick="document.getElementById('newBadgeForm').style.display='none'">Cancel</button>
                    </div>
                </form>
            </div>

            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;">
                @foreach($badges as $badge)
                <div class="badge-card">
                    <div class="badge-icon-preview" style="color: {{ $badge->color }}; border: 1px solid {{ $badge->color }}44; box-shadow: 0 0 20px {{ $badge->color }}11;">
                        <i class="bi {{ $badge->icon }}"></i>
                    </div>
                    <h4 style="font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px;">{{ $badge->name }}</h4>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span class="rarity-{{ $badge->rarity }}" style="font-size: 10px; font-weight: 900; text-transform: uppercase;">{{ $badge->rarity }}</span>
                        <span style="font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-color);">{{ $badge->min_points }} PTS</span>
                    </div>
                    <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); display: flex; gap: 8px;">
                        <button class="final-btn final-btn-secondary" style="padding: 6px 10px; font-size: 12px;"><i class="bi bi-pencil"></i></button>
                        <button class="final-btn final-btn-secondary" style="padding: 6px 10px; font-size: 12px; color: var(--danger-color);"><i class="bi bi-trash"></i></button>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Right Sidebar: Live Preview & Calculation -->
    <div class="side-column">
        <!-- Monthly Calculation Engine -->
        <div class="final-card" style="margin-bottom: 24px;">
            <h3 class="final-card-title"><i class="bi bi-calculator"></i> Calculation Engine</h3>
            <form method="POST" action="{{ route('gamification.calculate') }}">
                @csrf
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
                    <div>
                        <label class="final-stat-label">Month</label>
                        <select name="month" class="final-input">
                            @for($i=1; $i<=12; $i++)
                                <option value="{{ $i }}" {{ now()->month == $i ? 'selected' : '' }}>{{ date('F', mktime(0, 0, 0, $i, 10)) }}</option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label class="final-stat-label">Year</label>
                        <input type="number" name="year" class="final-input" value="{{ now()->year }}">
                    </div>
                </div>
                <button type="submit" class="final-btn final-btn-primary" style="width: 100%; justify-content: center; margin-bottom: 12px;">
                    <i class="bi bi-lightning-charge"></i> Generate Leaderboard
                </button>
                <button type="button" class="final-btn final-btn-secondary" style="width: 100%; justify-content: center;">
                    <i class="bi bi-shield-lock"></i> Lock Monthly Rankings
                </button>
            </form>
        </div>

        <!-- Live Preview Panel -->
        <div class="final-card">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-eye"></i> Simulation Preview</h3>
                <i class="bi bi-broadcast" style="color: var(--accent-color)"></i>
            </div>
            
            <div class="preview-rank-item">
                <span class="rank-number">01</span>
                <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--accent-color); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px;">JD</div>
                <div style="flex: 1;">
                    <div style="font-size: 13px; font-weight: 700; color: var(--text-primary);">John Doe</div>
                    <div style="font-size: 10px; color: var(--text-secondary);">1,240 Points • Architect Tier</div>
                </div>
                <i class="bi bi-caret-up-fill" style="color: var(--accent-color); font-size: 10px;"></i>
            </div>

            <div class="preview-rank-item">
                <span class="rank-number">02</span>
                <div style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px;">SK</div>
                <div style="flex: 1;">
                    <div style="font-size: 13px; font-weight: 700; color: var(--text-primary);">Sarah K.</div>
                    <div style="font-size: 10px; color: var(--text-secondary);">1,180 Points • Senior Dev</div>
                </div>
                <i class="bi bi-caret-up-fill" style="color: var(--accent-color); font-size: 10px;"></i>
            </div>

            <div class="preview-rank-item">
                <span class="rank-number">03</span>
                <div style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px;">MP</div>
                <div style="flex: 1;">
                    <div style="font-size: 13px; font-weight: 700; color: var(--text-primary);">Mike P.</div>
                    <div style="font-size: 10px; color: var(--text-secondary);">950 Points • Bug Hunter</div>
                </div>
                <i class="bi bi-dash" style="color: var(--text-secondary); font-size: 10px;"></i>
            </div>

            <div style="margin-top: 24px; padding: 16px; background: rgba(0, 255, 157, 0.05); border: 1px solid var(--accent-color); border-radius: 16px;">
                <h4 style="font-size: 12px; font-weight: 800; color: var(--accent-color); margin-bottom: 8px;">MONTHLY REWARD ESTIMATE</h4>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-size: 20px; font-weight: 900; color: var(--text-primary);">₹ 1,54,000</span>
                    <span class="final-badge badge-low">RESERVE: 92%</span>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection