@extends('layouts.website')
@section('css')
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container">
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
        <div class="container">
            <div class="row">
                @foreach ($information as $item)
                    <div class="col-12">
                        <div class="alert alert-{{ $item->category }} alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <strong>{{ $item->name }}</strong><br />{{ $item->description }}
                        </div>
                    </div>
                @endforeach
                <div class="col-md-12 mt-3 mb-4">
                    <h3 class="text-center">Our Tunnel Services</h3>
                    <p class="text-center">All services come with 1Gbps Bandwidth! Powerful compute backed by
                        100% SSD storage.
                        Create instantly!.</p>
                </div>
                @php
                    $item = [
                        // [
                        //     'title' => 'Shadowsocks',
                        //     'subtitle' => 'Fast and Secure, but not Fast as Other',
                        //     'created_account' => '1',
                        // ],
                        [
                            'title' => 'Trojan',
                            'subtitle' => 'Lightweight, Secure and Fast',
                            'created_account' => '2',
                        ],
                        [
                            'title' => 'Vmess',
                            'subtitle' => 'Legacy System, Faster Proto',
                            'created_account' => '3',
                        ],
                        [
                            'title' => 'Vless',
                            'subtitle' => 'Recommended Fast, Secure, and up to date',
                            'created_account' => '4',
                        ],
                    ];
                    $item = (object) $item;
                @endphp
                @foreach ($item as $key => $value)
                    <div class="col-sm-6 col-lg-4 mb-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <div class="text-center">
                                    <img class="profile-user-img img-fluid img-circle"
                                        src="{{ asset('dist/img/' . strtolower($value['title']) . '.png') }}"
                                        alt="User profile picture">
                                </div>
                                <h3 class="profile-username text-center">{{ $value['title'] }}</h3>
                                <p class="text-muted text-center">{!! $value['subtitle'] !!}</p>
                                {{-- <div class="text-center">
                                    <i class="badge badge-pill badge-success">{{ $value['created_account'] }} Accounts
                                        Created</i>
                                </div> --}}
                                <hr>
                                <a href="{{ route('member.product') }}" class="btn btn-dark btn-block">Select</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
@endsection
@section('js')
@endsection
