

    <div class="portlet-body">
        <div class="mt-element-card mt-element-overlay">
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <a href="#add-renter" data-toggle="modal" class="btn btn-success">Thêm
                        khách thuê</a>
                </div>
            </div>
            <div class="row" id="renters">
                @foreach($renters as $renter)
                    <a href="#detail" class="renter-info" data-toggle="modal" data-url="{{ url('admin/renter/info', ['id' => $renter->id]) }}">
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                            <div class="mt-card-item">
                                <div class="mt-card-avatar mt-overlay-1 mt-scroll-left">
                                    <img src="{{ $renter->image }}">
                                </div>
                                <div class="mt-card-content">
                                    <h3 class="mt-card-name">{{ $renter->name }}</h3>
                                    @if(empty($renter->address))
                                        <p class="mt-card-desc font-grey-mint">Chưa có địa chỉ</p>
                                    @else
                                        <p class="mt-card-desc font-grey-mint">{{ \Illuminate\Support\Str::words($renter->address, 5) }}</p>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
            {{--{!! $renters->appends(Request::all())->links() !!}--}}
        </div>
    </div>
    <div class="modal fade" id="add-renter" tabindex="-1" 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">Thêm khách thuê bằng mã</h4>
                </div>
                <div class="modal-body">

                    <form id="form-owner">

                        <div class="form-group">
                            <label>Mã người thuê</label>
                            <div>
                                <input type="text" name="code" class="form-control"
                                       id="code" value="{{ old('owner-name') }}">
                                <span class="help-block"> Không có mã người thuê ? <a href="#add-renter-info"
                                                                                      data-toggle="modal">Bấm để tạo người thuê</a> </span>
                            </div>
                        </div>
                        <input type="hidden" name="hostel_id" value="{{ $hostelId }}">
                        <div class="form-group">
                            <label>Phòng trọ</label>
                            <div>
                                <select class="form-control select2" name="room_id" id="room_id2">
                                    @php $rooms = \App\Models\Room::where('hostel_id', $hostelId)->get(); @endphp
                                    <option>Vui lòng chọn giá trị</option>
                                    @foreach($rooms as $room)
                                        <option value="{{ $room->id }}">{{ $room->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </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-code-owner">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="add-renter-info" tabindex="-1" 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">Thêm khách thuê bằng thông tin</h4>
                </div>
                <div class="modal-body">

                    <form id="form-owner-renter">

                        <div class="form-group">
                            <label>Tên người thuê</label>
                            <div>
                                <input type="text" name="name" class="form-control"
                                       id="name" value="{{ old('owner-name') }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>SĐT người thuê</label>
                            <div>
                                <input type="text" name="phone" class="form-control"
                                       id="phone" value="{{ old('owner-name') }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Địa chỉ</label>
                            <div>
                                <input type="text" name="address" class="form-control"
                                       id="address" value="{{ old('owner-name') }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Nhà trọ</label>
                            <div>
                                <select class="form-control select2" name="hostel_id" id="hostel_id3">
                                    <option>Vui lòng chọn giá trị</option>
                                    @foreach($hostels as $hostel)
                                        <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Phòng trọ</label>
                            <div>
                                <select class="form-control select2" name="room_id" id="room_id3">

                                </select>
                            </div>
                        </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-renter-by-owner">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="detail"  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">Thông tin chi tiết</h4>
                </div>
                <div class="modal-body">

                    <form id="form-account">

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


@push('scripts')
<script>

    $(document).on('click', '.renter-info', function (e) {
        e.preventDefault();
        var url = $(this).attr('data-url');

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#form-account').html(response.html);

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

    });

    $(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();
            }

        });

    });

    $(document).on('change', '#hostel_id2', 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_id2').html(response.html).select2();
            }

        });

    });

    $(document).on('change', '#hostel_id3', 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_id3').html(response.html).select2();
            }

        });

    });

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

        var floor = $(this).val();
        var hostel_id = $('#hostel_id').val();

        $.ajax({

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

        });

    });

    $(document).on('click', '#save-renter-by-owner', function (e) {
        e.preventDefault();

        var data = $('#form-owner-renter').serialize();

        $.ajax({
            url: '{{ url('admin/room/add-renter-by-owner') }}',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#log-table').DataTable().ajax.reload();
                    $('#add-renter-info').modal('hide');
                    $('#add-renter').modal('hide');
                    swal('Thành công', '', 'success');
                    $('#renters').html(response.html);

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

    });

    $(document).on('click', '#save-code-owner', function (e) {
        e.preventDefault();

        var data = $('#form-owner').serialize();

        $.ajax({
            url: '{{ url('admin/room/add-renter-by-code') }}',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#log-table').DataTable().ajax.reload();
                    $('#add-renter-info').modal('hide');
                    $('#add-renter').modal('hide');
                    swal('Thành công', '', 'success');
                    $('#renters').html(response.html);

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

    });

    $(document).on('click', '#save-renter-by-owner', function (e) {
        e.preventDefault();

        var data = $('#form-owner-renter').serialize();

        $.ajax({
            url: '{{ url('admin/room/add-renter-by-owner') }}',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#add-renter-info').modal('hide');
                    $('#add-renter').modal('hide');
                    swal('Thành công', '', 'success');

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

    });

</script>
@endpush