@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"/>


    <style>

        .pac-container {
            z-index: 10052 !important;
        }

        #map {
            width: auto !important;
            height: 500px !important;
        }

        #map_edit {
            width: auto !important;
            height: 500px !important;
        }

        tfoot {
            display: table-header-group;
        }

        tfoot input {
            font-weight: normal !important;
        }

        tfoot select {
            font-weight: normal !important;
        }

        .dataTables_filter {
            display: none;
        }

        #orders-table_length {
            display: none;
        }

        .ws-nr {
            width: 100% !important;
        }

        td {
            max-width: 300px;
            overflow: hidden;
        }

    </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 (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">
        Danh sách tin đăng
    </h1>


    <div class="row">

        <a href="/dang-tin-2" class="btn btn-success" id="btn-add-hostel" style="float: right" target="_blank">Thêm tin
            đăng</a>

        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover" id="orders-table">
                <thead>
                <tr style="background-color: #5376B9; color: white">
                    <th>ID</th>
                    <th>STT</th>
                    <th>Tiêu đề</th>
                    <th>Mô tả</th>
                    <th>Loại tin</th>
                    <th>Hình ảnh</th>
                    <th>Chủ trọ</th>
                    <th>SĐT</th>
                    <th>Email</th>
                    <th>Địa chỉ</th>
                    <th>Giá phòng</th>
                    <th>Đặt cọc</th>
                    <th>Diện tích</th>
                    <th>Ngày trống</th>
                    <th>Số người</th>
                    <th>Giá điện</th>
                    <th>Giá nước</th>
                    <th style="width: 10%;">Thao tác</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th style="width: 10%;"></th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

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

    {{--modal add--}}
    <div class="modal fade bs-modal-lg" id="add-hostel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close2" data-dismiss="modal" aria-hidden="true"><span
                                aria-hidden="true" style="
    color: white;
">×</span></button>
                    <h4 class="modal-title">Thêm nhà</h4>
                </div>
                <div class="modal-body" id="add-hostel-content">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Hủy
                    </button>
                    <button type="button" class="btn green" id="btn-save-hostel">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    {{--modal edit--}}
    <div class="modal fade bs-modal-lg" id="edit-hostel" 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">Cập nhật tin đăng</h4>
                </div>
                <div class="modal-body" id="edit-hostel-content">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Hủy
                    </button>
                    <button type="button" class="btn green" id="btn-save-edit-hostel">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>




@endsection

@push('scripts')
    <script src="/assets/global/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>
    <script src="/assets/pages/scripts/form-dropzone.min.js" type="text/javascript"></script>
    <script src="/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCydLs7dhJPuozABFQjJO-uk1PITW18oo8&libraries=places&region=vi&language=vi&sensor=false"></script>
    <script type="text/javascript" src="/js/gmap.js"></script>

    <script>
        $.validator.addMethod("greaterThan",
            function (value, element, param) {
                var $otherElement = $(param);
                return parseInt(value, 10) >= parseInt($otherElement.val(), 10);
            }
        );
    </script>


@endpush


@push('scripts')

    <script>
        $(document).ready(function () {

        });

        $(document).on('click', '.show-hidden-post', function (e) {
            e.preventDefault();
            var id = $(this).attr('data-id');
            var that = this;
            $.ajax({
                url: '{{ url('/dang-tin-2/show-hidden') }}',
                type: 'post',
                data: {id: id},
                success: function (response) {
                    console.log(response)
                    if (response.status == 1 && response.data == true) {
                        swal("Hiện tin đăng!", "Tin đăng đã được hiện.", "success");
                        $(that).text('Ẩn tin')

                    }
                    if (response.status == 1 && response.data == false) {
                        swal("Ẩn tin đăng!", "Tin đăng đã được ẩn.", "info");
                        $(that).text('Hiện tin')

                    }
                }
            });
        });

        $(document).on('click', '.btn-edit-hostel', function (e) {
            var url = $(this).attr('data-href');
            window.open(url, '_blank');
        });
        $(document).on('click', '.btn-delete', function (e) {
            e.preventDefault();
            var id = $(this).attr('data-id');
            swal({
                    title: "Bạn có chắc chắn?",
                    text: "Tin đăng của bạn sẽ bị xóa.",
                    type: "warning",
                    showCancelButton: true,
                    cancelButtonText: 'Hủy bỏ',
                    confirmButtonClass: "btn-danger",
                    confirmButtonText: "Đồng ý!",
                    closeOnConfirm: false
                },
                function () {
                    $.ajax({
                        url: '{{ url('/dang-tin-2/deletePostNews/') }}',
                        type: 'post',
                        data: {id: id},
                        success: function (response) {
                            if (response.status == 1) {
                                swal("Xóa thành công!", "Tin đăng đã được xóa.", "success");
                                location.reload();
                            }
                        }
                    });
                });
        });


        $(function () {

            $('#orders-table tfoot th').each(function (index) {
                if (index != 0 && index != 9) {
                    $(this).html('<input type="text" class="form-control" />');
                }
            });
            table = $('#orders-table').DataTable({
                "bDestroy": true,
                processing: true,
                searching: true,
                "aaSorting": [[0, 'desc']],
                serverSide: true,
                ajax: {
                    url: '{!! url('admin/news/news.data') !!}',
                },
                columns: [
                    {data: 'id', name: 'id', visible: false},
                    {data: 'DT_Row_Index', name: 'DT_Row_Index', orderable: false, searchable: false},
                    {data: 'title', name: 'title'},
                    {data: 'description', name: 'description'},
                    {data: 'type_id', name: 'type_id'},
                    {data: 'image', name: 'image'},
                    {data: 'owner_name', name: 'owner_name'},
                    {data: 'owner_phone', name: 'owner_phone'},
                    {data: 'email', name: 'email'},
                    {data: 'address', name: 'address'},
                    {data: 'price', name: 'price'},
                    {data: 'deposit', name: 'deposit'},
                    {data: 'size', name: 'size'},
                    {data: 'date_available', name: 'date_available'},
                    {data: 'amount_people', name: 'amount_people'},
                    {data: 'electricity_price', name: 'electricity_price'},
                    {data: 'water_price', name: 'water_price'},
                    {data: 'action', name: 'action', 'orderable': false, searchable: false},
                ],
            });


            table.columns().every(function (index) {
                if (index !== 0) {
                    var that = this;
                    $('input', this.footer()).on('keyup change', function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
                }
            });

        });


    </script>
@endpush