@extends('admin')

@section('styles')
    <link href="/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css"/>

@endsection

@section('content')

    @foreach($hostels as $hostel)

        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-home"></i>{{ $hostel->name }} - {{ $hostel->address }}

                </div>
                <div class="tools">
                    <a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
                </div>

            </div>
            <div class="portlet-body">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat2 ">
                            <div class="display">
                                <div class="number">
                                    @php $total = \App\Components\Functions::getTotalRoomHostel($hostel);
                                    $owes = \App\Components\Functions::getOweByHostel($hostel) @endphp
                                    <h3 class="font-green-sharp">
                                        <span data-counter="counterup"
                                              data-value="{{ $total['total_room_user'] }}/{{ $total['total_rooms'] }}">{{ $total['total_room_user'] }}
                                            /{{ $total['total_rooms'] }}</span>
                                    </h3>
                                    <small>Phòng có người ở</small>
                                </div>
                            </div>
                            {{--<div class="progress-info">--}}
                            {{--<div class="progress">--}}
                            {{--<span style="width: 76%;" class="progress-bar progress-bar-success green-sharp">--}}
                            {{--<span class="sr-only">76% progress</span>--}}
                            {{--</span>--}}
                            {{--</div>--}}
                            {{--<div class="status">--}}
                            {{--<div class="status-title"> progress </div>--}}
                            {{--<div class="status-number"> 76% </div>--}}
                            {{--</div> --}}
                            {{--</div>--}}
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat2 ">
                            <div class="display">
                                <div class="number">
                                    <h3 class="font-red-haze">
                                        <span data-counter="counterup"
                                              data-value="{{ $total['renters'] }}">{{ $total['renters'] }}</span>
                                    </h3>
                                    <small>Người thuê trọ</small>
                                </div>
                                {{--<div class="icon">--}}
                                {{--<i class="icon-like"></i>--}}
                                {{--</div>--}}
                            </div>
                            {{--<div class="progress-info">--}}
                            {{--<div class="progress">--}}
                            {{--<span style="width: 85%;" class="progress-bar progress-bar-success red-haze">--}}
                            {{--<span class="sr-only">85% change</span>--}}
                            {{--</span>--}}
                            {{--</div>--}}
                            {{--<div class="status">--}}
                            {{--<div class="status-title"> change </div>--}}
                            {{--<div class="status-number"> 85% </div>--}}
                            {{--</div>--}}
                            {{--</div>--}}
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat2 ">
                            <div class="display">
                                <div class="number">
                                    <h3 class="font-blue-sharp">
                                        <span data-counter="counterup"
                                              data-value="{{ $total['kwh'] }}">{{ $total['kwh'] }}</span>
                                    </h3>
                                    <small>Kwh điện</small>
                                </div>
                                {{--<div class="icon">--}}
                                {{--<i class="icon-basket"></i>--}}
                                {{--</div>--}}
                            </div>
                            {{--<div class="progress-info">--}}
                            {{--<div class="progress">--}}
                            {{--<span style="width: 45%;" class="progress-bar progress-bar-success blue-sharp">--}}
                            {{--<span class="sr-only">45% grow</span>--}}
                            {{--</span>--}}
                            {{--</div>--}}
                            {{--<div class="status">--}}
                            {{--<div class="status-title"> grow </div>--}}
                            {{--<div class="status-number"> 45% </div>--}}
                            {{--</div>--}}
                            {{--</div>--}}
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat2 ">
                            <div class="display">
                                <div class="number">
                                    <h3 class="font-purple-soft">
                                        <span data-counter="counterup"
                                              data-value="{{ $total['waters'] }}">{{ $total['waters'] }}</span>
                                    </h3>
                                    <small>Khối nước</small>
                                </div>
                                {{--<div class="icon">--}}
                                {{--<i class="icon-user"></i>--}}
                                {{--</div>--}}
                            </div>
                            {{--<div class="progress-info">--}}
                            {{--<div class="progress">--}}
                            {{--<span style="width: 57%;" class="progress-bar progress-bar-success purple-soft">--}}
                            {{--<span class="sr-only">56% change</span>--}}
                            {{--</span>--}}
                            {{--</div>--}}
                            {{--<div class="status">--}}
                            {{--<div class="status-title"> change </div>--}}
                            {{--<div class="status-number"> 57% </div>--}}
                            {{--</div>--}}
                            {{--</div>--}}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-xs-12 col-sm-12">
                        <div class="portlet light ">
                            <div class="portlet-title">
                                <div class="caption">
                                    <span class="caption-subject bold uppercase font-dark">Thống kê</span>
                                    <span class="caption-helper">Doanh thu, chi phí, lợi nhuận theo tháng</span>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div id="chart-{{$hostel->id}}" class="CSSAnimationChart"></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-12 col-xs-12 col-sm-12">
                        <div class="portlet light ">
                            <div class="portlet-title">
                                <div class="caption">
                                    <span class="caption-subject bold uppercase font-dark">Danh sách khách nợ tiền phòng</span>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th> Phòng</th>

                                        <th> Tháng</th>
                                        <th> Số tiền</th>
                                        {{--<th width="25%"> Ghi chú</th>--}}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($owes as $owe)
                                        <tr>
                                            <td>{{ $owe->room->name }}</td>
                                            <td>{{ $owe->date_action->format('m/Y') }}</td>
                                            <td>{{ number_format($owe->remain, 0, '.', '.') }}</td>


                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>
    @endforeach
@endsection

@push('scripts')
<script src="/assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
<script src="/assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
<script src="/assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
<script src="/assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
<script src="/assets/pages/scripts/dashboard.min.js" type="text/javascript"></script>


<!-- Chart code -->
<script>
            @foreach($hostels as $hostel)
    var chart = AmCharts.makeChart("chart-{{ $hostel->id }}", {
            "type": "serial",
            "addClassNames": true,
            "theme": "light",
            "autoMargins": false,
            "marginLeft": 100,
            "marginRight": 100,
            "marginTop": 10,
            "marginBottom": 26,
            "balloon": {
                "adjustBorderColor": false,
                "horizontalPadding": 10,
                "verticalPadding": 8,
                "color": "#ffffff"
            },

            "dataProvider": {!! json_encode(\App\Components\Functions::getIncomeMonthByHostel($hostel)) !!},
            "valueAxes": [{
                "id": "v1",
                "position": "left",
                "title": "Lợi nhuận"
            }, {
                "id" : "v2",
                "position": "right",
                "title": "Chi phí",
            }],
            "startDuration": 1,
            "graphs": [{
                "alphaField": "alpha",
                "balloonText": "<span style='font-size:12px;'>[[title]] trong tháng [[category]]:<br><span style='font-size:20px;'>[[value]]</span> [[additional]]</span>",
                "fillAlphas": 1,
                "title": "Doanh thu",
                "type": "column",
                "valueField": "amount",
                "dashLengthField": "dashLengthColumn"
            }, {
                "valueAxis": "v1",
                "id": "graph2",
                "balloonText": "<span style='font-size:12px;'>[[title]] trong tháng [[category]]:<br><span style='font-size:20px;'>[[value]]</span> [[additional]]</span>",
                "bullet": "round",
                "lineThickness": 3,
                "bulletSize": 7,
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "useLineColorForBulletBorder": true,
                "bulletBorderThickness": 3,
                "fillAlphas": 0,
                "lineAlpha": 1,
                "title": "Chi phí",
                "valueField": "spend",
                "dashLengthField": "dashLengthLine"
            }, {
                "valueAxis": "v1",
                "id": "graph3",
                "balloonText": "<span style='font-size:12px;'>[[title]] trong tháng [[category]]:<br><span style='font-size:20px;'>[[value]]</span> [[additional]]</span>",
                "bullet": "round",
                "lineThickness": 3,
                "bulletSize": 7,
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "useLineColorForBulletBorder": true,
                "bulletBorderThickness": 3,
                "fillAlphas": 0,
                "lineAlpha": 1,
                "title": "Lợi nhuận",
                "valueField": "profit",
                "dashLengthField": "dashLengthLine"
            }],

            "categoryField": "month",
            "categoryAxis": {
                "gridPosition": "start",
                "axisAlpha": 0,
                "tickLength": 0
            },
            "legend": {
                bulletType: "round",
                equalWidths: !1,
                valueWidth: 120,
                useGraphSettings: !0,
                color: "#6c7b88"
            },
            "export": {
                "enabled": true
            }
        });
    @endforeach
</script>

<!-- HTML -->
@endpush