@extends('layout.default')
@section('styles')
    <style type="text/css">
        @media (min-width: 992px) {
            .footer-fixed .content {
                padding-bottom: 25px;
            }
        }

        @media (min-width: 992px) {
            .header-fixed.subheader-fixed.subheader-enabled .wrapper {
                padding-top: 70px;
            }
        }

        #locationwise_inquiry_chart, #locationwise_salesorder_chart, #zonewise_salesorder_chart, #zonewise_inquiry_chart {
            max-width: 100% !important;
            margin: 35px auto;
        }
    </style>
@endsection

@section('content')
    @php
        $roleName = Auth::user()->getRoleNames();
    @endphp
    @if($roleName == 'ESS')
        <div class="row">
        </div>
    @else
        <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
            <div class="d-flex flex-column-fluid">
                <div class="container">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <div class="row">
                    </div>
                </div>
            </div>
            <div class="d-flex flex-column-fluid">
                <div class=" container ">
                    <div class="row mt-5">
                        @if($roleName == 'super-admin')
                            <div class="col-lg-3">
                                <div class="card card-custom wave wave-animate-slow wave-warning mb-4">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center p-5">
                                            <div class="mr-6">
                                           <span class="svg-icon svg-icon-warning svg-icon-4x">
                                            <i class="fa fa-th-large text-warning font-size-h1-xxl"></i>
                                           </span>
                                            </div>
                                            <div class="d-flex flex-column">
                                                <a href="{{ route('employee.index') }}"
                                                   class="text-dark text-hover-warning font-weight-bold font-size-h2 mb-3">
                                                    {{ $todays_present }}
                                                </a>
                                                <div class="text-dark-75">
                                                    Present Employee
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card card-custom wave wave-animate-slow wave-muted   mb-4">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center p-5">
                                            <div class="mr-6">
                                           <span class="svg-icon svg-icon-muted svg-icon-4x">
                                               <i class="fa fa-th-large text-muted font-size-h1-xxl"></i>
                                           </span>
                                            </div>
                                            <div class="d-flex flex-column">
                                                <a href="{{ route('employee.index') }}"
                                                   class="text-dark text-hover-muted font-weight-bold font-size-h2 mb-3">
                                                    {{ $todays_absent }}
                                                </a>
                                                <div class="text-dark-75">
                                                    Absent Employee
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="col-lg-3">
                            <div class="card card-custom wave wave-animate-slow wave-primary mb-4">
                                <div class="card-body">
                                    <div class="d-flex align-items-center p-5">
                                        <div class="mr-6">
                                           <span class="svg-icon svg-icon-primary svg-icon-4x">
                                            <i class="fa fa-th-large text-primary font-size-h1-xxl"></i>
                                           </span>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <a href="{{ route('inquiry.index') }}"
                                               class="text-dark text-hover-primary font-weight-bold font-size-h2 mb-3">
                                                {{ $inquiry_total }}
                                            </a>
                                            <div class="text-dark-75">
                                                Inquiry
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="card card-custom wave wave-animate-slow wave-danger mb-4">
                                <div class="card-body">
                                    <div class="d-flex align-items-center p-5">
                                        <div class="mr-6">
                                           <span class="svg-icon svg-icon-danger svg-icon-4x">
                                               <i class="fa fa-th-large text-danger font-size-h1-xxl"></i>
                                           </span>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <a href="{{ route('quotation.index') }}"
                                               class="text-dark text-hover-danger font-weight-bold font-size-h2 mb-3">
                                                {{ $quotation_total }}
                                            </a>
                                            <div class="text-dark-75">
                                                Quotation
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="card card-custom wave wave-animate-slow wave-success mb-4">
                                <div class="card-body">
                                    <div class="d-flex align-items-center p-5">
                                        <div class="mr-6">
                                       <span class="svg-icon svg-icon-success svg-icon-4x">
                                            <i class="fa fa-th-large text-success font-size-h1-xxl"></i>
                                       </span>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <a href="{{ route('salesorder.index') }}"
                                               class="text-dark text-hover-success font-weight-bold font-size-h2 mb-3">
                                                {{ $sales_order_total }}
                                            </a>
                                            <div class="text-dark-75">
                                                Sales Order
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="card card-custom wave wave-animate-slow wave-info mb-4">
                                <div class="card-body">
                                    <div class="d-flex align-items-center p-5">
                                        <div class="mr-6">
                                       <span class="svg-icon svg-icon-info svg-icon-4x">
                                            <i class="fa fa-th-large text-info font-size-h1-xxl"></i>
                                       </span>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <a href="{{ route('eventrequest.index') }}"
                                               class="text-dark text-hover-info font-weight-bold font-size-h2 mb-3">
                                                {{ $event_request_total }}
                                            </a>
                                            <div class="text-dark-75">
                                                Event Request
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="card card-custom wave wave-animate-slow wave-dark mb-4">
                                <div class="card-body">
                                    <div class="d-flex align-items-center p-5">
                                        <div class="mr-6">
                                       <span class="svg-icon svg-icon-dark svg-icon-4x">
                                           <i class="fas fa-ban text-dark font-size-h1-xxl"></i>
                                       </span>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <a href="{{ route('complaint.index') }}"
                                               class="text-dark text-hover-dark font-weight-bold font-size-h2 mb-3">
                                                {{ $complaint_total }}
                                            </a>
                                            <div class="text-dark-75">
                                                Complaint
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if($roleName == 'ESS')
                        <div class="row"></div>
                    @endif

                    <br>
                    @if($roleName == 'super-admin' || $roleName == 'Zonal Manager')
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card card-custom gutter-b">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h3 class="card-label">
                                                ZoneWise Inquiry Chart
                                            </h3>
                                        </div>
                                        <div class="card-toolbar">
                                            <div class="input-group input-daterange">
                                                <input type="text" class="form-control" name="from_date"
                                                       id="kt_daterangepicker_1" readonly=""
                                                       placeholder="Select time"/>
                                                <button type="button" name="zonesfilter" id="zonesfilter"
                                                        class="zonewise_Inquirybtn btn btn-info btn-sm">Filter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="zonewise_inquiry_chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card card-custom gutter-b">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h3 class="card-label">
                                                ZoneWise SalesOrder Chart
                                            </h3>
                                        </div>
                                        <div class="card-toolbar">
                                            <div class="input-group input-daterange">
                                                <input type="text" class="form-control" name="from_date"
                                                       id="kt_daterangepicker_2" readonly=""
                                                       placeholder="Select time"/>
                                                <button type="button" name="zonesfilter" id="zonesfilter"
                                                        class="zonewise_SalesOrderbtn btn btn-info btn-sm">Filter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="zonewise_salesorder_chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            <div class="col-lg-12">
                                <div class="card card-custom gutter-b">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h3 class="card-label">
                                                LocationWise Inquiry Chart
                                            </h3>
                                        </div>
                                        <div class="card-toolbar">
                                            <div class="input-group input-daterange">
                                                <input type="text" class="form-control" name="from_date"
                                                       id="kt_daterangepicker_3" readonly="" placeholder="Select time"/>
                                                <button type="button" name="locationsfilter" id="locationsfilter"
                                                        class="locationwise_Inquirybtn  btn btn-info btn-sm">Filter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="locationwise_inquiry_chart"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="card card-custom gutter-b">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h3 class="card-label">
                                                LocationWise SalesOrder Chart
                                            </h3>
                                        </div>
                                        <div class="card-toolbar">
                                            <div class="input-group input-daterange">
                                                <input type="text" class="form-control" name="from_date"
                                                       id="kt_daterangepicker_4" readonly="" placeholder="Select time"/>
                                                <button type="button" name="locationsfilter" id="locationsfilter"
                                                        class="locationwise_SalesOrderbtn btn btn-info btn-sm">Filter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="locationwise_salesorder_chart"></div>
                                    </div>
                                </div>
                            </div>

                    @elseif($roleName != 'ESS' )
                            <div class="col-lg-12">
                                <div class="card card-custom gutter-b">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h3 class="card-label">
                                                LocationWise Inquiry Chart
                                            </h3>
                                        </div>
                                        <div class="card-toolbar">
                                            <div class="input-group input-daterange">
                                                <input type="text" class="form-control" name="from_date"
                                                       id="kt_daterangepicker_3" readonly="" placeholder="Select time"/>
                                                <button type="button" name="locationsfilter" id="locationsfilter"
                                                        class="locationwise_Inquirybtn  btn btn-info btn-sm">Filter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="locationwise_inquiry_chart"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="card card-custom gutter-b">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h3 class="card-label">
                                                LocationWise SalesOrder Chart
                                            </h3>
                                        </div>
                                        <div class="card-toolbar">
                                            <div class="input-group input-daterange">
                                                <input type="text" class="form-control" name="from_date"
                                                       id="kt_daterangepicker_4" readonly="" placeholder="Select time"/>
                                                <button type="button" name="locationsfilter" id="locationsfilter"
                                                        class="locationwise_SalesOrderbtn btn btn-info btn-sm">Filter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="locationwise_salesorder_chart"></div>
                                    </div>
                                </div>
                            </div>
                    @endif
                    @if($roleName!='ESS')
                        <div class="row mt-5">
                            <div class="col-xl-12">
                                <div class="card card-custom">
                                    <div class="card-header flex-wrap border-0 pt-6 pb-0">
                                        <div class="card-title">
                                            <h3 class="card-label">
                                                Complaint Listing
                                            </h3>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form class="complaint-js-filter-form" id="complaint-filter-js">
                                            <div class="row align-items-center">
                                                <div class="col-lg-9 col-xl-8">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-4 my-2 my-md-0">
                                                            <div class="input-icon">
                                                                <input type="text" class="form-control"
                                                                       name="search_by_name"
                                                                       placeholder="Search any column"
                                                                       id="kt_datatable_search_query"/>
                                                                <span><i class="flaticon2-search-1 text-muted"></i></span>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 my-2 my-md-0">
                                                            <button class="btn btn-light-primary px-6 font-weight-bold"
                                                                    id="submitFilterComplaint"
                                                                    title="Search"><i class="fa fa-search"
                                                                                      aria-hidden="true"></i>
                                                                Search
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <table class="table table-striped" id="complaint_datatable"
                                               data-url="{{ route('dashboard.complaint_datatables') }}">
                                            <thead>
                                            <tr class="datatable-row" style="left: 0px;">
                                                <th>#</th>
                                                <th>Customer Name</th>
                                                <th>Distributor Name</th>
                                                <th>Email</th>
                                                <th>Contact No.</th>
                                                <th>Invoice No.</th>
                                                <th>Actions</th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif

@endsection
@section('scripts')
    <script type="text/javascript">
        var loginTost = "{{ session('flash_notification.login.success') }}";
    </script>
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>

    <script src="{{ asset('js/pages/widgets.js') }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ url('js/modules/dashboard/dashboard.js') }}"></script>
    <script type="text/javascript"
            src="{{ url('js/modules/dashboard/complaint_datatable.js?v='.time()) }}"></script>
    <script>
        var date = new Date();
        "use strict";

        const primary = '#6993FF';

        $(document).ready(function () {
            var roleName = {!! json_encode(Auth::user()->getRoleNames()) !!};


            function setRoleBasedCharts(roleName) {

                if (roleName == 'Zonal Manager' || roleName == 'super-admin') {
                    setLocationCharts();
                    setZoneCharts();
                } else if(roleName == 'Area Manager' ||  roleName == 'State Head' || roleName == 'State Manager' ||  roleName == 'Dealer' ||  roleName == 'Distributor') {
                    setLocationCharts();
                }
            }

            function setLocationCharts() {
                SetChart("#locationwise_inquiry_chart", 'Locations', , 'Inquiries', );
                SetChart("#locationwise_salesorder_chart", 'Locations', , 'Sales Order', );
            }

            function setZoneCharts() {
                SetChart("#zonewise_salesorder_chart", 'Zones', , 'Sales Order', );
                SetChart("#zonewise_inquiry_chart", 'Zones', , 'Inquiries', );
            }

            setRoleBasedCharts(roleName);
        });


        function SetChart(chartId, xAxisTitle, xAxisCategory, yAxisTitle, yAxisData) {
            const apexChart = chartId;
            xAxisCategory = xAxisCategory.length ? xAxisCategory : ['No Data'];
            yAxisData = yAxisData.length ? yAxisData : [0];

            var options = {
                series: [{
                    name: yAxisTitle,
                    data: yAxisData
                }],
                chart: {
                    type: 'bar',
                    height: 350
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '85%',
                        endingShape: 'rounded'
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: -1,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: xAxisCategory,
                    title: {
                        text: xAxisTitle
                    }
                },
                yaxis: {
                    title: {
                        text: yAxisTitle
                    },
                    min: 1,
                    max: 10
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return "Total " + val + " " + yAxisTitle;
                        }
                    }
                },
                colors: primary
            };

            var chart = new ApexCharts(document.querySelector(apexChart), options);
            chart.render();
        }

        $('#kt_daterangepicker_1,#kt_daterangepicker_2,#kt_daterangepicker_3,#kt_daterangepicker_4').daterangepicker(
            {
                // startDate: moment().subtract('days', 29),
                // endDate: moment(),
                showDropdowns: true,
                showWeekNumbers: true,
                opens: 'center',
                buttonClasses: ['btn btn-default'],
                applyClass: 'btn-small btn-primary',
                cancelClass: 'btn-small',
                format: 'DD/MM/YYYY',
                separator: ' to ',
                locale: {
                    applyLabel: 'Submit',
                    fromLabel: 'From',
                    toLabel: 'To',
                    firstDay: 1
                }
            },
          );

        $('.zonewise_Inquirybtn').on('click', function (e) {
            var from_date = $('#kt_daterangepicker_1').data('daterangepicker').startDate.format('DD-MM-YYYY');
            var to_date = $('#kt_daterangepicker_1').data('daterangepicker').endDate.format('DD-MM-YYYY');

            $.ajax({
                url: route('dashboard.datefilter'),
                dataType: 'json',
                cache: false,
                type: "GET",
                data: {
                    from_date: from_date,
                    to_date: to_date,
                    type: 'zonewise_inquiry'
                },
                success: function (result) {
                    console.log(result);
                    $("#zonewise_inquiry_chart").html('');
                    if (result.status) {
                        SetChart("#zonewise_inquiry_chart", 'Zones', result.zone_name_data, 'Inquiries', result.zonewise_inquiry_data);
                    }
                },
                error: function (error) {
                    console.error('Error fetching data:', error);
                }
            });
        });

        $('.zonewise_SalesOrderbtn').on('click', function (e) {
            var from_date = $('#kt_daterangepicker_2').data('daterangepicker').startDate.format('DD-MM-YYYY');
            var to_date = $('#kt_daterangepicker_2').data('daterangepicker').endDate.format('DD-MM-YYYY');

            $.ajax({
                url: route('dashboard.datefilter'),
                dataType: 'json',
                cache: false,
                type: "GET",
                data: {
                    from_date: from_date,
                    to_date: to_date,
                    type: 'zonewise_salesorder'
                },
                success: function (result) {
                    console.log(result);
                    $("#zonewise_salesorder_chart").html('');

                    if (result.status) {
                        SetChart("#zonewise_salesorder_chart", 'Zones', result.zone_name_data, 'Sales Orders', result.zonewise_salesorder_data);
                    }
                },
                error: function (error) {
                    console.error('Error fetching data:', error);
                }
            });
        });

        $('.locationwise_Inquirybtn').on('click', function (e) {
            var from_date = $('#kt_daterangepicker_3').data('daterangepicker').startDate.format('DD-MM-YYYY');
            var to_date = $('#kt_daterangepicker_3').data('daterangepicker').endDate.format('DD-MM-YYYY');

            $.ajax({
                url: route('dashboard.datefilter'),
                dataType: 'json',
                cache: false,
                type: "GET",
                data: {
                    from_date: from_date,
                    to_date: to_date,
                    type: 'locationwise_inquiry'
                },
                success: function (result) {
                    console.log(result);
                    $("#locationwise_inquiry_chart").html('');

                    if (result.status) {
                        SetChart("#locationwise_inquiry_chart", 'Locations', result.location_name_data, 'Inquiries', result.locationwise_inquiry_data);
                    }
                },
                error: function (error) {
                    console.error('Error fetching data:', error);
                }
            });
        });

        $('.locationwise_SalesOrderbtn').on('click', function (e) {
            var from_date = $('#kt_daterangepicker_4').data('daterangepicker').startDate.format('DD-MM-YYYY');
            var to_date = $('#kt_daterangepicker_4').data('daterangepicker').endDate.format('DD-MM-YYYY');

            $.ajax({
                url: route('dashboard.datefilter'),
                dataType: 'json',
                cache: false,
                type: "GET",
                data: {
                    from_date: from_date,
                    to_date: to_date,
                    type: 'locationwise_salesorder'
                },
                success: function (result) {
                    console.log(result);
                    $("#locationwise_salesorder_chart").html('');

                    if (result.status) {
                        SetChart("#locationwise_salesorder_chart", 'Locations', result.location_name_data, 'Sales Orders', result.locationwise_salesorder_data);
                    }
                },
                error: function (error) {
                    console.error('Error fetching data:', error);
                }
            });
        });
    </script>

@endsection