@extends('layouts.main-layout')

@section('title')
{{ config('app.name') }} - Home
@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <!-- Page Headings Start -->
        <div class="row justify-content-between align-items-center mb-4">
            <!-- Page Heading Start -->
            <div class="col-md-auto col-12 mb-2">
                <h3 class="mb-0">Izveštaji apoteke - {{ $pharmacy->pharmacy_name }}</h3>
            </div>
            <!-- Page Heading End -->

            <!-- Page Button Group Start -->
            <div class="col-md-auto col-12 mb-2">
                <span>Datum zadnjeg izveštaja: {{ $last_report_date }}</span>
            </div>
            <!-- Page Button Group End -->
        </div>
        <!-- Page Headings End -->

         <!-- Top Report Start -->
         <div class="row row-cols-xl-2 row-cols-sm-2 row-cols-1">
                <div class="col mb-6">
                    <div class="top-report-card card">
                        <div class="card-head">
                            <h4 class="title">Promet</h4>
                        </div>
                        <div class="card-body pt-0">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <h2 class="title mb-0">{{ number_format($allReportsSum, 2) }} RSD</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col mb-6">
                    <div class="top-report-card card">
                        <div class="card-head">
                            <h4 class="title">Komada</h4>
                        </div>
                        <div class="card-body pt-0">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <h2 class="title mb-0">{{ $total_qty }}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
         </div>
        <!-- Top Report End -->

         <!-- Statistika ukupno po mesecima Basic Line Start -->
         <div class="col-12 mb-6">
            <div class="card">
                <div class="card-head border-bottom">
                    <h4 class="title">Statistika ukupno po mesecima</h4>
                </div>
                <div class="card-body">
                    <div class="apex-chart-line"></div>
                </div>
            </div>
        </div>
        <!-- Statistika ukupno po mesecima Basic Line End -->

        <!-- Statistika prodaja proizvoda po mesecima Progress Graph Start -->
        <div class="col-12 mb-6">
            <div class="card">
                <div class="card-head">
                    <h4 class="title">Statistika prodaja proizvoda po mesecima</h4>
                </div>
                <div class="card-body pt-0">
                    <div class="progress-graph-chart"></div>
                </div>
            </div>
        </div>
        <!-- Statistika prodaja proizvoda po mesecima Progress Graph End -->

        <!-- Statistika količine proizvoda po mesecima Progress Graph Start -->
        <div class="col-12 mb-6">
            <div class="card">
                <div class="card-head">
                    <h4 class="title">Statistika količine proizvoda po mesecima</h4>
                </div>
                <div class="card-body pt-0">
                    <div class="progress-graph-chart-1"></div>
                </div>
            </div>
        </div>
        <!-- Statistika količine proizvoda po mesecima Progress Graph End -->

        <!-- Statistika apoteke po mesecima Basic Column Start -->
        <div class="col-12">
            <div class="card">
                <div class="card-head border-bottom">
                    <h4 class="title">Statistika apoteke po mesecima</h4>
                </div>
                <div class="card-body">
                    <div class="apex-chart-column"></div>
                </div>
            </div>
        </div>
        <!-- Statistika apoteke po mesecima Basic Column End -->

        <!-- Statistika po drogerijama ukupno Basic Pie Start -->
        <div class="col-12 ">
            <div class="card">
                <div class="card-head border-bottom">
                    <h4 class="title">Statistika po drogerijama ukupno</h4>
                </div>
                <div class="card-body">
                    <div class="apex-chart-pie"></div>
                </div>
            </div>
        </div>
        <!-- Statistika po drogerijama ukupno Basic Pie End -->

        <!-- Table stats Start -->
        <div class="col-lg-12 my-3 text-center">
            <table class="table table-hover table-bordered data-table data-table-default">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Naziv Izveštaja</th>
                        <th>Datum</th>
                        <th>Suma</th>
                        <th>Akcije</th>
                    </tr>
                </thead>
                <tbody>
                    @if(!empty($reportsGrouped) && count($reportsGrouped) > 0)
                        @foreach($reportsGrouped as $key => $reports)
                            @php
                                $summm = 0;
                            @endphp
                            
                            @foreach($reports as $report)
                                <tr>
                                    <td></td>
                                    <td>{{ $report->wholesale->wholesale_name}}</td>
                                    <td>{{$report->report_date}}</td>
                                    <td>{{ number_format($report->reportItemsSum, 2) }}</td>
                                    <td><a href="{{ url('pharmacy/show/'.$report->report_id.'/details/'.$pharmacy->pharmacyReportIndetificator->pharmacy_pib) }}" class="btn btn-primary">Prikaži Detalje</a></td>
                                </tr>

                                @php
                                    $summm += $report->reportItemsSum;
                                @endphp

                                @if ($loop->last)
                                <tr>
                                    <td></td>
                                    <td class="text-primary">Suma za mesec</td>
                                    <td class="text-primary">{{ date_to_month($report->report_date) }}</td>
                                    <td class="text-primary">{{ number_format($summm, 2) }}</td>
                                    <td></td>
                                </tr>
                                @endif
                            @endforeach
                        @endforeach
                    @endif
                </tbody>
                @if($agent->isMobile())
                <tr>
                    <td>Ukupna suma: </td>
                    <td class="text-danger">{{number_format($allReportsSum, 2)}}</td>
                    <td></td>
                </tr>
                @else
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="text-danger">{{number_format($allReportsSum, 2)}}</td>
                    <td></td>
                </tr>
                @endif
            </table>
        </div>
        <!-- Table stats End -->

        <!-- Table product and qty Start -->
        <div class="col-lg-12 my-3 text-center">
            <table class="table table-hover table-bordered data-table data-table-default">
                <thead>
                    <tr>
                        <th>Naziv Proizvoda</th>
                        <th>Količina</th>
                    </tr>
                </thead>
                <tbody>
                    @if(isset($product_and_qty_merged) && !empty($product_and_qty_merged))
                        @foreach($product_and_qty_merged as $p_name => $p_qty)
                            <tr>
                                <td>{{ $p_name }}</td>
                                <td>{{ $p_qty }}</td>
                            </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
        </div>
        <!-- Table product and qty End -->
    </div>
