@extends('user.layouts.app')

@push('style')
<style type="text/css">
    
</style>
@endpush

@section('body_class', 'members_directory')

@section('content')
<section class="banner-slider">
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
</section>

<div class="banner-inner-content">
    <div class="container">
    <ul class="bread-come">
        <li>
        <a href="/">Home</a>
        </li>
        <li>Members Directory</li>
    </ul>
    </div>
</div>

<section class="affiliated-clubs">
    <div class="container">
        <div class="page-title">
            <h4 data-aos="fade-up">Members Directory</h4>
            <form method="GET" action="{{ route('user.members_directory') }}" class="filter d-flex">
                <div class="filter mb-0">
                    <div class="select-option">
                        <div class="form-row box-focus">
                            <select class="custom-selectpicker" name="search_field"
                                    data-placeholder="Select any option">
                                <option value="" disabled {{ empty($searchField) ? 'selected' : '' }}>Select any option</option>
                                <option value="user_login" {{ $searchField == 'user_login' ? 'selected' : '' }}>Membership No</option>
                                <option value="display_name" {{ $searchField == 'display_name' ? 'selected' : '' }}>Name</option>
                                <option value="user_email" {{ $searchField == 'user_email' ? 'selected' : '' }}>Email</option>
                                <option value="user_mobile" {{ $searchField == 'user_mobile' ? 'selected' : '' }}>Mobile</option>
                            </select>
                        </div>
                    </div>
                    <div class="search-section">
                        <div class="form-row box-focus">
                        <!-- <label for="searchValue">Search Members</label> -->
                        <input id="searchValue" name="search_value" type="text"
                               class="form-control"
                               value="{{ $searchValue ?? '' }}"
                               placeholder="Type here to search" />
                        </div>
                        <button class="btn-src">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke="#101010" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M22 22L20 20" stroke="#101010" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        </button>
                    </div>
                    <div class="reset-btn-section">
                        <a href="{{ route('user.members_directory') }}" class="btn btn-primary">Reset</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>  


<section class="member-table-section">
    <div class="container">
    <table class="member-table">
        <thead>
        <tr>
            <th>Member Photo</th>
            <th>Member details</th>
            <th>Member Address</th>
        </tr>
        </thead>
        <tbody>
        @if($members->isNotEmpty())
        @foreach ($members as $member)
        <tr>
            <td data-label="Member Photo">
                <ul class="member-photos">
                    @php
                        $photos = $member->dependents?->pluck('dependent_image')->toArray() ?? [];
                    @endphp

                    @if($member->image)
                        <!-- <li><img src="{{ asset('storage/distribution/images/members_images/'.$member->image) }}" alt="Photo"></li> -->
                        <li><img src="{{ $member->image }}" alt="Photo"></li>
                    @else
                        <!-- <li><img src="{{ asset('storage/distribution/images/no_photo.jpg') }}" alt="Default"></li> -->
                        <li><img src="{{ asset('images/avatars.svg') }}" alt="Default"></li>
                    @endif

                    @if($member->dependents && $photos)
                        @foreach($photos as $photo)
                            {{--@if($photo)
                                <li><img src="{{ asset('storage/distribution/images/dependent_image/'.$photo) }}" alt="Photo"></li>
                            @else --}}
                                <!-- <li><img src="{{ asset('storage/distribution/images/no_photo.jpg') }}" alt="Default"></li> -->
                                <li><img src="{{ asset('images/avatars.svg') }}" alt="Default"></li>
                            {{--@endif --}}
                        @endforeach
                    @endif
                </ul>
            </td>
            <td data-label="Member details">
            <div class="name">Name : {{ $member->name }}</div>
            <div class="membership">Membership No / Nick Name : {{ $member->member_id }}</div>
            <div class="email">Email : {{ !empty($member->email) ? aes_decrypt($member->email):'' }}</div>
            <div class="phone">Phone :{{ !empty($member->phone) ? aes_decrypt($member->phone) : '' }}</div>
            </td>
            <td data-label="Member Address">
            <div class="address-outer"> 
                <div class="address">(R) {{ $member->contactInfo->residence_address ?? '' }} , M : {{ !empty($member->contactInfo->residence_phone) ? aes_decrypt($member->contactInfo->residence_phone) : '' }}</div>
                <p>E : {{ !empty($member->contactInfo->residence_email) ? aes_decrypt($member->contactInfo->residence_email) : '' }}</p>
                <div class="address">(O) {{ $member->contactInfo->office_name_address ?? '' }} , Tel : {{ !empty($member->contactInfo->office_phone) ? aes_decrypt($member->contactInfo->office_phone) : '' }} , M : {{ !empty($member->contactInfo->office_mobile) ? aes_decrypt($member->contactInfo->office_mobile) : '' }}</div>
                <p>E : {{ !empty($member->contactInfo->office_email) ? aes_decrypt($member->contactInfo->office_email) : '' }}</p>
            </div>
            </td>
        </tr>
        @endforeach
        @else
        <tr>
            <td colspan="3" class="no-data" style="text-align: center;">No data found.</td>
        </tr>
        @endif
        
        </tbody>
    </table>
    <div class="toolbar">
            <div class="show-status">
                Showing {{ $members->firstItem() }} to {{ $members->lastItem() }} of {{ $members->total() }} Members
            </div>
            <ul class="pagination">
                {{-- Previous Page Link --}}
                @if ($members->onFirstPage())
                    <li class="page-item disabled"><span class="page-link">Previous</span></li>
                @else
                    <li class="page-item"><a class="page-link" href="{{ $members->previousPageUrl() }}">Previous</a></li>
                @endif

                {{-- Pagination Elements --}}
                @foreach ($members->getUrlRange(1, $members->lastPage()) as $page => $url)
                    @if ($page == $members->currentPage())
                        <li class="page-item"><a class="page-link active" href="#">{{ $page }}</a></li>
                    @else
                        <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                    @endif
                @endforeach

                {{-- Next Page Link --}}
                @if ($members->hasMorePages())
                    <li class="page-item"><a class="page-link" href="{{ $members->nextPageUrl() }}">Next</a></li>
                @else
                    <li class="page-item disabled"><span class="page-link">Next</span></li>
                @endif
            </ul>
        </div>
    </div>
</section>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection


@push('scripts')
<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>
@endpush