@extends('admin::layouts.master')
@section('content')

<div class="container-xxl">
    <!-- Projects Section -->
    <div class="row gy-5 g-xl-10 mb-10">
        <h2 class="text-dark mb-5">Projects</h2>
        <!-- Client Card -->
        <div class="col-sm-6 col-xl-2 mb-xl-10">
            <a class="card h-lg-100 hover-elevate-up" href="javascript:void();">
                <div class="card-body d-flex justify-content-between align-items-center flex-column">
                    <div class="m-0">
                        <!-- Icon Placeholder -->
                    </div>
                    <div class="d-flex flex-column my-7 text-center">
                        <img src="/media/erp_img/client.png" width="50px" height="50px" class="mb-3">
                    </div>
                    <span class="badge badge-light-success fs-base">Client</span>
                </div>
            </a>
        </div>
        <!-- Project Card -->
        <div class="col-sm-6 col-xl-2 mb-xl-10">
            <a class="card h-lg-100 hover-elevate-up" href="javascript:void();">
                <div class="card-body d-flex justify-content-between align-items-center flex-column">
                    <div class="m-0">
                        <!-- Icon Placeholder -->
                    </div>
                    <div class="d-flex flex-column my-7 text-center">
                        <img src="/media/erp_img/project.png" width="50px" height="50px" class="mb-3">
                    </div>
                    <span class="badge badge-light-success fs-base">Project</span>
                </div>
            </a>
        </div>
    </div>

    <!-- Supplier Section -->
    <div class="row gy-5 g-xl-10 mb-10">
        <h2 class="text-dark mb-5">Staff & Vendors</h2>
        <!-- Supplier Card -->
        <div class="col-sm-6 col-xl-2 mb-xl-10">
            <a class="card h-lg-100 hover-elevate-up" href="javascript:void();">
                <div class="card-body d-flex justify-content-between align-items-center flex-column">
                    <div class="d-flex flex-column my-7 text-center">
                        <img src="/media/erp_img/supplier.png" width="50px" height="50px" class="mb-3">
                    </div>
                    <span class="badge badge-light-success fs-base">Supplier</span>
                </div>
            </a>
        </div>
    </div>

    <!-- Materials Section -->
    <div class="row gy-5 g-xl-10 mb-10">
        <h2 class="text-dark mb-5">Materials</h2>
        <!-- Units Card -->
        <div class="col-sm-6 col-xl-2 mb-xl-10">
            <a class="card h-lg-100 hover-elevate-up" href="javascript:void();">
                <div class="card-body d-flex justify-content-between align-items-center flex-column">
                    <div class="m-0">
                        <!-- Icon Placeholder -->
                    </div>
                    <div class="d-flex flex-column my-7 text-center">
                        <img src="/media/erp_img/kg.png" width="50px" height="50px" class="mb-3">
                    </div>
                    <span class="badge badge-light-success fs-base">Units</span>
                </div>
            </a>
        </div>
        <!-- Material Head Card -->
        <div class="col-sm-6 col-xl-2 mb-xl-10">
            <a class="card h-lg-100 hover-elevate-up" href="javascript:void();">
                <div class="card-body d-flex justify-content-between align-items-center flex-column">
                    <div class="m-0">
                        <!-- Icon Placeholder -->
                    </div>
                    <div class="d-flex flex-column my-7 text-center">
                        <img src="/media/erp_img/mhead.png" width="50px" height="50px" class="mb-3">
                    </div>
                    <span class="badge badge-light-success fs-base">Material Head</span>
                </div>
            </a>
        </div>
    </div>

    <!-- Main Category Section -->
    <div class="row gy-5 g-xl-10 mb-10">
        <h2 class="text-dark mb-5">Main Category</h2>
        <!-- Units Card -->
        <div class="col-sm-6 col-xl-2 mb-xl-10">
            <a class="card h-lg-100 hover-elevate-up" href="javascript:void();">
                <div class="card-body d-flex justify-content-between align-items-center flex-column">
                    <div class="m-0">
                        <!-- Icon Placeholder -->
                    </div>
                    <div class="d-flex flex-column my-7 text-center">
                        <!-- <img src="/media/erp_img/category1.png" width="50px" height="50px" class="mb-3"> -->
                        <span class="fa fa-weight-hanging mb-3" style="width: 50px; height: 50px;"></span>
                    </div>
                    <span class="badge badge-light-success fs-base">Units</span>
                </div>
            </a>
        </div>
        <!-- Material Head Card -->
        <div class="col-sm-6 col-xl-2 mb-xl-10">
            <a class="card h-lg-100 hover-elevate-up" href="javascript:void();">
                <div class="card-body d-flex justify-content-between align-items-center flex-column">
                    <div class="m-0">
                        <!-- Icon Placeholder -->
                    </div>
                    <div class="d-flex flex-column my-7 text-center">
                        <img src="/media/erp_img/mhead.png" width="50px" height="50px" class="mb-3">
                    </div>
                    <span class="badge badge-light-success fs-base">Material Head</span>
                </div>
            </a>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script src="{{asset('js/admin/dashboard/dashboard.js')}}"></script>
@endsection