@php use App\Models\UserManagement\User;use Carbon\Carbon; @endphp
@extends('layouts.frontend.master')

@section('title', 'Members - BAU 2001–2002 Alumni Association')
@push('css')
    <link rel="stylesheet" href="{{asset('assets/committee/index.css')}}">
    <link rel="stylesheet" href="{{asset('assets/committee/custom.css')}}">

    <style>
        .truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
@endpush

@section('content')
    <!-- Member Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="section-title text-center">
                <h1 class="text-4xl font-bold text-gray-900 mb-4">All Members</h1>
            </div>
            <div class="py-8">
                <div class="w-100">
                    <form method="GET" action="" class="mb-4">
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <input type="text" name="search" value="{{ request('search') }}"
                                       class="form-control"
                                       placeholder="Search Name, Email, Phone, Faculty, Student ID">
                            </div>

                            <div class="col-md-2 mb-2">
                                <button type="submit" class="btn btn-primary btn-block">
                                    <i class="fas fa-search"></i> Search
                                </button>
                            </div>

                            <div class="col-md-2 mb-2">
                                <a href="{{ url()->current() }}" class="btn btn-secondary btn-block">
                                    Reset
                                </a>
                            </div>
                        </div>
                    </form>

                </div>
                {{--<div class="custom-grid">
                    @if(count($users) > 0)
                        @foreach($users as $user)
                            <div class="card bg-white p-0" style="border: 2px solid green; border-radius: 25px; ">
                                <div class="card-body">
                                    <div class="row">
                                        <!-- Avatar -->
                                        <div class="col-5 pr-0">
                                            <div
                                                class="d-flex align-items-center justify-content-center rounded-circle bg-light overflow-hidden"
                                                style="width: 100px; height: 100px; color: rgba(166,161,161,0.8); box-shadow: 0 0 7px 1px; background: linear-gradient(125deg, #435a85, transparent);">
                                                @if(!empty($user->user_photo))
                                                    <img src="{{ $user->user_photo }}"
                                                         alt="User Photo"
                                                         class="img-fluid"
                                                         style="width: 100%; height: 100%; object-fit: cover;">
                                                @else
                                                    <span class="text-secondary h4 mb-0">
                                                            {{ collect(explode(' ', $user->name ?? 'N'))->filter()->take(2)->map(fn($w) => strtoupper($w[0]))->implode('') }}
                                                        </span>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- User Info -->
                                        <div class="col-7 p-0"
                                             style="">
                                            <p class="text-muted truncate mb-1 font-weight-bold"
                                               style="font-size: 20px!important;" title="{{ $user->name??'' }}">
                                                {{ $user->name??'' }}
                                            </p>

                                            <p class="text-muted truncate mb-1" style="font-size: 16px!important;"
                                               title="{{ $user->phone }}">
                                                <i class="fas fa-phone-alt"></i>
                                                {{ $user->phone ?? '' }}</p>

                                            <p class="text-muted truncate mb-1" style="font-size: 16px!important;"
                                               title="{{ $user->email??'' }}">
                                                <i class="fas fa-envelope"></i>
                                                {{ $user->email ?? '' }}
                                            </p>

                                            <p class="text-muted truncate mb-1" style="font-size: 16px!important;"
                                               title="{{ $user->personalInformation?->student?->student_id ?? '' }}">
                                                <i class="far fa-address-card"></i>
                                                {{ $user->personalInformation?->student?->student_id ?? '' }}
                                            </p>
                                        </div>

                                        <div class="col-12 my-1"></div>

                                        <div class="col-5 pr-0">
                                            <p class="text-black truncate " style="font-size: 16px!important;">
                                                <i class="fas fa-tint text-danger"></i>
                                                {{ \App\Models\PersonalInformation::BLOOD_GROUP[$user->personalInformation->blood_group ?? ''] ?? '' }}
                                            </p>
                                            <p class="text-black truncate " style="font-size: 16px!important;"
                                               title="{{ $user->personalInformation?->faculty?->name }}">
                                                <i class="fas fa-graduation-cap"></i>
                                                {{ $user->personalInformation?->faculty?->name }}
                                            </p>
                                        </div>

                                        <div class="col-7 p-0">
                                            <p class="text-muted truncate text-black"
                                               style="font-size: 16px!important;"
                                               title="{{ optional($user->personalInformation)->company ?? '' }}">
                                                <i class="fas fa-building"></i>
                                                {{ optional($user->personalInformation)->company ?? '' }}
                                            </p>
                                            <p class="text-muted truncate text-black"
                                               style="font-size: 16px!important;"
                                               title="{{ optional($user->personalInformation)->job_title ?? '' }}">
                                                <i class="fas fa-suitcase"></i>
                                                {{ optional($user->personalInformation)->job_title ?? '' }}
                                            </p>
                                        </div>

                                        <div class="col-12 mt-2">
                                            <hr style="border: 1px solid #a6a4a4;">

                                            <div class="row mt-3 py-0">
                                                <div class="col-2">
                                                    <a href="#" class="btn btn-sm btn-light text-success rounded"
                                                       style="border: 2px solid #a6a4a4; border-radius: 10px">
                                                        <i class="fab fa-linkedin-in"
                                                           style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                    </a>
                                                </div>
                                                <div class="col-2">
                                                    <a href="#" class="btn btn-sm btn-light text-success rounded"
                                                       style="border: 2px solid #a6a4a4;  border-radius: 10px">
                                                        <i class="fab fa-facebook-f"
                                                           style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                    </a>
                                                </div>

                                                <div class="col-2">
                                                    <a href="#" class="btn btn-sm btn-light text-success rounded"
                                                       style="border: 2px solid #a6a4a4;  border-radius: 10px">
                                                        <i class="fab fa-twitter"
                                                           style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                    </a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p>No members found</p>
                    @endif
                </div>--}}

                <div class="row">
                    @if(count($users) > 0)
                        @foreach($users as $user)
                            <div class="col-12 col-md-6 col-lg-4 mb-4">
                                <div class="card bg-white p-0" style="border: 2px solid green; border-radius: 25px;">
                                    <div class="card-body">
                                        <div class="row">
                                            <!-- Avatar -->
                                            <div class="col-5 pr-0">
                                                <div class="d-flex align-items-center justify-content-center rounded-circle bg-light overflow-hidden"
                                                     style="width: 100px; height: 100px; color: rgba(166,161,161,0.8); box-shadow: 0 0 7px 1px; background: linear-gradient(125deg, #435a85, transparent);">
                                                    @if(!empty($user->user_photo))
                                                        <img src="{{ $user->user_photo }}" alt="User Photo"
                                                             class="img-fluid"
                                                             style="width: 100%; height: 100%; object-fit: cover;">
                                                    @else
                                                        <span class="text-secondary h4 mb-0">
                                                            {{ collect(explode(' ', $user->name ?? 'N'))->filter()->take(2)->map(fn($w) => strtoupper($w[0]))->implode('') }}
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>

                                            <!-- User Info -->
                                            <div class="col-7 p-0">
                                                <p class="text-muted truncate mb-1 font-weight-bold" style="font-size: 20px!important;" title="{{ $user->name }}">
                                                    {{ $user->name }}
                                                </p>

                                                <p class="text-muted truncate mb-1" style="font-size: 16px!important;" title="{{ $user->phone }}">
                                                    <i class="fas fa-phone-alt"></i> {{ $user->phone }}
                                                </p>

                                                <p class="text-muted truncate mb-1" style="font-size: 16px!important;" title="{{ $user->email }}">
                                                    <i class="fas fa-envelope"></i> {{ $user->email }}
                                                </p>

                                                <p class="text-muted truncate mb-1" style="font-size: 16px!important;" title="{{ $user->personalInformation?->student?->student_id }}">
                                                    <i class="far fa-address-card"></i>
                                                    {{ $user->personalInformation?->student?->student_id }}
                                                </p>
                                            </div>

                                            <div class="col-12 my-1"></div>

                                            <div class="col-5 pr-0">
                                                <p class="text-black truncate" style="font-size: 16px!important;">
                                                    <i class="fas fa-tint text-danger"></i>
                                                    {{ \App\Models\PersonalInformation::BLOOD_GROUP[$user->personalInformation->blood_group ?? ''] ?? '' }}
                                                </p>
                                                <p class="text-black truncate" style="font-size: 16px!important;" title="{{ $user->personalInformation?->faculty?->name }}">
                                                    <i class="fas fa-graduation-cap"></i>
                                                    {{ $user->personalInformation?->faculty?->name }}
                                                </p>
                                            </div>

                                            <div class="col-7 p-0">
                                                <p class="text-muted truncate text-black" style="font-size: 16px!important;" title="{{ optional($user->personalInformation)->company }}">
                                                    <i class="fas fa-building"></i>
                                                    {{ optional($user->personalInformation)->company }}
                                                </p>
                                                <p class="text-muted truncate text-black" style="font-size: 16px!important;" title="{{ optional($user->personalInformation)->job_title }}">
                                                    <i class="fas fa-suitcase"></i>
                                                    {{ optional($user->personalInformation)->job_title }}
                                                </p>
                                            </div>

                                            <div class="col-12 mt-2">
                                                <hr style="border: 1px solid #a6a4a4;">

                                                <div class="row mt-3 py-0">
                                                    <div class="col-2">
                                                        <a href="#" class="btn btn-sm btn-light" style="border: 2px solid #a6a4a4; border-radius: 10px;">
                                                            <i class="fab fa-linkedin-in" style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                        </a>
                                                    </div>
                                                    <div class="col-2">
                                                        <a href="#" class="btn btn-sm btn-light" style="border: 2px solid #a6a4a4; border-radius: 10px;">
                                                            <i class="fab fa-facebook-f" style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                        </a>
                                                    </div>
                                                    <div class="col-2">
                                                        <a href="#" class="btn btn-sm btn-light" style="border: 2px solid #a6a4a4; border-radius: 10px;">
                                                            <i class="fab fa-twitter" style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>

                                        </div> <!-- row end -->
                                    </div> <!-- card-body -->
                                </div> <!-- card -->
                            </div> <!-- col -->
                        @endforeach
                    @else
                        <p>No members found</p>
                    @endif
                </div>

                <div class="row mt-3">
                    <div class="col">
                        <nav aria-label="Grid Pagination">
                            <ul class="pagination justify-content-center flex-wrap">

                                {{-- Previous --}}
                                <li class="page-item {{ $users->onFirstPage() ? 'disabled' : '' }}">
                                    <a class="page-link"
                                       href="{{ $users->previousPageUrl() }}&search={{ request('search') }}"
                                       aria-label="Previous">
                                        &laquo; Previous
                                    </a>
                                </li>

                                {{-- First page --}}
                                @if($users->currentPage() > 3)
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $users->url(1) }}&search={{ request('search') }}">1</a>
                                    </li>
                                    @if($users->currentPage() > 4)
                                        <li class="page-item disabled"><span class="page-link">...</span></li>
                                    @endif
                                @endif

                                {{-- Middle pages --}}
                                @for ($i = max(1, $users->currentPage() - 2); $i <= min($users->lastPage(), $users->currentPage() + 2); $i++)
                                    <li class="page-item {{ $users->currentPage() == $i ? 'active' : '' }}">
                                        <a class="page-link" href="{{ $users->url($i) }}&search={{ request('search') }}">{{ $i }}</a>
                                    </li>
                                @endfor

                                {{-- Last page --}}
                                @if($users->currentPage() < $users->lastPage() - 2)
                                    @if($users->currentPage() < $users->lastPage() - 3)
                                        <li class="page-item disabled"><span class="page-link">...</span></li>
                                    @endif
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="{{ $users->url($users->lastPage()) }}&search={{ request('search') }}">{{ $users->lastPage() }}</a>
                                    </li>
                                @endif

                                {{-- Next --}}
                                <li class="page-item {{ $users->hasMorePages() ? '' : 'disabled' }}">
                                    <a class="page-link" href="{{ $users->nextPageUrl() }}&search={{ request('search') }}" aria-label="Next">
                                        Next &raquo;
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@push('js')
    <script defer="" src="https://alumni-committee-hub.lovable.app/~flock.js"
            data-proxy-url="https://alumni-committee-hub.lovable.app/~api/analytics"></script>
@endpush