@extends('layouts.seller.app')

@section('content')
    <div class="cw-content">
        <div class="container-fluid">
            <div class="cw-content-inner">
                <div class="cw-content-body">
                    <div class="cw-block-head cw-block-head-sm">
                        <div class="cw-block-between">
                            <div class="cw-block-head-content">
                                @if (Auth::user()->trade_role == 2 || Auth::user()->trade_role == 3)
                                    <h3 class="cw-block-title page-title">Seller Dashboard</h3>
                                @else
                                    <h3 class="cw-block-title page-title">Dashboard</h3>
                                @endif
                                <div class="cw-block-des text-soft">
                                    <p>Welcome to Chemical Wholesale Seller Dashboard.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        @include('layouts.seller.flash')
                        <div class="row g-gs">
                            <div class="col-sm-6 col-xxl-3">
                                <div class="card card-statuscard bg-primary">
                                    <div class="card-inner">
                                        <div class="d-flex align-items-center justify-content-between mb-1">
                                            <div class="fs-6 text-white text-opacity-75 mb-0">Orders</div>
                                            <a href="/seller/orders/" class="link link-white">All Orders</a>
                                        </div>
                                        <h5 class="fs-1 text-white">{{ @$orders }} <small class="fs-3">Orders</small>
                                        </h5>
                                        <div class="fs-7 text-white text-opacity-75 mt-1"><span
                                                class="text-white">{{ @$orders }}
                                            </span> Orders this month
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xxl-3">
                                <div class="card card-statuscard bg-warning is-dark">
                                    <div class="card-inner">
                                        <div class="d-flex align-items-center justify-content-between mb-1">
                                            <div class="fs-6 text-white text-opacity-75 mb-0">Total
                                                Shipments</div><a href="/seller/orders/filter/shipped"
                                                class="link link-white">All Shipment</a>
                                        </div>
                                        <h5 class="fs-1 text-white">{{ $shipments }} <small
                                                class="fs-3">Shipment</small>
                                        </h5>
                                        <div class="fs-7 text-white text-opacity-75 mt-1"><span
                                                class="text-white">{{ $shipments }} </span>Orders in Shipment</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xxl-3">
                                <div class="card card-statuscard bg-info is-dark">
                                    <div class="card-inner">
                                        <div class="d-flex align-items-center justify-content-between mb-1">
                                            <div class="fs-6 text-white text-opacity-75 mb-0">Products
                                            </div><a href="/seller/products" class="link link-white">All Products</a>
                                        </div>
                                        <h5 class="fs-1 text-white">{{ @$products_count ?: '0' }} <small
                                                class="fs-3">Products</small></h5>
                                        <div class="fs-7 text-white text-opacity-75 mt-1"><span
                                                class="text-white">{{ @$products_count ?: '0' }}</span>
                                            Products available</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xxl-3">
                                <div class="card card-statuscard bg-danger is-dark">
                                    <div class="card-inner">
                                        <div class="d-flex align-items-center justify-content-between mb-1">
                                            <div class="fs-6 text-white text-opacity-75 mb-0">Companies
                                            </div><a href="{{ route('seller.companies') }}" class="link link-white">All
                                                Companies</a>
                                        </div>
                                        <h5 class="fs-1 text-white">{{ $company_count }} <small
                                                class="fs-3">Companies</small>
                                        </h5>
                                        <div class="fs-7 text-white text-opacity-75 mt-1"><span
                                                class="text-white">{{ $company_count }} </span>
                                            Companies</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="">
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="ps-3 py-1 mb-0">Average Monthly Orders</h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div id="chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-3" style="min-height: auto">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="ps-3 py-1 mb-0">Order Summary</h6>
                                    </div>
                                    <div class="card-body p-0 d-flex justify-content-center">
                                        <div id="chart2" class="py-lg-5 my-lg-5"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="">
                        <div class="row">
                            <!-- New Companies -->
                            <div class="col-lg-6 mb-3">

                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="ps-3 py-1 mb-0">New Companies</h6>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover table-nowrap">
                                            <thead class="table-light">
                                                <tr>
                                                    <th scope="col">Company</th>
                                                    <th scope="col">Email</th>
                                                    <th scope="col">Phone</th>
                                                    <th scope="col"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($user_company as $company)
                                                    <tr>
                                                        <td data-label="Job Title">
                                                            <img alt="company logo" src="{{ @$b['getlogo']['path'] }}"
                                                                class="avatar-sm e me-2"onerror="src='/assets/dashboard/img/icons/company.png'">
                                                            <a class="text-heading font-semibold">
                                                                {{ $company['company'] }}
                                                            </a>
                                                        </td>
                                                        <td data-label="Lead Score">
                                                            <a class="text-current"
                                                                href="mailto:9496300000">{{ $company['company_email'] ?: 'N.A' }}</a>
                                                        </td>
                                                        <td data-label="Lead Score">
                                                            <a class="text-current"
                                                                href="tel:9496300000">{{ $company['company_phone'] ?: 'N.A' }}</a>
                                                        </td>

                                                        <td data-label="" class="text-end">
                                                            <div class="dropdown table">
                                                                <a class="text-muted" href="javascript:void(0);" role="button"
                                                                    data-bs-toggle="dropdown" aria-haspopup="true"
                                                                    aria-expanded="false">
                                                                    <i class="bi bi-three-dots-vertical"></i>
                                                                </a>
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <a href="{{ route('seller.companies-info', @$company['uuid']) }}"
                                                                        class="dropdown-item">
                                                                        View
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                                @if (!$user_company)
                                                    <tr>
                                                        <td colspan="5">
                                                            <div class="text-center">
                                                                <img alt="img"
                                                                    src="/assets/dashboard/img/icons/company.png"
                                                                    class="avatar-sm e me-2"> You have no companies to
                                                                show.
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endif

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- New User Section -->
                            <div class="col-lg-6 mb-3">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="ps-3 py-1 mb-0">New Users</h6>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover table-nowrap">
                                            <thead class="table-light">
                                                <tr>
                                                    <th scope="col">Name</th>
                                                    <th scope="col">Role</th>
                                                    <th scope="col">Email</th>
                                                    <th scope="col">Phone</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if (count($users) > 0)
                                                    @if (@Auth::user()->trade_role == '4')
                                                        @foreach ($users as $user)
                                                            <tr>
                                                                <td data-label="Job Title">
                                                                    <img alt="..." src="/assets/img/default_user.png"
                                                                        class="avatar-sm me-2">
                                                                    <a class="text-heading font-semibold">
                                                                        {{ @$user['first_name'] . ' ' . @$user['last_name'] }}
                                                                    </a>
                                                                </td>
                                                                <td data-label="Email">
                                                                    <span>
                                                                        @if (@$user->trade_role == 3)
                                                                            Both
                                                                        @elseif(@$user->trade_role == 2)
                                                                            Supplier
                                                                        @elseif(@$user->trade_role == 1)
                                                                            Buyer
                                                                        @else
                                                                            Admin
                                                                        @endif
                                                                    </span>
                                                                </td>
                                                                <td data-label="Phone">
                                                                    <a class="text-current"
                                                                        href="mailto:{{ @$user['email'] }}">
                                                                        {{ @$user['email'] }}</a>
                                                                </td>
                                                                <td data-label="Lead Score">
                                                                    <a class="text-current"
                                                                        href="tel:{{ @$user['phone'] }}">{{ @$user['phone'] }}</a>
                                                                </td>

                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        @foreach ($users as $suser)
                                                            <tr>
                                                                <td data-label="Job Title">
                                                                    <img alt="..." src="/assets/img/default_user.png"
                                                                        class="avatar-sm me-2">
                                                                    <a class="text-heading font-semibold">
                                                                        {{ @$suser['getUser']['first_name'] . ' ' . @$suser['getUser']['last_name'] }}
                                                                    </a>
                                                                </td>
                                                                <td data-label="Email">
                                                                    <span>
                                                                        @if (@$suser->getUser->trade_role == '3')
                                                                            Both
                                                                        @elseif(@$suser->getUser->trade_role == '2')
                                                                            Supplier
                                                                        @elseif(@$suser->getUser->trade_role == '1')
                                                                            Buyer
                                                                        @else
                                                                            Admin
                                                                        @endif
                                                                    </span>
                                                                </td>
                                                                <td data-label="Phone">
                                                                    <a class="text-current"
                                                                        href="mailto:{{ @$suser['getUser']['email'] }}">{{ @$suser['getUser']['email'] }}</a>
                                                                </td>
                                                                <td data-label="Lead Score">
                                                                    <a class="text-current"
                                                                        href="tel:{{ @$suser['getUser']['phone'] }}">{{ @$suser['getUser']['phone'] }}</a>
                                                                </td>

                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                @else
                                                    <tr>
                                                        <td colspan="5">
                                                            <div class="text-center">
                                                                <img alt="..." src="/assets/img/default_user.png"
                                                                    class="avatar-sm me-2">You have no users to show.
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endif

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

                    <div class="mb-3">
                        <div class="row">
                            <!-- New Order -->
                            <div class="col-lg-12 d-none">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="ps-3 py-1 mb-0">New Orders</h6>
                                    </div>
                                    <div class="card-body pb-0 px-4">
                                        @for ($i = 0; $i < 3; $i++)
                                            <div class="dash-order-item">
                                                <div class="order-header">
                                                    <div class="order-info">
                                                        <span class="order-id">Order No: 2025165652AX-5550 |
                                                            2024-04-15</span>
                                                        <span class="order-features">Money Back guaranteee | Express
                                                            Delivery</span>
                                                    </div>
                                                    <div class="order-info-btns">
                                                        <a href="{{ route('seller.orders.details', ['id' => 5]) }}"
                                                            class="btn-order-link">View Details</a>
                                                    </div>
                                                </div>
                                                <div class="order-body">
                                                    <div class="order-details">
                                                        <div class="seller-info">
                                                            <div>
                                                                <div class="seller-company">Chemical Wholescale LLC
                                                                </div>
                                                                <div class="seller-name">Henry Zhang</div>
                                                            </div>
                                                            <a class="chatnow-btn"> <i class="bi bi-chat-text me-1"></i>
                                                                Chat
                                                                Now</a>
                                                        </div>
                                                        <div class="product-info">
                                                            <div class="product">
                                                                <div class="product-item">
                                                                    <img src="/assets/img/product-img/3.png"
                                                                        alt="" class="product-item-img">
                                                                    <div class="product-item-details">
                                                                        <p class="product-name">Industrial grade sodium
                                                                            sulphate
                                                                        </p>
                                                                        <p class="product-model">Model Number: HS0025
                                                                        </p>
                                                                        <p class="product-price">USD $700 x 2</p>
                                                                    </div>
                                                                </div>
                                                                <div class="payment">
                                                                    <div class="d-flex ms-1">Total:
                                                                        <div class="price"> USD $1400.00</div>
                                                                    </div>
                                                                    <div class="payment-type">
                                                                        <i class="bi bi-credit-card ms-1"></i> Card
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="order-actions">
                                                        <div class="status-container">
                                                            <p class="status-text">Waiting for Delivery Confirmation
                                                            </p>
                                                            <div class="delivery-info">
                                                                <div class="deliver-name">DHL Courier</div>
                                                                <div class="deliver-date">2024-04-17 15.03.48</div>
                                                                <a class="deliver-track-link">Tracking Details</a>
                                                            </div>
                                                        </div>
                                                        <div class="action-container">
                                                            <a href="" class="action-btn">Confirm Delivery</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                        <div class="text-center py-3 pb-5">
                                            <img alt="..."
                                                src="https://img.icons8.com/?size=100&id=lx8ZDzdBdoWt&format=png&color=000000"
                                                class="avatar-sm me-2">You have no orders to show.
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <!-- Latest Product -->
                            <div class="col-lg-12">
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h6 class="ps-3 py-1 mb-0">Latest Products</h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-hover table-nowrap">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th scope="col">Name</th>
                                                        <th scope="col">Category</th>
                                                        <th scope="col">Price</th>
                                                        <th scope="col">Added by</th>
                                                        <th scope="col"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if (count($user_products) > 0)
                                                        @foreach ($user_products as $product)
                                                            @php
                                                                $images = @$product->getimages
                                                                    ? @$product->getimages->groupby('section')
                                                                    : '';
                                                                    $assignedCategory = !empty(@$product->assignedCategory())
                                                                        ? @$product->assignedCategory()->pluck('category_id')->toArray()
                                                                        : [];
                                                                    $categoryName = !empty($assignedCategory) ? $category->whereIn('id', $assignedCategory)->pluck('name')->implode(',') : '--';
                                                            @endphp
                                                            <tr>
                                                                <td data-label="Job Title">
                                                                    <div class="d-flex align-items-center">
                                                                        <img alt="ProductImg"
                                                                            src="{{ !empty($images['mainimage']) ? @$images['mainimage']->first()->path : '' }}"
                                                                            class="product-tableimg me-3"
                                                                            onerror="src='/assets/img/noimg.jpg'">
                                                                        <a class="text-heading font-semibold">
                                                                            {{ @$product['name'] }} <br>
                                                                            <span class="text-secondary">Product SKU:
                                                                                {{ @$product['product_sku'] }} </span>
                                                                        </a>
                                                                    </div>
                                                                </td>
                                                                <td data-label="category">
                                                                    <span>{{ @$categoryName }}</span>
                                                                </td>
                                                                <td data-label="price">
                                                                    <span class="badge bg-soft-success text-success">
                                                                        ${{ !empty($product->getpackage) ? number_format(@$product->getpackage[0]->price, 2) : '0.00' }}
                                                                    </span>
                                                                </td>
                                                                <td data-label="">
                                                                    <a class="text-current"
                                                                        href="javascript:void(0);">{{ @$product['getCreatedBy']['first_name'] }}</a>
                                                                </td>

                                                                <td data-label="" class="text-end">
                                                                    <div class="dropdown table">
                                                                        <a class="text-muted" href="javascript:void(0);"
                                                                            role="button" data-bs-toggle="dropdown"
                                                                            aria-haspopup="true" aria-expanded="false">
                                                                            <i class="bi bi-three-dots-vertical"></i>
                                                                        </a>
                                                                        <div class="dropdown-menu dropdown-menu-end">
                                                                            <a href="{{ route('seller.product.create', ['id' => @$product->uuid]) }}"
                                                                                class="dropdown-item">
                                                                                Edit
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="7" class="text-center">
                                                                No products to show.
                                                            </td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
@endpush
@push('js')
    <script src="{{ asset('assets/dashboard/js/apexcharts.js') }}"></script>
    <script>
        var options = {
            chart: {
                type: 'bar',
                height: 480,
            },
            colors: ["#092579", "#0732b3"],
            series: [{
                name: 'Average Monthly Orders',
                data: {!! $avg_orders->values() !!}
            }],
            xaxis: {
                categories: ['Jan', "Feb", 'Mar', "April", 'May', "Jun", 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
            },
            plotOptions: {
                bar: {
                    columnWidth: '45%',
                    distributed: true,
                }
            },
            dataLabels: {
                enabled: true
            },
            legend: {
                show: false
            },
        }

        var chart = new ApexCharts(document.querySelector("#chart"), options);

        chart.render();
    </script>
    <script>
        var options = {
            series: {!! $order_summary->values() !!},
            chart: {
                width: 480,
                type: 'donut',
            },
            labels: {!! $order_summary->keys() !!},
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }]
        };

        var chart = new ApexCharts(document.querySelector("#chart2"), options);
        chart.render();
    </script>
@endpush