@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/wave.css') }}"/>
@endsection

@section('content')

<div class="main main-app p-3 p-lg-3">
    <div class="d-md-flex align-items-center justify-content-between mb-4">
      <div>
        <ol class="breadcrumb fs-sm mb-1 mt-2">
          <li class="breadcrumb-item" aria-current="page">
            <span class="badge bg-primary"><i class="ri-building-2-fill"></i> {{(session()->get('Global_PrfSiteName'))}}</span>
          </li>
          <li class="breadcrumb-item" aria-current="page">At a glance</li>
        </ol>
        <h4 class="main-title mb-0">Welcome to {{config('app.name')}}</h4>
      </div>
      <div class="d-flex gap-2 mt-3 mt-md-0">
        <div class="d-flex gap-2 mt-3 mt-md-0">
            <button onClick="window.location.reload();" class="btn btn-white d-flex align-items-center gap-2"><i class="ri-refresh-fill fs-18 lh-1"></i>Refresh</button>
            <a href="#modal_cmsoon" data-bs-toggle="modal" class="btn btn-white d-flex align-items-center gap-2"><i class="ri-printer-line fs-18 lh-1"></i>Print</a>
            <a href="#modal_cmsoon" data-bs-toggle="modal" class="btn btn-primary d-flex align-items-center gap-2"><i class="ri-bar-chart-2-line fs-18 lh-1"></i>Generate<span class="d-none d-sm-inline"> Report</span></a>
          </div>
      </div>
    </div>

    <div class="row g-2">

      @if (!Auth::user()->prf_sites_id)
        <div class="alert alert-solid alert-warning d-flex align-items-center text-black" role="alert">
        <i class="ri-information-line"></i>
          Please Setup
          <a href="#modal_sys_prf" data-bs-toggle="modal"><abbr title="Configure System Preference"><strong>&nbsp;System Preference&nbsp;</strong></abbr></a>
          Before Continue.
        </div>
      @endif

      <div class="col-12">
      <div id="carouselExampleControls" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
        <div class="carousel-inner">


          <div class="carousel-item active">
            <div class="video-headline">
              <img src="{{asset('assets/img/slide/slide_uxpixel_01.jpg')}}" alt="Ultimate Pixel">
              <div class="video-headline-body p-4">
                <div>
                  <h1 class="video-title mb-2">Ultimate Pixel</h1>
                  <div class="d-flex align-items-center opacity-75 gap-2 gap-sm-3 mb-3 fs-sm">
                    <span>Monitor</span>
                    <span>Control</span>
                    <span>Notify</span>
                  </div>
                  <p class="opacity-75 mb-3">Ultimate Pixel can receive any analog or digital sensors then process the data and appear in logic number on touch screen lcd or sending the data to web base for end user monitoring purpose and control. </p>
                  <div class="row gx-4 row-cols-auto mb-4">
                    <div class="col">
                    <h3>Sensors</h3>
                    <label>Multiple Attachable Sensor</label>
                    </div><!-- col -->
                    <div class="col">
                    <h3>Automation</h3>
                    <label>Ai Controll</label>
                    </div><!-- col -->
                    <div class="col">
                    <h3>Connectivity</h3>
                    <label>Lora, Wifi, Modbus</label>
                    </div><!-- col -->
                  </div><!-- row -->
                </div>
              </div><!-- video-headline-body -->
            </div><!-- video-headline -->
          </div><!-- carousel-item -->


          <div class="carousel-item">
            <div class="video-headline">
              <img src="{{asset('assets/img/slide/slide_uxpixel_02.jpg')}}" alt="Ultimate Pixel">
              <div class="video-headline-body p-4">
                <div>
                  <h1 class="video-title mb-2">Ultimate Pixel</h1>
                  <div class="d-flex align-items-center opacity-75 gap-2 gap-sm-3 mb-3 fs-sm">
                    <span>Monitor</span>
                    <span>Control</span>
                    <span>Notify</span>
                  </div>
                  <p class="opacity-75 mb-3">Ultimate Pixel can receive any analog or digital sensors then process the data and appear in logic number on touch screen lcd or sending the data to web base for end user monitoring purpose and control. </p>
                  <div class="row gx-4 row-cols-auto mb-4">
                    <div class="col">
                    <h3>Sensors</h3>
                    <label>Multiple Attachable Sensor</label>
                    </div><!-- col -->
                    <div class="col">
                    <h3>Automation</h3>
                    <label>Ai Controll</label>
                    </div><!-- col -->
                    <div class="col">
                    <h3>Connectivity</h3>
                    <label>Lora, Wifi, Modbus</label>
                    </div><!-- col -->
                  </div><!-- row -->
                </div>
              </div><!-- video-headline-body -->
            </div><!-- video-headline -->
          </div><!-- carousel-item -->
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div><!-- carousel -->
      </div>


      <div class="col-xl-12">
        <div id="ww_8f5b266ee3594" v='1.3' loc='id' a='{"t":"responsive","lang":"en","sl_lpl":1,"ids":["wl8183"],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"rgba(88,145,172,0.69)","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#FFFFFF","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722","cl_odd":"#0000000a"}'>Weather for the Following Location: <a href="https://2ua.org/mys/selangor/map/" id="ww_8f5b266ee3594_u" target="_blank">Selangor map, Malaysia</a></div><script async src="https://app1.weatherwidget.org/js/?id=ww_8f5b266ee3594"></script>
      </div>

      <div class="col-xl-12">
        <div class="row g-3">

        <div class="col-sm-12 col-md-4 col-xl-3 col-xxl-2">
          <div class="card card-one">
            <div class="card-body overflow-hidden">
              <h2 class="text-dark fw-semibold mb-1 text-center">SUMP PIT 01</h2>
              <div class="d-flex justify-content-center">
                <div class="circle-container">
                  <div class="circle"></div>
                  <div class="wave _50"></div>
                  <div class="wave _50"></div>
                  <div class="wave _50"></div>
                  <div class="wave-below _50"></div>
                  <div class="desc _50">
                    <h2>Water Level</h2>
                    <p><b>45<span>%</span></b></p>
                  </div>
                </div>
              </div>
              <h6 class="card-value mb-1 justify-content-center">BLOCK A</h6>
              <p class="fs-xs text-secondary mb-0 lh-4 text-center">Water Level 4.25 Meter</p>
            </div>
          </div><!-- card -->
        </div><!-- col -->

        <div class="col-sm-12 col-md-4 col-xl-3 col-xxl-2">
          <div class="card card-one">
            <div class="card-body overflow-hidden">
              <h2 class="text-dark fw-semibold mb-1 text-center">SUMP PIT 02</h2>
              <div class="d-flex justify-content-center">
                <div class="circle-container">
                  <div class="circle"></div>
                  <div class="wave _0"></div>
                  <div class="wave _0"></div>
                  <div class="wave _0"></div>
                  <div class="wave-below _0"></div>
                  <div class="desc _0">
                    <h2>Water Level</h2>
                    <p><b>4<span>%</span></b></p>
                  </div>
                </div>
              </div>
              <h6 class="card-value mb-1 justify-content-center">BLOCK B</h6>
              <p class="fs-xs text-secondary mb-0 lh-4 text-center">Water Level 1.25 Meter</p>
            </div>
          </div><!-- card -->
        </div><!-- col -->

        <div class="col-sm-12 col-md-4 col-xl-3 col-xxl-2">
          <div class="card card-one">
            <div class="card-body overflow-hidden">
              <h2 class="text-dark fw-semibold mb-1 text-center">SUMP PIT 03</h2>
              <div class="d-flex justify-content-center">
                <div class="circle-container">
                  <div class="circle"></div>
                  <div class="wave _50"></div>
                  <div class="wave _50"></div>
                  <div class="wave _50"></div>
                  <div class="wave-below _50"></div>
                  <div class="desc _50">
                    <h2>Water Level</h2>
                    <p><b>45<span>%</span></b></p>
                  </div>
                </div>
              </div>
              <h6 class="card-value mb-1 justify-content-center">BLOCK C</h6>
              <p class="fs-xs text-secondary mb-0 lh-4 text-center">Water Level</p>
            </div>
          </div><!-- card -->
        </div><!-- col -->

        <div class="col-sm-12 col-md-4 col-xl-3 col-xxl-2">
          <div class="card card-one">
            <div class="card-body overflow-hidden">
              <h2 class="text-dark fw-semibold mb-1 text-center">SUMP PIT 04</h2>
              <div class="d-flex justify-content-center">
                <div class="circle-container">
                  <div class="circle"></div>
                  <div class="wave _25"></div>
                  <div class="wave _25"></div>
                  <div class="wave _25"></div>
                  <div class="wave-below _25"></div>
                  <div class="desc _25">
                    <h2>Water Level</h2>
                    <p><b>25<span>%</span></b></p>
                  </div>
                </div>
              </div>
              <h6 class="card-value mb-1 justify-content-center">BLOCK D</h6>
              <p class="fs-xs text-secondary mb-0 lh-4 text-center">Water Level</p>
            </div>
          </div><!-- card -->
        </div><!-- col -->

        <div class="col-sm-12 col-md-4 col-xl-3 col-xxl-2">
          <div class="card card-one">
            <div class="card-body overflow-hidden">
              <h2 class="text-dark fw-semibold mb-1 text-center">SUMP PIT 05</h2>
              <div class="d-flex justify-content-center">
                <div class="circle-container">
                  <div class="circle"></div>
                  <div class="wave _100"></div>
                  <div class="wave _100"></div>
                  <div class="wave _100"></div>
                  <div class="wave-below _100"></div>
                  <div class="desc _100">
                    <h2>Water Level</h2>
                    <p><b>98<span>%</span></b></p>
                  </div>
                </div>
              </div>
              <h6 class="card-value mb-1 justify-content-center">BLOCK E</h6>
              <p class="fs-xs text-secondary mb-0 lh-4 text-center">Water Level</p>
            </div>
          </div><!-- card -->
        </div><!-- col -->

        <div class="col-sm-12 col-md-4 col-xl-3 col-xxl-2">
          <div class="card card-one">
            <div class="card-body overflow-hidden">
              <h2 class="text-dark fw-semibold mb-1 text-center">SUMP PIT 06</h2>
              <div class="d-flex justify-content-center">
                <div class="circle-container">
                  <div class="circle"></div>
                  <div class="wave _75"></div>
                  <div class="wave _75"></div>
                  <div class="wave _75"></div>
                  <div class="wave-below _75"></div>
                  <div class="desc _75">
                    <h2>Water Level</h2>
                    <p><b>75<span>%</span></b></p>
                  </div>
                </div>
              </div>
              <h6 class="card-value mb-1 justify-content-center">BLOCK F</h6>
              <p class="fs-xs text-secondary mb-0 lh-4 text-center">Water Level</p>
            </div>
          </div><!-- card -->
        </div><!-- col -->

        </div>
      </div>









      <div class="col-xl-9">
        <div class="card card-one">
          <div class="card-body overflow-hidden pb-4">
            <div class="finance-info p-3 p-xl-4">
              <label class="fs-sm fw-medium mb-2 mb-xl-1">Profit This Year</label>
              <h1 class="finance-value"><span>$</span>867,036.50 <span>USD</span></h1>

              <h4 class="finance-subvalue mb-3 mb-md-2">
                <i class="ri-arrow-up-line text-primary"></i>
                <span class="text-primary">38.63%</span>
                <small>vs last year</small>
              </h4>

              <p class="w-50 fs-sm mb-2 mb-xl-4 d-none d-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...</p>

              <div class="row row-cols-auto g-3 g-xl-4 pt-2">
                <div class="col">
                  <h6 class="card-value fs-15 mb-1">$30,342.15 USD</h6>
                  <span class="fs-sm fw-medium text-secondary d-block mb-1">First Quarter</span>
                  <span class="text-success fs-xs d-flex align-items-center ff-numerals">2.3% <i class="ri-arrow-up-line fs-15 lh-3"></i></span>
                </div><!-- col -->
                <div class="col">
                  <h6 class="card-value fs-15 mb-1">$48,036.90 USD</h6>
                  <span class="fs-sm fw-medium text-secondary d-block mb-1">Second Quarter</span>
                  <span class="text-success fs-xs d-flex align-items-center ff-numerals">6.8% <i class="ri-arrow-up-line fs-15 lh-3"></i></span>
                </div><!-- col -->
                <div class="col">
                  <h6 class="card-value fs-15 mb-1">$68,156.00 USD</h6>
                  <span class="fs-sm fw-medium text-secondary d-block mb-1">Third Quarter</span>
                  <span class="text-success fs-xs d-flex align-items-center ff-numerals">10.5% <i class="ri-arrow-up-line fs-15 lh-3"></i></span>
                </div><!-- col -->
                <div class="col">
                  <h6 class="card-value fs-15 mb-1">$64,896.65 USD</h6>
                  <span class="fs-sm fw-medium text-secondary d-block mb-1">Fourth Quarter</span>
                  <span class="text-danger fs-xs d-flex align-items-center ff-numerals">0.8% <i class="ri-arrow-down-line fs-15 lh-3"></i></span>
                </div><!-- col -->
              </div><!-- row -->

            </div>

            <nav class="nav nav-finance-one p-3 p-xl-4">
              <a href="" class="active">2023</a>
              <a href="">2022</a>
              <a href="">2021</a>
            </nav>

            <div id="flotChart" class="flot-chart-six"></div>
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-xl-3">
        <div class="row g-3">

          <div class="col-sm-6 col-xl-12">
            <div class="card card-one">
              <div class="card-body overflow-hidden">
                <h2 class="card-value mb-1">75<span>%</span></h2>
                <h6 class="text-dark fw-semibold mb-1">Gross Profit Margin</h6>
                <p class="fs-xs text-secondary mb-0 lh-4">The gross profit you make on each dollar of sales.</p>
                <div id="flotChart1" class="flot-chart-five"></div>
              </div>
            </div><!-- card -->
          </div><!-- col -->


          <div class="col-sm-6 col-xl-12">
            <div class="card card-one">
              <div class="card-body">
                <h2 class="card-value mb-1">68<span>%</span></h2>
                <h6 class="text-dark fw-semibold mb-1">Net Profit Margin</h6>
                <p class="fs-xs text-secondary mb-0 lh-4">Measures your business at generating profit sales.</p>
                <div id="flotChart2" class="flot-chart-five"></div>
              </div>
            </div><!-- card -->
          </div><!-- col -->


        </div><!-- row -->
      </div><!-- col -->
      <div class="col-sm-6 col-xl">
        <div class="card card-one">

          <div class="card-body">
            <div id="flotChart3" class="flot-chart-seven mb-1"></div>
            <h3 class="card-value">0.9:8</h3>
            <div class="progress ht-5 mb-2">
              <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <label class="fw-semibold text-dark mb-1">Quick Ratio Goal: 1.0 or higher</label>
            <p class="fs-xs text-secondary mb-0">Measures your Accounts Receivable / Current Liabilities</p>
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-sm-6 col-xl">
        <div class="card card-one">
          <div class="card-body">
            <div id="flotChart4" class="flot-chart-seven mb-1"></div>
            <h3 class="card-value">2.8:0</h3>
            <div class="progress ht-5 mb-2">
              <div class="progress-bar bg-ui-02 w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <label class="fw-semibold text-dark mb-1">Quick Ratio Goal: 2.0 or higher</label>
            <p class="fs-xs text-secondary mb-0">Measures your Current Assets / Current Liabilities</p>
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-md-7 col-xl-5">
        <div class="card card-one card-wallet">
          <div class="card-body">
            <div class="finance-icon">
              <i class="ri-mastercard-fill"></i>
              <i class="ri-visa-line"></i>
            </div>
            <label class="card-title mb-1">Available Balance</label>
            <h2 class="card-value mb-auto"><span>$</span>130,058.50</h2>

            <label class="card-title mb-1">Account Number</label>
            <div class="d-flex align-items-center gap-4 mb-3">
              <div class="d-flex gap-1">
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
              </div>
              <div class="d-flex gap-1">
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
              </div>
              <div class="d-flex gap-1">
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
                <span class="badge-dot"></span>
              </div>
              <h5 class="ff-numerals mb-0">5314</h5>
            </div>

            <label class="card-title mb-1">Account Name</label>
            <h5 class="mb-0">Richard M. Christensen</h5>
          </div><!-- card-body -->
          <div id="flotChart5" class="flot-chart"></div>
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-md-5 col-xl-6">
        <div class="card card-one">
          <div class="card-header">
            <h6 class="card-title">Income &amp; Expenses</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
              <a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
            </nav>
          </div><!-- card-header -->
          <div class="card-body pb-4">
            <div id="flotChart6" class="flot-chart-eight"></div>
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-xl-6">
        <div class="card card-one">
          <div class="card-header border-0 pb-2">
            <h6 class="card-title">Profit Margin (%)</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
              <a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
            </nav>
          </div><!-- card-header -->
          <div class="card-body pt-0">
            <p class="fs-sm text-secondary mb-4">Profit margin is a measure of profitability. It is calculated by finding the profit as a percentage of the revenue.</p>

            <div class="progress progress-finance mb-4">
              <div class="progress-bar w-30" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">29.7%</div>
              <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">52.8%</div>
              <div class="progress-bar w-20" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">18.3%</div>
            </div>

            <div class="row g-3">
              <div class="col">
                <label class="card-label fs-sm fw-medium mb-1">Gross Profit</label>
                <h2 class="card-value mb-0">29.7%</h2>
              </div><!-- col -->
              <div class="col-5 col-sm">
                <label class="card-label fs-sm fw-medium mb-1">Operating Profit</label>
                <h2 class="card-value mb-0">52.8%</h2>
              </div><!-- col -->
              <div class="col">
                <label class="card-label fs-sm fw-medium mb-1">Net Profit</label>
                <h2 class="card-value mb-0">18.3%</h2>
              </div><!-- col -->
            </div><!-- row -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-xl-8">
        <div class="card card-one">
          <div class="card-header">
            <h6 class="card-title">Expense Analytics</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
              <a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
            </nav>
          </div><!-- card-header -->
          <div class="card-body p-4">
            <div class="row g-4">
              <div class="col-md-6">
                <div id="flotChart7" class="flot-chart-nine"></div>
              </div><!-- col -->
              <div class="col-md-6">
                <div class="d-flex">
                  <i class="ri-hotel-line fs-48 lh-1 me-3"></i>
                  <div>
                    <h6 class="fw-semibold text-dark mb-1">Fixed Expenses</h6>
                    <p class="fs-sm text-secondary mb-0">Fixed expenses are generally fixed in both amount and interval.</p>
                  </div>
                </div>
                <div class="d-flex mt-3">
                  <i class="ri-wallet-3-line fs-48 lh-1 me-3"></i>
                  <div>
                    <h6 class="fw-semibold text-dark mb-1">Periodic Expenses</h6>
                    <p class="fs-sm text-secondary mb-0">Periodic expenses are usually less frequent and the amount can vary.</p>
                  </div>
                </div>
                <div class="d-flex mt-3">
                  <i class="ri-shopping-bag-3-line fs-48 lh-1 me-3"></i>
                  <div>
                    <h6 class="fw-semibold text-dark mb-1">Variable Expenses</h6>
                    <p class="fs-sm text-secondary mb-0">Change as the quantity of good or service that produces changes.</p>
                  </div>
                </div>
              </div><!-- col -->
            </div><!-- row -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-xl-4">
        <div class="card card-one">
          <div class="card-header">
            <h6 class="card-title">Billed Opportunities</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
              <a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
            </nav>
          </div><!-- card-header -->
          <div class="card-body position-relative d-flex justify-content-center">
            <div class="finance-peity-donut">
              <span class="peity-donut" data-peity='{ "fill": ["#506fd9","#85b6ff","#51596d","#eff1f5"], "height": "100%", "width": "100%", "innerRadius": 75 }'>35,20,20,15</span>
            </div><!-- finance-peity-donut -->
            <div class="finance-donut-value">
              <h1>1.8B</h1>
              <p>86.24%</p>
            </div>
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col">
        <div class="card card-one">
          <div class="card-body p-3 p-xl-4">
            <div class="row justify-content-center g-3 mb-2 mb-xl-4">
              <div class="col-6 col-sm-4 col-md">
                <div class="finance-item">
                  <div class="finance-item-circle">
                    <h1>4.7B</h1>
                    <label>Total Income</label>
                  </div><!-- finance-item-circle -->
                </div><!-- finance-item -->
              </div><!-- col -->
              <div class="col-6 col-sm-4 col-md">
                <div class="finance-item">
                  <div class="finance-item-circle">
                    <h1>60M</h1>
                    <label>Total Expenses</label>
                  </div><!-- finance-item-circle -->
                </div><!-- finance-item -->
              </div><!-- col -->
              <div class="col-6 col-sm-4 col-md">
                <div class="finance-item">
                  <div class="finance-item-circle bg-gray-400">
                    <h1>2.1B</h1>
                    <label>Net Profit</label>
                  </div><!-- finance-item-circle -->
                </div><!-- finance-item -->
              </div><!-- col -->
              <div class="col-6 col-sm-4 col-md">
                <div class="finance-item">
                  <div class="finance-item-circle">
                    <h1>18.2%</h1>
                    <label>Quick Ratio</label>
                  </div><!-- finance-item-circle -->
                </div><!-- finance-item -->
              </div><!-- col -->
              <div class="col-6 col-sm-4 col-md">
                <div class="finance-item">
                  <div class="finance-item-circle">
                    <h1>6.8%</h1>
                    <label>Current Ratio</label>
                  </div><!-- finance-item-circle -->
                </div><!-- finance-item -->
              </div><!-- col -->
            </div><!-- row -->

            <div class="row g-4 g-lg-5 pt-3">
              <div class="col-sm-6 col-xl-3">
                <div class="d-flex">
                  <i class="ri-wallet-2-line fs-32 lh-1 me-3"></i>
                  <div>
                    <h6 class="fw-semibold text-dark mb-2">Accounts Receivable</h6>
                    <p class="fs-sm text-secondary mb-0">The proceeds or payment which the company will receive from its customers.</p>
                  </div>
                </div>
              </div><!-- col -->
              <div class="col-sm-6 col-xl-3">
                <div class="d-flex">
                  <i class="ri-refund-2-line fs-32 lh-1 me-3"></i>
                  <div>
                    <h6 class="fw-semibold text-dark mb-2">Accounts Payable</h6>
                    <p class="fs-sm text-secondary mb-0">Money owed by a business to its suppliers shown as a liability.</p>
                  </div>
                </div>
              </div><!-- col -->
              <div class="col-sm-6 col-xl-3">
                <div class="d-flex">
                  <i class="ri-exchange-line fs-32 lh-1 me-3"></i>
                  <div>
                    <h6 class="fw-semibold text-dark mb-2">Quick Ratio</h6>
                    <p class="fs-sm text-secondary mb-0">Measures the ability of a company to use its near cash or quick assets.</p>
                  </div>
                </div>
              </div><!-- col -->
              <div class="col-sm-6 col-xl-3">
                <div class="d-flex">
                  <i class="ri-exchange-dollar-line fs-32 lh-1 me-3"></i>
                  <div>
                    <h6 class="fw-semibold text-dark mb-2">Current Ratio</h6>
                    <p class="fs-sm text-secondary mb-0">Measures whether a firm has enough resources to meet its short-term obligations.</p>
                  </div>
                </div>
              </div><!-- col -->
            </div><!-- row -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
    </div><!-- row -->

    @include('layouts.inc.footer')

</div><!-- main -->

  @endsection




@section('js')
    <script src="{{ asset('assets/lib/jquery.flot/jquery.flot.js') }}"></script>
    <script src="{{ asset('assets/lib/jquery.flot/jquery.flot.stack.js') }}"></script>
    <script src="{{ asset('assets/lib/jquery.flot/jquery.flot.resize.js') }}"></script>
    <script src="{{ asset('assets/lib/jquery.flot/jquery.flot.threshold.js') }}"></script>
    <script src="{{ asset('assets/js/db.data.js') }}"></script>
    <script src="{{ asset('assets/js/db.finance.js') }}"></script>
@endsection