@extends('admin2')

@section('styles')
    <link href="/assets/pages/css/search.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/frontend3/assets/css/slick.css"/>
    <link rel="stylesheet" type="text/css" href="/frontend3/assets/css/slick-theme.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    <link href="/assets/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css"/>

@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 (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{--<nav class="quick-nav animated infinite bounce delay-2s">--}}

        {{--<a class="quick-nav-trigger" href="#owner-messages" id="btn-owner-messages" data-toggle="modal">--}}
            {{--<i class="fa fa-bell" style="--}}
            {{--position: absolute;--}}
    {{--color: white;--}}
    {{--top: 40%;--}}
    {{--right: 35%;--}}
    {{--font-size: 19px;">--}}


            {{--</i>--}}

        {{--</a>--}}

        {{--<span class="badge badge-danger" style="z-index: 10104; position: relative"--}}
              {{--id="cnt-message"> {{ $numberOwnerMessage }} </span>--}}

        {{--<ul>--}}

        {{--</ul>--}}
        {{--<span aria-hidden="true" class="quick-nav-bg">--}}

        {{--</span>--}}


    {{--</nav>--}}

    @php $agent = new \Jenssegers\Agent\Agent() @endphp

    <div class="row"
         style="padding-bottom: 15px; margin-right: 0px; margin-left: 0px; padding-top: 15px; margin-bottom: 15px; border-bottom: 1px solid #e7ecf1; background-color: #EFF2F5">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-2">
                    <label class="control-label">Chọn nhà</label>
                </div>
                <div class="col-md-8">
                    <select class="form-control" id="hostels">
                        <option value="">Tất cả nhà</option>
                        @foreach($hostels as $hostel)
                            <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <a class="btn btn-success" href="{{ route('notifications.create') }}">Gửi thông báo</a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6 col-md-offset-6">
                    @if($package)
                        <button type="button"
                                class="btn green mt-ladda-btn ladda-button btn-outline pull-right clearfix"
                                data-style="slide-down" data-spinner-color="#333">
                                                        <span class="ladda-label">
                                                            <i class="icon-present"></i> Gói: {{ str_replace('Gói', '', $package->name) }}
                                                            . Hạn dùng: {{ $dateEndPackage }}</span>
                            <span class="ladda-spinner"></span></button>
                    @endif
                </div>
            </div>
        </div>


    </div>


    <div class="row">
        <div class="col-md-12" id="data"></div>
    </div>

    <div class="modal fade bs-lg" id="owner-messages" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="title-detail-room">Danh sách các yêu cầu từ khách hàng</h4>
                </div>
                <div class="modal-body">
                    <div class="mt-actions">
                        <div class="row" style="padding-left: 15px">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label">Chọn nhà</label>
                                    <select class="form-control select2" id="owner_hostel">

                                        <option value="">Vui lòng chọn</option>
                                        @php $hostels = \App\Models\Hostel::where('owner_id', $ownerId)->get() @endphp
                                        @foreach($hostels as $hostel)
                                            <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label">Chọn phòng</label>
                                    <select class="form-control select2" id="owner_room">

                                        <option value="">Vui lòng chọn</option>

                                        @php $hostelArrs =$hostels->pluck('id')->toArray(); $rooms = \App\Models\Room::query()->whereIn('hostel_id', $hostelArrs)->get()->sortBy(function($item) {
	        return $item->name;
        }); @endphp
                                        @foreach($rooms as $room)
                                            <option value="{{ $room->id }}">{{ $room->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-actions" id="owner-messages-content"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Đóng
                    </button>
                    {{--<button type="button" class="btn green" id="save_fund">Lưu</button>--}}
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-lg" id="paids" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="title-detail-room">Danh sách hóa đơn</h4>
                </div>
                <div class="modal-body" id="payment-items">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Đóng
                    </button>
                    {{--<button type="button" class="btn green" id="save_fund">Lưu</button>--}}
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade " id="rooms" aria-hidden="true">
        <div class="modal-dialog modal-full">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="title-room">Danh sách hóa đơn</h4>
                </div>
                <div class="modal-body" id="rooms-content">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Đóng
                    </button>
                    {{--<button type="button" class="btn green" id="save_fund">Lưu</button>--}}
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-lg" id="contracts" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close close-model-contract" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="title-contract">Danh sách hợp đồng</h4>
                </div>
                <div class="modal-body" id="contract-items">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline close-model-contract" data-dismiss="modal" id="dismiss-modal">Đóng
                    </button>
                    {{--<button type="button" class="btn green" id="save_fund">Lưu</button>--}}
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-lg" id="report_break" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close close-model-report-break" aria-hidden="true"></button>
                    <h4 class="modal-title" id="title-report-break">Danh sách sự cố</h4>
                </div>
                <div class="modal-body" id="report-break-items">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline close-model-report-break">Đóng
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-lg" id="add-report-break" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close close-model-add-report-break" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="add-title-report-break">Thêm sự cố mới</h4>
                </div>
                <div class="modal-body" id="add-report-break-items">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn green submit-add-report-break">Lưu</button>
                    <button type="button" class="btn dark btn-outline close-model-add-report-break" data-dismiss="modal" id="dismiss-modal">Đóng
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection

@push('scripts')
<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 type="text/javascript" src="/frontend3/assets/libs/slick/slick.min.js"></script>
<script src="/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>


<script>
    $('#contracts').on('#contracts hidden.bs.modal', function () {
        //location.reload();
    });
    $(document).on('click', '.paids', function (e) {
        e.preventDefault();
        var type = $(this).attr('data-type');
        var hostel_id = $(this).attr('data-hostel');
        var month = $('#month-m').val();
        var year = $('#year-m').val();
        $.ajax({
            url: '{{ url('admin2/hostel/filter-payment') }}',
            type: 'get',
            data: {
                type: type,
                hostel_id: hostel_id,
                month: month,
                year: year
            },
            dataType: 'json',
            beforeSend: function () {
                $('#payment-items').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#payment-items').removeClass('ht-on-loading').html(response.data);
                $('#payment-data').html(response.payment_data);
            }
        });
    });

    $(document).on('click', '.contracts-end', function (e) {
        e.preventDefault();
        var type = $(this).attr('data-type');
        var hostel_id = $(this).attr('data-hostel');
        $.ajax({
            url: '{{ url('admin2/room/filter-end-contract') }}',
            type: 'get',
            data: {
                type: type,
                hostel_id: hostel_id,
            },
            dataType: 'json',
            beforeSend: function () {
                $('#contract-items').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#contract-items').removeClass('ht-on-loading').html(response.data);
                $('#title-contract').text(response.title);
            }
        });
    });

    $(document).on('click', '.report-break-list', function (e) {
        e.preventDefault();
        var hostel_id = $(this).attr('data-hostel');
        var status = $(this).attr('data-status');
        $.ajax({
            url: '{{ url('admin2/room/filter-report-break') }}',
            type: 'get',
            data: {
                hostel_id: hostel_id,
                status: status,
            },
            dataType: 'json',
            beforeSend: function () {
                $('#report-break-items').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#report-break-items').removeClass('ht-on-loading').html(response.data);
                $('#title-report-break').text(response.title);
            }
        });
    });

    $(document).on('click', '#btn-empty-rooms', function (e) {
        var hostel_id = $('#hostels').val();
        e.preventDefault();
        $.ajax({
            url: '{{ url('admin2/dashboard/empty-rooms') }}',
            type: 'get',
            dataType: 'json',
            data: {
                hostel_id: hostel_id,
            },
            beforeSend: function () {
                $('#rooms-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#rooms-content').removeClass('ht-on-loading').html(response.data);
                $('#title-room').text(response.title);
            }
        });
    });

    $(document).on('click', '#btn-near-empty-rooms', function (e) {
        var hostel_id = $('#hostels').val();
        e.preventDefault();
        $.ajax({
            url: '{{ url('admin2/dashboard/near-empty-rooms') }}',
            type: 'get',
            dataType: 'json',
            data: {
                hostel_id: hostel_id,
            },
            beforeSend: function () {
                $('#rooms-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#rooms-content').removeClass('ht-on-loading').html(response.data);
                $('#title-room').text(response.title);
            }
        });
    });

    $(document).on('change', '#month-m', function (e) {
        e.preventDefault();
        var month = $('#month-m').val();
        var year = $('#year-m').val();
        var hostel_id = $('#hostels').val();

        $.ajax({
            url: '{{ url('admin2/dashboard/stat-payment') }}',
            type: 'get',
            data: {
                month: month,
                year: year,
                hostel_id: hostel_id
            },
            dataType: 'json',
            beforeSend: function () {
                $('#stat-payment').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#stat-payment').removeClass('ht-on-loading');
                $('#stat-payment-data').html(response.data);
            }
        });
    });

    $(document).on('change', '#year-m', function (e) {
        e.preventDefault();
        var month = $('#month-m').val();
        var year = $('#year-m').val();
        var hostel_id = $('#hostels').val();

        $.ajax({
            url: '{{ url('admin2/dashboard/stat-payment') }}',
            type: 'get',
            data: {
                month: month,
                year: year,
                hostel_id: hostel_id
            },
            dataType: 'json',
            beforeSend: function () {
                $('#stat-payment').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#stat-payment').removeClass('ht-on-loading');
                $('#stat-payment-data').html(response.data);
            }
        });
    });

    $(document).on('change', '#hostels', function (e) {
        e.preventDefault();

        var hostelId = $(this).val();

        $.ajax({
            url: '{{ url('admin2/dashboard/filter') }}',
            type: 'get',
            data: {
                hostel_id: hostelId
            },
            dataType: 'json',
//            beforeSend: function () {
//                $('#data').addClass('ht-on-loading');
//            },
            success: function (response) {
                $('#data').removeClass('ht-on-loading').html(response.data);
                $('#month-m').select2();
                $('#year-m').select2();
                var chart = AmCharts.makeChart("pie", {
                    "hideCredits": true,
                    "type": "pie",
                    "theme": "dark",
                    "dataProvider": pieChart,
                    "valueField": "value",
                    "titleField": "name",
                    "colorField": "color",
                    autoMargins: false,
                    marginTop: 0,
                    marginBottom: 0,
                    marginLeft: 0,
                    marginRight: 0,
                    pullOutRadius: '12%',
                    "balloon": {
                        "fixedPosition": true
                    },
                    "export": {
                        "enabled": true
                    }
                });

                var chart_revenue = AmCharts.makeChart("chart", {
                    "type": "serial",
                    "addClassNames": true,
                    "theme": "light",
                    "autoMargins": false,
                    @if($agent->isMobile())
                    "marginLeft": 10,
                    "marginRight": 10,
                    @else
                    "marginLeft": 150,
                    "marginRight": 100,
                    @endif
                    "marginTop": 10,
                    "marginBottom": 26,
                    "balloon": {
                        "adjustBorderColor": false,
                        "horizontalPadding": 10,
                        "verticalPadding": 8,
                        "color": "#ffffff"
                    },

                    "dataProvider": chartRevenue,
                    "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
                    }
                });

                $('.slk').slick({
                    infinite: true,
                    //  slidesToShow: 3,
                    autoplay: true,
                    autoplaySpeed: 2000,
                    arrows: false
//                    slidesToScroll: 3
                });
            }
        });

    });


    $(document).ready(function () {

        $('#hostels').select2();

        var hostelId = $(this).val();

        $.ajax({
            url: '{{ url('admin2/dashboard/filter') }}',
            type: 'get',
            data: {
                hostel_id: hostelId
            },
            dataType: 'json',
//            beforeSend: function () {
//                $('#data').addClass('ht-on-loading');
//            },
            success: function (response) {
                $('#data').removeClass('ht-on-loading').html(response.data);
                $('#month-m').select2();
                $('#year-m').select2();

                var chart = AmCharts.makeChart("pie", {
                    "hideCredits": true,
                    "type": "pie",
                    "theme": "dark",
                    "dataProvider": pieChart,
                    "colorField": "color",
                    "valueField": "value",
                    "titleField": "name",
                    autoMargins: false,
                    marginTop: 0,
                    marginBottom: 0,
                    marginLeft: 0,
                    marginRight: 0,
                    pullOutRadius: '12%',
                    "balloon": {
                        "fixedPosition": true
                    },
                    "export": {
                        "enabled": true
                    }
                });

                var chart_revenue = AmCharts.makeChart("chart", {
                    "type": "serial",
                    "addClassNames": true,
                    "theme": "light",
                    "autoMargins": false,
                    @if($agent->isMobile())
                    "marginLeft": 10,
                    "marginRight": 10,
                    @else
                    "marginLeft": 150,
                    "marginRight": 100,
                    @endif
                    "marginTop": 10,
                    "marginBottom": 26,
                    "balloon": {
                        "adjustBorderColor": false,
                        "horizontalPadding": 10,
                        "verticalPadding": 8,
                        "color": "#ffffff"
                    },

                    "dataProvider": chartRevenue,
                    "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
                    }
                });

                $('.slk').slick({
                    infinite: true,
                    //  slidesToShow: 3,
                    autoplay: true,
                    autoplaySpeed: 2000,
                    arrows: false
//                    slidesToScroll: 3
                });
            }
        });
    });

    function get_owner_message() {
        var hostel_id = $('#owner_hostel').val();
        var room_id = $('#owner_room').val();
        $.ajax({
            url: '{{ url('get-message-owner') }}',
            type: 'get',
            dataType: 'json',
            data: {
                hostel_id: hostel_id,
                room_id: room_id
            },
            beforeSend: function () {
                $('#owner-messages-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#owner-messages-content').removeClass('ht-on-loading').html(response.data);
                $('.select2').select2();
            }
        });
    }

    $(document).on('click', '#btn-owner-messages', function () {
        $.ajax({
            url: '{{ url('get-message-owner') }}',
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $('#owner-messages-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#owner-messages-content').removeClass('ht-on-loading').html(response.data);
                $('.select2').select2();
            }
        });
    });

    $(document).on('click', '.btn-set-status', function () {
        var id = $(this).attr('data-id');
        var that = this;
        $.ajax({
            url: '{{ url('update-status-message-owner') }}',
            type: 'post',
            data: {
                id: id
            },
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    get_cnt_message();

                    toastr.success('Dữ liệu đã được cập nhật');
                    if ($(that).hasClass('btn-outline')) {
                        $(that).removeClass('btn-outline').text('Đã xử lý').attr('style', '');
                    } else {
                        $(that).addClass('btn-outline').text('Chưa xử lý').css({
                            background: '0 0',
                            color: '#32c5d2'
                        });
                    }

                } else {
                    swal('Thông báo', response.message, 'info');
                }
            }
        });
    });

    function get_cnt_message() {
        $.ajax({
            url: '{{ url('cnt-message-owner') }}',
            type: 'get',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {

                    $('#cnt-message').text(response.data);

                } else {
                    swal('Thông báo', response.message, 'info');
                }
            }
        });
    }


    $(document).on('change', '#owner_hostel', function () {
        var id = $(this).val();
        //var type = $(this).attr('data-type');
        $.ajax({
            url: '{{ url('get-sub-hostel') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'other'
            },
            dataType: 'html',
            success: function (response) {
                $('#owner_room').html(response);
                $('#owner_room').select2();
                get_owner_message();

            }
        });
    });

    $(document).on('change', '#owner_room', function () {
        get_owner_message();
    });


    $(document).on('click', '.btn-delete-message', function () {
        var id = $(this).attr('data-id');
        var that = this;

        bootbox.confirm({
            message: "Bạn có chắc chắn muốn xóa",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },

            callback: function (result) {
                if (result == true) {
                    $.ajax({
                        url: '{{ url('delete-message-owner') }}',
                        type: 'post',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {

                                toastr.success('Dữ liệu đã xóa');
                                $(that).parent().parent().parent().parent().parent().remove();
                                get_cnt_message();

                            } else {
                                swal('Thông báo', response.message, 'info');
                            }
                        }
                    });
                }
            }
        });
    });

    $(document).on('click', '.btn-add-report-break', function (e) {
        e.preventDefault();
        $.ajax({
            url:'{{'/admin2/room/get-add-report-break'}}',
            type: 'get',
            beforeSend: function () {
                $('#add-report-break-items').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#add-report-break-items').removeClass('ht-on-loading').html(response.data);
            }
        })
    })

    $(document).on('click', '.submit-add-report-break', function () {
        var formData = new FormData(document.getElementById('form-report-break'));
        $.ajax({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '{{url('/admin2/room/store-report-break')}}',
            data: formData,
            cache: false,
            enctype: 'multipart/form-data',
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#form-report-break').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#form-report-break').removeClass('ht-on-loading');
                if(response.status==1){
                    swal('Thành công', response.message, "success");
                    window.location.reload();
                }else {
                    swal('Thông báo', response.message, 'info');
                }

            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log('Error ' + xhr.status + ' | ' + thrownError);
            }
        });
    })

    $(document).on('click', '.close-model-report-break',function () {
        $('#report_break').modal('hide');
    })



