@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.store_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-2 filters">
                            {!! Form::label('income_type', __('report.income_type'), ['class' => 'first-column']) !!}
                            {!! Form::select(
                                'income_type',
                                [1 => 'Brutto Income', 2 => 'Netto Income'],
                                isset($inputs['income_type']) ? $inputs['income_type'] : '',
                                ['class' => 'form-control select2 second-column'],
                            ) !!}
                        </div>

                        <div class="col-md-2 filters">
                            {!! Form::label('delivery_type[]', __('report.delivery_type'), ['class' => 'first-column']) !!}
                            {!! Form::select(
                                'delivery_type[]',
                                deliveryType(),
                                isset($inputs['delivery_type']) ? $inputs['delivery_type'] : '',
                                ['class' => 'form-control select2 second-column', 'multiple' => true],
                            ) !!}
                        </div>

                    </div>
                    <div class="row col-md-12 filters_list  pr-0 second-div">
                        <div class="col-md-2 filters">
                            {!! Form::label('order_from', __('report.platform'), ['class' => 'first-column']) !!}
                            {!! Form::select('order_from[]', orderFrom(), isset($_GET['order_from']) ? $_GET['order_from'] : '', [
                                'class' => 'form-control select2 second-column',
                                'multiple' => true,
                            ]) !!}
                        </div>
                        <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($inputs['is_download']) && (isset($listData) && count($listData) > 0))
                    @php
                        $extraFilters = [
                            'from_date' => $inputs['from_date'], 'to_date' => $inputs['to_date'],
                            'from_time' => $inputs['from_time'], 'to_time' => $inputs['to_time'],
                        ];
                    @endphp
                        <div class="row">
                            <div class="col-md-10 text-right mt-4">
                                <a href="{{ route('report.store-hourly-income', ['type' => 'xls']) }}"
                                    class="btn btn-success">
                                    <i class="fa fa-download"></i>
                                    {!! __('report.download_excel') !!}
                                </a>
                            </div>
                            <div class="col-md-2 mt-4">
                                <a href="{{ route('report.store-hourly-income', ['type' => 'pdf'] + $extraFilters) }}"
                                    class="btn btn-success">
                                    <i class="fa fa-download"></i>
                                    {!! __('report.download_pdf') !!}
                                </a>
                            </div>
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-12">
                            <div class="table-responsive">
                                @include('admin.report.store-hourly-income-view')
                            </div>
                        </div>
                    </div>
                    @if (isset($listData) && count($listData) > 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>
    <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">

                    @if (!isset($inputs['is_download']) && (isset($weekData) && count($weekData) > 0))
                        <div class="row">
                            <div class="col-md-10 text-right mt-4">
                                <a href="{{ route('report.store-hourly-income', ['type' => 'xls', 'for' => 'weekly']) }}"
                                    class="btn btn-success">
                                    <i class="fa fa-download"></i>
                                    {!! __('report.download_excel') !!}
                                </a>
                            </div>
                            <div class="col-md-2 mt-4">
                                <a href="{{ route('report.store-hourly-income', ['type' => 'pdf', 'for' => 'weekly']) }}"
                                    class="btn btn-success">
                                    <i class="fa fa-download"></i>
                                    {!! __('report.download_pdf') !!}
                                </a>
                            </div>
                        </div>
                    @endif
                    <div class="col-12 pl-0 pr-0">
                        <div class="table-responsive">
                            @include('admin.report.store-weekly-income-view')
                        </div>
                    </div>
                </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)
                @php $count=0; @endphp
                let hours = [];
                @foreach ($stores as $storeId => $storeName)
                    @php
                        if (!isset($listData[$storeId])) {
                            continue;
                        }
                        $hourDetail = $listData[$storeId];
                        $graphPrices = [];
                    @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;
                            }
                        @endphp
                    @endforeach
                    @if ($count > 0)
                        hexColor = "{!! '#' . substr(md5(rand()), 0, 6) !!}";
                    @endif
                    hours = @php echo json_encode($graphPrices); @endphp;
                    lineData.push({
                        label: '{!! addslashes($storeName) !!}',
                        data: hours,
                        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) 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