@extends('layouts.master')

@section('page_title', "{$display_term} Dashboard")
@section('title', "{$display_term} Dashboard")
@section('main_item', "{$display_term} Dashboard")
@section('sub_item', "{$display_term} Dashboard")

@section('content')
    <link href="{{ asset('css/welcome.css') }}" rel="stylesheet" />
    <div class="col-8 text-right right-padding">
        <form action="{{ url('reseller/dashboard') }}" method="get" id="filter-form">
            <div class="input-group col-12 mb-2 ">
                <input type="text" class="form-control" name="dates" id="reportrange" readonly
                    style="background-color:white">
                <span class="input-group-append">
                    <button type="submit" class="btn btn-primary">Filter</button>
                </span>
            </div>
        </form>
    </div><br>
    <div class="row right-padding">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4" style="width: 500px;">
                        <h4>Day Chart</h4>
                        <div id="" class="">
                            {!! $chartjs_day->render() !!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h4>Weekly Chart</h4>
                        <div id="" class="">
                            {!! $chartjs_weekly->render() !!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h4>Monthly Chart</h4>
                        <div id="" class="">
                            {!! $chartjs_mouthly->render() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row right-padding">
        <div class="col-lg">
            <div class="card" style="height: 145px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="feather feather-smile align-self-center icon-md icon-dual-warning">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Orders Commisstion (All orders
                                        without return & cancel)</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="pending">
                                </h3>
                            </div>
                        </div>
                        <div class="col-12 align-self-center text-right" style="margin-top: 20px;">
                            <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="total_sum">
                                Rs. {{ number_format($pending_order_commission_total, 2) }}
                            </h3>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card" style="height: 145px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-file">
                                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                    <polyline points="13 2 13 9 20 9"></polyline>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Orders Commisstion
                                        (Delivered)</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="retun">
                                </h3>
                            </div>
                        </div>
                        <div class="col-12 align-self-center text-right" style="margin-top: 20px;">
                            <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="total_sum">
                                Rs. {{ number_format($delived_selling_pieces_total, 2) }}
                            </h3>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-pink" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card" style="height: 145px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-check-square align-self-center icon-md icon-dual-pink">
                                    <polyline points="9 11 12 14 22 4"></polyline>
                                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Orders Commisstion (Paid)</b>
                                </p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="delivered">
                                </h3>
                            </div>
                        </div>
                        <div class="col-12 align-self-center text-right" style="margin-top: 20px;">
                            <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="total_sum">
                                Rs. {{ number_format($paid_amount, 2) }}
                            </h3>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 55%;"
                                aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card" style="height: 145px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                    <polyline points="13 2 13 9 20 9"></polyline>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-11"><b>Total Sales Count & Value</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="total_count">
                                    {{ $total_count }}
                                </h3>
                            </div>
                        </div>
                        <div class="col-12 align-self-center text-right" style="margin-top: 20px;">
                            <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="total_sum">
                                Rs. {{ number_format($total_sum, 2) }}
                            </h3>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-blue" role="progressbar" style="width: 48%;" aria-valuenow="48"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row right-padding">
        <div class="col-lg-2">
            <div class="card" style="height: 125px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-smile align-self-center icon-md icon-dual-warning">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Pending Orders</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="pending_oders">
                                    {{ $pending_oders }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 55%;" aria-valuenow="55"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="card" style="height: 125px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-check-square align-self-center icon-md icon-dual-pink">
                                    <polyline points="9 11 12 14 22 4"></polyline>
                                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                </svg>

                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Confirmed Orders</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="confirm_oders">
                                    {{ $confirm_oders }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-purple" role="progressbar" style="width: 39%;" aria-valuenow="39"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="card" style="height: 125px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-lock icon-lg icon-dual-info">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2">
                                    </rect>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Hold Orders</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="hold_oders">
                                    {{ $hold_oders }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 48%;" aria-valuenow="48"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="card" style="height: 125px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-users align-self-center icon-md icon-dual-purple">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Not Confirm Orders</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="not_confirm">
                                    {{ $not_confirm }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 22%;" aria-valuenow="22"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="card" style="height: 125px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-smile align-self-center icon-md icon-dual-warning">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Cancel Orders</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="cancel_oders">
                                    {{ $cancel_oders }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 55%;" aria-valuenow="55"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="card" style="height: 125px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                    <polyline points="13 2 13 9 20 9"></polyline>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Dispatch Orders</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="dispatch_order_count">
                                    {{ $dispatch_order_count }}
                                </h3>

                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-blue" role="progressbar" style="width: 48%;" aria-valuenow="48"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card" style="height: 145px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-smile align-self-center icon-md icon-dual-warning">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Delivery Status (Pending)</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="pending">
                                    {{ $delivery_panding }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 55%;" aria-valuenow="55"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card" style="height: 145px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                    <polyline points="13 2 13 9 20 9"></polyline>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Delivery Status
                                        (Returned)</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="retun">
                                    {{ $retun }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-pink" role="progressbar" style="width: 55%;" aria-valuenow="55"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card" style="height: 145px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-check-square align-self-center icon-md icon-dual-pink">
                                    <polyline points="9 11 12 14 22 4"></polyline>
                                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Delivery Status (Delivered)</b>
                                </p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="delivered">
                                    {{ $delivered }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height:3px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 55%;" aria-valuenow="55"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card" style="height: 145px;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3 align-self-center">
                            <div class="icon-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                    <polyline points="13 2 13 9 20 9"></polyline>
                                </svg>
                            </div>
                        </div>
                        <div class="col-9 align-self-center text-right">
                            <div class="ml-2">
                                <p class="text-dark mb-1 font-weight-semibold font-10"><b>Total Pices QTY (All orders
                                        without return & cancel)</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold" id="retun">
                                </h3>
                            </div>
                        </div>
                        <div class="col-12 align-self-center text-right" style="margin-top: 20px;">
                            <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="total_sum">
                                {{ $total_selling_pieces_qty }}
                            </h3>
                        </div>
                        <div class="progress mt-2" style="height:3px;">
                            <div class="progress-bar bg-pink" role="progressbar" style="width: 55%;" aria-valuenow="55"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row right-padding">
        <div class="col-md-12">
            <div class="card card-eco">
                <div class="card-body">
                    <h4 class="card-title mt-0">Target Chart</h4>
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="table table-responsive">
                                <table class="table table-striped" id="leeds-resoreces">
                                    <thead class="text-primary">
                                        <tr class="table-primary">
                                            <th>Targert pieces QTY</th>
                                            <th>Selling pieces QTY</th>
                                            <th>Reminder</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td id="targert_pieces_qty">{{ $targert_pieces_qty }} </td>
                                            <td id="selling_pieces_qty"> {{ $total_selling_pieces_qty }}</td>
                                            <td id="reminder">
                                                {{ $reminder }}
                                            </td>
                                            <td id="">
                                                <span class="badge badge-success" id="targer_is_completed">Targer is
                                                    Completed</span>
                                                <span class="badge badge-danger" id="targer_is_pending">Targer is
                                                    Not Compelted</span>
                                                <span class="badge badge-info" id="not_avelable">N/A</span>
                                                <span id="load_status">
                                                    @if ($targert_pieces_qty > $selling_pieces_qty)
                                                        <span class="badge badge-danger">Targer is Not Compelted</span>
                                                    @elseif ($targert_pieces_qty == 0)
                                                        <span class="badge badge-info">N/A</span>
                                                    @elseif ($targert_pieces_qty <= $selling_pieces_qty)
                                                        <span class="badge badge-success">Targer is Completed</span>
                                                    @elseif($html == 'targer_is_not_compelted')
                                                        <span class="badge badge-danger">Targer is Not Compelted</span>
                                                    @endif
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div id="" class="">
                                {!! $chartjs->render() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).on('change', '#reportrange', function() {
            $('#reportrange').val($(this).val());
            getDateFilterTo($(this).val());
        });
        $('#targer_is_completed').hide();
        $('#targer_is_pending').hide();
        $('#targer_is_not_compelted').hide();
        $('#not_avelable').hide();

        function getDateFilterTo(dates) {
            $.ajax({
                method: 'GET',
                url: "{{ url('reseller/dashboard') }}",
                data: {
                    dates: dates,
                },
                success: function(response) {
                    let id = response;
                    $('#total_count').text(id['total_count']);
                    $('#total_sum').text(id['total_sum']);
                    $('#pending_oders').text(id['pending_oders']);
                    $('#pending').text(id['pending']);
                    $('#delivered').text(id['delivered']);
                    $('#cancel_oders').text(id['cancel_oders']);
                    $('#confirm_oders').text(id['confirm_oders']);
                    $('#hold_oders').text(id['hold_oders']);
                    $('#not_confirm').text(id['not_confirm']);
                    $('#dispatch_order_count').text(id['dispatch_order_count']);
                    $('#release_order_id').text(id['release_orders']);
                    $('#delivery_panding').text(id['delivery_panding']);
                    $('#retun').text(id['retun']);
                    $('#pending_dispatch_order_count').text(id['pending_dispatch_order_count']);
                    $('#selling_pieces_qty').text(id['selling_pieces_qty']);
                    $('#targert_pieces_qty').text(id['targert_pieces_qty']);
                    $('#html').text(id['html']);
                    $('#reminder').text(id['reminder']);
                    if (id['html'] == 'targer_is_pending') {
                        $('#targer_is_pending').show();
                        $('#load_status').hide();
                    } else {
                        $('#targer_is_pending').hide();
                    }
                    if (id['html'] == 'targer_is_completed') {
                        $('#targer_is_completed').show();
                        $('#load_status').hide();
                    } else {
                        $('#targer_is_completed').hide();
                    }
                    if (id['html'] == 'targer_is_not_compelted') {
                        $('#targer_is_not_compelted').show();
                        $('#load_status').hide();
                    } else {
                        $('#targer_is_not_compelted').hide();
                    }
                    if (id['html'] == 'targer_is_not_compelted') {
                        $('#targer_is_not_compelted').show();
                        $('#load_status').hide();
                    } else {
                        $('#targer_is_not_compelted').hide();
                    }
                    if (id['html'] == 'N/A') {
                        $('#not_avelable').show();
                        $('#load_status').hide();
                    } else {
                        $('#not_avelable').hide();
                    }
                }
            });
        }
        $(document).ready(function() {
            var getUrlParameter = function getUrlParameter(sParam) {
                var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                    sURLVariables = sPageURL.split('&'),
                    sParameterName,
                    i;
                for (i = 0; i < sURLVariables.length; i++) {
                    sParameterName = sURLVariables[i].split('=');

                    if (sParameterName[0] === sParam) {
                        return sParameterName[1] === undefined ? true : sParameterName[1];
                    }
                }
            };
            var report_date = getUrlParameter('dates');
            myString = report_date.split('+-+').join('/');
            var result = myString.split('/');
            $('#reportrange').daterangepicker({
                startDate: result[0],
                endDate: result[1],
                ranges: {
                    'All Data': ['2020-01-01', moment()],
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                locale: {
                    format: 'Y-M-DD'
                }
            });

        });
    </script>
@endsection