@extends('layouts.app')

@section('content')
@if (session('success'))
<!-- Sections with content -->
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif
<div id="home" class="section">
    <div class="grid-container">
        @if(!empty($filters))
        <div id="filterbar">
            <select class="form-control" id="filterOption">
                @foreach ($filters as $filter)
                <option value="filter-{{$filter->id}}">{{$filter->type}}</option>
                @endforeach
            </select>
        </div>
        @endif
        <div id="colorbar">
            <select class="form-control" id="colorOption">
                <option value="color-all">All States</option>
                <option value="color-green">All in Green</option>
                <option value="color-orange">All in Orange</option>
                <option value="color-red">All in Red</option>
                <option value="color-blue">All in Blue</option>
            </select>
        </div>
        <div class="badge-language">
            <span class="badge badge-primary language-selector english">English</span>
            <span class="badge badge-secondary language-selector arabic">Arabic</span>
        </div>
    </div>
    <div class="grid-container">
        @foreach ($attributes as $attribute)
        <div class="grid-item {{$attribute['class']}} {{$attribute['filterClass']}} color-all arabic">
            <a href="{{ route('assessment.show', ['id' => $attribute['id']]) }}"> {{ $attribute['namearabic'] }} <span>({{ $attribute['userScore'] }}) </span></a>
        </div>
        <div class="grid-item {{$attribute['class']}} {{$attribute['filterClass']}} color-all english">
            <a href="{{ route('assessment.show', ['id' => $attribute['id']]) }}"> {{ $attribute['name'] }} <span>({{ $attribute['userScore'] }}) </span></a>
        </div>
        @endforeach
    </div>
</div>
@endsection