@extends('template.coin.layouts.admin-base')
@section('title', __('Sales Dashboard'))
@section('content')

<div class="tabs-content">
    <div class="tab-content">
        <div class="sales-dashboard">
            <h5>Sales Dashboard</h5>
            <div class="brands-and-ibs">
                <div class="dropdown bootstrap-select form-control">
                    <select id="brand-select" class="selectpicker form-control">
                        <option value="">All brands</option>
                        <option value="fincore">Fincore</option>
                    </select>
                    <button
                        type="button"
                        tabindex="-1"
                        class="btn dropdown-toggle bs-placeholder btn-light"
                        data-toggle="dropdown"
                        role="combobox"
                        aria-owns="bs-select-2"
                        aria-haspopup="listbox"
                        aria-expanded="false"
                        data-id="brand-select"
                        title="All brands"
                    >
                        <div class="filter-option">
                            <div class="filter-option-inner"><div class="filter-option-inner-inner">All brands</div></div>
                        </div>
                    </button>
                    <div class="dropdown-menu" style="max-height: 94px; overflow: hidden; min-height: 0px;">
                        <div class="inner show" role="listbox" id="bs-select-2" tabindex="-1" aria-activedescendant="bs-select-2-0" style="max-height: 80px; overflow-y: auto; min-height: 0px;">
                            <ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;">
                                <li class="selected active">
                                    <a role="option" class="dropdown-item active selected" id="bs-select-2-0" tabindex="0" aria-setsize="2" aria-posinset="1" aria-selected="true"><span class="text">All brands</span></a>
                                </li>
                                <li>
                                    <a role="option" class="dropdown-item" id="bs-select-2-1" tabindex="0"><span class="text">Fincore</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="dropdown bootstrap-select form-control">
                    <select id="ib-select" class="selectpicker form-control">
                        <option value="">All IBs</option>
                        <option value="6">Morning Star</option>
                    </select>
                    <button
                        type="button"
                        tabindex="-1"
                        class="btn dropdown-toggle bs-placeholder btn-light"
                        data-toggle="dropdown"
                        role="combobox"
                        aria-owns="bs-select-3"
                        aria-haspopup="listbox"
                        aria-expanded="false"
                        data-id="ib-select"
                        title="All IBs"
                    >
                        <div class="filter-option">
                            <div class="filter-option-inner"><div class="filter-option-inner-inner">All IBs</div></div>
                        </div>
                    </button>
                    <div class="dropdown-menu" style="max-height: 94px; overflow: hidden; min-height: 0px;">
                        <div class="inner show" role="listbox" id="bs-select-3" tabindex="-1" aria-activedescendant="bs-select-3-0" style="max-height: 80px; overflow-y: auto; min-height: 0px;">
                            <ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;">
                                <li class="selected active">
                                    <a role="option" class="dropdown-item active selected" id="bs-select-3-0" tabindex="0" aria-setsize="2" aria-posinset="1" aria-selected="true"><span class="text">All IBs</span></a>
                                </li>
                                <li>
                                    <a role="option" class="dropdown-item" id="bs-select-3-1" tabindex="0"><span class="text">Morning Star</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-buttons">
                <div class="btn btn-primary active" data-period-value="">All</div>
                <div class="btn btn-primary" data-period-value="$gte=1641772801">Today</div>
                <div class="btn btn-primary" data-period-value="$gte=1641686401&amp;$lte=1641772801">Yesterday</div>
                <div class="btn btn-primary" data-period-value="$gte=1641772800">This Week</div>
                <div class="btn btn-primary" data-period-value="$gte=1641168000&amp;$lte=1641772800">Past Week</div>
                <div class="btn btn-primary" data-period-value="$gte=1640995200">This Month</div>
                <div class="btn btn-primary" data-period-value="$gte=1638316800&amp;$lte=1640995200">Past Month</div>
                <div class="btn btn-primary" data-period-value="$gte=1641168001">Last 7 days</div>
                <div class="btn btn-primary" data-period-value="$gte=1639180801">Last 30 days</div>
            </div>
            <div class="stat-boxes">
                <div class="stat-box">
                    <div class="top">
                        <div class="part">
                            <div class="val"><span id="stats-users-ftd">1</span>&nbsp;/&nbsp;<span id="stats-users-total">3</span></div>
                            <div>FTD / Total Customers</div>
                        </div>
                        <div class="part">
                            <i class="material-icons">people_alt</i>
                        </div>
                    </div>
                    <div class="bottom">Online Customers: <span id="stats-users-online">0</span></div>
                </div>
                <div class="stat-box">
                    <div class="top">
                        <div class="part">
                            <div class="val" id="stats-deposits-total">$500.00</div>
                            <div>Total Deposits</div>
                        </div>
                        <div class="part">
                            <i class="material-icons">payment</i>
                        </div>
                    </div>
                    <div class="bottom">Net Deposits: <span id="stats-deposits-net">$500.00</span></div>
                </div>
                <div class="stat-box">
                    <div class="top">
                        <div class="part">
                            <div class="val" id="stats-pnl-closed">$100.00</div>
                            <div>Closed P&amp;L</div>
                        </div>
                        <div class="part">
                            <i class="material-icons">request_quote</i>
                        </div>
                    </div>
                    <div class="bottom">Open P&amp;L: <span id="stats-pnl-open">$-22.75</span></div>
                </div>
                <div class="stat-box">
                    <div class="top">
                        <div class="part">
                            <div class="val" id="stats-withdrawals-total">$0.00</div>
                            <div>Withdrawals</div>
                        </div>
                        <div class="part">
                            <i class="material-icons">reply</i>
                        </div>
                    </div>
                    <div class="bottom">&nbsp;Withdrawals rate: <span id="stats-withdrawals-rate">0.00%</span></div>
                </div>
            </div>
            <div class="row">
                <div class="col bordered-item">
                    <div class="radio-filters">
                        <input type="radio" name="managers-stats-mode" id="managers-stats-mode-deposits" value="deposits" />
                        <label for="managers-stats-mode-deposits">Deposit $</label>
                        <input type="radio" name="managers-stats-mode" id="managers-stats-mode-cnt" value="cnt" />
                        <label for="managers-stats-mode-cnt">Deposit #</label>
                    </div>
                    <div class="stats-total">Total: <span id="stats-managers-total">$500.00</span></div>
                    <div id="managers-stats-chart" data-highcharts-chart="2" style="overflow: hidden;">
                        <div
                            id="highcharts-g6toa2y-6"
                            dir="ltr"
                            class="highcharts-container"
                            style="
                                position: relative;
                                overflow: hidden;
                                width: 529px;
                                height: 400px;
                                text-align: left;
                                line-height: normal;
                                z-index: 0;
                                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                                user-select: none;
                                touch-action: manipulation;
                                outline: none;
                                color: rgb(255, 255, 255);
                            "
                        >
                            <svg
                                version="1.1"
                                class="highcharts-root"
                                style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; fill: #ffffff;"
                                xmlns="http://www.w3.org/2000/svg"
                                width="529"
                                height="400"
                                viewBox="0 0 529 400"
                            >
                                <desc>Created with Highcharts 9.1.2</desc>
                                <defs>
                                    <clipPath id="highcharts-g6toa2y-7-"><rect x="0" y="0" width="375" height="425" fill="none"></rect></clipPath>
                                </defs>
                                <rect fill="#374054" class="highcharts-background" x="0" y="0" width="529" height="400" rx="0" ry="0"></rect>
                                <rect fill="none" class="highcharts-plot-background" x="94" y="10" width="425" height="375"></rect>
                                <g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1">
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 94 385.5 L 519 385.5" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 94 10.5 L 519 10.5" opacity="1"></path>
                                </g>
                                <g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1">
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 93.5 10 L 93.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 164.5 10 L 164.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 235.5 10 L 235.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 306.5 10 L 306.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 376.5 10 L 376.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 447.5 10 L 447.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 518.5 10 L 518.5 385" opacity="1"></path>
                                </g>
                                <rect fill="none" class="highcharts-plot-border" data-z-index="1" x="94" y="10" width="425" height="375"></rect>
                                <g class="highcharts-axis highcharts-xaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" data-z-index="7" d="M 93.5 10 L 93.5 385"></path></g>
                                <g class="highcharts-axis highcharts-yaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 94 385 L 519 385"></path></g>
                                <g class="highcharts-series-group" data-z-index="3">
                                    <g
                                        class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker"
                                        data-z-index="0.1"
                                        opacity="1"
                                        transform="translate(519,385) rotate(90) scale(-1,1) scale(1 1)"
                                        clip-path="url(#highcharts-g6toa2y-7-)"
                                        width="425"
                                        height="375"
                                    >
                                        <rect x="98" y="72" width="180" height="354" fill="#7cb5ec" opacity="1" class="highcharts-point highcharts-color-0"></rect>
                                    </g>
                                    <g
                                        class="highcharts-markers highcharts-series-0 highcharts-bar-series highcharts-color-0"
                                        data-z-index="0.1"
                                        opacity="1"
                                        transform="translate(519,385) rotate(90) scale(-1,1) scale(1 1)"
                                        clip-path="none"
                                    ></g>
                                </g>
                                <g class="highcharts-exporting-group" data-z-index="3"></g>
                                <text x="10" class="highcharts-title" data-z-index="4" style="color: #333333; font-size: 18px; fill: #333333;" y="24"></text>
                                <text x="10" class="highcharts-subtitle" data-z-index="4" style="color: #666666; fill: #666666;" y="24"></text>
                                <text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color: #666666; fill: #666666;" y="397"></text>
                                <g class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker" data-z-index="6" opacity="1" transform="translate(94,10) scale(1 1)">
                                    <g class="highcharts-label highcharts-data-label highcharts-data-label-color-0" data-z-index="1" transform="translate(353,175)">
                                        <text x="5" data-z-index="1" y="16" style="color: #ffffff; font-size: 11px; font-weight: bold; fill: #ffffff;">500</text>
                                    </g>
                                </g>
                                <g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7">
                                    <text x="79" style="color: #ffffff; cursor: default; font-size: 11px; fill: #ffffff;" text-anchor="end" transform="translate(0,0)" y="202" opacity="1">Morning Star</text>
                                </g>
                                <g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"></g>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="col bordered-item">
                    <div class="radio-filters">
                        <input type="radio" name="country-deposits-stats-mode" id="country-deposits-stats-mode-deposits" value="deposits" />
                        <label for="country-deposits-stats-mode-deposits">Deposit $</label>
                        <input type="radio" name="country-deposits-stats-mode" id="country-deposits-stats-mode-cnt" value="cnt" />
                        <label for="country-deposits-stats-mode-cnt">Deposit #</label>
                    </div>
                    <div class="stats-total">Total: <span id="stats-country-deposits-total">$500.00</span></div>
                    <div id="country-deposits-stats-chart" data-highcharts-chart="3" style="overflow: hidden;">
                        <div
                            id="highcharts-g6toa2y-9"
                            dir="ltr"
                            class="highcharts-container"
                            style="
                                position: relative;
                                overflow: hidden;
                                width: 529px;
                                height: 400px;
                                text-align: left;
                                line-height: normal;
                                z-index: 0;
                                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                                user-select: none;
                                touch-action: manipulation;
                                outline: none;
                                color: rgb(255, 255, 255);
                            "
                        >
                            <svg
                                version="1.1"
                                class="highcharts-root"
                                style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; fill: #ffffff;"
                                xmlns="http://www.w3.org/2000/svg"
                                width="529"
                                height="400"
                                viewBox="0 0 529 400"
                            >
                                <desc>Created with Highcharts 9.1.2</desc>
                                <defs>
                                    <clipPath id="highcharts-g6toa2y-10-"><rect x="0" y="0" width="375" height="436" fill="none"></rect></clipPath>
                                </defs>
                                <rect fill="#374054" class="highcharts-background" x="0" y="0" width="529" height="400" rx="0" ry="0"></rect>
                                <rect fill="none" class="highcharts-plot-background" x="83" y="10" width="436" height="375"></rect>
                                <g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1">
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 83 385.5 L 519 385.5" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 83 10.5 L 519 10.5" opacity="1"></path>
                                </g>
                                <g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1">
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 82.5 10 L 82.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 155.5 10 L 155.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 227.5 10 L 227.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 300.5 10 L 300.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 373.5 10 L 373.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 445.5 10 L 445.5 385" opacity="1"></path>
                                    <path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 518.5 10 L 518.5 385" opacity="1"></path>
                                </g>
                                <rect fill="none" class="highcharts-plot-border" data-z-index="1" x="83" y="10" width="436" height="375"></rect>
                                <g class="highcharts-axis highcharts-xaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" data-z-index="7" d="M 82.5 10 L 82.5 385"></path></g>
                                <g class="highcharts-axis highcharts-yaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 83 385 L 519 385"></path></g>
                                <g class="highcharts-series-group" data-z-index="3">
                                    <g
                                        class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker"
                                        data-z-index="0.1"
                                        opacity="1"
                                        transform="translate(519,385) rotate(90) scale(-1,1) scale(1 1)"
                                        clip-path="url(#highcharts-g6toa2y-10-)"
                                        width="436"
                                        height="375"
                                    >
                                        <rect x="98" y="74" width="180" height="363" fill="#7cb5ec" opacity="1" class="highcharts-point highcharts-color-0"></rect>
                                    </g>
                                    <g
                                        class="highcharts-markers highcharts-series-0 highcharts-bar-series highcharts-color-0"
                                        data-z-index="0.1"
                                        opacity="1"
                                        transform="translate(519,385) rotate(90) scale(-1,1) scale(1 1)"
                                        clip-path="none"
                                    ></g>
                                </g>
                                <g class="highcharts-exporting-group" data-z-index="3"></g>
                                <text x="10" class="highcharts-title" data-z-index="4" style="color: #333333; font-size: 18px; fill: #333333;" y="24"></text>
                                <text x="10" class="highcharts-subtitle" data-z-index="4" style="color: #666666; fill: #666666;" y="24"></text>
                                <text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color: #666666; fill: #666666;" y="397"></text>
                                <g class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker" data-z-index="6" opacity="1" transform="translate(83,10) scale(1 1)">
                                    <g class="highcharts-label highcharts-data-label highcharts-data-label-color-0" data-z-index="1" transform="translate(362,175)">
                                        <text x="5" data-z-index="1" y="16" style="color: #ffffff; font-size: 11px; font-weight: bold; fill: #ffffff;">500</text>
                                    </g>
                                </g>
                                <g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7">
                                    <text x="68" style="color: #ffffff; cursor: default; font-size: 11px; fill: #ffffff;" text-anchor="end" transform="translate(0,0)" y="202" opacity="1">Afganistan</text>
                                </g>
                                <g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"></g>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col bordered-item">
                    <div class="radio-filters">
                        <input type="radio" name="clients-stats-status" id="clients-stats-status-0" value="0" />
                        <label for="clients-stats-status-0">Leads</label>
                        <input type="radio" name="clients-stats-status" id="clients-stats-status-1" value="1" />
                        <label for="clients-stats-status-1">Clients</label>
                    </div>
                    <div id="clients-stats-status-chart" data-highcharts-chart="4" style="overflow: hidden;">
                        <div
                            id="highcharts-g6toa2y-12"
                            dir="ltr"
                            class="highcharts-container"
                            style="
                                position: relative;
                                overflow: hidden;
                                width: 529px;
                                height: 400px;
                                text-align: left;
                                line-height: normal;
                                z-index: 0;
                                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                                user-select: none;
                                touch-action: manipulation;
                                outline: none;
                                color: rgb(255, 255, 255);
                            "
                        >
                            <svg
                                version="1.1"
                                class="highcharts-root"
                                style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; fill: #ffffff;"
                                xmlns="http://www.w3.org/2000/svg"
                                width="529"
                                height="400"
                                viewBox="0 0 529 400"
                            >
                                <desc>Created with Highcharts 9.1.2</desc>
                                <defs>
                                    <clipPath id="highcharts-g6toa2y-14-"><rect x="0" y="0" width="509" height="334" fill="none"></rect></clipPath>
                                </defs>
                                <rect fill="#374054" class="highcharts-background" x="0" y="0" width="529" height="400" rx="0" ry="0"></rect>
                                <rect fill="none" class="highcharts-plot-background" x="10" y="10" width="509" height="334"></rect>
                                <rect fill="none" class="highcharts-plot-border" data-z-index="1" x="10" y="10" width="509" height="334"></rect>
                                <g class="highcharts-series-group" data-z-index="3">
                                    <g class="highcharts-series highcharts-series-0 highcharts-pie-series highcharts-tracker" data-z-index="0.1" opacity="1" transform="translate(10,10) scale(1 1)">
                                        <path
                                            fill="#7cb5ec"
                                            d="M 254.46802330701985 10.000003256397775 A 157 157 0 1 1 254.28193014972277 10.000151447396604 M 254.5 167 A 0 0 0 1 0 254.5 167"
                                            transform="translate(0,0)"
                                            opacity="1"
                                            stroke-linejoin="round"
                                            class="highcharts-point highcharts-color-0"
                                        ></path>
                                    </g>
                                    <g class="highcharts-markers highcharts-series-0 highcharts-pie-series" data-z-index="0.1" opacity="1" transform="translate(10,10) scale(1 1)"></g>
                                </g>
                                <g class="highcharts-exporting-group" data-z-index="3"></g>
                                <text x="10" class="highcharts-title" data-z-index="4" style="color: #333333; font-size: 18px; fill: #333333;" y="24"></text>
                                <text x="10" class="highcharts-subtitle" data-z-index="4" style="color: #666666; fill: #666666;" y="24"></text>
                                <text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color: #666666; fill: #666666;" y="397"></text>
                                <g class="highcharts-legend highcharts-no-tooltip" data-z-index="7" transform="translate(198,356)">
                                    <rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="132" height="29" visibility="visible"></rect>
                                    <g data-z-index="1">
                                        <g>
                                            <g class="highcharts-legend-item highcharts-pie-series highcharts-color-0" data-z-index="1" transform="translate(8,3)">
                                                <text x="21" style="color: #ffffff; cursor: pointer; font-size: 12px; font-weight: bold; fill: #ffffff;" text-anchor="start" data-z-index="2" y="15">
                                                    New:
                                                    <tspan style="font-weight: bold;">1 (100.0%)</tspan>
                                                </text>
                                                <rect x="2" y="4" width="12" height="12" fill="#7cb5ec" rx="6" ry="6" class="highcharts-point" data-z-index="3"></rect>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="col bordered-item">
                    <div class="radio-filters">
                        <input type="radio" name="clients-stats-country" id="clients-stats-country-0" value="0" />
                        <label for="clients-stats-country-0">Leads</label>
                        <input type="radio" name="clients-stats-country" id="clients-stats-country-1" value="1" />
                        <label for="clients-stats-country-1">Clients</label>
                    </div>
                    <div id="clients-stats-country-chart" data-highcharts-chart="5" style="overflow: hidden;">
                        <div
                            id="highcharts-g6toa2y-15"
                            dir="ltr"
                            class="highcharts-container"
                            style="
                                position: relative;
                                overflow: hidden;
                                width: 529px;
                                height: 400px;
                                text-align: left;
                                line-height: normal;
                                z-index: 0;
                                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                                user-select: none;
                                touch-action: manipulation;
                                outline: none;
                                color: rgb(255, 255, 255);
                            "
                        >
                            <svg
                                version="1.1"
                                class="highcharts-root"
                                style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; fill: #ffffff;"
                                xmlns="http://www.w3.org/2000/svg"
                                width="529"
                                height="400"
                                viewBox="0 0 529 400"
                            >
                                <desc>Created with Highcharts 9.1.2</desc>
                                <defs>
                                    <clipPath id="highcharts-g6toa2y-17-"><rect x="0" y="0" width="509" height="334" fill="none"></rect></clipPath>
                                </defs>
                                <rect fill="#374054" class="highcharts-background" x="0" y="0" width="529" height="400" rx="0" ry="0"></rect>
                                <rect fill="none" class="highcharts-plot-background" x="10" y="10" width="509" height="334"></rect>
                                <rect fill="none" class="highcharts-plot-border" data-z-index="1" x="10" y="10" width="509" height="334"></rect>
                                <g class="highcharts-series-group" data-z-index="3">
                                    <g class="highcharts-series highcharts-series-0 highcharts-pie-series highcharts-tracker" data-z-index="0.1" opacity="1" transform="translate(10,10) scale(1 1)">
                                        <path
                                            fill="#7cb5ec"
                                            d="M 254.46802330701985 10.000003256397775 A 157 157 0 1 1 254.28193014972277 10.000151447396604 M 254.5 167 A 0 0 0 1 0 254.5 167"
                                            transform="translate(0,0)"
                                            opacity="1"
                                            stroke-linejoin="round"
                                            class="highcharts-point highcharts-color-0"
                                        ></path>
                                    </g>
                                    <g class="highcharts-markers highcharts-series-0 highcharts-pie-series" data-z-index="0.1" opacity="1" transform="translate(10,10) scale(1 1)"></g>
                                </g>
                                <g class="highcharts-exporting-group" data-z-index="3"></g>
                                <text x="10" class="highcharts-title" data-z-index="4" style="color: #333333; font-size: 18px; fill: #333333;" y="24"></text>
                                <text x="10" class="highcharts-subtitle" data-z-index="4" style="color: #666666; fill: #666666;" y="24"></text>
                                <text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color: #666666; fill: #666666;" y="397"></text>
                                <g class="highcharts-legend highcharts-no-tooltip" data-z-index="7" transform="translate(179,356)">
                                    <rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="171" height="29" visibility="visible"></rect>
                                    <g data-z-index="1">
                                        <g>
                                            <g class="highcharts-legend-item highcharts-pie-series highcharts-color-0" data-z-index="1" transform="translate(8,3)">
                                                <text x="21" style="color: #ffffff; cursor: pointer; font-size: 12px; font-weight: bold; fill: #ffffff;" text-anchor="start" data-z-index="2" y="15">
                                                    Afganistan:
                                                    <tspan style="font-weight: bold;">1 (100.0%)</tspan>
                                                </text>
                                                <rect x="2" y="4" width="12" height="12" fill="#7cb5ec" rx="6" ry="6" class="highcharts-point" data-z-index="3"></rect>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection