<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drug Addiction Management</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div id="app">
        <transition name="fade-slide">
            <div class="main-container" v-if="show">
                <div class="header">
                    <h1><perc class="fas fa-pills"></perc> {{ playerName }} Drug Addictions</h1>
                    <div class="header-buttons">
                        <input type="color" id="accentColorPicker" @input="changeAccentColor" :value="accentColor">
                        <div class="icon-box">
                            <button @click="toggleDarkMode" class="theme-toggle">
                                <i :class="['fas', isDarkMode ? 'fa-sun' : 'fa-moon']"></i>
                            </button>
                        </div>
                        <div class="icon-box exit-box">
                            <button @click="closeNUI" class="close-button">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="overall-health">
                        <h2><i class="fas fa-heartbeat"></i> Overall Health</h2>
                        <p class="description">Your overall health reflects the cumulative impact of drug use on your body.</p>
                        <div class="health-bar">
                            <div class="health-progress" :style="{ width: overallHealth + '%' }"></div>
                        </div>
                        <span class="health-value">{{ overallHealth.toFixed(1) }}%</span>
                    </div>
                    <div class="addiction-levels">
                        <h2><i class="fas fa-chart-line"></i> Addiction Levels</h2>
                        <p class="description">Monitor your addiction levels for various substances. Higher percentages indicate stronger addictions.</p>
                        <div v-for="(data, drug) in addictionData" :key="drug" class="addiction-item">
                            <div class="addiction-header" @click="toggleDrugDetails(drug)">
                                <span class="drug-name"><i :class="getDrugIcon(drug)"></i> {{ drug }}</span>
                                <div class="addiction-level-container">
                                    <div class="addiction-bar" :style="{ width: data.level + '%', backgroundColor: getAddictionColor(data.level) }"></div>
                                    <span class="addiction-level">{{ data.level.toFixed(1) }}%</span>
                                </div>
                                <i :class="['fas', expandedDrugs.includes(drug) ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
                            </div>
                            <transition name="expand">
                                <div v-if="expandedDrugs.includes(drug)" class="drug-details">
                                    <p><i class="fas fa-clock"></i> Last used: {{ formatLastUsed(data.lastUsed) }}</p>
                                    <p><i class="fas fa-hourglass-half"></i> Withdrawal in: {{ formatWithdrawalTime(data.withdrawalTime) }}</p>
                                </div>
                            </transition>
                        </div>
                    </div>
                    <div class="treatment-section">
                        <h2><i class="fas fa-hospital"></i> Treatment Options</h2>
                        <p class="description">Seek professional help to manage your addictions and improve your overall health.</p>
                        <button @click="seekTreatment" :disabled="!canSeekTreatment" class="treatment-button">
                            Seek Treatment
                        </button>
                        <p v-if="!canSeekTreatment" class="treatment-warning">You must be near a hospital to seek treatment</p>
                        <p v-if="!canSeekTreatment" class="credits-guccismodz">Gucci's Modz</p>
                        <div v-if="treatmentInProgress" class="treatment-progress">
                            <div class="progress-bar">
                                <div class="progress" :style="{ width: treatmentProgress + '%' }"></div>
                            </div>
                            <span>Treatment Progress: {{ treatmentProgress }}%</span>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="script.js"></script>
</body>
</html>