@extends('layouts.master', ['title' => 'Dashboard'])

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb">
        <h1>EzyPOS Dashboard</h1>
        <ul>
            <li><a href="#no-link">Login</a></li>
            <li class="divider la la-arrow-right"></li>
            <li>Dashboard</li>
        </ul>
    </section>

    <div class="grid lg:grid-cols-2 gap-5">

        <!-- Summaries -->
        <div class="grid sm:grid-cols-3 gap-5">
            <div
                class="card px-4 py-8 flex justify-center items-center text-center lg:transform hover:scale-110 hover:shadow-lg transition-transform duration-200">
                <div>
                    <span class="text-primary text-5xl leading-none la la-file-contract "></span>
                    <p class="mt-2">Remaining Trial Period</p>
                    <div class="text-primary mt-5 text-3xl leading-none">{{$remainDays}}</div>
                </div>
            </div>
        </div>

    </div>

@endsection

@section('scripts')

    <script src="{{ asset('build/js/chart.min.js') }}"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script> -->

@endsection