@extends('admin')

@section('styles')

    <link href="/assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css"
          rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-editable/inputs-ext/address/address.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/select2/css/select2-bootstrap.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
    <h3 class="inline">Quản lý chốt điện nước</h3>

    <div class="portlet-title">

    </div>
    <div class="portlet-body form">
        <div class="form-body">
            <div class="form-group">
                <form action="#" class="mt-repeater form-horizontal">
                    <div data-repeater-list="group-a">
                        <div data-repeater-item="" class="mt-repeater-item">

                            <div class="mt-repeater-input">
                                <label class="control-label">Nhà trọ</label>
                                <br>
                                <select name="hostel_id" class="form-control" id="hostel-id-3">
                                    <option value="0" selected="">Vui lòng chọn</option>
                                    @foreach($hostels as $hostel)
                                    <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                                        @endforeach
                                </select>
                            </div>
                            <div class="mt-repeater-input">
                                <label class="control-label">Phòng trọ</label>
                                <br>
                                <select name="room_id" class="form-control" id="room-id-3">
                                    <option value="0" selected="">Vui lòng chọn</option>
                                </select>
                            </div>
                            <div class="mt-repeater-input">
                                <label class="control-label">Tháng / Năm</label>
                                <br>
                                <input class="form-control datepicker" name="date_action" id="date_action">
                            </div>

                            <div class="mt-repeater-input">
                                <a href="javascript:;" onclick="getPostByAttr()" data-repeater-delete=""
                                   class="btn btn-danger mt-repeater-delete">
                                    <i class="fa fa-check"></i> Lọc</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12" style="margin-bottom: 12px">
            <a href="#add-e-w" data-toggle="modal" class="btn btn-success" id="btn-add-e-w">Thêm</a>
        </div>
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover" id="orders-table">
                <thead>
                <tr>
                    {{--<th>Id</th>--}}
                    <th>Nhà</th>
                    <th>Phòng</th>
                    <th>Số điện đầu</th>
                    <th>Số điện cuối</th>
                    <th>Chênh lệch điện</th>
                    <th>Số nước đầu</th>
                    <th>Số nước cuối</th>
                    <th>Chênh lệch nước</th>
                    <th>Tháng chốt</th>
                    <th>Hành động</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

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

    <div class="modal fade" id="add-e-w"  role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Chốt số điện nước</h4>
                </div>
                <div class="modal-body">

                    <form id="form-electric-water">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Nhà trọ</label>
                                    <select class="form-control select2" id="hostel_id" name="hostel_id">

                                        @if($hostels->count() == 1)
                                            <option value="{{ $hostels->first()->id }}">{{ $hostels->first()->name }}</option>
                                        @else
                                            <option>Vui lòng chọn</option>
                                            @foreach($hostels as $hostel)
                                                <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Phòng trọ</label>
                                    <select class="form-control select2" id="room_id" name="room_id">

                                        @if($hostels->count() == 1)
                                            @php $rooms = \App\Models\Room::where('hostel_id', $hostels->first()->id)->get() @endphp
                                            @else
                                            @php $rooms = \App\Models\Room::whereIn('hostel_id', $hostels->pluck('id')->toArray())->get() @endphp
                                            @endif

                                            @foreach($rooms as $room)
                                                <option value="{{ $room->id }}">{{ $room->name }}</option>
                                            @endforeach
                                    </select>
                                </div>

                                    <div class="form-group">
                                        <label>Tháng chốt</label>
                                        <div>
                                            <input type="text" name="date_action" class="form-control datepicker"
                                                   id="date_action" value="{{ \Carbon\Carbon::now()->format('m/Y') }}">
                                        </div>
                                    </div>

                            </div>
                        </div>
                        <div class="row" id="e-w-info">
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                    <button type="button" class="btn green" id="save-e-w">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@push('scripts')

<script src="/assets/global/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js" type="text/javascript"></script>
<script src="/assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery.mockjax.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.js"
        type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-editable/inputs-ext/address/address.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js"
        type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-typeahead/bootstrap3-typeahead.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>

{{--<script src="/assets/pages/scripts/form-editable.min.js" type="text/javascript"></script>--}}

@endpush


