@extends('admin.layout.app')
@section('content')
    <main class="nxl-container apps-container apps-email">
        <div class="nxl-content without-header nxl-full-content">
            <!-- [ Main Content ] start -->
            <div class="main-content d-flex">
                <!-- [ Content Sidebar ] start -->
                <div class="content-sidebar content-sidebar-md" data-scrollbar-target="#psScrollbarInit">
                    <div class="content-sidebar-header bg-white sticky-top hstack justify-content-between">
                        <h4 class="fw-bolder mb-0">Email</h4>
                        <a href="javascript:void(0);" class="app-sidebar-close-trigger d-flex">
                            <i class="feather-x"></i>
                        </a>
                    </div>

                    <div class="content-sidebar-body">
                        <ul class="nav flex-column nxl-content-sidebar-item">
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center justify-content-between"
                                   href="javascript:void(0);">
                                    <span class="d-flex align-items-center">
                                        <i class="feather-inbox me-3"></i>
                                        <span>Inbox</span>
                                    </span>
                                    <span class="badge bg-soft-primary text-primary">{{$applicants->count()}}</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <i class="feather-send"></i>
                                    <span>Send</span>
                                </a>
                            </li>

                        </ul>
                        <ul class="nav flex-column nxl-content-sidebar-item">
                            <li class="px-4 my-2 fs-10 fw-bold text-uppercase text-muted text-spacing-1 d-flex align-items-center justify-content-between">
                                <span>Application Title's</span>
                                <a href="javascript:void(0);">
                                    <span class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                          title="Add New"> <i class="feather-plus"></i> </span>
                                </a>
                            </li>
                            @php
                                $colors = ['bg-warning', 'bg-danger', 'bg-success', 'bg-teal', 'bg-primary']; // add more if needed
                            @endphp
                            @foreach($applications as $index => $application)
                                <li class="nav-item">
                                    <a class="nav-link"
                                       href="{{ route('admin.job.applicants') }}?application_id={{ $application->id }}">
                                        <span
                                            class="wd-7 ht-7 {{ $colors[$index % count($colors)] }} rounded-circle"></span>
                                        <span>{{ $application->title ?? '' }}</span>
                                    </a>
                                </li>
                            @endforeach


                        </ul>

                    </div>
                </div>
                <!-- [ Content Sidebar  ] end -->
                <!-- [ Main Area  ] start -->
                <div class="content-area" data-scrollbar-target="#psScrollbarInit">
                    <div class="content-area-header bg-white sticky-top">


                    </div>
                    <div class="content-area-body p-0">
                        @foreach($applicants as $applicant)
                            <div class="single-items">

                                <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                    <a href="{{route('admin.job.applicant.detail',$applicant->id)}}"
                                       class="hstack gap-3 wd-200 item-user">
                                        <div class="text-truncate-1-line mb-0">{{$applicant->name ?? ''}}</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-none d-md-block">
                                        <div class="w-100 text-truncate-1-line item-desc">
                                            <span class="badge bg-gray-200 text-dark me-2">Candidate</span>
                                            <i class="feather-link-2 fs-12"></i>
                                            <span class="ms-3">{{$applicant->note ?? ''}}</span>
                                        </div>
                                    </a>
                                </div>
                                <!--! [item-date] !-->
                                <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                    <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">
                                        {{ $applicant->created_at->format('d M, Y') }}
                                    </div>
                                    <div class="item-action">
                                        <div class="dropdown">
                                            <a href="{{route('admin.job.applicant.detail',$applicant->id)}}">
                                                <div style="font-size: 16px!important;" title="View">
                                                    <i class="feather-eye me-3"></i>
                                                </div>
                                            </a>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>


                </div>
                <!-- [ Content Area ] end -->
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </main>



@endsection