@extends('master')
@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .page-wrapper .content .row a .hover-shadow:hover {
            transform: translateY(-3px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }

        .page-wrapper .content .row a .transition {
            transition: all 0.3s ease;
        }

        .row a {
            color: #0C143B;
            text-decoration: none !important;
        }

        .row a:hover {
            color: #0D153A !important;
            text-decoration: underline !important;
        }

        .page-wrapper .content .row a .card .dash-widgetcontent h5 {
            font-weight: 600 !important;
        }

        .page-wrapper .content .row a .card {
            margin-bottom: 0 !important;
            padding: 15px !important;
        }

        .page-wrapper .content .row a .card .gp-notification {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        i.bi {
            width: auto;
            height: auto;
            line-height: 0;
            display: inline-block;
            vertical-align: middle;
        }
    </style>

    @php
        $cards = [
            [
                'route' => 'saleorder',
                'label' => __('sitelabel.CustomerInvoice'),
                'icon' => 'bi-receipt',
                'text_color' => 'text-blue-600',
                'bg_color' => 'bg-blue-600',
            ],
            [
                'route' => 'cashpayment',
                'label' => __('sitelabel.CashPaymentVoucher'),
                'icon' => 'bi-cash-stack',
                'text_color' => 'text-green-600',
                'bg_color' => 'bg-green-600',
            ],
            [
                'route' => 'cashreceipt',
                'label' => __('sitelabel.CashReceiptVoucher'),
                'icon' => 'bi-wallet2',
                'text_color' => 'text-indigo-600',
                'bg_color' => 'bg-indigo-600',
            ],
            [
                'route' => 'bankpayment',
                'label' => __('sitelabel.BankPaymentVoucher'),
                'icon' => 'bi-bank', 
                'text_color' => 'text-yellow-600',
                'bg_color' => 'bg-yellow-600',
            ],
            [
                'route' => 'bankreceipt',
                'label' => __('sitelabel.BankReceiptVoucher'),
                'icon' => 'bi-safe', 
                'text_color' => 'text-orange-600',
                'bg_color' => 'bg-orange-600',
            ],
            [
                'route' => '#',
                'label' => __('sitelabel.EditAttendance'),
                'icon' => 'bi-calendar-check', 
                'text_color' => 'text-teal-600',
                'bg_color' => 'bg-teal-600',
            ],
            [
                'route' => 'employeeshift',
                'label' => __('sitelabel.EmployeeShift'),
                'icon' => 'bi-people',
                'text_color' => 'text-purple-600',
                'bg_color' => 'bg-purple-600',
            ],
            [
                'route' => '#',
                'label' => __('sitelabel.Salary'),
                'icon' => 'bi-currency-dollar', 
                'text_color' => 'text-emerald-600',
                'bg_color' => 'bg-emerald-600',
            ],
            [
                'route' => '#',
                'label' => __('sitelabel.ProductEmployeeShift'),
                'icon' => 'bi-bar-chart-line',
                'text_color' => 'text-cyan-600',
                'bg_color' => 'bg-cyan-600',
            ],
        ];
    @endphp

    <div class="page-wrapper">
        <div class="content">
            <div class="row g-2 mb-3">
                @foreach ($cards as $card)
                    <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                        <a href="{{ url($card['route']) }}" class="text-decoration-none">
                            <div class="card hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
                                <div class="card-body d-flex align-items-center p-2">
                                    <div class="rounded-full {{ $card['bg_color'] }} bg-opacity-10 p-3 me-3"
                                        style="height: 56px;width: 56px;">
                                        <i class="bi {{ $card['icon'] }} {{ $card['text_color'] }} fs-4"></i>
                                    </div>
                                    <div class="dash-widgetcontent">
                                        <h5 class="mb-0 font-semibold">{{ $card['label'] }}</h5>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@section('script')
@endsection