@php
    $title = 'Dashboard';
    $description = 'Dashboard';
@endphp

@section('title', 'Dashboard')
@extends('layouts.app')

@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                    <div class="card bg-primary" style="background: linear-gradient(135deg, #2B0000, #4A0A0A) !important;">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <span class="p-2 me-3 feature-icon rounded">
                                    <i class="fa fa-cogs" style="color: white;font-size: 24px;"></i>
                                </span>
                                <div class="media-body text-end feature-icon-text">
                                    <p class="fs-18 text-white mb-2">Services</p>
                                    <span class="fs-48 text-white font-w600">{{ $services }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                    <div class="card bg-info overflow-hidden" style="background: linear-gradient(135deg, #2B0000, #8B1A1A) !important;">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <span class="p-2 me-3 feature-icon rounded">
                                    <i class="fa fa-building" style="color: white;font-size: 24px;"></i>
                                </span>
                                <div class="media-body text-end feature-icon-text">
                                    <p class="fs-18 text-white mb-2">Projects</p>
                                    <span class="fs-48 text-white font-w600">{{ $projects }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                    <div class="card bg-success" style="background: linear-gradient(135deg, #2B0000, #A62828) !important;">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <span class="p-2 me-3 feature-icon rounded">
                                    <i class="fa fa-file-alt" style="color: white;font-size: 24px;" ></i>

                                </span>
                                <div class="media-body text-end feature-icon-text">
                                    <p class="fs-18 text-white mb-2">Jop Forms</p>
                                    <span class="fs-48 text-white font-w600">{{ $jobForms }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-xxl-3 col-sm-6">
                    <div class="card bg-secondary" style="background: linear-gradient(135deg, #2B0000, #C64545) !important;">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <span class="p-2 me-3 feature-icon rounded">
                                    <i class="fa fa-envelope" style="color: white;font-size: 24px;"></i>
                                </span>
                                <div class="media-body text-end feature-icon-text">
                                    <p class="fs-18 text-white mb-2">Messages</p>
                                    <span class="fs-48 text-white font-w600">{{ $contactForms }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                    <div class="card bg-primary" style="background: linear-gradient(135deg, #2B0000, #3A0000) !important;">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <span class="p-2 me-3 feature-icon rounded">
                                    <i class="fa fa-users" style="color: white;font-size: 24px;"></i>
                                </span>
                                <div class="media-body text-end feature-icon-text">
                                    <p class="fs-18 text-white mb-2">Partners</p>
                                    <span class="fs-48 text-white font-w600">{{ $partners }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                    <div class="card bg-info overflow-hidden" style="background: linear-gradient(135deg, #2B0000, #5A0000) !important;">
                        <div class="card-body" >
                            <div class="media align-items-center">
                                <span class="p-2 me-3 feature-icon rounded">
                                    <i class="fa fa-briefcase" style="color: white;font-size: 24px;"></i>
                                </span>
                                <div class="media-body text-end feature-icon-text">
                                    <p class="fs-18 text-white mb-2">Jobs</p>
                                    <span class="fs-48 text-white font-w600">{{ $jobs }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                    <div class="card bg-success" style="background: linear-gradient(135deg, #2B0000, #7A0000) !important;">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <span class="p-2 me-3 feature-icon rounded">
                                    <i class="fa fa-blog" style="color: white;font-size: 24px;"></i>

                                </span>
                                <div class="media-body text-end feature-icon-text">
                                    <p class="fs-18 text-white mb-2">Blogs</p>
                                    <span class="fs-48 text-white font-w600">{{ $blogs }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-xxl-3 col-sm-6">
                    <div class="card bg-secondary" style="background: linear-gradient(135deg, #2B0000, #A60000) !important;">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <span class="p-2 me-3 feature-icon rounded">
                                    <i class="fa fa-users" style="color: white;font-size: 24px;"></i>
                                </span>
                                <div class="media-body text-end feature-icon-text">
                                    <p class="fs-18 text-white mb-2">Clients</p>
                                    <span class="fs-48 text-white font-w600">{{ $clients }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12">
                    <div class="d-sm-flex align-items-center mb-3 mt-sm-0 mt-2">
                        <h4 class="text-black fs-20 me-auto">Featured Projects</h4>
                        <a href="{{ route('project.index') }}" class="btn btn-primary light btn-rounded">View More
                            <i class="fa fa-arrow-right"></i>
                            
                        </a>
                    </div>
                    <div class="row">
                        
                        @if($projectsection->count() > 0)
                        @foreach ($projectsection as $project)
                        <div class="items col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <a href="{{ route('project.edit', $project->id) }}" target="_blank">
                                    <div class="media">
                                        <img src="{{ $project->image_mobile }}" alt="{{ $project->title }}" style="width: 80px;height: 80px;">
                                        <div class="media-body" style="margin-left: 10px;">
                                            <h6 class="fs-16 text-black font-w600">{{ $project->title }}</h6>
                                            <span class="text-primary font-w500">{{ Str::limit($project->brief, 50) }}</span>
                                        </div>
                                    </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @else

                        <div class="items col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="media">
                                        <h6 class="fs-16 text-black font-w600">No projects found</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <div class="col-xl-12">
                    <div class="d-sm-flex align-items-center mb-3 mt-sm-0 mt-2">
                        <h4 class="text-black fs-20 me-auto">Featured Jobs</h4>
                        <a href="{{ route('job-information.index') }}" class="btn btn-primary light btn-rounded">View More
                            <i class="fa fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="row">

                        @if($jobsection->count() > 0)
                        @foreach ($jobsection as $job)
                        <div class="items col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="media">
                                        <i class="fa fa-briefcase" style="color: #A4C639;font-size: 24px;"></i>
                                        <div class="media-body" style="margin-left: 10px;">
                                            <h6 class="fs-16 text-black font-w600">{{ $job->title }}</h6>
                                            <span class="text-primary font-w500">{{ $job->brief }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <div class="items col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="media">
                                        <h6 class="fs-16 text-black font-w600">No jobs found</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection