@extends('layouts.app')
@section('style')
    <style>
        .pop-out-card {
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        border: solid 1px #bbb;
        transition: all .2s;
        cursor: pointer;
        }
        .pop-out-card:hover {
            box-shadow: 2px 12px 15px #999 !important;
        }
        .pop-out-card.with-transform:hover {
            transform: translateY(-2px);
        }
        .icon-cards {
            width: 100px;
            height: 100px;
            float: left;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all .2s;
            cursor: pointer;
            border: 1px solid rgb(218, 218, 218);
        }
        .icon-cards:hover {
            box-shadow: 2px 12px 15px #999 !important;
        }
        .icon-cards.with-transform:hover {
            transform: translateY(-2px);
        }
    </style>
@endsection
@section('content')
<div class="col-12">

</div>
<div class="col-12">
    <div class="card pb-3">
      <div class="card-header">
        <h5 class="title">Menu</h5>
        <p class="category">Select where you want to go</p>
      </div>
      <div class="card-body all-icons">
        <div class="row">
            <div class="col-12">
                <div class="row">
                    <div class="col-12">
                        <strong >Profiles</strong>
                        <hr>
                    </div>
                    <div class="col-12">
                        <a href="{{ route('personnel') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons users_single-02 text-primary mb-2"></i>
                                <strong style="font-size: 10px">Personnel</strong>
                            </div>
                        </a>
                        <a href="{{ route('client') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons business_badge text-primary mb-2"></i>
                                <strong style="font-size: 10px">Clients</strong>
                            </div>
                        </a>
                        <a href="{{ route('post') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons location_pin text-primary mb-2"></i>
                                <strong style="font-size: 10px">POSTS</strong>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-5">
                <div class="row">
                    <div class="col-12">
                        <strong >Transactions</strong>
                        <hr>
                    </div>
                    <div class="col-12">
                        <a href="{{ route('contract') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons files_paper text-primary mb-2"></i>
                                <strong style="font-size: 10px">Contracts</strong>
                            </div>
                        </a>
                        <a href="{{ route('dtr') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons files_single-copy-04 text-primary mb-2"></i>
                                <strong style="font-size: 10px">DTR</strong>
                            </div>
                        </a>
                        <a href="{{ route('billing') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons business_money-coins text-primary mb-2"></i>
                                <strong style="font-size: 10px">Billings</strong>
                            </div>
                        </a>
                        <a href="{{ route('paymentperiod') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons ui-1_calendar-60 text-primary mb-2"></i>
                                <strong style="font-size: 10px">Payroll</strong>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-5">
                <div class="row">
                    <div class="col-12">
                        <strong>Inventory</strong>
                        <hr>
                    </div>
                    <div class="col-12">
                        <a href="{{ route('firearm') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons objects_spaceship  text-primary mb-2"></i>
                                <strong style="font-size: 10px">Firearms</strong>
                            </div>
                        </a>
                        <a href="{{ route('vehicle') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons media-2_sound-wave  text-primary mb-2"></i>
                                <strong style="font-size: 10px">Radios</strong>
                            </div>
                        </a>
                        <a href="{{ route('vehicle') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons shopping_delivery-fast  text-primary mb-2"></i>
                                <strong style="font-size: 10px">Vehicles</strong>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-5">
                <div class="row">
                    <div class="col-12">
                        <strong >Miscellaneous</strong>
                        <hr>
                    </div>
                    <div class="col-12">
                        <a href="{{ route('bank') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons business_bank text-primary mb-2"></i>
                                <strong style="font-size: 10px">Banks</strong>
                            </div>
                        </a>
                        <a href="{{ route('deduction') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons shopping_credit-card text-primary mb-2"></i>
                                <strong style="font-size: 10px">Deductions</strong>
                            </div>
                        </a>
                        <a href="{{ route('holiday') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons transportation_air-baloon text-primary mb-2"></i>
                                <strong style="font-size: 10px">Holiday</strong>
                            </div>
                        </a>
                        <a href="{{ route('insurance') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons objects_diamond  text-primary mb-2"></i>
                                <strong style="font-size: 10px">Insurance</strong>
                            </div>
                        </a>
                        <a href="{{ route('policy') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons education_agenda-bookmark  text-primary mb-2"></i>
                                <strong style="font-size: 10px">Policy</strong>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-5">
                <div class="row">
                    <div class="col-12">
                        <strong >Reports</strong>
                        <hr>
                    </div>
                    <div class="col-12">
                        <a href="{{ route('incident') }}" class="simple-text logo-normal">
                            <div class="div icon-cards ml-2 mt-2">
                                <i class="now-ui-icons health_ambulance  text-primary mb-2 mt-3"></i>
                                <strong class="mb-0" style="font-size: 10px">Incindent<br> Report</strong>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
</div>
@endsection