@extends('admin2')

@section('styles')
    <style>
        td {
            text-align: center;
            vertical-align: middle !important;
        }

        th {
            text-align: center;
            vertical-align: middle !important;
        }
    </style>
@endsection

@section('content')
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session()->get('success') }}</div>
    @endif
    @if (session()->has('success_coupon'))
        {!!  session()->get('success_coupon') !!}
    @endif
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <h1 class="page-title">
        Báo cáo tình hình sử dụng điện nước

    </h1>
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <input class="form-control monthpicker" id="month"
                           value="{{ Carbon\Carbon::now()->format('m/Y') }}">
                </div>
                <div class="col-md-4">
                    <select class="form-control" id="hostel_id">
                        @foreach($hostels as $hostel)
                            <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <button href="#" id="btn-export" class="btn btn-sm green-meadow"><i class="fa fa-file-excel-o"></i>
                        Xuất excel
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-12" id="detail" style="margin-top: 15px">

        </div>
    </div>
@endsection

@push('scripts')
    <script>

        function get_data() {
            $.ajax({
                url: '{{ url('admin2/report/ew-2-by-month') }}',
                type: 'get',
                data: {
                    month: $('#month').val(),
                    hostel_id: $('#hostel_id').val()
                },
                beforeSend: function () {
                    $('#detail').addClass('ht-on-loading');
                },
                dataType: 'json',
                success: function (response) {
                    $('#detail').removeClass('ht-on-loading').html(response.data);
                }
            });
        }

        $(document).ready(function () {
            get_data();
        });

        $('#btn-export').click(function () {
            var url = '{{ url('admin2/report/ew-2-by-month') }}' + '?month=' + $('#month').val() + '&is_export=1&hostel_id='+$('#hostel_id').val();
            console.log(url);
            window.location.href = url;
        });

        $('.monthpicker').datepicker({
            format: 'mm/yyyy',
            autoclose: true,
            viewMode: "months",
            minViewMode: "months",
        }).on('changeDate', function () {
            get_data();
        });

        $('#hostel_id').change(function() {
            get_data();
        });
    </script>
@endpush