thecrimesynticate/resources/views/game/crimes/index.blade.php

@extends('layouts.game')

@section('title', 'Crimes')

@section('game-content')
    <div class="max-w-4xl mx-auto">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                <div class="flex justify-between items-center">
                    <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Available Crimes</h1>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        Energy: {{ $character->energy }}/{{ $character->max_energy }}
                    </div>
                </div>
                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                    Commit crimes to earn money and experience. Each crime costs energy and has a chance of success or failure.
                </p>
            </div>

            <div class="p-6">
                @if($availableCrimes->isEmpty())
                    <p class="text-center text-gray-500 dark:text-gray-400 py-8">
                        No crimes available. Try leveling up or restoring your energy.
                    </p>
                @else
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($availableCrimes as $crime)
                            @php
                                $onCooldown = $crimeService->isOnCooldown($character, $crime);
                                $cooldownRemaining = $onCooldown ? $crimeService->getCooldownRemaining($character, $crime) : 0;
                                $successRate = $crime->calculateSuccessRate($character);
                            @endphp
                            
                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                                <div class="flex justify-between items-start mb-2">
                                    <div>
                                        <h3 class="font-medium text-gray-800 dark:text-gray-200">{{ $crime->name }}</h3>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            {{ $crime->difficulty_label }} Difficulty
                                        </p>
                                    </div>
                                    <span class="text-xs px-2 py-1 rounded-full {{ $crime->difficulty_color }} text-white">
                                        {{ number_format($successRate * 100, 1) }}% Success
                                    </span>
                                </div>
                                
                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                                    {{ Str::limit($crime->description, 100) }}
                                </p>
                                
                                <div class="grid grid-cols-2 gap-2 text-xs">
                                    <div class="flex items-center">
                                        <span class="text-yellow-500 mr-1">⚡</span>
                                        <span>{{ $crime->energy_cost }} Energy</span>
                                    </div>
                                    <div class="flex items-center">
                                        <span class="text-green-500 mr-1">💰</span>
                                        <span>${{ $crime->reward_min }}-{{ $crime->reward_max }}</span>
                                    </div>
                                    <div class="flex items-center">
                                        <span class="text-blue-500 mr-1">📈</span>
                                        <span>{{ $crime->experience }} EXP</span>
                                    </div>
                                    <div class="flex items-center">
                                        <span class="text-gray-500 mr-1">⏱️</span>
                                        <span>{{ $crime->cooldown }}s Cooldown</span>
                                    </div>
                                </div>
                                
                                @if($onCooldown)
                                    <button 
                                        disabled
                                        class="w-full mt-3 py-2 px-4 text-sm text-center bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 rounded-lg cursor-not-allowed"
                                    >
                                        On Cooldown ({{ ceil($cooldownRemaining / 60) }}m)
                                    </button>
                                @else
                                    <form action="{{ route('game.crimes.attempt', $crime) }}" method="POST" class="mt-3">
                                        @csrf
                                        <button 
                                            type="submit"
                                            class="w-full py-2 px-4 text-sm text-center bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
                                        >
                                            Attempt Crime
                                        </button>
                                    </form>
                                @endif
                                
                                @if($crime->requires_level)
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                                        Requires Level {{ $crime->requires_level }}+
                                    </p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="p-6 border-t border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Attempts</h3>
                
                @if($recentAttempts->isEmpty())
                    <p class="text-center text-gray-500 dark:text-gray-400 py-4">
                        No recent crime attempts.
                    </p>
                @else
                    <div class="space-y-2">
                        @foreach($recentAttempts as $attempt)
                            <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <div class="flex items-center">
                                    <span class="mr-3">
                                        @if($attempt->success)
                                            <span class="text-green-500">✅</span>
                                        @else
                                            <span class="text-red-500">❌</span>
                                        @endif
                                    </span>
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-gray-200">{{ $attempt->crime->name }}</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ $attempt->attempted_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    @if($attempt->success)
                                        <p class="text-sm text-green-600 dark:text-green-400">+${{ number_format($attempt->reward) }}</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">+{{ $attempt->experience_gained }} EXP</p>
                                    @else
                                        <p class="text-sm text-red-600 dark:text-red-400">Failed</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection