@extends('layouts.site_layout')

@section('content')

<section class="container-fluid p-0" id="topBanners" style="position:relative;">
</section>
@if(Session::has('success'))
    <p class="alert {{ Session::get('alert-class', 'alert-success') }} alert-dismissible">
    {{ Session::get('success')}}<a href="#" class="close fs-20 text-decoration-none text-green fw-bold  float-end" data-dismiss="alert" aria-label="close">&times;</a></p>
    @endif
    @if(Session::has('error'))
    <p class="alert {{ Session::get('alert-class', 'alert-danger') }}">{{ Session::get('error') }}</p>
    @endif
@if((Auth::user()->hasRole('admin')))
<section class="container-fluid m-0 row px-0">
    <div class="col-lg-8 bg_light_grey p-0">
        <div class="container ps-lg-5 ps-4">
            <div class="py-5 ms-auto">
                <div class="d-lg-flex d-md-flex d-block">
                    <h3 class="fs-24 align-self-center mb-lg-0 mb-md-0 mb-3">Member List</h3>
                  
                </div>

                <div class="search-organisation d-lg-flex d-md-flex d-block mt_2">
                    <form action="#" class="">
                        <div class="input-group filters search-input mb-lg-0 mb-md-0">
                            <input type="search" class="form-control border-end-0 fs-14 search_inp"
                                placeholder="Search Organisation by name">
                            <span class="input-group-text bg-white pointer" id="filter">
                                <i class="fa fa-search text-maroon fs-12"></i>
                            </span>
                        </div>
                    </form>
                    
                    <div class="d-lg-flex d-md-flex d-block justify-content-end">
                    <p class="mb-0 ms-auto mt-lg-0 mt-md-0 mt-4 me-2 align-self-center">Filter by:</p>
                    <select class="form-select mt-lg-0 mt-md-0 mt-2 mb-3 me-3 mb-lg-0 mb-md-0 w-25" aria-label="Default select example" name="vertical_id" id="vertical_id" onchange="getMembersByVertical();">
                        
                    </select>

                    <select class="form-select mt-lg-0 mt-md-0 mt-2 mb-3  mb-lg-0 mb-md-0 w-25" aria-label="Default select example" name="category_id" onchange="getMembersByCategory();" id="category_id">
                        
                    </select>
                    
                    </div>
                </div>

                <ul class="nav row organisation-list nav-pills mb-3" id="pills-tab" role="tablist">

                </ul>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane py-5 ps-4 pe-lg-5 pe-3 me-lg-5 me-0 fade show active" id="pills-acceleron" role="tabpanel" aria-labelledby="pills-acceleron-tab">

        </div>
    </div>
</section>
@else
@if ($memdetails[0]->approve_status == 1)
<section class="container-fluid m-0 row px-0">
    <div class="col-lg-8 bg_light_grey p-0">
        <div class="container ps-lg-5 ps-4">
            <div class="py-5 ms-auto">
                <div class="d-lg-flex d-md-flex d-block">
                    <h3 class="fs-24 align-self-center mb-lg-0 mb-md-0 mb-3">Member List</h3>
                  
                </div>

                <div class="search-organisation d-lg-flex d-md-flex d-block mt_2">
                    <form action="#" class="">
                        <div class="input-group filters search-input mb-lg-0 mb-md-0">
                            <input type="search" class="form-control border-end-0 fs-14 search_inp"
                                placeholder="Search Organisation by name">
                            <span class="input-group-text bg-white pointer" id="filter">
                                <i class="fa fa-search text-maroon fs-12"></i>
                            </span>
                        </div>
                    </form>
                    
                    <div class="d-lg-flex d-md-flex d-block justify-content-end">
                    <p class="mb-0 ms-auto mt-lg-0 mt-md-0 mt-4 me-2 align-self-center">Filter by:</p>
                    <select class="form-select mt-lg-0 mt-md-0 mt-2 mb-3 me-3 mb-lg-0 mb-md-0 w-25" aria-label="Default select example" name="vertical_id" id="vertical_id" onchange="getMembersByVertical();">
                        
                    </select>

                    <select class="form-select mt-lg-0 mt-md-0 mt-2 mb-3  mb-lg-0 mb-md-0 w-25" aria-label="Default select example" name="category_id" onchange="getMembersByCategory();" id="category_id">
                        
                    </select>
                    
                    </div>
                </div>

                <ul class="nav row organisation-list nav-pills mb-3" id="pills-tab" role="tablist">

                </ul>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane py-5 ps-4 pe-lg-5 pe-3 me-lg-5 me-0 fade show active" id="pills-acceleron" role="tabpanel" aria-labelledby="pills-acceleron-tab">

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

@else

@if($memberdetails == true)


<div class="mx-5 mt-5"  id="admin" style="display:block">
<form method="POST" action="{{url('become-a-member')}}">
@csrf
<button type="submit" id="becomAmember" class="btn bg-orange text-white btn-padding " data-bs-toggle="modal" aria-expanded="false" > Contact Admin</button>
</form>
<!-- Modal starts-->
<div class="modal fade" id="contactAdmin" tabindex="-1" aria-labelledby="contactAdminLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="contactAdminLabel">Thank You!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      Thank you for your interest to Become A Member! We have received your request, and our team will get back to you shortly.
      </div>
     
    </div>
  </div>
</div>
</div>
<!-- Modal ends -->


@else 

<br>
<div class="mx-5"  id="org" >

<a href="{{url('/member/manage-organization')}}" class="btn bg-orange text-white btn-padding " aria-expanded="false">  Organisation details </a>
<p class="text-danger text-decoration-none">Click this button to Submit your Organisation Details</p></div>

@endif


<p class="text-danger text-decoration-none mx-5 ">Become a member to view Member Directory</p>



@endif
@endif


<!-- calling js file -->
<script src="{{asset('/js/site-api/member_directory.js')}}"></script>
<script src="{{asset('/js/pagination.js')}}"></script>
<script src="{{'/js/site-api/become_a_member.js'}}"></script>

@endsection