@extends('layouts.panel')

@section('content')
<div class="row g-4">
    <div class="col-lg-4">
        <div class="row g-4">
            <div class="col-md-3 col-lg-6 col-6">
                <div class="card h-100">
                    <div class="card-body">
                        <p class="text-secondary mb-0">Orders</p>
                        <h3 class="fw-black">2,56k</h3>
                        <div id="orders"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-lg-6 col-6">
                <div class="card h-100">
                    <div class="card-body">
                        <p class="text-secondary mb-0">Profit</p>
                        <h3 class="fw-black">6,25k</h3>
                        <div id="profit"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-6 col-12">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <h3 class="fw-black mb-2">Earnings</h3>
                                <p class="small text-secondary mb-1">This Month</p>
                                <h4 class="mb-3">$4,055.56</h4>
                                <p class="card-text text-secondary small">
                                    <span class="font-weight-bolder">68.2%</span><span> more earnings than last month.</span>
                                </p>
                            </div>
                            <div class="col-6">
                                <div id="earnings"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-md-8">
                        <div class="d-sm-flex justify-content-between align-items-center">
                            <h6 class="mb-sm-0">Revenue Report</h6>
                            <div class="d-flex align-items-center">
                                <div class="d-flex align-items-center">
                                    <svg class="text-primary me-1" viewbox="0 0 20 20" fill="currentColor" stroke-linecap="round">
                                        <circle cx="10" cy="10" r="7" />
                                    </svg>
                                    Earning
                                </div>
                                <div class="d-flex align-items-center ms-3">
                                    <svg class="text-warning me-1" viewbox="0 0 20 20" fill="currentColor" stroke-linecap="round">
                                        <circle cx="10" cy="10" r="7" />
                                    </svg>
                                    Expense
                                </div>
                            </div>
                        </div>
                        <div id="revenue"></div>
                    </div>
                    <div class="col-12 col-md-4 vstack justify-content-between align-items-center px-4 text-center">
                        <div class="btn-group mb-3">
                            <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                2021
                            </button>
                            <ul class="dropdown-menu">
                                <li><button class="dropdown-item" type="button">2021</button></li>
                                <li><button class="dropdown-item" type="button">2020</button></li>
                                <li><button class="dropdown-item" type="button">2019</button></li>
                            </ul>
                        </div>
                        <div class="text-secondary">
                            <h4>$25,852</h4>
                            <p>
                                <span class="fw-bolder text-dark me-25">Budget:</span>
                                <span>56,800</span>
                            </p>
                        </div>
                        <div id="budget"></div>
                        <button class="btn btn-primary" type="button">Increase Budget</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100">
            <div class="card-header border-bottom-0 d-flex justify-content-between">
                <div>
                    <h6 class="mb-0">Browser States</h6>
                    <small class="text-secondary">Counter April 2021</small>
                </div>
                <div class="dropdown">
                    <button class="btn text-secondary dropdown-toggle no-caret p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                        </svg>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><button class="dropdown-item" type="button">Last 28 days</button></li>
                        <li><button class="dropdown-item" type="button">Last month</button></li>
                        <li><button class="dropdown-item" type="button">Last year</button></li>
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <img src="{{ asset('images/browser/chrome.svg') }}" alt width="30" height="30" loading="lazy">
                    <span class="ms-2">Google Chrome</span>
                    <span class="ms-auto me-2">54.4%</span>
                    <div id="browser-stat-1"></div>
                </div>
                <div class="d-flex align-items-center mt-2">
                    <img src="{{ asset('images/browser/firefox.svg') }}" alt width="30" height="30" loading="lazy">
                    <span class="ms-2">Mozilla Firefox</span>
                    <span class="ms-auto me-2">6.1%</span>
                    <div id="browser-stat-2"></div>
                </div>
                <div class="d-flex align-items-center mt-2">
                    <img src="{{ asset('images/browser/safari.svg') }}" alt width="30" height="30" loading="lazy">
                    <span class="ms-2">Apple Safari</span>
                    <span class="ms-auto me-2">14.6%</span>
                    <div id="browser-stat-3"></div>
                </div>
                <div class="d-flex align-items-center mt-2">
                    <img src="{{ asset('images/browser/ie.svg') }}" alt width="30" height="30" loading="lazy">
                    <span class="ms-2">Internet Explorer</span>
                    <span class="ms-auto me-2">4.2%</span>
                    <div id="browser-stat-4"></div>
                </div>
                <div class="d-flex align-items-center mt-2">
                    <img src="{{ asset('images/browser/opera.svg') }}" alt width="30" height="30" loading="lazy">
                    <span class="ms-2">Opera Mini</span>
                    <span class="ms-auto me-2">8.4%</span>
                    <div id="browser-stat-5"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100">
            <div class="card-header border-bottom-0 d-flex justify-content-between">
                <h6 class="mb-0">Goal Overview</h6>
                <button class="btn text-secondary p-0" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
            <div class="card-body">
                <div id="goal"></div>
            </div>
            <div class="card-footer p-0">
                <div class="row mx-0 text-center">
                    <div class="col-6 border-end py-1">
                        <small class="text-secondary">Completed</small>
                        <h6>786,617</h6>
                    </div>
                    <div class="col-6 py-1">
                        <small class="text-secondary">In Progress</small>
                        <h6>13,561</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100">
            <div class="card-header border-bottom-0 d-flex justify-content-between">
                <h6 class="mb-0">Transactions</h6>
                <div class="dropdown">
                    <button class="btn text-secondary dropdown-toggle no-caret p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                        </svg>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><button class="dropdown-item" type="button">Last 28 days</button></li>
                        <li><button class="dropdown-item" type="button">Last month</button></li>
                        <li><button class="dropdown-item" type="button">Last year</button></li>
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <svg class="align-self-start text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    <div class="mx-2">
                        <h6 class="mb-0">Wallet</h6>
                        <small class="text-secondary">Starbucks</small>
                    </div>
                    <span class="ms-auto text-danger">- $74</span>
                </div>
                <div class="d-flex align-items-center mt-3">
                    <svg class="align-self-start text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <div class="mx-2">
                        <h6 class="mb-0">Bank transfer</h6>
                        <small class="text-secondary">Add money</small>
                    </div>
                    <span class="ms-auto text-success">+ $480</span>
                </div>
                <div class="d-flex align-items-center mt-3">
                    <svg class="align-self-start text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div class="mx-2">
                        <h6 class="mb-0">Paypal</h6>
                        <small class="text-secondary">Add money</small>
                    </div>
                    <span class="ms-auto text-success">+ $590</span>
                </div>
                <div class="d-flex align-items-center mt-3">
                    <svg class="align-self-start text-danger" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                    </svg>
                    <div class="mx-2">
                        <h6 class="mb-0">Master card</h6>
                        <small class="text-secondary">Ordered food</small>
                    </div>
                    <span class="ms-auto text-danger">- $23</span>
                </div>
                <div class="d-flex align-items-center mt-3">
                    <svg class="align-self-start text-info" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                    </svg>
                    <div class="mx-2">
                        <h6 class="mb-0">Transfer</h6>
                        <small class="text-secondary">Refund</small>
                    </div>
                    <span class="ms-auto text-success">+ $98</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="{{ asset('vendor/js/apexcharts.min.js') }}"></script>
<script src="{{ asset('js/page/dashboard.js') }}"></script>
@endpush