@php
$layout = isSeller() ? 'layouts.seller' : 'layouts.admin';
@endphp

@extends($layout)
@section('css')
    <style>
        .table-responsive {
            overflow-x: auto !important;
        }

        .custom-datatable td {
            white-space: nowrap;
        }

        .custom-datatable th {
            white-space: nowrap;
        }
    </style>
@endsection
@section('content')
    <div class="page-header text-uppercase">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ __('report.store_hourly_income')}}</p>
            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{ __('common.home')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('report.employee_hourly_income')}}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col">
        <div class="row employee-list-view">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 employee-list-full">
                <div class="round-white-bg box-shadow">
                    {!! Form::open(array('route' => $route, 'method' => 'GET', 'class'=>'filter_form mobile_filter' , 'style' => 'display:block;')) !!}
                    <div class="row filters_list col-md-12 pr-0">
                        <div class="col-md-3 filters pl-0">
                            <div class="form-group custom-input-group custom-input-group-small date-form-control">
                                {!! Form::label('date', __('report.date'), ['class' => 'first-column']) !!}
                                <div class="hourly_dt_picker_range"
                                     style="overflow: hidden;background: #fff; cursor: pointer; padding: 8px 6px; border: 1px solid #ccc; width: 100%;height: 40px;">
                                </div>
                                {!! Form::hidden('from_date', isset($inputs['from_date'])?$inputs['from_date'] : '', ['id' => 'from_date']) !!}
                                {!! Form::hidden('to_date', isset($inputs['to_date'])?$inputs['to_date'] : '', ['id' => 'to_date']) !!}
                            </div>
                        </div>
                        <div class="col-md-2 filters">
                            <div class="form-group custom-input-group custom-input-group-small date-form-control">
                                {{ Form::label('time', __('report.time'), ['class' => 'first-column']) }}
                                {{ Form::text('', $inputs['from_time'] . '-' . $inputs['to_time'], ['class' => 'form-control', 'id' => 'start_end_time']) }}
                                {!! Form::hidden('from_time', isset($inputs['from_time']) ? $inputs['from_time'] : '', ['id' => 'from_time']) !!}
                                {!! Form::hidden('to_time', isset($inputs['to_time']) ? $inputs['to_time'] : '', ['id' => 'to_time']) !!}
                            </div>
                        </div>

                        @if (!isSeller())
                            <div class="col-md-3 filters">
                                {!! Form::label('store_ids', __('report.store'), ['class' => 'first-column']) !!}
                                {!! Form::select('store_ids[]', $stores, isset($inputs['store_ids']) ? $inputs['store_ids'] : [], [
                                    'class' => 'form-control select2 second-column',
                                    'id' => 'store_ids',
                                    'multiple' => true,
                                    'data-actions-box' => 'true',
                                    'data-width' => '100%',
                                ]) !!}
                            </div>
                        @endif
                        <div class="col-md-3 filters __filter_actions">
                            {!! Form::hidden('filter', 1) !!}
                            {!! Form::submit(__('orders.search'), ['class' => 'btn btn-primary btn_sub width80']) !!}
                            <a href="{{ route($route) }}"
                               class="btn btn-primary width80 ml-2">{!! __('orders.reset') !!}</a>
                        </div>
                    </div>
                    {!! Form::close() !!}
                    @if ((isset($listData) && count($listData) > 0) || (isset($salaryCost) && count($salaryCost) > 0))
                        <div class="row mt-4 mb-4">
                            <div class="col-md-12">
                                <div class="round-white-bg box-shadow">
                                    <div class="chart-div">
                                        <canvas id="myChart3" width="200" height="80"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4 mb-4">
                            <div class="col-md-12">
                                <div id="graph_legends" style="text-align: center;"></div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            function getRandomColor() {
                var letters = '0123456789ABCDEF'.split('');
                var color = '#';
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }
            let lineData = [];
            let hexColor = '#42e0fc';
            let legends = '';
            @if ((isset($listData) && count($listData) > 0) || (isset($salaryCost) && count($salaryCost) > 0))
                @php $count=0; @endphp
                let hours = [];
                @foreach ($stores as $storeId => $storeName)
                    @php
                        if (!isset($listData[$storeId]) && !isset($salaryCost[$storeId])) {
                            continue;
                        }
                        $hourDetail = $listData[$storeId] ?? [];
                        $employeeCost = $salaryCost[$storeId] ?? [];
                        $graphPrices = $employeePrice = [];
                    @endphp
                    @foreach ($graphHours as $hour)
                        @php
                            if (isset($hourDetail[$hour])) {
                                if (isset($inputs['income_type']) && $inputs['income_type'] == 1) {
                                    $graphPrices[] = $hourDetail[$hour]['tot_price'];
                                } else {
                                    $graphPrices[] = $hourDetail[$hour]['netto'];
                                }
                            } else {
                                $graphPrices[] = 0;
                            }
                            if(isset($employeeCost[$hour])){
                                $employeePrice[] = $employeeCost[$hour];
                            }else{
                                $employeePrice[] = 0;
                            }
                        @endphp
                    @endforeach
                    @if ($count > 0)
                        hexColor = "{!! '#' . substr(md5(rand()), 0, 6) !!}";
                    @endif
                    hours = @php echo json_encode($graphPrices); @endphp;
                    employeehours = @php echo json_encode($employeePrice); @endphp;
                    lineData.push({
                        label: '{!! addslashes($storeName) !!} (Store Income)',
                        data: hours,
                        backgroundColor: "transparent",
                        borderWidth: 10,
                        tension: 0.1,
                        borderColor: hexColor,
                    });
                    lineData.push({
                        label: '{!! addslashes($storeName) !!} (Employee Cost)',
                        data: employeehours,
                        backgroundColor: "transparent",
                        borderWidth: 10,
                        tension: 0.1,
                        borderColor: hexColor,
                    });
                    legends += "<span class='item-cost-status mr-2 ml-2' style='background-color: " + hexColor +
                            ";'></span>{!! $storeName !!}"
                    @php $count++; @endphp
                @endforeach
            @endif

            $("#graph_legends").html(legends);

            let rangeHours = @php echo json_encode($graphHours) @endphp;
            let newHours = [];
            for (let i = 0; i < rangeHours.length; i++) {
                newHours.push(rangeHours[i] + ':00');
            }

                    @if ((isset($listData) && count($listData) > 0) || (isset($salaryCost) && count($salaryCost) > 0)) let ctx3 = document.getElementById('myChart3');
            let myChart3 = new Chart(ctx3, {
                type: 'line',
                data: {
                    labels: newHours,
                    datasets: lineData
                },
                options: {
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            }); @endif
        });

        $(document).ready(function() {
            let hourlyDatePicker = $('.hourly_dt_picker_range');
            if (!hourlyDatePicker.length) {
                return;
            }

            var start = moment().subtract(1, 'day').format('DD-MM-YYYY');
            var end = moment().format('DD-MM-YYYY');

            @if (isset($inputs['from_date'])) start = "{{ $inputs['from_date'] }}";
            end = "{{ $inputs['to_date'] }}"; @endif

            showPicker(start, end, '.hourly_dt_picker_range')


        });
    </script>
@endsection