@extends('users-area.layouts.app')

@section('content')

    {{-- <div class="row">
        <div class="col-sm-6 col-xl-3">
            <div class="card bg-light-success shadow-none">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="round rounded bg-success d-flex align-items-center justify-content-center">
                            <i class="cc BTC text-white fs-7" title="BTC"></i>
                        </div>
                        <h6 class="mb-0 ms-3">WHATSAPP</h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mt-4">
                        <h3 class="mb-0 fw-semibold fs-7">0.1245</h3>
                        <span class="fw-bold">Total Klik</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card bg-light-danger shadow-none">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="round rounded bg-danger d-flex align-items-center justify-content-center">
                            <i class="cc ETH text-white fs-7" title="ETH"></i>
                        </div>
                        <h6 class="mb-0 ms-3">YOUTUBE</h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mt-4">
                        <h3 class="mb-0 fw-semibold fs-7">0.5620</h3>
                        <span class="fw-bold">Total Klik</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card bg-light-info shadow-none">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="round rounded bg-info d-flex align-items-center justify-content-center">
                            <i class="cc LTC text-white fs-7" title="LTC"></i>
                        </div>
                        <h6 class="mb-0 ms-3">INSTAGRAM</h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mt-4">
                        <h3 class="mb-0 fw-semibold fs-7">1.200</h3>
                        <span class="fw-bold">Total Klik</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card bg-light-dark shadow-none">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="round rounded bg-dark d-flex align-items-center justify-content-center">
                            <i class="cc XRP text-white fs-7" title="XRP"></i>
                        </div>
                        <h6 class="mb-0 ms-3 text-white">TIKTOK</h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mt-4">
                        <h3 class="mb-0 fw-semibold fs-7 text-white">1.150</h3>
                        <span class="fw-bold text-white">Total Klik</span>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    <div class="row">
        {{-- <div class="col-xl-9">
            <div class="card">
                <div class="card-body">
                <h5 class="card-title fw-semibold">Featured BTCs</h5>
                <p class="card-subtitle mb-0">The Top BTCs for New Investors</p>
                <div class="row mt-4">
                    <div class="col-md-4">
                    <div class="card overflow-hidden shadow-none border card-hover mb-4 mb-md-0">
                        <img src="../../dist/images/crypto/c1.jpg" alt="img" />
                        <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                            <h6 class="mb-0 fs-5 fw-semibold">Els Idunn</h6>
                            <span>els@email</span>
                            </div>
                            <img src="../../dist/images/profile/user-1.jpg" alt="user1" width="35" class="rounded-circle" />
                        </div>
                        <div class="d-flex align-items-start justify-content-between mt-3">
                            <span>Price</span>
                            <div class="text-end">
                            <h5 class="mb-0 fs-5 fw-semibold">
                                <i class="cc BTC" title="BTC"></i> 0.25 BTC
                            </h5>
                            <span class="fs-3">$21,23,000</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-start justify-content-between mt-3">
                            <span>
                            <i class="ti ti-clock-hour-4 me-1 fs-4"></i>5d 16h </span>
                            <span>
                            <i class="ti ti-eye fs-4 me-1"></i>2.5k </span>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div class="col-md-4">
                    <div class="card overflow-hidden shadow-none border card-hover mb-4 mb-md-0">
                        <img src="../../dist/images/crypto/c2.jpg" alt="img" />
                        <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                            <h6 class="mb-0 fs-5 fw-semibold">Liam William</h6>
                            <span>lian@email</span>
                            </div>
                            <img src="../../dist/images/profile/user-2.jpg" alt="user1" width="35" class="rounded-circle" />
                        </div>
                        <div class="d-flex align-items-start justify-content-between mt-3">
                            <span>Price</span>
                            <div class="text-end">
                            <h5 class="mb-0 fs-5 fw-semibold">
                                <i class="cc ETH" title="ETH"></i> 1.42 ETH
                            </h5>
                            <span class="fs-3">$15,000</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-start justify-content-between mt-3">
                            <span>
                            <i class="ti ti-clock-hour-4 me-1 fs-4"></i>3d 1h </span>
                            <span>
                            <i class="ti ti-eye fs-4 me-1"></i>1.2k </span>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div class="col-md-4">
                    <div class="card overflow-hidden shadow-none border card-hover mb-4 mb-md-0">
                        <img src="../../dist/images/crypto/c3.jpg" alt="img" />
                        <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                            <h6 class="mb-0 fs-5 fw-semibold">John Smith</h6>
                            <span>john@email</span>
                            </div>
                            <img src="../../dist/images/profile/user-3.jpg" alt="user1" width="35" class="rounded-circle" />
                        </div>
                        <div class="d-flex align-items-start justify-content-between mt-3">
                            <span>Price</span>
                            <div class="text-end">
                            <h5 class="mb-0 fs-5 fw-semibold">
                                <i class="cc XRP" title="XRP"></i> 0.25 XRP
                            </h5>
                            <span class="fs-3">$61,25,000</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-start justify-content-between mt-3">
                            <span>
                            <i class="ti ti-clock-hour-4 me-1 fs-4"></i>2d 11h </span>
                            <span>
                            <i class="ti ti-eye fs-4 me-1"></i>5.3k </span>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body pb-2">
                <div class="d-md-flex align-items-center gap-3 justify-content-between mb-3">
                    <div>
                    <h5 class="card-title fw-semibold">Your Investments</h5>
                    <p class="card-subtitle mb-0">What Are the Risks of Investing?</p>
                    </div>
                    <div class="d-flex align-items-center gap-3 mt-4 mt-md-0">
                    <div class="dropdown">
                        <button class="btn btn-light-primary dropdown-toggle" type="button" id="invest1" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="cc BTC me-1" title="BTC"></i> BTC </button>
                        <ul class="dropdown-menu" aria-labelledby="invest1">
                        <li>
                            <a class="dropdown-item" href="#">
                            <i class="cc ETH me-1" title="ETH"></i> ETH </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">
                            <i class="cc LTC me-1" title="LTC"></i> LTC </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">
                            <i class="cc XRP me-1" title="XRP"></i> XRP </a>
                        </li>
                        </ul>
                    </div>
                    <span class="round bg-primary flex-shrink-0 rounded-circle text-white d-flex align-items-center justify-content-center">
                        <i class="ti ti-repeat fs-6"></i>
                    </span>
                    <div class="dropdown">
                        <button class="btn btn-light-danger dropdown-toggle" type="button" id="invest2" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="cc ETH me-1" title="ETH"></i> ETH </button>
                        <ul class="dropdown-menu" aria-labelledby="invest2">
                        <li>
                            <a class="dropdown-item" href="#">
                            <i class="cc BTC me-1" title="BTC"></i> BTC </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">
                            <i class="cc ETH me-1" title="ETH"></i> ETH </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">
                            <i class="cc LTC me-1" title="LTC"></i> LTC </a>
                        </li>
                        </ul>
                    </div>
                    </div>
                </div>
                <div id="investments"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 mt-4 mt-md-0">
            <div class="card">
                <div class="card-body p-4">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-fill" role="tablist">
                    <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab">
                        <span>Buy</span>
                    </a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab">
                        <span>Sell</span>
                    </a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content mt-4">
                    <div class="tab-pane active" id="home" role="tabpanel">
                    <form>
                        <span class="d-block mb-1">Amount</span>
                        <div class="input-group mb-3">
                        <input type="text" class="form-control  border-end-0" aria-label="Text input with dropdown button" value="0.20125" />
                        <button class="btn btn-sm dropdown-toggle arrow-none p-0 border-top border-bottom border-end border-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="bg-light-danger text-danger p-6 rounded">
                            <span> USD </span>
                            <i class="ti ti-chevron-down ms-1 fs-4"></i>
                            </span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                            <a class="dropdown-item" href="#">INR</a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">CLP</a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">AMD</a>
                            </li>
                        </ul>
                        </div>
                        <span class="d-block mb-1">Amount</span>
                        <div class="input-group mb-3">
                        <input type="text" class="form-control  border-end-0" aria-label="Text input with dropdown button" value="0.20125" />
                        <button class="btn btn-sm dropdown-toggle arrow-none p-0 border-top border-bottom border-end border-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="bg-light-primary text-primary p-6 rounded">
                            <span> BTC </span>
                            <i class="ti ti-chevron-down ms-1 fs-4"></i>
                            </span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                            <a class="dropdown-item" href="#">LTC</a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">XRP</a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">ETH</a>
                            </li>
                        </ul>
                        </div>
                        <button class="btn btn-primary w-100">Buy BTC</button>
                    </form>
                    </div>
                    <div class="tab-pane" id="profile" role="tabpanel">
                    <form>
                        <span class="d-block mb-1">Amount</span>
                        <div class="input-group mb-3">
                        <input type="text" class="form-control  border-end-0" aria-label="Text input with dropdown button" value="0.20125" />
                        <button class="btn btn-sm dropdown-toggle arrow-none p-0 border-top border-bottom border-end border-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="bg-light-danger text-danger p-6 rounded">
                            <span> USD </span>
                            <i class="ti ti-chevron-down ms-1 fs-4"></i>
                            </span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                            <a class="dropdown-item" href="#">INR</a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">CLP</a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">AMD</a>
                            </li>
                        </ul>
                        </div>
                        <span class="d-block mb-1">Amount</span>
                        <div class="input-group mb-3">
                        <input type="text" class="form-control  border-end-0" aria-label="Text input with dropdown button" value="0.20125" />
                        <button class="btn btn-sm dropdown-toggle arrow-none p-0 border-top border-bottom border-end border-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="bg-light-primary text-primary p-6 rounded">
                            <span> BTC </span>
                            <i class="ti ti-chevron-down ms-1 fs-4"></i>
                            </span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                            <a class="dropdown-item" href="#">LTC</a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">XRP</a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">ETH</a>
                            </li>
                        </ul>
                        </div>
                        <button class="btn btn-danger w-100">Sell BTC</button>
                    </form>
                    </div>
                </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body p-4">
                <div class="mb-9">
                    <h5 class="card-title fw-semibold">Converter</h5>
                    <p class="card-subtitle">The Future of Quick Transfers</p>
                </div>  
                <div class="input-group mb-3">
                    <input type="text" class="form-control  border-end-0" aria-label="Text input with dropdown button" value="$1000" />
                    <button class="btn dropdown-toggle arrow-none p-0 border-top border-bottom border-end border-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="bg-light-primary text-primary p-6 rounded">
                        <span> USD </span>
                        <i class="ti ti-chevron-down ms-1 fs-4"></i>
                    </span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="#">Action</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Another action</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </li>
                    <li>
                        <hr class="dropdown-divider" />
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </li>
                    </ul>
                </div>
                <div class="input-group mb-3">
                    <input type="text" class="form-control  border-end-0" aria-label="Text input with dropdown button" value="0.20125" />
                    <button class="btn dropdown-toggle arrow-none p-0 border-top border-bottom border-end border-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="bg-light-danger text-danger p-6 rounded">
                        <span> ETH </span>
                        <i class="ti ti-chevron-down ms-1 fs-4"></i>
                    </span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="#">Action</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Another action</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </li>
                    <li>
                        <hr class="dropdown-divider" />
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </li>
                    </ul>
                </div>
                <button class="btn btn-primary w-100">Convert</button>
                </div>
            </div>
            <div class="card">
                <div class="card-body p-4">
                <h5 class="card-title fw-semibold">Quick Transfer</h5>
                <p class="card-subtitle">The History of Converters</p>
                <div class="d-flex align-items-center gap-2 mt-4 mb-3">
                    <a href="javascript:void(0)">
                    <img src="../../dist/images/profile/user-1.jpg" class="rounded-circle" alt="t1" width="40" />
                    </a>
                    <a href="javascript:void(0)">
                    <img src="../../dist/images/profile/user-2.jpg" class="rounded-circle" alt="t2" width="40" />
                    </a>
                    <a href="javascript:void(0)">
                    <img src="../../dist/images/profile/user-3.jpg" class="rounded-circle" alt="t3" width="40" />
                    </a>
                    <a href="javascript:void(0)">
                    <div class="round-40 rounded-circle bg-light-primary d-flex align-items-center justify-content-center">
                        <i class="ti ti-plus fs-4"></i>
                    </div>
                    </a>
                </div>
                <span class="d-block mb-1">To</span>
                <div class="mb-3">
                    <span class="badge px-2 d-inline-flex align-items-center bg-light-primary text-primary rounded-pill fs-3">
                    <img src="../../dist/images/profile/user-1.jpg" class="rounded-circle me-1" alt="user1" width="30" /> John </span>
                </div>
                <span class="d-block mb-1">Amount</span>
                <div class="input-group rounded">
                    <input type="text" class="form-control  border-end-0" aria-label="Text input with dropdown button" value="$1000" />
                    <button class="btn p-0 border-top border-bottom border-end border-0" type="button">
                    <span class=" btn btn-primary m-1 rounded"> Transfer <i class="ti ti-arrow-right fs-4"></i>
                    </span>
                    </button>
                </div>
                </div>
            </div>
            </div>
        </div> --}}
        <div class="col-lg-12 d-flex align-items-stretch">
            <div class="card w-100 bg-light-info overflow-hidden shadow-none">
                <div class="card-body position-relative">
                    <div class="row">
                        <div class="col-sm-7">
                            <div class="d-flex align-items-center mb-7">
                                <div class="rounded-circle overflow-hidden me-6">
                                    <img src="{{ auth()->user()->profile_image ? asset('uploads/images/users/' . auth()->user()->profile_image) : asset('users-area-template/images/profile/user-1.jpg') }}" alt="" width="40" height="40">
                                </div>
                                <h5 class="fw-semibold mb-0 fs-5">Welcome back {{ auth()->user()->name }}!</h5>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="border-end pe-4 border-muted border-opacity-10">
                                    <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">{{ number_format($totalOutlet) }}</h3>
                                    <p class="mb-0 text-dark">Total Outlet</p>
                                </div>
                                <div class="ps-4">
                                    <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">{{ number_format($totalClickTodaysCount) }}</h3>
                                    <p class="mb-0 text-dark">Today’s Click</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <div class="welcome-bg-img mb-n7 text-end">
                                <img src="{{ asset('users-area-template/images/backgrounds/welcome-bg.svg') }}" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title fw-semibold">Top Today’s Click</h5>
                    <div class="table-responsive mt-4">
                        <table class="table align-middle text-nowrap mb-0">
                            <thead>
                                <tr class="text-muted fw-semibold">
                                    <th scope="col" class="ps-0">Outlet</th>
                                    <th scope="col">Whatsapp</th>
                                    <th scope="col">Instagram</th>
                                    <th scope="col">Tiktok</th>
                                    <th scope="col">Youtube</th>
                                    <th scope="col">Facebook</th>
                                    <th scope="col">Website</th>
                                    <th scope="col">Google Review</th>
                                    <th scope="col">Total Click</th>
                                </tr>
                            </thead>
                            <tbody class="border-top">
                                @forelse ($totalClickTodays as $outlet)
                                    <tr>
                                        <td class="ps-0">
                                            <div class="d-flex align-items-center">
                                                <div class="me-2 pe-1">
                                                    <img src="{{ asset('uploads/images/users/' . $outlet->outlet?->profile_image) }}" onerror="this.src='{{ asset('users-area-template/images/profile/user-1.jpg') }}'" class="rounded-circle" width="40" height="40" alt="">
                                                </div>
                                                <div>
                                                    <h6 class="fw-semibold mb-1">{{ $outlet->outlet?->outlet_code }}</h6>
                                                    <p class="fs-2 mb-0 text-muted">{{ $outlet->outlet?->outlet_name }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">{{ number_format($outlet->whatsapp) }}</td>
                                        <td class="text-center">{{ number_format($outlet->instagram) }}</td>
                                        <td class="text-center">{{ number_format($outlet->tiktok) }}</td>
                                        <td class="text-center">{{ number_format($outlet->youtube) }}</td>
                                        <td class="text-center">{{ number_format($outlet->facebook) }}</td>
                                        <td class="text-center">{{ number_format($outlet->website) }}</td>
                                        <td class="text-center">{{ number_format($outlet->google_review) }}</td>
                                        <td class="text-center">{{ number_format($outlet->total_click) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No data</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                      </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('users-area-template/libs/owl.carousel/dist/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('users-area-template/libs/apexcharts/dist/apexcharts.min.js') }}"></script>
    <script src="{{ asset('users-area-template/js/dashboard.js') }}"></script>
@endpush