@extends('admin.layouts.contentLayoutMaster')

@section('title','消費數據分析')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/admin/chart/chart.css') }}">
@endsection

@section('page-styles')
<style>
    .checkbox{
        margin-left: 10px;
    }
    .search_block{
        margin: 10px 0px 0px 0px;
    }
</style>
@endsection

@section('content')
<section>
    <form action="">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-3">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light"><strong>每日消費</strong></h4>
                                            </div>
                                            <div class="widget-extra-full"
                                            data-toggle="tooltip" 
                                            data-placement="bottom"
                                            title="搜尋日期加總金額">
                                                <span class="h2 animation-expandOpen">
                                                    {{ $json_today_purchase }}
                                                </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                                <div class="col-md-3">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light"><strong>本週總消費</strong></h4>
                                            </div>
                                            <div class="widget-extra-full"
                                            data-toggle="tooltip" 
                                            data-placement="bottom"
                                            title="當週總金額">
                                                <span class="h2 themed-color-dark animation-expandOpen">
                                                    {{ $json_week_purchase }}
                                                </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                                <div class="col-md-3">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light"><strong>本月總消費</strong></h4>
                                            </div>
                                            <div class="widget-extra-full"
                                            data-toggle="tooltip" 
                                            data-placement="bottom"
                                            title="當月總金額">
                                                <span class="h2 themed-color-dark animation-expandOpen">
                                                   {{ $json_month_purchase }}
                                                </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                                <div class="col-md-3">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light"><strong>今年總消費</strong></h4>
                                            </div>
                                            <div class="widget-extra-full"
                                            data-toggle="tooltip" 
                                            data-placement="bottom"
                                            title="當年總金額">
                                                <span class="h2 themed-color-dark animation-expandOpen">
                                                    {{ $json_year_purchase }}
                                                </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>

<section>
    <form action="">
        <div class="row" id="table-hover-row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="justify-content-start">
                            <div class="col-lg-2 col-md-4 col-sm-5 d-sm-inline-block d-md-inline-block d-lg-inline-block">
                                <input class="form-control publish_flatpickr flatpickr-input" name="start_date" placeholder="起" type="text" value="{{  $start_date }}">
                                @if ($errors->has('publish_start_at')) 
                                    @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('publish_start_at') ]) 
                                @endif
                            </div>
                            <div class="col-lg-2 col-md-4  col-sm-5 d-sm-inline-block d-md-inline-block d-lg-inline-block">
                                <input class="form-control publish_flatpickr flatpickr-input" name="end_date" placeholder="訖" type="text" value="{{  $end_date }}">
                                @if ($errors->has('publish_end_at')) 
                                    @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('publish_end_at') ]) 
                                @endif
                            </div>
                            <div class="col-lg-7 col-md-12 col-sm-12 d-md-inline-block" style="margin-top: 10px">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        @foreach ($firm_services as $item)
                                        <tr>
                                            <div class="checkbox" style="margin:5px">
                                                <input 
                                                    type="checkbox" 
                                                    id="checkbox_{{ $item->id }}" 
                                                    class="checkbox-input" 
                                                    value="{{ $item->id }}"
                                                    >
                                                <label for="checkbox_{{ $item->id }}">{{ $item->name }}</label>
                                            </div>
                                        </tr>
                                        @endforeach
                                    </thead>
                                </table>
                            </div>
                            <div class="search_block row">
                                <div class="col-md-12">
                                    <input type="hidden" name="checkbox_service" value="{{ $checkbox_str }}">
                                    <button type="submit" class="btn btn-primary glow mr-1 mb-1">查詢</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-content">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
@endsection

@section('vendor-scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
@endsection

@section('page-scripts')
<script src="{{mix('assets/js/admin/chart/form.js')}}"></script>
<script>
    let labels = {!! $json_date !!};
    let json_total_purchase = {!! $json_total_purchase !!};

    $( document ).ready(function() {
        let checkbox_str = $("input[name='checkbox_service']").val();
        checkbox_str = checkbox_str.split(",");
        
        checkbox_str.forEach(e => {
            $('#checkbox_'+e).prop('checked', true);
        });
    });
    
    $(".checkbox").on("click",function(){
        let valuelist = "";
        
        $('input:checked').each(function() 
        {
            valuelist += $(this).val()+",";
        });
        
        if (valuelist.length > 0) 
        {
            valuelist = valuelist.substring(0, valuelist.length - 1);
            $("input[name='checkbox_service']").val(valuelist);
        }else {
            $("input[name='checkbox_service']").val('');
        }
    });

    Chart.defaults.font.size = parseInt($(window).width()/60);
    const data = {
      labels: labels,
      datasets: json_total_purchase,
    };

    // Example:
    // const data = {
    //   labels: labels,
    //   datasets: json_total_purchase,
    //   datasets: [
    //     {
    //         label: '消費累積',
    //         backgroundColor: 'rgb(21, 173, 16)',
    //         borderColor: 'rgb(21, 173, 16)',
    //         data: json_total_purchase, 

    //         tension: 0.5,
    //     },
    //     {
    //         label: '熟客數',
    //         backgroundColor: 'rgb(184, 17, 69)',
    //         borderColor: 'rgb(184, 17, 69)',
    //         data: [5, 10, 15, 5, 25, 35, 55],
    //         tension: 0.5,
    //     },
    //   ]
    // };
  
    const config = {
      type: 'bar',
      data: data,
      options: {}
    };
    
    const myChart = new Chart(document.getElementById('myChart'),config);
</script>
@endsection