@extends('frontend.layouts.app')
@push('title')
    {{$title}}
@endpush
@section('content')
    <section class="breadcrumb-wrap py-50 py-md-75 py-lg-100" data-background="{{getSettingImage('page_breadcrumb')}}">
        <div class="text-center position-relative">
            <h4 class="fs-50 fw-700 lh-60 text-white pb-8">{{$title}}</h4>
            <ul class="breadcrumb-list">
                <li><a href="{{route('index')}}">{{__('Home')}}</a></li>
                <li><a href="{{route('index')}}">{{$title}}</a></li>
            </ul>
        </div>
    </section>

    <section class="pb-110 pt-60">
        <div class="container">
            <div class="max-w-416 d-flex">
                <div class="primary-form-group w-100">
                    <div class="primary-form-group-wrap">
                        <label for="executiveCommitteeSession" class="form-label">Session</label>
                        <select id="committeeSessionId" class="primary-form-control sf-select-without-search">
                            @foreach($designationData as $data)
                                <option value="{{$data->id}}">{{$data->session}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <!-- Items -->
            <div class="pt-60">
                <div class="row rg-24" id="election-board-block">

                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="electionBoardMemberProfileModel" tabindex="-1"
         aria-labelledby="electionBoardMemberProfileModelLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 bd-ra-25">

            </div>
        </div>
    </div>

    <input type="hidden" id="election-board-data-filter-route" value="{{route('committee.election_board.data.filter')}}">
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            $('#committeeSessionId').on('change', function() {
                commonAjax('GET', $('#election-board-data-filter-route').val(), electionBoardRes, electionBoardRes, { 'committee_election_id': $('#committeeSessionId').val() });
            });

            function electionBoardRes(response){
                if(response.status){
                    $("#election-board-block").html(response.data.html);
                }
            }

            window.addEventListener('load', function (){
                commonAjax('GET', $('#election-board-data-filter-route').val(), electionBoardRes, electionBoardRes, { 'committee_election_id': $('#committeeSessionId').val() });
            })
        });
    </script>
@endpush