{{-- Welcome {{ __(Auth::user()->name) }} --}}
@extends('user.layouts.app')

@section('content')
@section('title', 'Dashboard')

    <!-- notification popup  -->
    <!-- Modal:begin -->
    <div class="modal modal-sm notify-box fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- <div class="modal-header">
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div> -->
                
                <div class="text-center mt-3">
                    <a href="{{route('user.notification')}}">
                        <button type="button" class="btn view-more">{{__('View more')}}</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal:end  -->
    <!-- notification popup /-- -->
    <!-- Dashboard inner section:begin -->
    <div class="dashboard">
        <div class="dashboard_inner mb-3">
            <div class="dashboard_head">
                <h4>{{__('language.welcome')}}</h4>

                <div class="filter-branch">
                    <span class="text">{{__('language.filter_by')}}</span>
                    <div class="dropdown">
                        <!-- <button class="btn dropdown-toggle" type="button" id="dropdownMenuBranch" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            {{__('language.all_branch')}}
                        </button> -->
                        <!-- <ul class="dropdown-menu" aria-labelledby="dropdownMenuBranch1">
                            @foreach($branches as $branch_data)
                            <li value="{{$branch_data['ShopID']}}"><a class="dropdown-item" href="#">{{$branch_data['ShopName']}}</a></li>
                            @endforeach
                        </ul> -->

                        <select name="" id="branches" class="btn dropdown-toggle" onchange="branch()" style="padding: 7px 12px;border-radius: 8px;border: 1px solid #c3d3e2;background: #fff;color: #737791;font-family:sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: normal;width:90px">
                                <option value="">All</option>
                            @foreach($branches as $branch_data)
                                <option value="{{$branch_data['id']}}">{{$branch_data['ShopName']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!-- dashboard overview start -->
        <div class="row mb-3">
            <div class="col-12 col-md-12 col-lg-7 col-xl-5">
                <div class="dashboard-overview dashboard_box mb-3 mb-lg-0">
                    <div class="dashboard-overview_wrapper">
                        <div class="overview">
                            <h5>{{__('language.overview')}}</h5>
                            <p class="mb-3">
                                {{-- {{__('Summary')}} --}}
                            </p>
                        </div>
                        <div class="dropdown">
                            <!-- <a class="btn dropdown-toggle" href="#" role="button" id="dropdownPeriodLink"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                {{__('language.weekly')}}
                            </a> -->

                            <!-- <ul class="dropdown-menu duration" aria-labelledby="dropdownPeriodLink">
                                <li><a class="dropdown-item" href="javascript:void(0)">{{__('language.weekly')}}</a></li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0)">{{__('language.monthly')}}</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0)">{{__('language.yearly')}}</a>
                                </li>
                            </ul> -->
                            <select name="" id="duration" class="btn dropdown-toggle" onchange="duration()" style="padding: 7px 12px;border-radius: 8px;border: 1px solid #c3d3e2;background: #fff;color: #737791;font-family:sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: normal;">
                                <!-- <option value="all">All</option> -->
                                <option value="weekly">{{__('language.weekly')}}</option>
                                <option value="monthly">{{__('language.monthly')}}</option>
                                <option value="yearly">{{__('language.yearly')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="dashboard-overview_summary">
                        <div class="row">
                            <div class="col-md-4 col-lg-6 col-xl-6">
                                <div class="invoice-box invoice-pink mb-lg-3 mb-xl-0">
                                    <img src="{{ asset('user/images/invoice-total.svg') }}" alt="Total Invoice"
                                        class="img-fluid" />
                                    <h2><span id="total_invoice_sum">{{numberFormat($total_invoice_sum)}}</span></h2>
                                    <h6>{{ __('language.total_invoice') }}</h6>
                                    <span class="invoice-progress">
                                        <a href="#">
                                            @if ($invoice_perc >0){{'+'}} @endif
                                            <span id="invoice_perc">{{$invoice_perc}}</span>% from last week</a></span>
                                </div>
                            </div>
                            <!-- <div class="col-md-4 col-lg-6 col-xl-4">
                                <div class="invoice-box invoice-pitch mb-lg-3 mb-xl-0">
                                    <img src="{{ asset('user/images/stock-value.svg') }}" alt="Total Invoice"
                                        class="img-fluid" />
                                    <h2>€ {{$total_storage_cost}}</h2>
                                    <h6>{{ __('language.daily_stock_value') }}</h6>
                                    <span class="invoice-progress">
                                        <a href="#">+4% from last week</a></span>
                                </div>
                            </div> -->
                            <div class="col-md-4 col-lg-6 col-xl-6">
                                <div class="invoice-box invoice-green mb-lg-3 mb-xl-0">
                                    <img src="{{ asset('user/images/order-value.svg') }}" alt="Total Invoice"
                                        class="img-fluid" />
                                    <h2><span id="average_order_value">{{numberFormat($average_order_value)}}</span></h2>
                                    <h6>{{ __('language.avg_order_value') }}</h6>
                                    <span class="invoice-progress">
                                        <a href="#">@if ($average_order_value_perc >0){{'+'}} @endif
                                            <span id="average_order_value_perc">{{$average_order_value_perc}}</span>% from last week</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- raheem changes start -->
            <div class="col-12 col-md-12 col-lg-7 col-xl-3">
                <div class="dashboard-overview dashboard_box mb-3 mb-lg-0">
                    <div class="dashboard-overview_wrapper">
                        <div class="overview">
                            <h5>{{__('language.overview')}}</h5>
                            {{-- <p class="mb-3">{{__('Summary')}}</p> --}}
                        </div>

                    </div>
                    <div class="dashboard-overview_summary">
                        <div class="row">
                            <div class="col-md-4 col-lg-6 col-xl-12">
                                <div class="invoice-box invoice-pitch mb-lg-3 mb-xl-0">
                                    <img src="{{ asset('user/images/stock-value.svg') }}" alt="Total Invoice"
                                        class="img-fluid" />
                                    <h2><span id="total_storage_cost">{{numberFormat($total_storage_cost)}}</span></h2>
                                    <h6>{{ __('language.daily_stock_value') }}</h6>
                                    <!-- <span class="invoice-progress">
                                        <a href="#">+4% from last week</a></span> -->
                                </div>
                            </div>
                            <!-- <div class="col-md-4 col-lg-6 col-xl-4">
                                <div class="invoice-box invoice-green mb-lg-3 mb-xl-0">
                                    <img src="{{ asset('user/images/order-value.svg') }}" alt="Total Invoice"
                                        class="img-fluid" />
                                    <h2>€ 40,45,167</h2>
                                    <h6>{{ __('language.avg_order_value') }}</h6>
                                    <span class="invoice-progress">
                                        <a href="#">+10% from last week</a></span>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- raheem changes end -->
            <div class="col-12 col-md-12 col-lg-5 col-xl-4">
                <div class="dashboard-table dashboard_box mb-3 mb-lg-0">
                    <div class="dashboard-table_wrapper">
                        <h2>{{__('language.best_selling_product')}}</h2>

                        <div class="dropdown">
                            <!-- <a class="btn dropdown-toggle" href="#" role="button" id="dropdownPeriodLink"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                {{__('language.weekly')}}
                            </a> -->

                            <!-- <ul class="dropdown-menu" aria-labelledby="dropdownPeriodLink">
                                <li><a class="dropdown-item" href="#">{{__('language.weekly')}}</a></li>
                                <li>
                                    <a class="dropdown-item" href="#">{{__('language.monthly')}}</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">{{__('language.yearly')}}</a>
                                </li>
                            </ul> -->
                            <select name="" id="best_selling_product" class="btn dropdown-toggle" onchange="products()" style="padding: 7px 12px;border-radius: 8px;border: 1px solid #c3d3e2;background: #fff;color: #737791;font-family:sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: normal;">
                                <!-- <option value="all">All</option> -->
                                <option value="weekly">{{__('language.weekly')}}</option>
                                <option value="monthly">{{__('language.monthly')}}</option>
                                <option value="yearly">{{__('language.yearly')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="table-scroll">
                        <table class="table table-sm table-hover table-responsive">
                            <thead>
                                <tr>
                                    <th scope="col" class="pe-3">#</th>
                                    <th scope="col" class="pe-3">{{__('Name')}}</th>
                                    <th scope="col" class="pe-3">{{__('ID')}}</th>
                                    <th scope="col" class="pe-3 text-center">{{__('language.quantity')}}</th>
                                </tr>
                            </thead>
                            <tbody id="product_list">
                                    @php
                                        $i = 0;
                                    @endphp
                                @foreach ($best_selling_product as $product)
                                    @php
                                        $i = $i+1;
                                    @endphp
                                <tr>
                                    <td class="td-blue">{{$i}}</td>
                                    <td>{{$product->ItemName}}</td>
                                    <td class="td-blue">{{$product->ItemNrInt}}</td>
                                    <td class="text-center">
                                        <span class="text quant--blue">{{$product->qty}}</span>
                                    </td>
                                </tr>
                                @endforeach



                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- dashboard overview end  -->
        <!-- dashboard graph start  -->

        <div class="row mb-3">
            <div class="col-12 col-md-12 col-lg-7 col-xl-8">
                <div class="dashboard-graph dashboard_box mb-3 mb-lg-0">
                    <nav class="graph-tab">
                        <div class="nav nav-tabs mb-4 justify-content-start justify-content-sm-center justify-content-md-end"
                            id="nav-tab" role="tablist">
                            <button class="nav-link active mb-3 mb-sm-0" id="nav-home-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home"
                                aria-selected="true">
                                {{ __('language.total_invoice') }}
                            </button>
                            <!-- <button class="nav-link mb-3 mb-sm-0" id="nav-profile-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile"
                                aria-selected="false">
                                {{__('language.stock_value')}}
                            </button> -->
                            <button class="nav-link mb-3 mb-sm-0" id="nav-contact-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact"
                                aria-selected="false">
                                {{__('language.order_value')}}
                            </button>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade active show" id="nav-home" role="tabpanel"
                            aria-labelledby="nav-home-tab">
                            <div class="graph-tab__content">
                                <h3>{{ __('language.total_invoice') }}</h3>
                                <div class="dashboard-graph_chart">
                                    <div>
                                        <canvas id="myChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <div class="dashboard-graph dashboard_box">
                                <h3>Stock value</h3>

                                <div class="dashboard-graph_chart">
                                    <div>
                                        <canvas id="myChart2"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                            <div class="dashboard-graph dashboard_box">
                                <h3>Order value</h3>

                                <div class="dashboard-graph_chart">
                                    <div>
                                        <canvas id="myChart3"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-5 col-xl-4">
                <div class="dashboard-table dashboard_box dashboard-table--invoice mb-3 mb-lg-0">
                    <div class="dashboard-table_wrapper">
                        <h2>{{__('language.invoice_detail')}}</h2>

                        <a href="{{route('user.invoice')}}">
                            <button type="button" class="btn btn-view">{{__('language.view_all')}}</button>
                        </a>
                    </div>
                    <div class="table-scroll">
                        <table class="table table-sm table-hover table-responsive">
                            <tbody id="branch_invoice">
                                @foreach($invoice as $invoice_data)
                                <tr>
                                    <td>
                                        <p>{{date('M,d,Y',strtotime($invoice_data->InvoiceDate))}}</p>
                                        <p id="new_invoice_no"> {{$invoice_data->invoice_no}} </p>
                                    </td>
                                    <td valign="middle"> {{numberFormat($invoice_data->total_amount)}}</td>
                                    <td class="text-end">
                                        <a href="{{ route('user.download-pdf.pdf',$invoice_data->id) }}">
                                            <img src="{{asset('user/images/pdf.svg')}}" alt="excel" class="img-fluid" />
                                        </a>
                                    </td>
                                </tr>
                               @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- dashboard graph end  -->
    </div>
    <!-- view notifications offcanvas:begin  -->

    <div class="offcanvas offcanvas-end offcanvas-notify" tabindex="-1" id="offcanvasRightView"
        aria-labelledby="offcanvasRightViewLabel">
        <div class="offcanvas-header">
            <h5 id="offcanvasRightViewLabel">{{ __('Notification details') }}</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-branch">
            <div class="d-between">
                <div class="d-flex align-items-center gap-4">
                    <span class="list-notify_imgBox">
                        <img src="{{asset('user/icons/notify-orange.svg')}}" alt="latest notification" class="img-fluid" />
                    </span>

                    <h5>Branch 01</h5>
                </div>
                <span class="time-notif"> 13 july, 2023, 10:30 pm</span>
            </div>
        </div>
        <div class="offcanvas-body">
            <ul class="list-notify">
                <li>
                    <a href="#">
                        <p class="mb-4 pb-2">
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when looking at
                            its layout. The point of using Lorem
                        </p>
                        <p>
                            It is a long established fact that a reader will be All the
                            Lorem Ipsum generators on the Internet tend to repeat
                            predefined chunks as necessary, making this the first true
                            generator on the Internet. It uses a dictionary of over 200
                            Latin words, combined with a handful of model sentence
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- view notifications offcanvas:end  -->

    <!-- Dashboard inner section:end -->
@endsection

<script>
    // $(".duration").click(function({
    //     alert('hi');
    // }))
// $('.duration').on('change', function() { alert('hi'); });
    function duration()
    {
        var branches = $("#branches").val();
        var duration = $("#duration").val();
        //var best_selling_product = $("#best_selling_product").val();
        // alert(best_selling_product);
        let url = "{{ route('user.duration', 'val') }}";
            url = url.replace('val', duration);
            $.ajax({
                    method:'get',
                    url: url,
                    // data:{branches:branches,duration:duration,best_selling_product:best_selling_product},
                    data:{branches:branches,duration:duration},
                    
                    success:function(res)
                    { //console.log(res['best_selling_product']);
                        $('#total_invoice_sum').text(res['invoice']);
                        $('#average_order_value').text(res['average_order_value']);
                        $('#total_storage_cost').text(res['total_storage_cost']);
                        $('#invoice_perc').text(res['invoice_perc']);
                        //if(res['average_order_value_perc'] > 0){
                            //$('#average_order_value_perc').text("+"+res['average_order_value_perc']);
                        //}else{
                        $('#average_order_value_perc').text(res['average_order_value_perc']);
                        //}
                        var branch_invoice = res['branch_invoice'];
                        // var best_selling_product = res['best_selling_product'];
                        let html ='';
                        let html2 ='';
                        branch_invoice.forEach(function(value,index){
                                html+='<tr>';
                                html+='<td>';
                                html+=`<p>${value.created_at}</p>`;
                                html+=`<p> ${value.invoice_no} </p>`;
                                html+='</td>';
                                html+=`<td valign="middle">${value.total_amount} €</td>`;
                                html+='<td class="text-end">';
                                html+='<a href="#">';
                                html+='<img src="{{asset('user/images/pdf.svg')}}" alt="excel" class="img-fluid" />';
                                html+='</a>';
                                html+='</td>';
                                html+='</tr>';
                        // $("#branch_invoice").html(html);
                        });
                        $("#branch_invoice").html(html);
                        // best selling product
                        // best_selling_product.forEach(function(value,index){
                        //         html2+='<tr>';
                        //         html2+=`<td class="td-blue">${index+1}</td>`;
                        //         html2+=`<td>${value.ItemName}</td>`;
                        //         html2+=`<td class="td-blue">${value.ItemNrInt}</td>`;
                        //         html2+='<td class="text-center">';
                        //         html2+=`<span class="text quant--blue">${value.qty}</span>`;
                        //         html2+='</td>';
                        //         html2+='</tr>';
                                //console.log(html2);
                        // $("#product_list").html(html2);
                        // });
                        // $("#product_list").html(html2);
                        if (myChart) {
                            // console.log('hiiiiiii');
                            myChart.destroy();
                            // window.myChart.destroy()
                        }
                        // else{
                        //     console.log('else part');
                        // }
                        renderChart(res['graph_data_sum']);
                        renderChart2(res['graph_data_sum2']);


                    }

                });
    }
    function products()
    {
        var branches = $("#branches").val();
        // var duration = $("#duration").val();
        var best_selling_product = $("#best_selling_product").val();
        // alert(best_selling_product);
        let url = "{{ route('user.products', 'val') }}";
            url = url.replace('val', best_selling_product);
            $.ajax({
                    method:'get',
                    url: url,
                    // data:{branches:branches,duration:duration,best_selling_product:best_selling_product},
                    data:{branches:branches,best_selling_product:best_selling_product},
                    
                    success:function(res)
                    { //console.log(res['best_selling_product']);
                        // $('#total_invoice_sum').text(res['invoice']);
                        // $('#average_order_value').text(res['average_order_value']);
                        // $('#total_storage_cost').text(res['total_storage_cost']);
                        // $('#invoice_perc').text(res['invoice_perc']);
                        // //if(res['average_order_value_perc'] > 0){
                        //     //$('#average_order_value_perc').text("+"+res['average_order_value_perc']);
                        // //}else{
                        // $('#average_order_value_perc').text(res['average_order_value_perc']);
                        // //}
                        // var branch_invoice = res['branch_invoice'];
                        var best_selling_product = res['best_selling_product'];
                        let html ='';
                        let html2 ='';
                        // branch_invoice.forEach(function(value,index){
                        //         html+='<tr>';
                        //         html+='<td>';
                        //         html+=`<p>${value.created_at}</p>`;
                        //         html+=`<p> ${value.invoice_no} </p>`;
                        //         html+='</td>';
                        //         html+=`<td valign="middle">${value.total_amount} €</td>`;
                        //         html+='<td class="text-end">';
                        //         html+='<a href="#">';
                        //         html+='<img src="{{asset('user/images/pdf.svg')}}" alt="excel" class="img-fluid" />';
                        //         html+='</a>';
                        //         html+='</td>';
                        //         html+='</tr>';
                        // $("#branch_invoice").html(html);
                        // });
                        // $("#branch_invoice").html(html);
                        // best selling product
                        best_selling_product.forEach(function(value,index){
                                html2+='<tr>';
                                html2+=`<td class="td-blue">${index+1}</td>`;
                                html2+=`<td>${value.ItemName}</td>`;
                                html2+=`<td class="td-blue">${value.ItemNrInt}</td>`;
                                html2+='<td class="text-center">';
                                html2+=`<span class="text quant--blue">${value.qty}</span>`;
                                html2+='</td>';
                                html2+='</tr>';
                                //console.log(html2);
                        // $("#product_list").html(html2);
                        });
                        $("#product_list").html(html2);
                        // if (myChart) {
                        //     // console.log('hiiiiiii');
                        //     myChart.destroy();
                        //     // window.myChart.destroy()
                        // }
                        // else{
                        //     console.log('else part');
                        // }
                        // renderChart(res['graph_data_sum']);
                        // renderChart2(res['graph_data_sum2']);


                    }

                });
    }
    function branch()
    {
        duration();
        products();
    }
 function renderChart(data) {
    myChart = Chart.getChart("myChart")
        if (myChart) { 
            // console.log('chart 1.......');
            myChart.destroy();
        }
    var myChart = new Chart(ctx, {
            type: "line",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "jun", "July","Aug","Sep","Oct","Nov","Dec"],
                datasets: [{
                    label: "Invoices", // Name the series
                    // data: [graph_data_sum], // Specify the data values array

                    // data: [140, 550, 2420, 180, 190, 3000, 2000,1000,900,650,450,2500], // Specify the data values array
                    data: data,
                    fill: false,
                    borderColor: "#2196f3", // Add custom color border (Line)
                    backgroundColor: "#2196f3", // Add custom color background (Points and Fill)
                    borderWidth: 1, // Specify bar border width,
                    lineTension: 0.3,
                }, ],
            },
            options: {
                bezierCurve: true,
                responsive: true, // Instruct chart js to respond nicely.
                maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
                scales: {
                    x: {
                        ticks: {
                            autoSkip: false,
                            maxRotation: 0,
                            minRotation: 0,
                        },
                    },
                },
            },
        });
}
// chart 2
function renderChart2(data) {
    myChart = Chart.getChart("myChart3")
        if (myChart) {
            // console.log('chart 2.......');
            myChart.destroy();
        }
    var myChart = new Chart(ctx2, {
            type: "line",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "jun", "July","Aug","Sep","Oct","Nov","Dec"],
                datasets: [{
                    label: "Invoices", // Name the series
                    // data: [graph_data_sum], // Specify the data values array

                    // data: [140, 550, 2420, 180, 190, 3000, 2000,1000,900,650,450,2500], // Specify the data values array
                    data: data,
                    fill: false,
                    borderColor: "#2196f3", // Add custom color border (Line)
                    backgroundColor: "#2196f3", // Add custom color background (Points and Fill)
                    borderWidth: 1, // Specify bar border width,
                    lineTension: 0.3,
                }, ],
            },
            options: {
                bezierCurve: true,
                responsive: true, // Instruct chart js to respond nicely.
                maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
                scales: {
                    x: {
                        ticks: {
                            autoSkip: false,
                            maxRotation: 0,
                            minRotation: 0,
                        },
                    },
                },
            },
        });
}
</script>