@extends('admin.layout.app')
@section('content')
    <main class="nxl-container">
        <div class="nxl-content">
            <!-- [ page-header ] start -->
            <div class="page-header">
                <div class="page-header-left d-flex align-items-center">
                    <div class="page-header-title">
                        <h5 class="m-b-10">Dashboard</h5>
                    </div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('front.index')}}">Home</a></li>

                    </ul>
                </div>
                <div class="page-header-right ms-auto">
                    <div class="page-header-right-items">
                        <div class="d-flex d-md-none">
                            <a href="javascript:void(0)" class="page-header-right-close-toggle">
                                <i class="feather-arrow-left me-2"></i>
                                <span>Back</span>
                            </a>
                        </div>
                        <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                            <div id="reportrange" class="reportrange-picker d-flex align-items-center">
                                <span class="reportrange-picker-field"></span>
                            </div>

                        </div>
                    </div>
                    <div class="d-md-none d-flex align-items-center">
                        <a href="javascript:void(0)" class="page-header-right-open-toggle">
                            <i class="feather-align-right fs-20"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- [ page-header ] end -->
            <!-- [ Main Content ] start -->
            <div class="main-content">
                <div class="row">
                    <!-- [Mini Card] start -->
                    <!-- Mini Cards -->
                    <div class="row">
                        <div class="col-xxl-3 col-lg-4 col-md-6">
                            <div class="card border border-dashed border-gray-5">
                                <div class="card-body text-center">
                                    <i class="bi bi-envelope fs-3 text-primary"></i>
                                    <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $totalJobs }}</div>
                                    <p class="fs-12 fw-medium text-muted mb-0">Total Jobs</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-lg-4 col-md-6">
                            <div class="card border border-dashed border-gray-5">
                                <div class="card-body text-center">
                                    <i class="bi bi-envelope-plus fs-3 text-warning"></i>
                                    <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $closedJobs }}</div>
                                    <p class="fs-12 fw-medium text-muted mb-0">Closed Jobs</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-lg-4 col-md-6">
                            <div class="card border border-dashed border-gray-5">
                                <div class="card-body text-center">
                                    <i class="bi bi-envelope-check fs-3 text-success"></i>
                                    <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $hiredEmployees }}</div>
                                    <p class="fs-12 fw-medium text-muted mb-0">Hired Employees</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-lg-4 col-md-6">
                            <div class="card border border-dashed border-gray-5">
                                <div class="card-body text-center">
                                    <i class="bi bi-envelope-open fs-3 text-indigo"></i>
                                    <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $openJobs }}</div>
                                    <p class="fs-12 fw-medium text-muted mb-0">Open Jobs</p>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                            <tr>
                                <th scope="col">Job Title</th>
                                <th scope="col">Status</th>
                                <th scope="col">Applicants</th>
                                <th scope="col">Stage</th>
                                <th scope="col" class="text-end">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($applications as $application)
                                <tr>
                                    <td>
                                        <div class="hstack gap-2">
                                            <span class="wd-10 ht-10 bg-gray-400 rounded-circle"></span>
                                            <div class="ps-3">
                                                <a href="javascript:void(0);" class="mb-2 d-block">
                                                    <span>{{ $application->title }}</span>
                                                </a>
                                                <p class="fs-12 text-muted mb-0">Posted
                                                    on {{ $application->created_at->format('d M, Y') }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($application->status === 'open')
                                            <span class="badge bg-soft-success text-success">Open</span>
                                        @elseif($application->status === 'closed')
                                            <span class="badge bg-soft-danger text-danger">Closed</span>
                                        @else
                                            <span
                                                class="badge bg-soft-secondary text-muted">{{ ucfirst($application->status) }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        {{ $application->candidate_count }}
                                    </td>
                                    <td>
                                        <div class="hstack gap-1">
                                            <div class="wd-15 ht-4 bg-success rounded-pill opacity-75"></div>
                                            <div class="wd-15 ht-4 bg-warning rounded-pill opacity-75"></div>
                                            <div class="wd-15 ht-4 bg-gray-300 rounded-pill"></div>
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('admin.job.index') }}" class="avatar-text avatar-md">
                                            <i class="feather-arrow-right"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>


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

    </main>

@endsection