</div>

<script>
    $(document).ready(function() {
        $(".data-table-default").DataTable({
            responsive: true,
            pageLength: 100,
            language: {
                paginate: {
                    previous: '<i class="fa fa-angle-left"></i>',
                    next: '<i class="fa fa-angle-right"></i>',
                },
            },
        });
        
        $.ajax(window.location.href + "?ajax=true", {
            method: 'GET',
            success: function(data){
                var dates = data.dates;
                var wholesales = data.wholesales;

                var apoteke_po_mesecima = data.columnChart_apoteke_po_mesecima;

                var po_drogerijama_ukupno = data.pieChart_po_drogerijama_ukupno;

                var prodaja_proizvoda_po_mesecima = data.progressGraph_prodaja_proizvoda_po_mesecima;

                var kolicina_proizvoda_po_mesecima = data.progressGraph_kolicina_proizvoda_po_mesecima;

                var ukupno_po_mesecima = data.basicLine_ukupno_po_mesecima;

                /*== Statistika ukupno po mesecima Basic Line 1 Start ============================================*/
                var apexChartLineOptions = {
                    series: [{
                        name: "Suma",
                        data: ukupno_po_mesecima
                    }],
                    chart: {
                        height: 250,
                        type: 'line',
                        zoom: {
                            enabled: false
                        }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        curve: 'smooth'
                    },
                    grid: {
                        row: {
                            colors: ['#f3f3f3', 'transparent'],
                            opacity: 0.5
                        },
                    },
                    yaxis: {
                        labels: {
                            formatter: function(val){
                                return val.toLocaleString(
                                    undefined, // leave undefined to use the visitor's browser 
                                                // locale or a string like 'en-US' to override it.
                                    { minimumFractionDigits: 2 }
                                );
                            }
                        },
                        formatter: function(val){
                            return val.toLocaleString(
                                    undefined, // leave undefined to use the visitor's browser 
                                                // locale or a string like 'en-US' to override it.
                                    { minimumFractionDigits: 2 }
                                );
                        }
                    },
                    xaxis: {
                        categories: dates,
                    }
                };
                var apexChartLine = new ApexCharts(document.querySelector(".apex-chart-line"), apexChartLineOptions);
                apexChartLine.render();
                /*== Statistika ukupno po mesecima Basic Line 1 End ============================================*/

                /*== Statistika apoteke po mesecima Column Chart 1 Start ============================================*/
                var apexChartColumnOptions = {
                    series: apoteke_po_mesecima,
                    chart: {
                        type: 'bar',
                        height: 400
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '55%',
                            endingShape: 'rounded'
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: dates,
                    },
                    yaxis: {
                        title: {
                            text: 'DIN (dinara)',
                        },
                        labels: {
                            formatter: function(val){
                                return val.toLocaleString(
                                    undefined, // leave undefined to use the visitor's browser 
                                                // locale or a string like 'en-US' to override it.
                                    { minimumFractionDigits: 2 }
                                );
                            }
                        },
                        formatter: function(val){
                            return val.toLocaleString(
                                    undefined, // leave undefined to use the visitor's browser 
                                                // locale or a string like 'en-US' to override it.
                                    { minimumFractionDigits: 2 }
                                );
                        }
                    },
                    fill: {
                        opacity: 1
                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                return val.toLocaleString(
                                    undefined, // leave undefined to use the visitor's browser 
                                                // locale or a string like 'en-US' to override it.
                                    { minimumFractionDigits: 2 }
                                );
                            }
                        }
                    }
                };

                var apexChartColumn = new ApexCharts(document.querySelector(".apex-chart-column"), apexChartColumnOptions);
                apexChartColumn.render();
                /*== Statistika apoteke po mesecima Column Chart 1 End ============================================*/

                /*== Statistika po drogerijama ukupno Pie Chart 1 Start ============================================*/
                var apexChartPieOptions = {
                    series: po_drogerijama_ukupno,
                    chart: {
                        height: 400,
                        type: 'pie',
                    },
                    labels: wholesales,
                    tooltip: {
                        y: {
                            formatter: function(val){
                                return val.toLocaleString(
                                        undefined, // leave undefined to use the visitor's browser 
                                                    // locale or a string like 'en-US' to override it.
                                        { minimumFractionDigits: 2 }
                                    );
                            }
                        },
                    },
                    responsive: [{
                        breakpoint: 480,
                        options: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }]
                };
            
                var apexChartPie = new ApexCharts(document.querySelector(".apex-chart-pie"), apexChartPieOptions);
                apexChartPie.render();
                /*== Statistika po drogerijama ukupno Pie Chart 1 End ============================================*/

                /*== Statistika prodaja proizvoda po mesecima Progress Graph Chart Start ============================================*/
                var progressGraphOptions = function (data, labels) {
                    return {
                        series: data,
                        chart: {
                            type: 'line',
                            zoom: {
                                enabled: false
                            },
                            toolbar: {
                                show: false
                            },
                            parentHeightOffset: 0
                        },
                        dataLabels: {
                            enabled: false
                        },
                        // colors: colors,
                        stroke: {
                            curve: 'smooth',
                            width: 3,
                        },
                        xaxis: {
                            categories: labels,
                            tooltip: {
                                enabled: false,
                            },
                            axisBorder: {
                                show: false
                            },
                            axisTicks: {
                                show: false
                            },
                            labels: {
                                style: {
                                    colors: ['#202442'],
                                    fontSize: '14px',
                                    fontFamily: 'Titillium Web',
                                    cssClass: 'apexcharts-yaxis-label',
                                }
                            },
                        },
                        yaxis: {
                            labels: {
                                align: 'left',
                                style: {
                                    colors: ['#202442'],
                                    fontSize: '14px',
                                    fontFamily: 'Titillium Web',
                                    cssClass: 'apexcharts-yaxis-label',
                                },
                                formatter: function(val){
                                    return val.toLocaleString(
                                        undefined, // leave undefined to use the visitor's browser 
                                                    // locale or a string like 'en-US' to override it.
                                        { minimumFractionDigits: 2 }
                                    );
                                }
                            }
                        },
                        legend: {
                            position: 'top',
                            horizontalAlign: 'center',
                            offsetY: 0,
                        },
                        responsive: [{
                            breakpoint: 1199,
                            options: {
                                legend: {
                                    offsetY: 0,
                                },
                            },
                        }, {
                            breakpoint: 768,
                            options: {
                                legend: {
                                    show: false
                                },
                                chart: {
                                    height: '300px',
                                    width: '100%'
                                }
                            },
                        }]
                    }
                };

                var progressGraphDataSet1 = {
                    data: prodaja_proizvoda_po_mesecima,
                    // colors: ['#372EED', '#45EEDD'],
                    labels: dates
                }, { data, colors, labels } = progressGraphDataSet1,

                progressGraphChart1 = new ApexCharts(document.querySelector(".progress-graph-chart"), progressGraphOptions(data, labels));
                progressGraphChart1.render();
                /*== Statistika prodaja proizvoda po mesecima Progress Graph Chart End ============================================*/

                /*== Statistika količine proizvoda po mesecima Progress Graph Chart Start ============================================*/
                var progressGraphOptions2 = function (data, labels) {
                    return {
                        series: data,
                        chart: {
                            type: 'line',
                            zoom: {
                                enabled: false
                            },
                            toolbar: {
                                show: false
                            },
                            parentHeightOffset: 0
                        },
                        dataLabels: {
                            enabled: false
                        },
                        // colors: colors,
                        stroke: {
                            curve: 'smooth',
                            width: 3,
                        },
                        xaxis: {
                            categories: labels,
                            tooltip: {
                                enabled: false,
                            },
                            axisBorder: {
                                show: false
                            },
                            axisTicks: {
                                show: false
                            },
                            labels: {
                                style: {
                                    colors: ['#202442'],
                                    fontSize: '14px',
                                    fontFamily: 'Titillium Web',
                                    cssClass: 'apexcharts-yaxis-label',
                                }
                            },
                        },
                        yaxis: {
                            labels: {
                                align: 'left',
                                style: {
                                    colors: ['#202442'],
                                    fontSize: '14px',
                                    fontFamily: 'Titillium Web',
                                    cssClass: 'apexcharts-yaxis-label',
                                },
                                formatter: function(val){
                                    return val;
                                }
                            }
                        },
                        legend: {
                            position: 'top',
                            horizontalAlign: 'center',
                            offsetY: 0,
                        },
                        responsive: [{
                            breakpoint: 1199,
                            options: {
                                legend: {
                                    offsetY: 0,
                                },
                            },
                        }, {
                            breakpoint: 768,
                            options: {
                                legend: {
                                    show: false
                                },
                                chart: {
                                    height: '300px',
                                    width: '100%'
                                }
                            },
                        }]
                    }
                };

                var progressGraphDataSet2 = {
                    data: kolicina_proizvoda_po_mesecima,
                    // colors: ['#372EED', '#45EEDD'],
                    labels: dates
                }, { data, colors, labels } = progressGraphDataSet2,

                progressGraphChart2 = new ApexCharts(document.querySelector(".progress-graph-chart-1"), progressGraphOptions2(data, labels));
                progressGraphChart2.render();
                /*== Statistika količine proizvoda po mesecima Progress Graph Chart End ============================================*/
            },
            error: function(error){
                console.log("Error: " + error);
                swal({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Nešto je pošlo po zlu, molimo pokušajte ponovo kasnije!',
                });
            }
        });
    });
</script>
@endsection