@extends('layouts.vertical', ['title' => 'Customers', 'subTitle' => 'Dashboards'])

@section('content')

<div class="row">
    <div class="col-xl-8 col-lg-12">
        <div class="row">
            <div class="col-md-6 col-xl-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-3 bg-light avatar d-flex align-items-center justify-content-center">
                                <img src="/images/flag/br.svg" alt="" class="avatar-sm rounded">
                            </div>
                            <div>
                                <h4 class="text-dark fw-semibold mb-1">Brazil</h4>
                                <p class="mb-0 fw-medium"><span class="text-dark fw-semibold"> $15,781 </span> Per Month</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-3">
                            <p class="mb-0 fw-medium fs-15">Total Customer</p>
                            <div class="text-end">
                                <p class="mb-1 fw-semibold text-dark">Today</p>
                                <h4 class="text-success mb-0 fw-semibold"><i class="ri-arrow-drop-up-fill"></i>+10.0</h4>
                            </div>
                        </div>
                        <div class="progress my-2 mt-3" style="height: 10px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated  bg-primary bg-opacity-75" role="progressbar" style="width: 30%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70"> </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h4 class="text-dark fw-bold mb-0">3474</h4>
                            <div>
                                <p class="mb-0">Goal : 10,000</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-3 bg-light avatar d-flex align-items-center justify-content-center">
                                <img src="/images/flag/ca.svg" alt="" class="avatar-sm rounded">
                            </div>
                            <div>
                                <h4 class="text-dark fw-semibold mb-1">Canada</h4>
                                <p class="mb-0 fw-medium"><span class="text-dark fw-semibold"> $23,263 </span> Per Month</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-3">
                            <p class="mb-0 fw-medium fs-15">Total Customer</p>
                            <div class="text-end">
                                <p class="mb-1 fw-semibold text-dark">Today</p>
                                <h4 class="text-success mb-0 fw-semibold"><i class="ri-arrow-drop-up-fill"></i>+4.1</h4>
                            </div>
                        </div>
                        <div class="progress my-2 mt-3" style="height: 10px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated  bg-primary bg-opacity-75" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70"> </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h4 class="text-dark fw-bold mb-0">7843</h4>
                            <div>
                                <p class="mb-0">Goal : 10,000</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-3 bg-light avatar d-flex align-items-center justify-content-center">
                                <img src="/images/flag/ru.svg" alt="" class="avatar-sm rounded">
                            </div>
                            <div>
                                <h4 class="text-dark fw-semibold mb-1">Russia</h4>
                                <p class="mb-0 fw-medium"><span class="text-dark fw-semibold"> $30,562 </span> Per Month</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-3">
                            <p class="mb-0 fw-medium fs-15">Total Customer</p>
                            <div class="text-end">
                                <p class="mb-1 fw-semibold text-dark">Today</p>
                                <h4 class="text-success mb-0 fw-semibold"><i class="ri-arrow-drop-up-fill"></i>+7.1</h4>
                            </div>
                        </div>
                        <div class="progress my-2 mt-3" style="height: 10px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated  bg-primary bg-opacity-75" role="progressbar" style="width: 50%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70"> </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h4 class="text-dark fw-bold mb-0">5933</h4>
                            <div>
                                <p class="mb-0">Goal : 10,000</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-3 bg-light avatar d-flex align-items-center justify-content-center">
                                <img src="/images/flag/us.svg" alt="" class="avatar-sm rounded">
                            </div>
                            <div>
                                <h4 class="text-dark fw-semibold mb-1">USA</h4>
                                <p class="mb-0 fw-medium"><span class="text-dark fw-semibold"> $41,341 </span> Per Month</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-3">
                            <p class="mb-0 fw-medium fs-15">Total Customer</p>
                            <div class="text-end">
                                <p class="mb-1 fw-semibold text-dark">Today</p>
                                <h4 class="text-success mb-0 fw-semibold"><i class="ri-arrow-drop-up-fill"></i>+12.0</h4>
                            </div>
                        </div>
                        <div class="progress my-2 mt-3" style="height: 10px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated  bg-primary bg-opacity-75" role="progressbar" style="width: 80%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70"> </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h4 class="text-dark fw-bold mb-0">8901</h4>
                            <div>
                                <p class="mb-0">Goal : 10,000</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">

            </div>
        </div>
    </div>
    <div class="col-xl-4 col-xl-4">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Property Investor</h4>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center gap-3">
                    <img src="/images/users/avatar-2.jpg" class="rounded avatar-xl img-thumbnail" alt="img-7">
                    <div class="">
                        <h4 class="mb-1"><a href="{{ route('second', ['customers', 'details'])}}" class="mb-1 link-dark fw-semibold">Daavid Nummi</a></h4>
                        <a href="#!" class="link-primary fw-medium fs-14">EastTribune.nl</a>
                        <ul class="list-inline d-flex flex-wrap gap-1 mb-0 align-items-center mt-2">
                            <li class="list-inline-item">
                                <a href="javascript: void(0);" class="btn btn-soft-primary avatar-sm d-flex align-items-center justify-content-center fs-20">
                                    <i class="ri-facebook-fill"></i>
                                </a>
                            </li>

                            <li class="list-inline-item">
                                <a href="javascript: void(0);" class="btn btn-soft-danger avatar-sm d-flex align-items-center justify-content-center fs-20">
                                    <i class="ri-instagram-fill"></i>
                                </a>
                            </li>

                            <li class="list-inline-item">
                                <a href="javascript: void(0);" class="btn btn-soft-info avatar-sm d-flex align-items-center justify-content-center  fs-20">
                                    <i class="ri-twitter-fill"></i>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript: void(0);" class="btn btn-soft-success avatar-sm d-flex align-items-center justify-content-center fs-20">
                                    <i class="ri-whatsapp-fill"></i>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript: void(0);" class="btn btn-soft-warning avatar-sm d-flex align-items-center justify-content-center fs-20">
                                    <i class="ri-mail-fill"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="">
                    <div id="customer_invest" data-colors="#604ae3" class="apex-charts mt-3"></div>
                </div>
            </div>
            <div class="card-footer border-top border-dashed gap-1 hstack">
                <a href="#!" class="btn btn-primary w-100">Open Chat</a>
                <a href="#!" class="btn btn-light w-100">Call To Customer</a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Recent Customers Invest</h4>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2 align-items-center bg-light-subtle border justify-content-between p-3 rounded mb-3">
                    <div>
                        <h5 class="fw-medium mb-1 text-dark fs-16">Customer Buy Property</h5>
                        <div class="avatar-group mt-3">
                            <div class="avatar d-flex align-items-center justify-content-center">
                                <img src="/images/users/avatar-6.jpg" alt="" class="rounded-circle avatar border border-light border-3">
                            </div>
                            <div class="avatar d-flex align-items-center justify-content-center">
                                <img src="/images/users/avatar-7.jpg" alt="" class="rounded-circle avatar border border-light border-3">
                            </div>
                            <div class="avatar d-flex align-items-center justify-content-center">
                                <img src="/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar border border-light border-3">
                            </div>
                            <div class="avatar d-flex align-items-center justify-content-center">
                                <img src="/images/users/avatar-9.jpg" alt="" class="rounded-circle avatar border border-light border-3">
                            </div>
                            <div class="avatar d-flex align-items-center justify-content-center">
                                <img src="/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar border border-light border-3">
                            </div>
                        </div>
                    </div>
                    <div class="text-end">
                        <h5 class="fw-medium mb-3 text-dark fs-16">Revenue</h5>
                        <h3 class="text-dark fw-bold d-flex align-items-center gap-2 mb-0"> <span class="text-success mb-0 fs-16 fw-semibold"><i class="ri-arrow-drop-up-fill"></i>+22.0</span> $67435.00</h3>
                    </div>
                </div>
                <div id="datalabels-column2" class="apex-charts" data-colors="#604ae3"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Customer By Country</h4>
            </div>
            <div class="card-body">
                <div id="world-map-markers" style="height: 448px"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xl-4 col-lg-6">
        <div class="card">
            <div class="card-header d-flex  justify-content-between align-items-center border-0">
                <div>
                    <h4 class="card-title mb-1">Top Customer</h4>
                    <p class="mb-0 fs-13">390 Customer</p>
                </div>
                <div class="dropdown">
                    <a href="#" class="dropdown-toggle rounded  arrow-none" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-edit-box-line fs-20 text-dark"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                        <!-- item-->
                        <a href="javascript:void(0);" class="dropdown-item">New Agent</a>
                        <!-- item-->
                        <a href="javascript:void(0);" class="dropdown-item">Old Agent</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between border-bottom pb-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="avatar">
                            <img src="/images/users/avatar-6.jpg" alt="avatar-3" class="img-fluid rounded-circle">
                        </div>
                        <div class="d-block">
                            <span class="text-dark">
                                <a href="#!" class="text-dark fw-medium fs-15">Tiia Karppinen</a>
                            </span>
                            <p class="mb-0 fs-14 text-muted">tiiakarppinen@teleworm.us</p>
                        </div>
                    </div>
                    <div>
                        <p class="text-muted fw-medium mb-0">$733,291</p>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between border-bottom py-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="avatar">
                            <img src="/images/users/avatar-7.jpg" alt="avatar-3" class="img-fluid rounded-circle">
                        </div>
                        <div class="d-block">
                            <span class="text-dark">
                                <a href="#!" class="text-dark fw-medium fs-15">Harland R. Orsini</a>
                            </span>
                            <p class="mb-0 fs-14 text-muted">harlandrorsini@dayrep.com </p>
                        </div>
                    </div>
                    <div>
                        <p class="text-muted fw-medium mb-0">$831,760</p>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between border-bottom py-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="avatar">
                            <img src="/images/users/avatar-8.jpg" alt="avatar-3" class="img-fluid rounded-circle">
                        </div>
                        <div class="d-block">
                            <span class="text-dark">
                                <a href="#!" class="text-dark fw-medium fs-15"> David Padgett</a>
                            </span>
                            <p class="mb-0 fs-14 text-muted">davidpadgett@armyspy.com</p>
                        </div>
                    </div>
                    <div>
                        <p class="text-muted fw-medium mb-0">$647,900</p>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between border-bottom py-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="avatar">
                            <img src="/images/users/avatar-10.jpg" alt="avatar-3" class="img-fluid rounded-circle">
                        </div>
                        <div class="d-block">
                            <span class="text-dark">
                                <a href="#!" class="text-dark fw-medium fs-15">Yusra Hasibah </a>
                            </span>
                            <p class="mb-0 fs-14 text-muted">yusraHasibahadad@rhyta.com</p>
                        </div>
                    </div>
                    <div>
                        <p class="text-muted fw-medium mb-0">$530,389</p>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between pt-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="avatar">
                            <img src="/images/users/avatar-9.jpg" alt="avatar-3" class="img-fluid rounded-circle">
                        </div>
                        <div class="d-block">
                            <span class="text-dark">
                                <a href="#!" class="text-dark fw-medium fs-15">Valerie Obrien</a>
                            </span>
                            <p class="mb-0 fs-14 text-muted">valerieobrien@dayrep.com</p>
                        </div>
                    </div>
                    <div>
                        <p class="text-muted fw-medium mb-0">$763,829</p>
                    </div>
                </div>

            </div>
            <div class="card-footer border-top">
                <a href="#!" class="btn btn-primary w-100">View All</a>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-lg-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center pb-1">
                <h4 class="card-title">Customer Visit by Device</h4>
                <div class="dropdown">
                    <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light rounded" data-bs-toggle="dropdown" aria-expanded="false">
                        Today
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                        <!-- item-->
                        <a href="javascript:void(0);" class="dropdown-item">Today</a>
                        <!-- item-->
                        <a href="javascript:void(0);" class="dropdown-item">Month</a>
                        <!-- item-->
                        <a href="javascript:void(0);" class="dropdown-item">Years</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h3 class="d-flex align-items-center text-dark gap-2 mb-0">67,893<span class="badge text-danger bg-danger-subtle px-2 py-1 fs-12"><i class="ri-arrow-down-line"></i>0.66%</span></h3>
                        <small>(Total Devices)</small>
                    </div>
                    <div class="avatar-md bg-light bg-opacity-50 rounded">
                        <iconify-icon icon="solar:devices-broken" class="fs-32 text-primary avatar-title"></iconify-icon>
                    </div>
                </div>
                <div class="mx-n3">
                    <div id="customer_devices" data-colors="#604ae3" class="apex-charts my-3"></div>
                </div>
                <div class="row mt-4 mb-1">
                    <div class="col-lg-6">
                        <div class="border rounded p-2">
                            <p class="mb-1 text-muted"><i class="ri-smartphone-line text-dark"></i> Mobile</p>
                            <p class="fs-18 text-dark fw-medium">2.435 <span class="text-muted fs-14">60%</span></p>
                            <div class="d-flex justify-content-between">
                                <div>
                                    <p class="text-dark mb-0">Android</p>
                                    <p class="mb-0">2,545</p>
                                </div>
                                <div class="text-end">
                                    <p class="text-dark mb-0">IOS</p>
                                    <p class="mb-0">487</p>
                                </div>
                            </div>
                            <div class="progress progress-lg rounded-0 gap-1 overflow-visible mt-3 bg-light-subtle" style="height: 10px">
                                <div class="progress-bar bg-success rounded-pill" role="progressbar" style="width: 70%">
                                </div>
                                <div class="progress-bar bg-dark rounded-pill" role="progressbar" style="width: 30%">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="border rounded p-2 text-end">
                            <p class="mb-1 text-muted"><i class="ri-computer-line text-dark"></i> Desktop</p>
                            <p class="fs-18 text-dark fw-medium">578 <span class="text-muted fs-14">20%</span></p>
                            <div class="d-flex justify-content-between">
                                <div class="text-start">
                                    <p class="text-dark mb-0">Windows</p>
                                    <p class="mb-0">523</p>
                                </div>
                                <div>
                                    <p class="text-dark mb-0">Mac</p>
                                    <p class="mb-0">876</p>
                                </div>
                            </div>
                            <div class="progress progress-lg rounded-0 gap-1 overflow-visible mt-3 bg-light-subtle" style="height: 10px">
                                <div class="progress-bar bg-dark rounded-pill" role="progressbar" style="width: 30%">
                                </div>
                                <div class="progress-bar bg-warning rounded-pill" role="progressbar" style="width: 70%">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer border-top">
                <div class="row g-2">
                    <div class="col-lg-7">
                        <a href="#!" class="btn btn-primary w-100">View All</a>
                    </div>
                    <div class="col-lg-5">
                        <a href="#!" class="btn btn-light w-100">Edit Data</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-lg-6">
        <div class="card overflow-hidden">
            <div class="card-header">
                <h4 class="card-title">Recent Purchase Property</h4>
            </div>
            <div class="card-body">
                <div class="position-relative">
                    <img src="/images/properties/p-10.jpg" alt="" class="img-fluid rounded-top">
                    <span class="position-absolute top-0 end-0 p-1">
                        <span class="badge bg-danger text-white fs-13">Sold</span>
                    </span>
                </div>
                <div class="d-flex align-items-center gap-2 mt-3 pt-1">
                    <div class="avatar bg-light rounded">
                        <iconify-icon icon="solar:buildings-3-bold-duotone" class="fs-24 text-primary avatar-title"></iconify-icon>
                    </div>
                    <div>
                        <a href="#!" class="text-dark fw-medium fs-16">Woodis B. Apartment</a>
                        <p class="text-muted mb-0">Bungalow Road
                            Niobrara</p>
                    </div>
                    <div class="ms-auto">
                        <p class="fw-medium text-dark fs-18 mb-0">$80,675.00 </p>
                    </div>
                </div>
                <div class="row mt-2 g-2">
                    <div class="col-lg-2 col-4">
                        <span class="badge bg-light-subtle text-muted border fs-12">
                            <span class="fs-16"><iconify-icon icon="solar:bed-broken" class="align-middle"></iconify-icon></span>
                            4 Beds
                        </span>
                    </div>
                    <div class="col-lg-2 col-4">
                        <span class="badge bg-light-subtle text-muted border fs-12">
                            <span class="fs-16"><iconify-icon icon="solar:bath-broken" class="align-middle"></iconify-icon></span>
                            3 Bath
                        </span>
                    </div>
                    <div class="col-lg-2 col-4">
                        <span class="badge bg-light-subtle text-muted border fs-12">
                            <span class="fs-16"><iconify-icon icon="solar:scale-broken" class="align-middle"></iconify-icon></span>
                            1700ft
                        </span>
                    </div>
                    <div class="col-lg-2 col-4">
                        <span class="badge bg-light-subtle text-muted border fs-12">
                            <span class="fs-16"><iconify-icon icon="solar:double-alt-arrow-up-broken" class="align-middle"></iconify-icon></span>
                            6 Floor
                        </span>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2 mt-3 pt-2">
                    <div class="avatar">
                        <img src="/images/users/avatar-6.jpg" alt="avatar-3" class="img-fluid rounded-circle">
                    </div>
                    <div class="d-block">
                        <span class="text-dark">
                            <a href="#!" class="text-dark fw-medium fs-15">Tiia Karppinen</a>
                        </span>
                        <p class="mb-0 fs-14 text-muted">tiiakarppinen@teleworm.us</p>
                    </div>
                    <div class="ms-auto">
                        <i class="ri-checkbox-circle-line fs-20 text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script-bottom')
@vite(['resources/js/pages/dashboard-customer.js'])
@endsection