@extends('admin.layouts.container')

@section('content')
<div class="side-title">
    <div class="row">
        <div class="col-lg-6">
            <h3>{{ $title }}</h3>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3 mb-3">
        <div class="card">
            <a href="{{route('users')}}">
                <div class="card-body text-center  shadow border rounded">
                    <i class="fa fa-folder text-primary fa-3x"></i>
                    <h4 class="mt-2" style="height: 80px">{{__('reports.users')}}</h4>
                </div>
            </a>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card">
            <a href="{{route('courses')}}">
                <div class="card-body text-center  shadow border rounded">
                    <i class="fa fa-folder text-primary fa-3x"></i>
                    <h4 class="mt-2" style="height: 80px">{{__('reports.courses')}}</h4>
                </div>
            </a>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card">
            <a href="{{route('jobs')}}">
                <div class="card-body text-center  shadow border rounded">
                    <i class="fa fa-folder text-primary fa-3x"></i>
                    <h4 class="mt-2" style="height: 80px">{{__('reports.jobs')}}</h4>
                </div>
            </a>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card">
            <a href="{{route('jobApplications')}}">
                <div class="card-body text-center  shadow border rounded">
                    <i class="fa fa-folder text-primary fa-3x"></i>
                    <h4 class="mt-2" style="height: 80px">{{__('reports.job_applications')}}</h4>
                </div>
            </a>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card">
            <a href="{{route('traineWorkSearcher')}}">
                <div class="card-body text-center  shadow border rounded">
                    <i class="fa fa-folder text-primary fa-3x"></i>
                    <h4 class="mt-2" style="height: 80px">{{__('reports.train_work_searcher')}}</h4>
                </div>
            </a>
        </div>
    </div>
</div>

@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            let card = $('.card');
            card.hover(function () {
                $(this).children('a').children('.card-body').children('i').addClass('fa-folder-open')
            });
            card.mouseleave(function () {
                $(this).children('a').children('.card-body').children('i').removeClass('fa-folder-open')
            })

        })
    </script>
@endsection