@extends('layouts.app')

@section('title', 'VMS | ' . \App\CPU\translate('Dashboard'))

@push('css_or_js')
    <meta property="og:title" content="Welcome To VMS Home" />
    <meta property="og:url" content="{{ env('APP_URL') }}">
    <meta property="og:description" content="VMS">

    <meta property="twitter:title" content="Welcome To VMS Home" />
    <meta property="twitter:url" content="{{ env('APP_URL') }}">
    <meta property="twitter:description" content="VMS">
    <link rel="stylesheet" href="{{ asset('assets') }}/css/bootstrap-datepicker.min.css" />
    <style>
        .selectChange {
            padding: 11px
        }

        .tabel th {
            text-align: left !important;
        }

        .tabel td.rightAllign {
            text-align: right !important;
        }
    </style>
@endpush

@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Year To
                        Date</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Dashboards</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-fluid">
                <div class="card card-flush h-xl-100">
                    <div class="row gx-5 gx-xl-10">
                        <div class="card-header pt-5 pb-5">
                            <form class="row" action="{{ url()->current() }}" method="GET" style="width:100%;">
                                @if (auth('admin')->user()->role->is_tamer_team == 1)
                                    <div class="col-3 d-flex align-items-center position-relative my-1 ">
                                        <select aria-label="Select a Vendor" id="select_vendor" name="select_vendor"
                                            data-control="select2" data-placeholder="Vendor Name"
                                            onchange="this.form.submit()"
                                            class="form-select form-select-sm form-select-solid selectChange">
                                            <option value="0" selected disabled>Vendors</option>
                                            <option value="no">No select</option>
                                            @foreach ($vendors_nos as $VID =>$vendor_item)
                                                <option value="{{ $vendor_item['VENDOR_NO'] }}"
                                                    @isset($_GET['select_vendor']) @if ($vendor_item['VENDOR_NO'] == $_GET['select_vendor']) {{ 'selected' }} @endif @endisset>
                                                    {{ $vendor_item['VENDOR_NO'] }} {{ $vendor_item['VENDOR_NAME'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                @elseif ($vendors_count > 1)
                                {{-- @dd($vendors_nos,$business_nos) --}}
                                    <div class="col-3 d-flex align-items-center position-relative my-1 ">
                                        <select aria-label="Select a Vendor" id="select_vendor" name="select_vendor"
                                            data-control="select2" data-placeholder="Vendor Name"
                                            onchange="this.form.submit()"
                                            class="form-select form-select-sm form-select-solid selectChange">
                                            <option value="0" selected disabled>Vendors</option>
                                            <option value="no">No select</option>
                                            @foreach ($vendors_nos as $vendor_no_index => $vendor_no_value)
                                                <option
                                            @if ($business_nos[$vendor_no_index] != null && $business_nos != 0) value="{{ $vendor_no_value }}-{{ $business_nos[$vendor_no_index] }}" @else value="{{ $vendor_no_value }}" @endif
                                                    @isset($_GET['select_vendor']) @if (
                                                        $_GET['select_vendor'] == $vendor_no_value . '-' . $business_nos[$vendor_no_index] ||
                                                            $_GET['select_vendor'] == $vendor_no_value) {{ 'selected' }} @endif @endisset>
                                                    {{ $vendor_no_value }}
                                                    @if ($business_nos[$vendor_no_index] != null)
                                                        - {{ $business_nos[$vendor_no_index] }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @else
                                    <input type="hidden" name="select_vendor" value="{{ $vendors_nos[0] ?? null }}">
                                @endif
                                <div class="col-3 d-flex align-items-center position-relative my-1 ">
                                    <input placeholder="Search Date Month" onchange="this.form.submit()"
                                        class="form-control form-control-solid startdate input dateSelect" type="text"
                                        name="date_from" value="{{ $_GET['date_from'] ?? '' }}" readonly="readonly">
                                </div>
                            </form>
                            <!--begin::Row-->
                        </div>
                    </div>

                </div>
                <div class="row gx-5 gx-xl-10">
                    <!--begin::Col-->
                    <div class="col-xxl-6 mb-5 mb-xl-10">
                        <!--begin::Chart widget 8-->
                        <div class="card card-flush h-xl-100">
                            <!--begin::Header-->
                            <div class="card-header pt-5">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-dark">Areas Level</span>
                                    <span class="text-gray-400 mt-1 fw-semibold fs-6">Amounts Per Areas Overview</span>
                                </h3>
                                <!--end::Title-->
                                {{-- @if (auth('admin')->user()->admin_role_id == 1)
													<form action="{{ url()->current() }}" method="GET" style="width:100%;">
														<select aria-label="Select a Vendor" id="area_vendor"
															name="area_vendor" data-control="select2"
															data-placeholder="Vendor Name" onchange="this.form.submit()"
															class="form-select form-select-sm form-select-solid selectChange ">
															<option value="0" selected disabled>Vendors</option>
															<option value="no">No select</option>
															@foreach ($VendorsID as $VID)
																<option value="{{ $VID->VENDOR_NO }}" @isset($_GET['area_vendor']) @if ($VID->VENDOR_NO == $_GET['area_vendor']) {{ 'selected' }} @endif @endisset>
																	{{ $VID->VENDOR_NO }} {{ $VID->VENDOR_NAME }}</option>
															@endforeach
														</select>
													</form>
													@endif --}}
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body pt-6">
                                <!--begin::Tab content-->
                                <div class="tab-content">
                                    <!--begin::Tab pane-->
                                    <div class="tab-pane fade active show" id="kt_chart_widget_8_month_tab" role="tabpanel">
                                        <!--begin::Statistics-->
                                        <div class="mb-5">
                                            <!--begin::Statistics-->
                                            <div class="d-flex align-items-center mb-2">
                                                <span
                                                    class="fs-2 fw-bold text-gray-800 me-2 lh-1 ls-n2">{{ number_format($areasAmount, 2) }}</span>
                                                <span class="fs-1 fw-semibold text-gray-400 me-1 mt-n1">SAR</span>
                                                <span class="badge badge-light-warning fs-base" style="display:none;">
                                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
                                                    <span class="svg-icon svg-icon-5 svg-icon-warning ms-n1">
                                                        <svg width="24" height="24" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <rect opacity="0.5" x="13" y="6"
                                                                width="13" height="2" rx="1"
                                                                transform="rotate(90 13 6)" fill="currentColor" />
                                                            <path
                                                                d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z"
                                                                fill="currentColor" />
                                                        </svg>
                                                    </span>
                                                    <!--end::Svg Icon-->{{ number_format($areasAmount, 2) }} SAR
                                                </span>
                                            </div>
                                            <!--end::Statistics-->
                                            <!--begin::Description-->
                                            <span class="fs-6 fw-semibold text-gray-400">Avarage amout per area</span>
                                            <!--end::Description-->
                                        </div>
                                        <!--end::Statistics-->
                                        <!--begin::Chart-->
                                        <div id="kt_chart_widget_8_month_chart" class="ms-n5 min-h-auto"
                                            style="height: 275px"></div>
                                        <!--end::Chart-->
                                        <!--begin::Items-->
                                        <div class="d-flex flex-wrap pt-5">
                                            <!--begin::Item-->
                                            <div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
                                                <!--begin::Item-->
                                                <div class="d-flex align-items-center mb-3 mb-sm-6">
                                                    <!--begin::Bullet-->
                                                    <span class="bullet bullet-dot bg-primary me-2 h-10px w-10px"></span>
                                                    <!--end::Bullet-->
                                                    <!--begin::Label-->
                                                    <span class="fw-bold text-gray-600 fs-6">CENTRAL ({{ $areasAmountC }})
                                                        SAR</span>
                                                    <!--end::Label-->
                                                </div>
                                                <!--ed::Item-->

                                            </div>
                                            <!--ed::Item-->
                                            <!--begin::Item-->
                                            <div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
                                                <!--begin::Item-->
                                                <div class="d-flex align-items-center mb-3 mb-sm-6">
                                                    <!--begin::Bullet-->
                                                    <span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
                                                    <!--end::Bullet-->
                                                    <!--begin::Label-->
                                                    <span class="fw-bold text-gray-600 fs-6">WESTERN ({{ $areasAmountW }})
                                                        SAR</span>
                                                    <!--end::Label-->
                                                </div>
                                                <!--ed::Item-->
                                            </div>
                                            <!--ed::Item-->
                                            <!--begin::Item-->
                                            <div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
                                                <!--begin::Item-->
                                                <div class="d-flex align-items-center mb-3 mb-sm-6">
                                                    <!--begin::Bullet-->
                                                    <span class="bullet bullet-dot bg-warning me-2 h-10px w-10px"></span>
                                                    <!--end::Bullet-->
                                                    <!--begin::Label-->
                                                    <span class="fw-bold text-gray-600 fs-6">EASTERN ({{ $areasAmountE }})
                                                        SAR</span>
                                                    <!--end::Label-->
                                                </div>
                                                <!--ed::Item-->
                                            </div>
                                            <!--ed::Item-->

                                            <!--begin::Item-->
                                            <div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
                                                <!--begin::Item-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Bullet-->
                                                    <span class="bullet bullet-dot bg-danger me-2 h-10px w-10px"></span>
                                                    <!--end::Bullet-->
                                                    <!--begin::Label-->
                                                    <span class="fw-bold text-gray-600 fs-6">SOUTHERN
                                                        ({{ $areasAmountS }}) SAR</span>
                                                    <!--end::Label-->
                                                </div>
                                                <!--ed::Item-->
                                            </div>
                                            <!--ed::Item-->
                                        </div>
                                        <!--ed::Items-->
                                    </div>
                                    <!--end::Tab pane-->
                                </div>
                                <!--end::Tab content-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Chart widget 8-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-xl-6">
                        <!--begin::Chart widget 10-->
                        <div class="card card-flush h-xl-100" style="max-height:95%;">
                            <!--begin::Header-->
                            <div class="card-header pt-7">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">Months Level</span>
                                    <span class="text-gray-400 mt-1 fw-semibold fs-6">Amounts Per Months overview</span>
                                </h3>
                                <!--end::Title-->
                                <!--begin::Toolbar-->
                                <!--<div class="card-toolbar">-->
                                {{-- @if (auth('admin')->user()->admin_role_id == 1)
																	<form action="{{ url()->current() }}" method="GET" style="width:100%;">
																		<select aria-label="Select a Vendor" id="month_vendor"
																			name="month_vendor" data-control="select2"
																			data-placeholder="Vendor Name" onchange="this.form.submit()"
																			class="form-select form-select-sm form-select-solid selectChange">
																			<option value="0" selected disabled>Vendors</option>
																			<option value="no">No select</option>
																			@foreach ($VendorsID as $VID)
																				<option value="{{ $VID->VENDOR_NO }}" @isset($_GET['month_vendor']) @if ($VID->VENDOR_NO == $_GET['month_vendor']) {{ 'selected' }} @endif @endisset>
																					{{ $VID->VENDOR_NO }} {{ $VID->VENDOR_NAME }}</option>
																			@endforeach
																		</select>
																	</form>
																@endif --}}
                                <!--</div>-->
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Nav-->
                            <ul class="nav nav-pills nav-pills-custom mb-3 mx-9">

                                <br><br><br><br><br><br>
                            </ul>
                            <!--end::Nav-->

                            <!--begin::Body-->
                            <div class="card-body d-flex flex-column justify-content-between pb-5 px-0">
                                <!--begin::Tab Content-->
                                <div class="tab-content ps-4 pe-6">
                                    <!--begin::Tap pane-->
                                    <div class="tab-pane fade active show" id="kt_charts_widget_10_tab_content_1">
                                        <!--begin::Chart-->
                                        <div id="kt_charts_widget_10_chart_1" class="min-h-auto" style="height: 270px">
                                        </div>
                                        <!--end::Chart-->
                                    </div>
                                    <!--end::Tap pane-->
                                </div>
                                <!--end::Tab Content-->
                            </div>
                            <!--end: Card Body-->
                        </div>
                        <!--end::Chart widget 10-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->



                <!--begin::Row-->
                <div class="row gx-5 gx-xl-10">
                    <!--begin::Col-->
                    <div class="col-xl-6 mb-5 mb-xl-12">
                        <!--begin::Table widget 11-->
                        <div class="card card-flush h-xl-100">
                            <!--begin::Header-->
                            <div class="card-header pt-5">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">Top 10 Customers</span>
                                </h3>
                                <!--end::Title-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body  flex-column py-3">
                                <!--begin::Block-->
                                <div class="m-0"></div>
                                <!--end::Block-->
                                <!--begin::Table container-->
                                <div class="table-responsive mb-n2">
                                    <!--begin::Table-->
                                    <table class="table table-row-dashed gs-0 gy-4">
                                        <!--begin::Table head-->
                                        <thead>
                                            <tr class="fs-7 fw-bold border-0 text-gray-400">
                                                <th class="">Customer Name</th>
                                                <th class="">KBD Amount</th>
                                            </tr>
                                        </thead>
                                        <!--end::Table head-->
                                        <!--begin::Table body-->
                                        <tbody>
                                            @foreach ($top10Customers as $tencustomers)
                                                <tr>
                                                    <td>
                                                        <a href="#"
                                                            class="text-gray-600 fw-bold text-hover-primary mb-1 fs-6">{{ $tencustomers['CUSTOMER_NAME'] }}</a>
                                                    </td>
                                                    <td class="d-flex align-items-center border-0">
                                                        <span
                                                            class="fw-bold text-gray-800 fs-6 me-3">{{ number_format($tencustomers['KBD_AMOUNT'], 0) }}</span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    <!--end::Table-->
                                </div>
                                <!--end::Table container-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Table Widget 11-->
                    </div>
                    <!--end::Col-->

                    <!--begin::Col-->
                    <div class="col-xl-6 mb-5 mb-xl-12">
                        <!--begin::Table widget 11-->
                        <div class="card card-flush h-xl-100">
                            <!--begin::Header-->
                            <div class="card-header pt-5">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">Top 10 Items</span>
                                </h3>
                                <!--end::Title-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body d-flex justify-content-between flex-column py-3">
                                <!--begin::Block-->
                                <div class="m-0"></div>
                                <!--end::Block-->
                                <!--begin::Table container-->
                                <div class="table-responsive mb-n2">
                                    <!--begin::Table-->
                                    <table class="table table-row-dashed gs-0 gy-4">
                                        <!--begin::Table head-->
                                        <thead>
                                            <tr class="fs-7 fw-bold border-0 text-gray-400">
                                                <th class="min-w-300px">Item Name</th>
                                                <th class="min-w-300px">Item Code</th>
                                                <th class="min-w-100px">KBD Amount</th>
                                            </tr>
                                        </thead>
                                        <!--end::Table head-->
                                        <!--begin::Table body-->
                                        <tbody>
                                            @foreach ($top10Items as $tenitems)
                                                <tr>
                                                    <td>
                                                        <a href="#"
                                                            class="text-gray-600 fw-bold text-hover-primary mb-1 fs-6">{{ $tenitems['ITEM_NAME_E'] }}</a>
                                                    </td>
                                                    <td>
                                                        <a href="#"
                                                            class="text-gray-600 fw-bold text-hover-primary mb-1 fs-6">{{ $tenitems['ITEM_NO'] }}</a>
                                                    </td>
                                                    <td class="d-flex align-items-center border-0">
                                                        <span
                                                            class="fw-bold text-gray-800 fs-6 me-3">{{ number_format($tenitems['KBD_AMOUNT']) }}</span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    <!--end::Table-->
                                </div>
                                <!--end::Table container-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Table Widget 11-->
                    </div>
                    <!--end::Col-->


                    <div class="col-12 mb-5 mb-xl-10">
                        <!--begin::Chart widget 17-->
                        <div class="card card-flush h-xl-100">
                            <!--begin::Header-->
                            <div class="card-header pt-7">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-dark">Item Class Discount</span>
                                    {{-- <span class="text-gray-400 pt-2 fw-semibold fs-6">Top Selling Products</span> --}}
                                </h3>
                                <!--end::Title-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body pt-5">
                                <!--begin::Chart container-->
                                <div id="kt_charts_widget_17_chart" class="w-100 h-400px"></div>
                                <!--end::Chart container-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Chart widget 17-->
                    </div>


                </div>
                <!--end::Row-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection