@extends('layout.app')
@section('_style')
    <link href="{{ asset('css/customer.css') }}" rel="stylesheet"/>
    <style>
        text {
            font-size: 14px;
        }
    </style>
@endsection
@section('content')
    <div class="container">
        <div class="side-app">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{ $title }}</h3>
                        </div>
                        {!! Form::textArea('note', null, array('class' => 'form-control autocomplete-textarea','rows'=>5)) !!}
                        <div class="row">
                            <div id="piechart_relation_account" class="row tc">
                            </div>
                            <div class="ct-tooltip" style="display: none; left: 252px; top: -33px;"></div>
                        </div>
                        <div id="chart_div" style="width:100%;height:100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('_script')
    <script src="{{asset('js/jquery.textcomplete.min.js')}}"></script>

    <script>
        $('.autocomplete-textarea').textcomplete([{
            match: /(^|\s)@(\w*(?:\s*\w*))$/,

            search: function(query, callback) {
                let data = [{
                    name: "Quang"
                }, {
                    name: "Tèo"
                }, {
                    name: "Mít"
                }];
                callback(data);
            },

            template: function(hit) {
                // phan hien thi o dropdown
                let html = `
<a class="tag-item" href="">
<span class="label">${hit.name} <img width="40" src='{{asset('/assets/images/brand/logo.png')}}'/></span>
</a>`;
                return html;
            },

            replace: function(hit) {
                // phan hien thi khi
                return hit.name.trim();
            }
        }]);
    </script>
    {{----}}
    {{-- Biểu đồ Chart.js (thay Google Charts; bỏ thư viện CanvasJS nạp thừa từ CDN ngoài): số lượng theo sản phẩm / dịch vụ --}}
    <script src="{{ asset('js/chart.min.js') }}"></script>
    <script src="{{ asset('js/crm-charts.js') }}?v=20260925-2"></script>
    <script>
        (function () {
            var rows = {!! json_encode(collect($services)->filter(function ($s) { return $s->count > 0; })->values()->map(function ($s) { return ['name' => (string) @$s->service->name, 'value' => (float) $s->count]; }), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) !!};
            CrmCharts.hbar('chart_div', {
                title: 'Biểu đồ doanh thu sản phẩm dịch vụ', unit: '',
                labels: rows.map(function (r) { return r.name; }),
                datasets: [{label: 'Doanh thu', data: rows.map(function (r) { return r.value; }), color: '#14B8A6'}],
                rowHeight: 28
            });
        })();
    </script>
    <!-- Index Scripts -->
@endsection