@extends('User.Layout.main_layout') 	
@section('title','View Roles & Responsibilities')
@section('main_container')

<!-- partial -->
<div class="main-panel">          
        <div class="content-wrapper">
          <div class="page-header">
            <h3 class="page-title">
            Roles & Responsibilities
            </h3>
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Roles & Responsibilities</li><br>
                
              </ol>
            </nav>
          </div>
          <div class="row">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-body">
                @if(!$responsible ->isEmpty())
                    @foreach($responsible  as $data)
                  <div class="faq-section">
                    <div class="container-fluid bg-success py-2">
                      <p class="mb-0 text-white">Section {{ $data->id }}</p>
                    </div>
                    <div id="accordion-1" class="accordion">
                      <div class="card">
                        <div class="card-header" id="headingOne">
                          <h5 class="mb-0">
                            <div class="card-body">
                            {!! $data->description !!}
                            </div>
                            
                          </h5>
                        </div>
                      </div>
                    </div>
                  </div>
                    @endforeach  
                    @else
                    <p class="text-danger mt-2" style="padding-left:450px;">No Data Available</p>
                    @endif
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->

@endsection