@extends('backend.layout')

@section('content')
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-flat">
            <div class="panel-heading">
                <h5 class="panel-title">Thống kê thiết bị sử dụng</h5>
            </div>

            <div class="table-responsive">
                <table class="table table-lg text-nowrap">
                    <tbody>
                        <tr >
                            <td class="col-md-4" style="padding-top: 2% ; text-align: center">
                                <ul class="text-center">
                                    <a href="{{route('backend.box.list')}}" class="btn border-success-400 text-success-400 btn-flat btn-rounded btn-icon btn-xs valign-text-bottom"><i class="icon-iphone"></i></a>
                                    <div class="text-muted ">Thiết bị ITVmax cung cấp</div>
                                    <div class="text-semibold hidden-xs">{{ number_format(@$devicesItv,0,'.','.') }}</div>
                                </ul>
                            </td>

                            <td class="col-md-4" style="padding-top: 2% ; text-align: center">
                                <ul class="text-center">
                                    <a href="javascript:void(0);" class="btn border-teal text-teal btn-flat btn-rounded btn-icon btn-xs valign-text-bottom"><i class="icon-users2"></i></a>
                                    <div class="text-muted">Thiết bị khách hàng</div>
                                    <div class="text-semibold hidden-xs">{{ number_format(@$devicesorther,0,'.','.') }}</div>
                                </ul>
                            </td>

                            <td class="col-md-4" style="padding-top: 2%">
                                <ul class="text-center">
                                    <a href="{{route('backend.box.list')}}" class="btn border-indigo-400 text-indigo-400 btn-flat btn-rounded btn-icon btn-xs valign-text-bottom"><i class="icon-tablet"></i></a>
                                    <div class="text-muted">Thiết bị sử dụng dịch vụ</div>
                                    <div class="text-semibold hidden-xs">{{ number_format(@$devicesSrvice,0,'.','.') }}</div>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>	
            </div>

            <div class="table-responsive" style="min-height:335px;">
                <table class="table text-nowrap" >
                    <thead>
                        <tr>
                            <th class="text-center">DeviceId</th>
                            <th class="col-md-2 text-center ">Mac</th>
                            <th class="col-md-2 text-center">Kho</th>
                            <th class="col-md-2 text-center">Khách hàng</th>
                            <th class="col-md-2 text-center">Tình trạng</th>
                            <th class="col-md-2 text-center">Action</th> 
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($products as $product)
                            <tr class="text-center">
                                <td>
                                    <div class=""><a class="text-default text-semibold">{{$product->deviceId}}</a></div>
                                </td>
                                <td>{{$product->mac}}</td>
                                <td>
                                    @if(!$product->user_id)
                                        <span class="label label-success">Kho tổng</span>
                                    @else
                                        <span class="label label-info">{{$product->agent->name}}</span>
                                    @endif
                                </td>
                                <td>
                                    @if(!$product->customer_id)
                                        <span class="label label-success"></span>
                                    @else
                                        <span class="label label-info">{{$product->customer->fullname}}</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="label label-{{$product->status}}">{{ config('itv.device.status.'.$product->status) }}</span>
                                </td>
                                <td>
                                    <ul class="icons-list" style="padding-left: 10px;">
                                        <li style="margin-right:10px;"><a data-id="{{$product->deviceId}}" data-device="{{$product->deviceId}}" data-popup="tooltip" title="Thu hồi về kho tổng" class="text-warning back_store"><i class="icon-database-arrow"></i></a></li>
                                    </ul>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
   
	<div class="col-md-6">
        <div class="panel panel-flat">
            <div class="panel-heading">
                <h5 class="panel-title">Thống kê thiết bị trong kho</h5>
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li><a data-action="collapse"></a></li>
                        <li><a data-action="reload"></a></li>
                        <li><a data-action="close"></a></li>
                    </ul>
                </div>
            </div>
        
            <div class="panel-body">
                <div class="chart-container has-scroll">
                    <div class="chart has-fixed-height" id="basic_pie">
                        
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>

<div class="row">
    <div class="col-md-3">
        <div class="panel panel-flat"> 
            <div class="panel-heading">
				<h5 class="panel-title text-center text-semibold">Thống kê hợp đồng trong tháng</h5>
			</div>
        </div>
        <div class="panel panel-flat"  style="min-height: 197px" >
           
            <div class="row">
                <div class="text-center" style="padding-top:15px ">
                    <ul class="list-inline">
                        <li>
                            <a href="javascript:void(0);" class="btn border-teal text-teal btn-flat btn-rounded btn-icon btn-lg valign-text-bottom"><i class="icon-folder-open" style="font-size: 30px"></i></a>
                        </li>
                    </ul>
                    <ul class="list-inline">
                        <li class="text-center">
                            <div class="text-semibold hidden-xs" style="font-size: 1.5rem">Hợp đồng mở trong tháng</div>
                            <div class="text-muted" style="font-size: 1.7rem">{{ number_format(@$contractsNew,0,'.','.') }}</div>
                        </li>
                    </ul>
                    <div id="hours-available-bars">
                        <svg width="137.72500610351562" height="40" style="display: inline-block">
                            <g>
                                <rect class="d3-random-bars" width="3.967387007097157" x="1.7003087173273532" height="30" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="7.368004441751864" height="28" y="12" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="13.035700166176374" height="34" y="6" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="18.703395890600884" height="28" y="12" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="24.371091615025396" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="30.038787339449907" height="26" y="14"style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="35.706483063874416" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="41.37417878829893" height="38" y="2" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="47.04187451272344" height="32" y="8" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="52.70957023714795" height="36" y="4" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="58.37726596157246" height="22" y="18" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="64.04496168599698" height="34" y="6" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="69.71265741042149" height="36" y="4" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="75.380353134846" height="36" y="4" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="81.04804885927051" height="32" y="8" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="86.71574458369503" height="26" y="14" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="92.38344030811953" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="98.05113603254404" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="103.71883175696856" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="109.38652748139306" height="38" y="2" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="115.05422320581758" height="40" y="0" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="120.72191893024208" height="34" y="6" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="126.3896146546666" height="30" y="10" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="132.0573103790911" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                            </g>
                        </svg>
                    </div>
                </div>
                
            </div>
        </div>

        <div class="panel panel-flat" style="min-height: 197px" >
            <div class="row">
                <div class="text-center" style="padding-top:15px ">
                    <ul class="list-inline">
                        <li>
                            <a href="{{route('backend.box.list')}}" class="btn border-success-400 text-success-400 btn-flat btn-rounded btn-icon btn-xs valign-text-bottom"><i class="icon-folder-remove"  style="font-size: 30px"></i></a>
                        </li>
                    </ul>
                    <ul class="list-inline">
                        <li class="text-center">
                            <div class="text-semibold hidden-xs" style="font-size: 1.7rem">Hợp đồng hủy trong tháng</div>
                            <div class="text-muted" style="font-size: 1.5rem">{{ number_format(@$contractsCancel,0,'.','.') }}</div>
                        </li>
                    </ul>
                    <div id="hours-available-bars">
                        <svg width="137.72500610351562" height="40" style="display: inline-block">
                            <g>
                                <rect class="d3-random-bars" width="3.967387007097157" x="1.7003087173273532" height="30" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="7.368004441751864" height="28" y="12" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="13.035700166176374" height="34" y="6" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="18.703395890600884" height="28" y="12" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="24.371091615025396" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="30.038787339449907" height="26" y="14"style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="35.706483063874416" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="41.37417878829893" height="38" y="2" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="47.04187451272344" height="32" y="8" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="52.70957023714795" height="36" y="4" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="58.37726596157246" height="22" y="18" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="64.04496168599698" height="34" y="6" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="69.71265741042149" height="36" y="4" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="75.380353134846" height="36" y="4" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="81.04804885927051" height="32" y="8" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="86.71574458369503" height="26" y="14" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="92.38344030811953" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="98.05113603254404" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="103.71883175696856" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="109.38652748139306" height="38" y="2" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="115.05422320581758" height="40" y="0" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="120.72191893024208" height="34" y="6" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="126.3896146546666" height="30" y="10" style="fill: rgb(13, 194, 131);"></rect>
                                <rect class="d3-random-bars" width="3.967387007097157" x="132.0573103790911" height="24" y="16" style="fill: rgb(13, 194, 131);"></rect>
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
	<div class="col-md-9">
        <div class="panel panel-flat">
            <div class="navbar navbar-default navbar-xs fillter padding-0" style="">
				<form action="" method="GET">
                    <div class="navbar-collapse collapse" id="navbar-filter">
                        <ul class="nav navbar-nav">
							<li>
								<select name="year" id="year" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Năm">
                                    @foreach ($years as $year)
                                        <option value="{{$year}}" @if( isset($_GET['year']) &&  $_GET['year'] == $year ) selected @endif>{{$year}}</option>
                                    @endforeach
								</select> 
							</li>
						</ul>
                        <div class="navbar-right hidden-xs">
                            <ul class="nav navbar-nav">
                                <li>
                                    <button data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess"><i class="icon-search4 position-left"></i></button>
                                </li>
                                <li>
                                    <a class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.over_view.index') }}"><i class="icon-cancel-circle2 position-left"></i></a>
                                </li>
                                
                            </ul>
                        </div>
                    </div>
				</form>
			</div>
            <div class="panel-heading">
                <h6 class="panel-title text-semibold">Doanh thu năm {{ $_GET['year'] ?? date('Y') }}</h6>
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li><a data-action="collapse"></a></li>
                        <li><a data-action="reload"></a></li>
                        <li><a data-action="close"></a></li>
                    </ul>
                </div>
            </div>

            <div class="panel-body">
                <div class="chart-container">
                    <div class="chart" id="c3-axis-tick-rotation"></div>
                </div>
            </div>
        </div>
	</div>
</div>

