@extends('layouts.main')

@section('content')
<h2>{{$title}}</h2>
@if(Auth::user()->canDo(['create_focus_areas']))
    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#fSection">
    Add New Focus Area
    </button>
@endif
<hr>
        <ol>           
        @foreach ($sections as $section)

        <div class="card-box">
            <div class="card-body">
            <li>
                {{ $section->name }}

                <button type="button" class="badge info p-1" data-toggle="modal" data-target="#section{{ $section->id }}">
                    <i class="fa fa-edit"></i>
                 </button>

                 <button type="button" class="badge badge-dark p-1" data-toggle="modal" data-target="#add_question{{ $section->id }}">
                    <i class="fa fa-plus"></i>
                 </button>

                 <ol type="a">
                    @foreach ($section->questions as $question)
                        <li>
                            {{ $question->question }} <span class="text-success">{{ $question->answer_type }}</span>

                            <button type="button" class="badge info p-1" data-toggle="modal" data-target="#edit_question{{ $question->id }}">
                                <i class="fa fa-edit"></i>
                            </button>

                            @if ($question->answer_type != 'none')
                                <button type="button" class="badge badge-dark p-1" data-toggle="modal" data-target="#add_response{{ $question->id }}">
                                    <i class="fa fa-plus"></i>
                                </button>                                
                            @endif                            
                        </li> 

                        <ol type="i">
                            @foreach ($question->responses as $response)
                                <li>
                                    {{ $response->text_response }} ({{ $response->mark }})

                                    <button type="button" class="badge info p-1" data-toggle="modal" data-target="#edit_response{{ $response->id }}">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                </li>    
                                
                                @include('models._edit_response')

                            @endforeach
                        </ol>
                        
                        @include("models._add_response")                        
                        @include('models._edit_question')
                    @endforeach
                 </ol>

                 @include('models._add_question')
                @include('models._edit_section')

            </li>

        </div>
    </div>
        @endforeach
        </ol>
        
   


@include('models._add_section')



@endsection

@push('scripts')
<script>
    $("#stock_id,#location_id").chosen({
        width:"100%"
    })
</script>
@endpush