@extends('layouts.layout')

@section('content')

    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Filter details</h3>
            <a href="/filters/{{$filter->id}}/delete" class="btn btn-danger pull-right"><i class="fa fa-trash"></i> Delete</a>
            <a href="/filters/{{$filter->id}}/edit" class="btn btn-warning pull-right" style="margin-right: 5px"><i class="fa fa-edit"></i> Edit</a>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <th>Filter</th>
                    <th>{{$filter->filter}}</th>
                </thead>
                <tr>
                    <td>Filter no.</td>
                    <td>{{$filter->filter_no}}</td>
                </tr>

            </table>

            <div style="text-align: center;margin-top:20px" class="callout callout-info">Filter options</div>

            @if(count($filter->options)>0)
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <th>No.</th>
                    <th>Option</th>
                    <th>Points</th>
                </thead>
                @foreach($filter->options as $option)
                <tr>
                    <td>
                        {{$option->option_no}}
                    </td>
                    <td>
                        {{$option->option}}
                    </td>
                    <td>
                        {{$option->points}}
                    </td>
                </tr>
                @endforeach
            </table>
            @else
            <p style="text-align: center;color:red">This filter doesn't have any options yet!</p>
            @endif
        </div>
    </div>

@endsection