@extends('admin.layouts.container')

@section('content')
<div class="dashboard-body">

    @if(auth()->user()->canAccess('home','stats'))
    
    {{--
        <div class="title-wrapper">
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <h6 class="pg-title"> Tasks </h6>
                </div>
                <div class="col-lg-7 text-lg-end mt-3 mt-lg-0">
                    <div class="title-aside d-flex justify-content-lg-end mt-4 mt-lg-0 align-items-center">
                        <div class="avatars-imgs">
                            <a href="#" class="user-img"> <img src="{{url('')}}/assets/admin/images/av1.png" alt=""> </a>
                            <a href="#" class="user-img"> <img src="{{url('')}}/assets/admin/images/av2.png" alt=""> </a>
                            <a href="#" class="user-img"> <img src="{{url('')}}/assets/admin/images/av3.png" alt=""> </a>
                        </div>
                        <div class="dropdown ms-2">
                            <button class="btn bg-transparent border-0 p-0 dropdown-toggle after-none" type="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                <i class="fas fa-ellipsis-vertical"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-title mt-4">
            <div class="row">
                <div class="col-lg-6">
                    <a href="#" class="ref-btn butn-st2 line-butn py-2 px-3"> <i class="fal fa-calendar"></i> <span class="txt mx-2"> Last updated: Feb 28, 2024 </span> <i class="fal fa-repeat"></i> </a>
                </div>
                <div class="col-lg-6">
                    <div class="nav-butns d-flex justify-content-lg-end mt-4 mt-lg-0">
                        <div class="dropdown">
                            <button class="butn-st2 line-butn py-2 px-3 ms-2 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fal fa-filter me-2"></i> Filter
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Filter</a></li>
                                <li><a class="dropdown-item" href="#">Filter</a></li>
                            </ul>
                        </div>
                        <a href="#" class="ref-btn butn-st2 blue-butn py-2 px-3 ms-2"> <i class="fal fa-download"></i> <span class="txt ms-2"> Import/Export </span> </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="charts_container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="chart_box mt-5">
                        <div class="chart_head mb-4">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <!-- <h5>Revenue</h5> -->
                                    <div class="form-group">
                                        <select name="" id="" class="form-control input-sm form-select border-0 fw-600 fs-5 w-auto">
                                            <option value=""> Revenue </option>
                                            <option value=""> Revenue </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="d-flex justify-content-lg-end mt-4 mt-lg-0">
                                        <div class="form-group ms-2">
                                            <select name="" id="" class="form-control input-sm form-select w-auto ms-2">
                                                <option value=""> Monthly </option>
                                                <option value=""> Weekly </option>
                                            </select>
                                        </div>
                                        <div class="form-group ms-2">
                                            <select name="" id="" class="form-control input-sm form-select w-auto ms-2">
                                                <option value=""> All Products </option>
                                                <option value=""> All Products </option>
                                            </select>
                                        </div>
                                        <div class="form-group ms-2">
                                            <input type="date" class="form-control input-sm w-auto ms-2" placeholder="Select Date">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="line_chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="statics-sec">
            <div class="row">
                <div class="col-lg-8">
                    <div class="statics">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st1.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Total profit </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st2.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Avg Sales </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-danger"> -0.12% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st3.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Total Sales </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st4.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Annual Target </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st5.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Communication Rate </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st6.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text">  New Customer </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="preformance-table">
                        <div class="btn-title d-flex align-items-center justify-content-between">
                            <h5> Top preformance </h5>
                            <a href="#" class="butn-st2 line-butn butn-md"> <span> View All </span> </a>
                        </div>
                        <div class="users">
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av1.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av2.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av3.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av4.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av5.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            var line_chart_options = {
              series: [{
            //   name: 'عضو عادى',
              data: [31, 40, 28, 51, 42, 87, 50,28, 51, 70, 109, 150]
            }],
              chart: {
              height: 350,
              type: 'area'
            },
            colors: ['#3D2E84'],
            dataLabels: {
              enabled: false
            },
            stroke: {
              curve: 'smooth'
            },
            xaxis: {
                    categories: ['Jan','Feb', 'Mar', 'Apr', 'May', 'Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                },
            tooltip: {
              x: {
                formatter: function(val) {
                    return val + "unit"
                }
              },
            },
            };
    
            var chart = new ApexCharts(document.querySelector("#line_chart"), line_chart_options);
            chart.render();
        </script>


    --}}
    
        <div class="new-charts pt-5">
            <div class="title-filter border p-3 mb-3 bg-light rounded-4">
                <form id="filter">
                <div class="row align-items-center">
                    <div class="col-lg-3">
                        <h4 class=""> Analysis </h4>
                    </div>
                    <div class="col-lg-9">
                        <div class="section-filters mt-2 mt-lg-0 position-relative pe-5" >
                            <button type="button" onclick="ResetData()"  class="x-btn" id="clearBtn">
                                <i class="bi bi-x"></i>
                            </button>
                            <div class="row gx-lg-3 justify-content-lg-end align-items-center">
                                <div class="col-lg-3 col-6">
                                    <div class="form-group mt-3 mt-lg-0">
                                        <div class="cs-wrapper" data-search="Employee...">
                                            <select onchange="getStats()" name="employee_id" id="employee_id" class="cs-source">
                                                <option value="">Employee</option>
                                                @foreach($employees as $row)
                                                    <option value="{{ $row->id }}">{{ $row->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-6">
                                    <div class="form-group mt-3 mt-lg-0">
                                        <div class="cs-wrapper" data-search="Industry...">
                                            <select onchange="getStats()" name="sector_id" id="sector_id" class="cs-source">
                                                <option value="">Industry</option>
                                                @foreach($sectors as $row)
                                                    <option value="{{ $row->id }}">{{ $row->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-6">
                                    <div class="form-group mt-3 mt-lg-0">
                                        <select onchange="selectPeriod()" name="period" id="period" class="form-control form-select">
                                            <option value="">Time Period</option>
                                            <option value="week">Week</option>
                                            <option value="month">Month</option>
                                            <option value="quarter">Quarter</option>
                                            <option value="year">Year</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-6">
                                    <div class="form-group mt-3 mt-lg-0">
                                        <input type="text" onchange="selectDates()" name="dates" id="dates" placeholder="Dates From:To" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
        <div id="stats"></div>
    @endif
</div>

@endsection

@section('inner_js')

    @if(auth()->user()->canAccess('home','stats'))
    
    <script>
        $('input[name="dates"]').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        });
        
        $('input[name="dates"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY') + '//' + picker.endDate.format('DD-MM-YYYY'));
            selectDates($(this).val());
        });
        
        $('input[name="dates"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            getStats()
        });

    </script>

    <script>
        function ResetData()
        {
            $('.cs-wrapper').each(function() {
                var wrapper = $(this);
                var select = wrapper.find('select.cs-source');
                var display = wrapper.find('.cs-display');
                select.val('');
                
                var placeholder = wrapper.data('search') || '';
                display.text(placeholder);
        
                // إعادة تهيئة plugin إذا يوجد method update
                if (typeof wrapper.customSelect === 'function') {
                    wrapper.customSelect('update'); // بعض plugins يحتاج هذا
                }
            });
            $('#period').val('');
            $('input[name="dates"]').val('');

            $('input[name="dates"]').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
            setTimeout(function () {
                getStats();
            }, 200);
        }
    
        function getStats()
        {
            clearBtnToggle()
            let data = $('#filter').serialize();
            $.ajax({
                url : "{{route('home.stats')}}",
                type : 'GET',
                data : data,
                success:function(data)
                {
                    $('#stats').html(data);
                }
            })
        }
        function selectPeriod()
        {
            $('input[name="dates"]').val('');

            $('input[name="dates"]').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
            
            setTimeout(function () {
                getStats();
            }, 100);
        }
        function selectDates()
        {
            $('#period').val('');
            setTimeout(function () {
                getStats();
            }, 100);
        }
        
        function clearBtnToggle()
        {
            let employee_id = $('#employee_id').val()
            let sector_id = $('#sector_id').val()
            let period = $('#period').val()
            let dates = $('#dates').val()
            if(dates || period || sector_id || employee_id)
            {
                $('#clearBtn').fadeIn(1000);
            }
            else
            {
                $('#clearBtn').fadeOut(1000);
            }
        }
        
        getStats()
    </script>
    @endif

@endsection
