@extends('layouts.master')

@section('page_title', 'New ' . $display_term . ' Dashboard')
@section('title', 'New '. $display_term .' Dashboard')
@section('main_item', 'New '. $display_term .' Dashboard')
@section('sub_item', ' Dashboard')

@section('content')
    <link href="{{ asset('css/welcome.css') }}" rel="stylesheet"/>
    
    <div class="col-md-12 my-3">
        <form action="{{ url('new_reseller/dashboard') }}" method="get" id="filter-form">
            <div class="input-group col-12 col-sm-4 mb-2 float-right">
                <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>
            
            <div class="input-group col-12 col-sm-6 mb-2">
                <select class="form-control" name="user_filter" id="user_filter">
                    @if(Auth::user()->user_type == 'new_receller' || Auth::user()->user_type == 'sub_user' || Auth::user()->user_type == 'new_direct_receller')
                        <option value="{{ auth()->user()->id }}">
                            {{ auth()->user()->username }}
                        </option>
                        @foreach ($sub_resellers as $sub_reseller)
                            <option value="{{ $sub_reseller->id }}" @if(request()->input('user_filter') == $sub_reseller->id) selected @endif>
                                {{ $sub_reseller->username }}
                            </option>
                        @endforeach
                    @endif
                    @if(Auth::user()->user_type == 'system_user')
                        @foreach ($all_users as $all_user)
                            <option value="{{ $all_user->id }}" @if(request()->input('user_filter') == $all_user->id) selected @endif>
                                {{ $all_user->username }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
        </form>
    </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 class="col-lg">
            <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">
            <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">
            <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> --}}
    <div class="row right-padding" id="new-reseller-index"> 
          <div class="col-lg-4">
            <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>Total Commission (without return & cancell)</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="hold_oders">
                                    {{ $total_commission }}
                                </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-4">
            <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>Total Deliverd Commission</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="hold_oders">
                                    {{ $due_total_commission }}
                                </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-4">
            <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>Paid Commission</b></p>
                                <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="hold_oders">
                                    {{ $total_paid_commission }}
                                </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-4">
            <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-4">
            <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-4">
            <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 class="col-sm-12">
            <form action="{{ url('new_reseller/dashboard') }}" method="get" id="filter-form">
                <div class="input-group col-sm-4 mb-2 float-right">
                    <select class="form-control" name="order_status" id="orderFilter">
                        <option value="pending" {{ request('order_status', 'pending') === 'pending' ? 'selected' : '' }}>Pending Orders</option>
                        <option value="confirmed" {{ request('order_status') === 'confirmed' ? 'selected' : '' }}>Confirmed Orders</option>
                        <option value="dispatched" {{ request('order_status') === 'dispatched' ? 'selected' : '' }}>dispatched Orders</option>
                    </select>
                    <span class="input-group-append">
                        <button type="submit" class="btn btn-primary">Filter</button>
                    </span>
                </div>
            </form>
            <!-- Add the select element for order status filtering -->
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="" class="">
                        {!! $pending_chart->render() !!}
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function(){
            $('#date_range').daterangepicker({
                autoUpdateInput: false, 
                locale: {
                    cancelLabel: 'Clear'
                }
            });
            $('#date_range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
            });
            $('#date_range').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        });

        $(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>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let urlParams = new URLSearchParams(window.location.search);
            let hasDates = urlParams.has("dates");
            let hasUserFilter = urlParams.has("user_filter");
        
            if (!hasDates || !hasUserFilter) {
                document.getElementById("filter-form").submit();
            }
        });
    </script>
@endsection