@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='/indiadirectory';">India Directory</button>
        <button onclick="history.back();"> Previous Page</button>
        </div>
        <div class="col-lg-9 teams">
            <p>Council Chair Persons</p>
        </div>
        <div class="col-lg-3 exportBtn">
            <!-- <button>
                <img src="{{url('uploads/images/export.png')}}">
                Export
            </button> -->
        </div>
    @if ($councilCP->isEmpty())
    <div class="col-lg-12 mt-4">
        <p>No Council Chairpersons found.</p>
    </div>
@else
    @foreach ($councilCP as $councilMember)
    <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/'.$councilMember->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/'.$councilMember['id'])}}"><h5 class="card-title">{{ $councilMember->camelCaseName }}</h5> </a>
                <p class="card-text">Council Chairperson 2024-25</p>
                <a href="mailto:{{ $councilMember->email_id }}" class="card-link">
                    <img src="{{ url('uploads/images/mail.png') }}" alt="Email" style="padding-right: 5px;">
                    {{ $councilMember->email_id }}
                </a>
                <a href="#">
                    <img src="{{ url('uploads/images/mobile.png') }}" alt="Mobile" style="padding-right: 5px;">
                    {{ $councilMember->mobile_numbers }}
                </a>
            </div>
            <div class="col-lg-3 col-sm-3">
                <p class="card-text">MD-{{ $councilMember->district }}</p>
            </div>  
            <div>  
                @if(!empty($councilMember['full_address']))
                 <div class="col-lg-12 locImg">
                        <img src="{{ url('uploads/images/location.png') }}" alt="Location Icon">
                        <h2>{{ $councilMember['full_address'] }}</h2>
                    </div>
                @endif
            </div>
        </div>
    </div>
    @endforeach
@endif
</div>
</div>
@endsection