@endsection
@push('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
	<style>
		
		.select-xs.select2-selection--single{
			height:36px;
		}
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding: 5px 5px;
			white-space: normal !important;
		}
		.select-xs.select2-selection--multiple .select2-search--inline .select2-search__field{
			min-width:200px;
		}
		.select2-selection--multiple .select2-search--inline .select2-search__field{
			padding:5px 0px !important;
			max-width: 200px;
		}
		.modal-header .close {
		    position: absolute;
		    right: 10px;
		    top: 9px;
		    margin-top: 0;
		}
		.modal.right .modal-dialog {
		  position: fixed;
		  margin: auto;
		  min-width: 350px; /* Điều chỉnh độ rộng của modal phù hợp với yêu cầu của bạn */
		  height: 100%;
		  top: 45%;
		  right: -370px; /* Khoảng cách từ phía bên phải màn hình */
		  transition: right 0.3s ease-in-out;
		}

		.modal.right.in .modal-dialog {
		  right: 0;
		}
	</style>
@endpush

@push('scripts')
    <script src="{{ URL::asset('backend/global_assets/js/plugins/visualization/c3/c3.min.js') }}"></script>
    <script src="{{ URL::asset('backend/global_assets/js/plugins/visualization/echarts/echarts.js') }}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
    
	<script type="text/javascript">
        $(function () {
            require.config({
                paths: {
                    echarts: '/backend/global_assets/js/plugins/visualization/echarts'
                }
            });
            require(
                [
                    'echarts',
                    'echarts/theme/limitless',
                    'echarts/chart/pie',
                    'echarts/chart/funnel'
                ],
                // Charts setup
                function (ec, limitless) {

                    var basic_pie = ec.init(document.getElementById('basic_pie'), limitless);

                    basic_pie_options = {

                        // Add title


                        // Add tooltip
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },

                        // Add legend
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['Chưa sử dụng', 'Đang sử dụng', 'Hỏng']
                        },

                        // Display toolbox
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            feature: {
                                mark: {
                                    show: false,
                                    title: {
                                        mark: 'Markline switch',
                                        markUndo: 'Undo markline',
                                        markClear: 'Clear markline'
                                    }
                                },
                                dataView: {
                                    show: false,
                                    readOnly: false,
                                    title: 'View data',
                                    lang: ['View chart data', 'Close', 'Update']
                                },
                                magicType: {
                                    show: true,
                                    title: {
                                        pie: 'Switch to pies',
                                        funnel: 'Switch to funnel',
                                    },
                                    type: ['pie', 'funnel'],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            y: '20%',
                                            width: '50%',
                                            height: '70%',
                                            funnelAlign: 'left',
                                            max: 1548
                                        }
                                    }
                                },
                                restore: {
                                    show: true,
                                    title: 'Restore'
                                },
                                saveAsImage: {
                                    show: true,
                                    title: 'Same as image',
                                    lang: ['Save']
                                }
                            }
                        },

                        // Enable drag recalculate
                        calculable: true,
                        
                        // Add series
                        series: [{
                            name: 'Trạng thái',
                            type: 'pie',
                            radius: '70%',
                            center: ['50%', '57.5%'],
                            data:null,
                        }]
                    };
                    basic_pie.setOption(basic_pie_options);
                    window.onresize = function () {
                        setTimeout(function (){
                            basic_pie.resize();
                        }, 200);
                    }
                }
            );

            var axis_tick_rotation = c3.generate({
                bindto: '#c3-axis-tick-rotation',
                size: { height: 373 },
                data:null,
                color: {
                    pattern: ['#00BCD4']
                },
                axis: {
                    x: {
                        type: 'category',
                        tick: {
                            rotate: 0
                        },
                        height: 80
                    }
                },
                grid: {
                    x: {
                        show: true
                    }
                }
            });

            $(".sidebar-control").on('click', function() {
                axis_tick_rotation.resize();
            });
        });

        $('.back_store').click(function() {
			var deviceId = $(this).data("id");

			$.confirm({
		        title: 'Xác nhận!',
		        content: 'Bạn có chắc chắn muốn thu hồi box <b>#'+deviceId+'</b> về kho tổng?',
		        buttons: {
		          'Thu hồi': function() {
			            $("body").LoadingOverlay("show");
			            var url_back = "{{ route('backend.w_product.back') }}";
						$.post(url_back, {_token: _token, deviceId: deviceId }, function(result){
			            	
							$("body").LoadingOverlay("hide");
			            	if(result == 1){
			            		$('#myModal').modal('toggle');
				            	new PNotify({
						            title: 'Thông báo',
						            text: 'Thu hồi box thành công.',
						            icon: 'icon-checkmark3',
						            type: 'success'
						        });
						        location.reload();
			            	}else{
								new PNotify({
						            title: 'Thông báo',
						            text: 'Thu hồi box không thành công.',
						            icon: 'icon-cancel-circle2',
						            type: 'danger'
						        });
			            	}

			            });
		          },
		          hủy: function() {}
		        }
		     });
		});
    </script>
@endpush