@push('scripts')
<script>

    var table = '';

    $(document).on('change', '#hostel-id-3', function () {

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

        $.ajax({

            url: '{{ url('admin/hostel/get-rooms-by-hostel') }}',
            type: 'get',
            data: {
                hostel_id: hostel_id,
            },
            success: function (response) {
                $('#room-id-3').html(response.html).select2();
            }

        });

    });

    $(document).on('change', '#room_id', function () {

        $.ajax({
            url: '{{ url('admin/electric-water/get-info') }}',
            type: 'get',
            data: {
                hostel_id: $('#hostel_id').val(),
                room_id: $('#room_id').val(),
                date_action: $('#date_action').val(),
            },
            dataType: 'html',
            success: function (response) {
                $('#e-w-info').html(response);
                $('.datepicker').datepicker({ format: 'mm/yyyy',
                    language: 'vi',
                    autoclose: true,
                    viewMode: "months",
                    minViewMode: "months",});
            }
        });

    });

    $(document).on('click', '#save-e-w', function () {

        $.ajax({
            url: '{{ url('admin/electric-water/create') }}',
            type: 'post',
            data: $('#form-electric-water').serialize(),
            dataType: 'json',
            success: function (response) {
                if(response.status == 1) {
                    $('#add-e-w').modal('hide');
                    swal('Thành công', '', 'success');
                    table.draw();
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
            }
        });

    });

    $(document).on('blur', '#end_electric', function() {

        var end_electric = $(this).val();
        var start_electric = $('#start_electric').val();

        if(parseInt(end_electric) < parseInt(start_electric))
        {
            swal('Thông báo', 'Số cuối không thể nhỏ hơn số đầu', 'warning');
            return;
        }

        $('#delta_electric').val(end_electric - start_electric);

    });

    $(document).on('blur', '#end_water', function() {

        var end_water = $(this).val();
        var start_water = $('#start_water').val();

        if(parseInt(end_water) < parseInt(start_water))
        {
            swal('Thông báo', 'Số cuối không thể nhỏ hơn số đầu', 'warning');
            return;
        }

        $('#delta_water').val(end_water - start_water);

    });


    $(document).on('change', '#hostel_id', function() {

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

        $.ajax({

            url: '{{ url('admin/hostel/get-rooms-by-hostel') }}',
            type: 'get',
            data: {
                hostel_id: hostel_id,
            },
            success: function(response)
            {
                $('#room_id').html(response.html).select2();
            }

        });

    });

    $('.datepicker').datepicker({
        language: 'vi',
        format: 'mm/yyyy',
        autoclose: true,
        viewMode: "months",
        minViewMode: "months"

    });

    function getPostByAttr() {
        var hostel_id = $('#hostel-id-3').val();
        var room_id = $('#room-id-3').val();
        var date_action = $('#date_action').val();


        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            //  serverSide: true,
            "aaSorting": [],
            searching: true,
            ajax: {
                url: '{!! url('admin/electric-water/electric-water.data') !!}',
                data: {
                    hostel_id: hostel_id,
                    room_id: room_id,
                    date_action: date_action,
                }
            },
            columns: [
//                {data: 'id', name: 'id'},
                {data: 'hostel', name: 'hostel'},
                {data: 'room', name: 'room'},
                {data: 'start_electric', name: 'start_electric'},
                {data: 'end_electric', name: 'end_electric'},
                {data: 'delta_electric', name: 'delta_electric'},

                {data: 'start_water', name: 'start_water'},
                {data: 'end_water', name: 'end_water'},
                {data: 'delta_water', name: 'delta_water'},
                {data: 'date_action', name: 'date_action'},

                {data: 'action', name: 'action'},
            ]
        });
    }

    $(function () {
        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [],
            serverSide: true,
            ajax: {
                url: '{!! url('admin/electric-water/electric-water.data') !!}',
            },
            columns: [

                {data: 'hostel', name: 'hostel'},
                {data: 'room', name: 'room'},
                {data: 'start_electric', name: 'start_electric'},
                {data: 'end_electric', name: 'end_electric'},
                {data: 'delta_electric', name: 'delta_electric'},

                {data: 'start_water', name: 'start_water'},
                {data: 'end_water', name: 'end_water'},
                {data: 'delta_water', name: 'delta_water'},
                {data: 'date_action', name: 'date_action'},

                {data: 'action', name: 'action'},
            ],
            initComplete: function () {
                $('.editable').editable({
                    prepend: "Chưa chọn",
                    source: [{
                        value: 1,
                        text: 'Có'
                    }, {
                        value: 0,
                        text: 'Không'
                    }],
                });
            }
        });
    });


</script>
@endpush