@extends('web.layouts.container')

@section('header')
    <section class="inner_header">
        <div class="inner_back">
            <img src="{{asset($detail->images[0])}}" alt="">
        </div>
        <div class="inner_info">
            <div class="container h-100">
                <div class="row align-items-end h-100">
                    <div class="col-lg-6 offset-lg-6">
                        <div class="about_head_info governance_header">
                            <p>{!! $detail->header_description !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('content')
    <section class="about section_padding">
        <div class="container">
            <div class="section_head">
                <h3 class="text-uppercase">{{__('governances.head')}}</h3>
            </div>
            <div class="about_img">
                <!--<img src="{{asset($detail->images[1])}}" alt="">-->
                <img src="{{ asset('assets/web/images/about/gov.jpg') }}" alt="">
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="about_img_info">
                        <div class="max_height">
                            <p>{!! stripText($detail->description_1) !!} </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="text_back m-0">
        <div class="container">
            <h6 class="text-center">{!! $detail->title !!}</h6>
            <div class="row">
                <div class="col-lg-6">
                    <div class="back_items">
                        <div class="row align-items-center">
                            <div class="col-lg-3">
                                <div class="img">
                                    <img src="{{asset($detail->images[2])}}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="info">
                                    <p>{!! $detail->description_2 !!} </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="back_items">
                        <div class="row align-items-center">
                            <div class="col-lg-3">
                                <div class="img">
                                    <img src="{{asset($detail->images[3])}}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="info">
                                    <p>{!! $detail->description_3 !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(count($page))
        <section class="nesma_boards section_padding pb-0">
            <div class="container">
                <div class="section_head mb-3">
                    <h3 class="text-uppercase">{{__('governances.nesma_boards')}}</h3>
                </div>
                <h5 class="sub_title mb-4">{{__('governances.hint')}}</h5>
                <div id="accordion">
                    @foreach($page as $governance)
                        @if($loop->iteration == 1)
                            <div class="board_items">
                                <div id="heading_{{$loop->iteration}}" class="board_head" data-toggle="collapse" data-target="#collapse_{{$loop->iteration}}" aria-expanded="true" aria-controls="collapse_{{$loop->iteration}}">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="inf text-capitalize">{{$governance->name}} </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="inf text-capitalize">{{$governance->job_title}} </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="collapse_{{$loop->iteration}}" class="collapse show" aria-labelledby="heading_{{$loop->iteration}}" data-parent="#accordion">
                                    <div class="card-body">
                                        <section class="legacy">
                                            <div class="row align-items-end">
                                                <div class="col-lg-4">
                                                    <div class="img">
                                                        <img src="{{asset($governance->image)}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-lg-8">
                                                    <div class="info">
                                                        <div class="inf_title">
                                                            <h5 class="text-capitalize">{{$governance->name}}</h5>
                                                            <h6 class="text-capitalize">{{$governance->job_title}}</h6>
                                                        </div>
                                                        <div class="cont">
                                                            <p>{!! $governance->description !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            @else
                            <div class="board_items">
                                <div id="heading_{{$loop->iteration}}" class="board_head collapsed" data-toggle="collapse" data-target="#collapse_{{$loop->iteration}}" aria-expanded="true" aria-controls="collapse_{{$loop->iteration}}">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="inf text-capitalize">{{$governance->name}} </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="inf text-capitalize">{{$governance->job_title}} </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="collapse_{{$loop->iteration}}" class="collapse" aria-labelledby="heading_{{$loop->iteration}}" data-parent="#accordion">
                                    <div class="card-body">
                                        <section class="legacy">
                                            <div class="row align-items-end">
                                                <div class="col-lg-4">
                                                    <div class="img">
                                                        <img src="{{asset($governance->image)}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-lg-8">
                                                    <div class="info">
                                                        <div class="inf_title">
                                                            <h5 class="text-capitalize">{{$governance->name}}</h5>
                                                            <h6 class="text-capitalize">{{$governance->job_title}}</h6>
                                                        </div>
                                                        <div class="cont">
                                                            <p>{!! $governance->description !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @endif


@endsection

@section('inner_js')
@endsection