@extends('layouts.layout')

@section('content')

    <div class="box" xmlns="http://www.w3.org/1999/html">
        <div class="box-header">
            <h3 class="box-title">Edit filter</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <form role="form" method="post" action="/filters/{{$filter->id}}">
                @method('PATCH')
                @csrf
                <div class="box-body">
                    <div class="form-group">
                        <label for="filter">Filter</label>
                        <textarea name="filter" class="form-control" id="filter" >{{$filter->filter}}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="filter_no">Filter no.</label>
                        <input type="text"  name="filter_no" class="form-control" style="width: 80px" id="filter_no" value="{{$filter->filter_no}}"/>
                    </div>
                    <div class="callout callout-info text-center">Options <button type="button" class="btn btn-success pull-right" onclick="addOption()" style="margin-top:-5px"><i class="fa fa-plus"></i> Add option</button></div>

                    <table class="table table-bordered table-hover table-striped" id="options_table">
                        <thead>
                        <th>No.</th>
                        <th>Option</th>
                            <th>Points</th>
                            <th>Delete</th>
                        </thead>
                        <tbody>
                        @if(count($filter->options)>0)
                            @foreach($filter->options as $option)
                                <tr id="option_{{$option->id}}">
                                    <td style="width: 6%;"><input type="text" class="form-control" name="e_option_no[]" value="{{$option->option_no}}"></td>
                                    <td style="width: 80%"><input type="hidden" name="e_option_id[]" value="{{$option->id}}"><input type="text" class="form-control" name="e_options[]" value="{{$option->option}}"></td>
                                    <td><input type="text" class="form-control" name="e_options[]" value="{{$option->points}}"></td>
                                    <td><button type="button" onclick="deleteOption({{$option->id}})" class="btn btn-danger"><i class="fa fa-close"></i></button></td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->

                <div class="box-footer">
                    <button type="submit" class="btn btn-success">Edit</button>
                </div>
            </form>
        </div>
    </div>

@endsection

@section('footer')
    <script type="application/javascript" src="/js/filters.js"></script>
@endsection