@extends('layouts.masteruser')
@section('title', 'Dashboard')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/vendors/flatpickr/flatpickr.min.css') }}">
@endsection
@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-12 col-xl-12 stretch-card">
                <div class="row justify-content-center">
                    <div class="col-md-8 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title mb-0">Tentang Belanja Online</h4>
                            </div>
                            <div class="card-body">
                                <p class="mb-3" style="text-align: justify">Kegiatan belanja online yang berlebihan dapat menjadi kebiasaan yang jika dilakukan terus menerus akan mengakibatkan kecanduan.</p>
                                <p style="text-align: justify">Kecanduan belanja online juga memiliki tingkatannya berdasarkan kategori keparahannya meliputi no addiction (tidak kecanduan), mild (rendah), moderate (sedang) dan severe (berat).</p>
                                <table class="table table-bordered align-middle mt-3">
                                    <thead>
                                        <tr>
                                            <th>Tingkat Kecanduan</th>
                                            <th>Persentase</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($addictions as $addiction)
                                        <tr>
                                            <td>{{ $addiction->name }}</td>
                                            <td>{{ $addiction->min_percentage }} - {{ $addiction->max_percentage }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="card-footer text-center">
                                <a href="{{ route('user.addiction') }}" class="btn btn-primary">Mulai Tes</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('assets/vendors/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/js/dashboard.js') }}"></script>
@endsection