@extends('layouts.app')

@section('title', 'Placement')
@section('styles')
@endsection
@section('content')

    <div class="col-md-11 m-auto mobile-space">
        <div class="list-wrapper hand-talents mt-5">
            <div class="list-item">
                @if ($talents->isEmpty())
                    <p class="text-center text-white">No data found.</p>
                @else
                    <div class="d-flex flex-wrap col-md-12">
                        @foreach ($talents as $talent)
                            <div class="col-md-3 col-sm-12 text-center talent-item">
                                <a href="{{ route('talent-detail', [$talent->id, $type]) }}">
                                    @if ($talent && $talent->images->isNotEmpty())
                                        <img src="{{ asset('storage/talent_images/' . $talent->id . '/' . optional($talent->images->first())->url) }}"
                                            alt="{{ ($talent->first_name ?? '') . ' ' . ($talent->last_name ?? 'Unknown Talent') }}">
                                    @else
                                        <img src="{{ asset('assets/user.jpg') }}" alt="No Image Available">
                                    @endif

                                    <div class="swiper-pagination"></div>
                                    <div class="swiper-button-prev"></div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-scrollbar"></div>
                                    <div class="col-md-12 text-center">
                                        <span class="text-16 text-white">
                                            {{--  {{ optional($talent->user)->name ?? 'Unknown Talent' }}  --}}
                                            {{ $talent->first_name }} {{ strtoupper(substr($talent->last_name, 0, 1)) }}.
                                        </span>

                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <div id="pagination-container" class="mt-4">
                {{ $talents->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src='https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.js'></script>
@endsection