</script>
<script>
    var images_deleted = [];
    $(document).on('click', '.remove_image', function () {
        var id = $(this)
    })

    $(document).on('click', '.delete-report-break', function () {
        var id = $(this).attr('data-id');
        var that = this;
        $.confirm({
            title: 'Bạn có chắc muốn xóa?',
            content: 'Xóa nội dung sẽ không thể hiển thị lại',
            type: 'red',
            buttons: {
                ok: {
                    text: "Đồng ý!",
                    btnClass: 'btn-primary',
                    keys: ['enter'],
                    action: function(){
                        // console.log('the user clicked confirm');
                        $.ajax({
                            url: '{{url('/admin2/room/delete-report-break')}}',
                            type: 'post',
                            data: {
                                id: id,
                            },
                            beforeSend: function () {
                                $('#add-report-break-items').addClass('ht-on-loading');
                            },
                            success: function (response) {
                                $('#add-report-break-items').removeClass('ht-on-loading')
                                if (response.status == 1) {
                                    swal('Thành công', response.message, "success");
                                    $(that).parents('.portlet').remove();
                                } else {
                                    swal('Thông báo', response.message, 'info');
                                }
                            }
                        })
                    }
                },
                cancel:{
                    text:"Hủy bỏ",
                    action: function(){
                        // console.log('the user clicked cancel');
                    }

                }

            }
        });
    })

    $(document).on('click', '.edit-report-break', function (e) {
        e.preventDefault();
        var id = $(this).attr('data-id');
        $.ajax({
            url: '{{'/admin2/room/get-edit-report-break'}}',
            type: 'get',
            data: {
                id: id,
            },
            beforeSend: function () {
                $('#edit-report-break-items').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#edit-report-break-items').removeClass('ht-on-loading').html(response.data);
            }
        })
    })
    $(document).on('click', '.close-model-edit-report-break', function () {
        $('#edit-report-break').modal('hide');
    })
    $(document).on('click', '.close-model-status-report-break', function () {
        $('#edit-status-report-break').modal('hide');
    })

    $(document).on('click', '.submit-edit-report-break', function () {
        var formData = new FormData(document.getElementById('form-edit-report-break'));
        $.ajax({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '{{url('/admin2/room/update-report-break')}}',
            data: formData,
            cache: false,
            enctype: 'multipart/form-data',
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#form-report-break').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#form-report-break').removeClass('ht-on-loading');
                if (response.status == 1) {
                    swal('Thành công', response.message, "success");
                    //window.location.reload();
                } else {
                    swal('Thông báo', response.message, 'info');
                }

            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log('Error ' + xhr.status + ' | ' + thrownError);
            }
        });
    })
    $(document).on('change', '.status-report-break', function () {
        var id = $(this).attr("data-id");
        var status = $(this).val();
        var name = $(this).find("option:selected").text();
        $.confirm({
            title: 'Bạn có chắc muốn đổi trạng?',
            content:'Thay đổi trạng thái sự cố sang '+'<b>'+name+'</b>',
            type: 'green',
            buttons:{
                ok:{
                    text: 'Đồng ý',
                    btnClass: 'btn-primary',
                    action: function () {
                        if (status == 2) {
                            $('#edit-status-report-break').modal('show');
                            $('.submit-edit-status-report-break').attr('data-id', id);
                            $('.submit-edit-status-report-break').attr('data-status', status);
                        } else {
                            $.ajax({
                                type: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                url: '{{url('/admin2/room/update-report-break')}}',
                                data: {
                                    id: id,
                                    status: status,
                                },
                                beforeSend: function () {
                                    $('#form-report-break').addClass('ht-on-loading');
                                },
                                success: function (response) {
                                    $('#form-report-break').removeClass('ht-on-loading');
                                    if (response.status == 1) {
                                        swal('Thành công', response.message, "success");
                                        window.location.reload();
                                    } else {
                                        swal('Thông báo', response.message, 'info');
                                    }

                                },
                                error: function (xhr, ajaxOptions, thrownError) {
                                    console.log('Error ' + xhr.status + ' | ' + thrownError);
                                }
                            });
                        }
                    }

                },
                cancel:{
                    text:'Hủy',
                    action: function () {

                    }
                }
            }
        });

    })
    $(document).on('click', '.submit-edit-status-report-break', function () {
        var id = $(this).attr("data-id");
        var status = $(this).attr("data-status");
        var formData = new FormData(document.getElementById('form-edit-status-report-break'));
        formData.append('id', id);
        formData.append('status', status);
        var that = $(this);
        $.ajax({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '{{url('/admin2/room/update-report-break')}}',
            data: formData,
            cache: false,
            enctype: 'multipart/form-data',
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#form-report-break').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#form-report-break').removeClass('ht-on-loading');
                if (response.status == 1) {
                    swal('Thành công', response.message, "success");
                    $('#edit-status-report-break').modal('hide');
                    $(that).parents('.portlet').remove();
                } else {
                    swal('Thông báo', response.message, 'info');
                }

            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log('Error ' + xhr.status + ' | ' + thrownError);
            }
        });
    })
</script>
@endpush