@extends('component.app')
@section('title', 'Dashboard')
@section('active2', 'active')

@section('content')

    <div class="content-wrapper">

        <!-- Content -->

        <div class="container-xxl flex-grow-1 container-p-y">
            <!-- Invoice List Widget -->
            <div class="card mb-6">
                <div class="card-widget-separator-wrapper">
                    <div class="card-body card-widget-separator">
                        <div class="row gy-4 gy-sm-1">
                            <div class="col-sm-6 col-lg-3">
                                <div
                                    class="d-flex justify-content-between align-items-center card-widget-1 border-end pb-4 pb-sm-0">
                                    <div>
                                        <h4 class="mb-0">24</h4>
                                        <p class="mb-0">Clients</p>
                                    </div>
                                    <div class="avatar me-sm-6">
                                        <span class="avatar-initial rounded bg-label-secondary text-heading">
                                            <i class="bx bx-user bx-26px"></i>
                                        </span>
                                    </div>
                                </div>
                                <hr class="d-none d-sm-block d-lg-none me-6">
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div
                                    class="d-flex justify-content-between align-items-center card-widget-2 border-end pb-4 pb-sm-0">
                                    <div>
                                        <h4 class="mb-0">165</h4>
                                        <p class="mb-0">Invoices</p>
                                    </div>
                                    <div class="avatar me-lg-6">
                                        <span class="avatar-initial rounded bg-label-secondary text-heading">
                                            <i class="bx bx-file bx-26px"></i>
                                        </span>
                                    </div>
                                </div>
                                <hr class="d-none d-sm-block d-lg-none">
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div
                                    class="d-flex justify-content-between align-items-center border-end pb-4 pb-sm-0 card-widget-3">
                                    <div>
                                        <h4 class="mb-0">$2.46k</h4>
                                        <p class="mb-0">Paid</p>
                                    </div>
                                    <div class="avatar me-sm-6">
                                        <span class="avatar-initial rounded bg-label-secondary text-heading">
                                            <i class="bx bx-check-double bx-26px"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h4 class="mb-0">$876</h4>
                                        <p class="mb-0">Unpaid</p>
                                    </div>
                                    <div class="avatar">
                                        <span class="avatar-initial rounded bg-label-secondary text-heading">
                                            <i class="bx bx-error-circle bx-26px"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice List Table -->
            <div class="card">
                <div class="header-menu d-flex justify-content-between align-items-center">
                    <h5 class="card-header">Invoice List</h5>
                    <button type="button" class="btn btn-primary me-2"><i class="bx bx-plus bx-sm"></i> Add</button>
                </div>


                <div class="table-responsive">
                    <table class="table" id="Mytable">
                        <thead>
                            <tr>
                                <th scope="col">Invoice</th>
                                <th scope="col">Client</th>
                                <th scope="col">Due</th>
                                <th scope="col">Amount</th>
                                <th scope="col">photo</th>
                                <th scope="col">Address</th>
                                <th scope="col">Status</th>

                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">#12345</th>
                                <td>John Doe</td>
                                <td>01/01/2022</td>
                                <td>$500</td>
                                <td><img src="{{ asset('template/assets/img/avatars/1.png') }}" alt=""
                                        class="w-px-40 h-auto rounded-circle" /></td>
                                <td>123 Main Street, Anytown, USA</td>
                                <td><span class="badge bg-label-success me-1">Paid</span></td>
                                <td><a href="#" class="btn btn-sm btn-label-secondary"> <i
                                            class="bx bx-edit-alt"></i></a>
                                    <a href="#" class="btn btn-sm btn-label-secondary"> <i
                                            class="bx bx-trash"></i></a>
                                    <a href="#" class="btn btn-sm btn-label-secondary"> <i
                                            class="bx bx-printer"></i></a>
                                </td>

                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        @endsection