@extends('frontEnd.layout')

@section('content')
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="{{ URL::asset('assets/frontend/css/style_new.css') }}" rel="stylesheet"/>

<div class="container mt-5">
    <div class="row dictCode">
        <div class="col-lg-12 col-md-12 searchText">
            <div class="searchBar">
                <img src="{{ url('uploads/images/search.png') }}">
                <input type="text" class="lionsearchBox" placeholder="Search by Name or District Code">
                <button>Search</button>
            </div>
        </div>
    </div>
</div>

<div class="container mt-4">
    <div class="row imgColors1">
        <div class="col-lg-8 teams">
        </div>
        <div class="col-lg-4 exportBtn">
            <button onclick="window.location.href='/directory';">Leadership Team</button>
            <!-- <button onclick="history.back();"> Previous Page</button> -->
        </div>
        <div class="col-lg-9 teams">
            <p> International Leaders</p>
        </div>

        <div class="col-md-12 col-sm-12 accordionMenu">
            <div id="accordion" class="accordion">
                @php
                    $positions = [
                        'International Executive Officers' => $International_Executive_Officers,
                        'Board of Directors' => $LCI_Board_of_Director,
                        'Board Appointees' => $LCI_Board_of_Director_Appointees, 
                        'LCIF Board of Trustees' => $LCIF_Board_of_Trustees,
                        'LCIF Board of Trustees Appointees' => $LCIF_Board_of_Trustees_Appointees,
                        'LEO Lion Board Liaisons' => $LEO_Lion_Board_Liaisons,
                        'LCI Board of directors - ISAME' => $LCI_Board_of_directors_ISAME,
                        'LCI Board of Trustees - ISAME' => $LCI_Board_of_Trustees_ISAME,

                    ];
                @endphp

                @foreach ($positions as $position => $members)
                    <div class="card mb-0">
                        <div class="card-header collapsed" data-toggle="collapse" href="#collapse{{ str_replace(' ', '', $position) }}">
                            <a class="card-title">{{ $position }}</a>
                        </div>
                        <div id="collapse{{ str_replace(' ', '', $position) }}" class="card-body collapse" data-parent="#accordion">
                            <div class="row">
                                @if (empty($members))
                                    <div class="col-lg-12 mt-4">
                                        <p>No {{ $position }} found for this year.</p>
                                    </div>
                                @else
                                    @foreach ($members as $member)
                                        <div class="col-lg-6 col-sm-12 govrnProfile">
                                            <div class="row">
                                                <div class="col-lg-2 col-sm-2">
                                                    <img class="govprofileImage" src="{{ url('uploads/members/'.$member['photo']) }}" alt="Profile Image" onerror="this.onerror=null; this.src='{{ asset('uploads/members/Portrait_Placeholder.png') }}'">
                                                </div>
                                                <div class="col-lg-7 col-sm-7">
                                                    <a href="{{ url('member/'.$member['id']) }}"><h5 class="text-wrap"> {{ $member['full_name'] }}</h5></a>
                                                    <!-- <p>{{ $position }}</p> -->
                                                    <p>{{ $member['category'] }}</p>
                                                                                                        <h6>Period: {{$startyear}} - {{$endyear}} </h6>
                                                    <!-- <a href="#"><img src="{{ url('uploads/images/mail.png') }}" style="padding-right: 5px;"> {{ $member['email_id'] }}</a> -->
                                                    @if(!empty($member['email_id']))
                                                <a href="mailto:{{ $member['email_id'] }}">
                                                    <img src="{{ url('uploads/images/mail.png') }}" style="padding-right: 5px;">
                                                    {{ $member['email_id'] }}
                                                </a>
                                                @endif
                                                @if(!empty($member['mobile_numbers']))
                                            <a href="#"><img src="{{ url('uploads/images/mobile.png') }}" style="padding-right: 5px;"> {{ $member['mobile_numbers'] }}</a>
                                                @endif
                                            </div>
                                                <div class="col-lg-3 col-sm-3">
                                                    <h3 class="text-right"><span>{{ $member['district'] }}</span></h3>
                                                </div>
                                                @if(!empty($member['full_address']))
                                                <div class="col-lg-12 locImg">
                                                    <img src="{{ url('uploads/images/location.png') }}" alt="Location Icon">
                                                    <h2>{{ $member['full_address'] }}</h2>
                                                </div>
                                            @endif
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection