@extends('layout4')

@section('styles')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Favicon -->
    <link rel="shortcut icon" href="{{asset('frontend3/assets2/img/favicon_16.ico')}}"/>
    <link rel="bookmark" href="{{asset('frontend3/assets2/img/favicon_16.ico')}}"/>

    <!-- CSS: Libs-->
    <link rel="stylesheet" href="{{asset('frontend3/assets2/libs/bootstrap/css/bootstrap.css')}}">
    <link rel="stylesheet" href="{{asset('frontend3/assets2/libs/ionicons/css/ionicons.min.css')}}">
    <link rel="stylesheet" href="{{asset('frontend3/assets2/libs/select2/css/select2.min.css')}}">
    <link rel="stylesheet"
          href="{{asset('frontend3/assets2/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
    {{--<link rel="stylesheet" href="frontend3/assets2/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css">--}}
    {{--<link rel="stylesheet" href="frontend3/assets2/libs/fancybox/jquery.fancybox.min.css">--}}
    {{--<link rel="stylesheet" href="frontend3/assets2/libs/slick/slick.css">--}}
    <!-- <link rel="stylesheet" href="frontend3/assets2/libs/slick/slick-theme.css"> -->
    <!-- CSS: Main -->
    <link rel="stylesheet" href="{{asset('frontend3/assets2/css/main.css')}}">
    <link rel="stylesheet" href="{{asset('frontend3/assets2/css/custom.css')}}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
@endsection

<!-- site content -->
@section('content')
    <div class="container mt-12 mb-48">
        <div class="container mt-12 mb-48">
            <div class="l-addpost">
                <div class="l-addpost__sidebar l-addpost__sidebar--left">
                    <div class="add-post-sidebar ht-card ht-depth-1 mb-12">
                        <div class="add-post-guide">
                            <div class="add-post-guide__header">
                                <h2 class="add-post-guide__title">Hướng dẫn đăng tin</h2>
                            </div>
                            <div class="add-post-guide__content">
                                <ul class="add-post-guide__list">
                                    <li><b>Thông tin có dấu <span class="color-red-500">(*)</span> là bắt buộc</b></li>
                                    <li><b>Nội dung phải viết bằng tiếng Việt có dấu</b></li>
                                    <li><b>Tiêu đề tin không dài quá 100 kí tự</b></li>
                                    <li>Các bạn nên điều đầy đủ thông tin vào các mục để tin đăng có hiệu quả hơn</li>
                                    <li>Để tăng độ tin cậy và tin rao được nhiều người quan tâm hơn, hãy sửa vị trí tin
                                        rao của bạn trên bản đồ bằng cách kéo icon tới đúng vị trí của tin rao.
                                    </li>
                                    <li>Tin đăng có hình ảnh rõ ràng sẽ được xem và gọi gấp nhiều lần so với tin rao
                                        không có ảnh. Hãy đăng ảnh để được giao dịch nhanh chóng!
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="add-post-adlink ht-card ht-depth-1 mb-12 hidden-xs hidden-sm">
                        <a href="#"><img src="http://placehold.jp/250x800.png" alt=""></a>
                    </div>
                </div>
                <div class="l-addpost__main">
                    <form action="{{route('PostNewsController.updatePostNews')}}" id="EditPost__Form"
                          class="form--add-post" data-parsley-validate="" method="post" onsubmit="return false">
                        <input type="text" style="display: none" name="post_id" value="{{$post->id}}">
                        <div class="add-post__single-info-section ht-card ht-depth-1 mb-12">
                            <div class="section-header">
                                <div class="section-header__icon"><img
                                            src="{{asset('frontend3/assets2/img/icon/ap-01.svg')}}"
                                            alt="Add Post 01"></div>
                                <h2 class="section-header__title">Thông tin chủ trọ</h2>
                            </div>
                            <div class="section-content">
                                <div class="form-group form-group--flex">
                                    <label for="#" class="form-group__label">Họ tên <span
                                                class="color-red-500">(*)</span></label>
                                    <div class="form-group__data">
                                        <input type="text" class="form-control" placeholder="Nhập họ tên"
                                               name="owner_name" required="" value="{{$post->owner_name}}">
                                    </div>
                                </div>
                                <div class="form-group form-group--flex">
                                    <label for="#" class="form-group__label">Số điện thoại <span
                                                class="color-red-500">(*)</span></label>
                                    <div class="form-group__data">
                                        <input type="text" class="form-control form-group__data"
                                               placeholder="Nhập số điện thoại" required="" name="owner_phone"
                                               value="{{$post->owner_phone}}">
                                    </div>
                                </div>
                                <div class="form-group form-group--flex">
                                    <label for="#" class="form-group__label">Email </label>
                                    <div class="form-group__data">
                                        <input type="text" class="form-control form-group__data"
                                               placeholder="Nhập địa chỉ email" name="owner_email"
                                               value="{{$post->email}}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="add-post__single-info-section ht-card ht-depth-1 mb-12">
                            <div class="section-header">
                                <div class="section-header__icon"><img
                                            src="{{asset('frontend3/assets2/img/icon/ap-02.svg')}}"
                                            alt="Add Post 02"></div>
                                <h2 class="section-header__title">Thông tin địa chỉ</h2>
                            </div>
                            <div class="section-content">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-4">
                                        <div class="form-group">
                                            <label for="#" class="form-group__label">Tỉnh / Thành phố <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <select class="form-control select2-form-control dropdown-province"
                                                        name="province"
                                                        data-url="{{route('PostNewsController.getProvince')}}"
                                                        required="">
                                                    @php $provinces = \App\Components\Functions::getProvinces(); @endphp
                                                    @foreach($provinces as $province)
                                                        <option @if($province->provinceid == $post->province) selected=""
                                                                @endif value="{{ $province->provinceid }}">{{ $province->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4">
                                        <div class="form-group">
                                            <label for="#" class="form-group__label">Quận / Huyện <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">

                                                <select class="form-control select2-form-control dropdown-district"
                                                        name="district"
                                                        data-url="{{route('PostNewsController.getDistrict')}}"
                                                        required="">
                                                    <option value="{{$post->district}}" selected
                                                    >{{$post->district_name}}</option>

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4">
                                        <div class="form-group">
                                            <label for="#" class="form-group__label">Xã / Phường <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <select class="form-control select2-form-control dropdown-ward"
                                                        name="ward"
                                                        data-url="{{route('PostNewsController.getWard')}}" required="">
                                                    <option value="{{$post->ward}}" selected
                                                    >{{$post->ward_name}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="#" class="form-group__label">Địa chỉ <span
                                                class="color-red-500">(*)</span></label>
                                    <div class="form-group__data">
                                        <input type="text" class="form-control" required=""
                                               placeholder="Số nhà, tên đường..." name="address" id="query"
                                               value="{{$post->address}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="#" class="form-group__label">Chọn ví trí trên bản đồ <span
                                                class="color-red-500">(*)</span></label>
                                    <div id="map" class="address-map-pin"
                                         style="height: 240px; background-color: #eee"></div>
                                </div>

                            </div>
                        </div>
                        <div class="add-post__single-info-section ht-card ht-depth-1 mb-12">
                            <div class="section-header">
                                <div class="section-header__icon"><img
                                            src="{{asset('frontend3/assets2/img/icon/ap-03.svg')}}"
                                            alt="Add Post 03"></div>
                                <h2 class="section-header__title">Thông tin bài đăng</h2>
                            </div>
                            <div class="section-content">
                                <div class="form-group form-group--flex">
                                    <label for="#" class="form-group__label">Loại tin đăng <span
                                                class="color-red-500">(*)</span></label>
                                    <div class="form-group__data">
                                        <select class="form-control select2-form-control dropdown-typepost"
                                                name="type_id"
                                                data-url="{{route('PostNewsController.getPostType')}}" required="">
                                            @php $post_types = \DB::table('post_type')->get() @endphp
                                            @foreach($post_types as $type)
                                                <option @if($type->id == $post->type_id) selected=""
                                                        @endif value="{{ $type->id }}">{{ $type->name }}</option>
                                            @endforeach
                                            {{--<option value="{{$post->type_id}}" selected disabled>{{$post->type_id}}</option>--}}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group form-group--flex">
                                    <label for="#" class="form-group__label">Tiêu đề <span
                                                class="color-red-500">(*)</span></label>
                                    <div class="form-group__data">
                                        <input type="text" class="form-control" required="" name="title"
                                               data-parsley-maxlength="100" value="{{$post->title}}">
                                    </div>
                                </div>
                                <div class="form-group form-group--flex">
                                    <label for="#" class="form-group__label">Nội dung <span
                                                class="color-red-500">(*)</span></label>
                                    <div class="form-group__data">
                                        <textarea id="AddPost__Input-Content" rows="8"
                                                  class="form-control autosize-form-control" required=""
                                                  data-parsley-minlength="200"
                                                  placeholder="Vị trí, gần bến xe, chợ, đại học,.. không gian,..."
                                                  name="description">{!! strip_tags($post->description) !!}</textarea>
                                        <div id="AddPost__Input-Content__charNum" class="help-text text-right"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="add-post__single-info-section ht-card ht-depth-1 mb-12">
                            <div class="section-header">
                                <div class="section-header__icon"><img
                                            src="{{asset('frontend3/assets2/img/icon/ap-04.svg')}}"
                                            alt="Add Post 04"></div>
                                <h2 class="section-header__title">Ảnh phòng</h2>
                            </div>
                            <div class="section-content">
                                <div class="form-group">
                                    <label for="#" class="form-group__label">Vui lòng chọn ít nhất 01 ảnh. Tips: hãy
                                        chụp ảnh ở mỗi góc của căn phòng và đảm bảo chất lượng ảnh đủ tốt</label>
                                    <div class="post-uploaded-images form-group clearfix">
                                        @php $images = \App\Models\PostImage::where('post_id',$post->id)->get();@endphp
                                        @foreach($images as $image)
                                            {{--/////////////TEMPLATE IMAGE TO APPEND///////////////--}}
                                            <div class="single-uploaded-image">
                                                <div class="image-wrap ht-rectangle ratio-11">
                                                    <div class="ht-inner">
                                                        <img src="/files/{{$image->image}}"
                                                             alt="" image-name="" class="image-main"
                                                             data-id="{{$image->id}}">
                                                    </div>
                                                </div>
                                                <a href="#" class="image-delete-btn"><i
                                                            class="ion-android-close"></i></a>
                                            </div>
                                        @endforeach


                                        <label class="single-uploaded-image cs-pt" id="add-images">
                                            <input name="images[]" type="file" multiple class="hidden" accept="image/*"
                                                   id="images">
                                            <div class="image-wrap ht-rectangle ratio-11">
                                                <div class="ht-inner ht-fit-img">
                                                    <i class="ion-android-add fz-40 color-grey-500"></i>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                {{--<div class="form-group text-center">--}}
                                {{--<label for="images" class="btn ht-btn-primary px-24 cs-pt">--}}
                                {{--<i class="ion-android-camera mr-8"></i>Thêm ảnh</label>--}}
                                {{--</div>--}}
                            </div>
                        </div>
                        <div class="add-post__single-info-section ht-card ht-depth-1 mb-12">
                            <div class="section-header">
                                <div class="section-header__icon"><img
                                            src="{{asset('frontend3/assets2/img/icon/ap-05.svg')}}"
                                            alt="Add Post 05"></div>
                                <h2 class="section-header__title">Thông tin phòng</h2>
                            </div>
                            <div class="section-content">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Tiền phòng <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <input type="text" class="form-control" required=""
                                                       placeholder="Điền số tiền" name="price"
                                                       value="{{number_format($post->price)}}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Đặt cọc <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <input type="text" class="form-control" required=""
                                                       placeholder="Điền số tiền" name="deposit"
                                                       value="{{number_format($post->deposit)}}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Số người <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <input type="number" class="form-control" min="0" required=""
                                                       placeholder="Điền số người ở" name="amount_people"
                                                       value="{{$post->amount_people}}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Diện tích <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <input type="text" class="form-control" min="0" required=""
                                                       placeholder="Điền diện tích tổng" name="size"
                                                       value="{{$post->size}}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Ngày trống <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <input type="text" class="form-control datepicker-form-control" required
                                                       placeholder="Chọn ngày có thể chuyến tới" name="date_available"
                                                       value="{{date("d/m/Y", strtotime($post->date_available))}}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Giá điện <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <div class="form-group__options form-group__options--prices">
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio" class="c-option__input js-price-input"
                                                                   name="type_electric_price" checked value="1">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Giá nhà nước</div>
                                                        </label>
                                                    </div>
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio" class="c-option__input js-price-input"
                                                                   name="type_electric_price" value="2">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Giá biến động</div>
                                                        </label>
                                                    </div>
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio"
                                                                   class="c-option__input js-price-input has-input-price"
                                                                   name="type_electric_price" value="3">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Giá cố định theo đồng hồ</div>
                                                        </label>
                                                    </div>
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio"
                                                                   class="c-option__input js-price-input has-input-price"
                                                                   name="type_electric_price" value="4">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Giá cố định theo người</div>
                                                        </label>
                                                    </div>
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio" class="c-option__input js-price-input"
                                                                   name="type_electric_price" value="5">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Miễn phí</div>
                                                        </label>
                                                    </div>

                                                </div>
                                                <input type="text"
                                                       class="form-control form-control--optional-price js-input-price"
                                                       placeholder="Nhập giá" style="display: none;"
                                                       name="electricity_price_text">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Giá nước <span
                                                        class="color-red-500">(*)</span></label>
                                            <div class="form-group__data">
                                                <div class="form-group__options form-group__options--prices">
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio" class="c-option__input js-price-input"
                                                                   name="type_water_price" checked value="1">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Giá nhà nước</div>
                                                        </label>
                                                    </div>
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio" class="c-option__input js-price-input"
                                                                   name="type_water_price" value="2">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Giá biến động</div>
                                                        </label>
                                                    </div>
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio"
                                                                   class="c-option__input js-price-input has-input-price"
                                                                   name="type_water_price" value="3">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Giá cố định theo đồng hồ</div>
                                                        </label>
                                                    </div>
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio"
                                                                   class="c-option__input js-price-input has-input-price"
                                                                   name="type_water_price" value="4">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Giá cố định theo người</div>
                                                        </label>
                                                    </div>
                                                    <div class="single-info-option">
                                                        <label class="c-option">
                                                            <input type="radio" class="c-option__input js-price-input"
                                                                   name="type_water_price" value="5">
                                                            <div class="c-option__icon"></div>
                                                            <div class="c-option__label">Miễn phí</div>
                                                        </label>
                                                    </div>

                                                </div>
                                                <input type="text"
                                                       class="form-control form-control--optional-price js-input-price"
                                                       placeholder="Nhập giá" style="display: none;"
                                                       name="water_price_text">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="add-post__single-info-section ht-card ht-depth-1 mb-12">
                            <div class="section-header">
                                <div class="section-header__icon"><img
                                            src="{{asset('frontend3/assets2/img/icon/ap-06.svg')}}"
                                            alt="Add Post 06"></div>
                                <h2 class="section-header__title">Tiện ích, nội quy</h2>
                            </div>
                            <div class="section-content">
                                @php $post_amenities = \DB::table('post_amenities')->where('post_id', $post->id)->get(); @endphp
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Tiện ích</label>
                                            <div class="form-group__data">
                                                <div class="form-group__options form-group__options--info">
                                                    @foreach($amenities as $amenity)
                                                        <div class="single-info-option">
                                                            <label class="c-option">
                                                                <input type="checkbox" class="c-option__input"
                                                                       name="amenities[]"
                                                                       value="{{$amenity->id}}"
                                                                       @foreach($post_amenities as $post_amenity)
                                                                       @if($amenity->id == $post_amenity->amenity_id) checked @endif
                                                                        @endforeach
                                                                >
                                                                <div class="c-option__icon"></div>
                                                                <div class="c-option__label">{{$amenity->name}}</div>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-group form-group--flex">
                                            <label for="#" class="form-group__label">Nội quy</label>
                                            <div class="form-group__data">
                                                <div class="form-group__options form-group__options--info">
                                                    @foreach($policies as $policy)
                                                        <div class="single-info-option">
                                                            <label class="c-option">
                                                                <input type="checkbox" class="c-option__input"
                                                                       name="policies[]" value="{{$policy->id}}"
                                                                       @foreach($post_amenities as $post_amenity)
                                                                       @if($policy->id == $post_amenity->amenity_id) checked @endif
                                                                        @endforeach
                                                                >
                                                                <div class="c-option__icon"></div>
                                                                <div class="c-option__label">{{$policy->name}}</div>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right mt-24">
                            <button type="submit" class="btn ht-btn-primary px-24">Lưu thay đổi</button>
                        </div>
                    </form>
                </div>
                <div class="l-addpost__sidebar l-addpost__sidebar--right hidden-xs hidden-sm">
                    <div class="add-post-guide mb-12">
                        <div class="add-post-guide__header">
                            <h3 class="add-post-guide__title">Tin đăng mẫu</h3>
                        </div>
                        <div class="single-property-card ht-card ht-depth-1">
                            <a href="#" class="block">
                                <div class="card-header">
                                    <div class="property__photo ht-rectangle ratio-43">
                                        <div class="ht-inner bg-color-grey-300 bd-rd-0">
                                            <img src="{{asset('frontend3/stock2/room-01.jpg')}}" alt="">
                                        </div>
                                    </div>
                                    <div class="property__badges">
                                        <div class="single-badge single-badge--verified">
                                            <i class="single-badge__icon ion-checkmark-circled"></i>
                                            <span class="single-badge__text">Đã xác thực</span>
                                        </div>
                                        <div class="single-badge single-badge--featured">
                                            <i class="single-badge__icon ion-android-star"></i>
                                            <span class="single-badge__text">Nổi bật</span>
                                        </div>
                                    </div>
                                    <div class="property__prices">
                                        <div class="single-price">
                                            <span class="single-price__number">1.400.000</span>
                                            <span class="single-price__currency on-right">&#8363;</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-content">
                                    <div class="property__intro">
                                        <h4 class="property__title">Căn hộ tầng 8 Home City 1231312 123 12312 31</h4>
                                        <div class="property__address">Số 177 Trung Kính, phường Yên Hòa, quận Cầu Giấy,
                                            Hà Nội
                                        </div>
                                    </div>
                                    <div class="property__infos">
                                        <div class="single-info">
                                            <span class="single-info__icon"><img
                                                        src="{{asset('frontend3/stock2/icons/electricity.svg')}}"></span>
                                            <span class="single-info__data">3.000đ/Kwh</span>
                                        </div>
                                        <div class="single-info">
                                        <span class="single-info__icon"><img
                                                    src="{{asset('frontend3/stock2/icons/water.svg')}}"></span>
                                            <span class="single-info__data">20.000đ/khối</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="property__quickview">
                                <div class="ht-rectangle ratio-43">
                                    <div class="ht-inner">
                                        <div class="actions-wrapper">
                                            <a href="#" class="single-action"><i class="ion-create-strong"></i></a>
                                            <a href="#" class="single-action"><i class="ion-link rotate45"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="property__actions">
                                <a href="#" class="single-action single-action--like" title="Thích"
                                   data-toggle="tooltip" data-placement="top"><i
                                            class="ion-android-favorite-outline"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    <!-- END site content -->

    </div>


    @push('scripts')
        <!-- JS: Libs -->
        {{--<script src="frontend3/assets2/libs/jquery.min.js"></script>--}}
        {{--<script src="/frontend3/assets2/libs/bootstrap/js/bootstrap.js"></script>--}}
        <script src="{{asset('frontend3/assets2/libs/select2/js/select2.full.min.js')}}"></script>
        {{--<script src="{{asset('frontend3/assets2/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>--}}
        {{--<script src="frontend3/assets2/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>--}}
        {{--<script src="frontend3/assets2/libs/fancybox/jquery.fancybox.min.js"></script>--}}
        {{--        <script src="{{asset('frontend3/assets2/libs/slick/slick.min.js')}}"></script>--}}
        <script src="{{asset('frontend3/assets2/libs/autosize/autosize.min.js')}}"></script>
        <script src="{{asset('frontend3/assets2/libs/moment-with-locales.min.js')}}"></script>
        <script src="{{asset('frontend3/assets2/libs/moment.min.js')}}"></script>

        <script 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="{{asset('/frontend/scripts/infobox.min.js')}}"></script>
        <script type="text/javascript" src="{{asset('/frontend/scripts/markerclusterer.js')}}"></script>
        <script type="text/javascript" src="{{asset('/js/gmap.js')}}"></script>

        <!-- JS: Main -->
        <script src="{{asset('frontend3/assets2/js/main.js')}}"></script>

        <script src="{{asset('frontend3/assets2/libs/parsley.min.js')}}"></script>
        <script src="{{asset('frontend3/assets2/libs/parsley.vie.js')}}"></script>
        {{--<script type="application/javascript" src="{{asset('frontend3/assets2/js/add-post.js')}}"></script>--}}

        <!-- Custom JS -->
        <script>
            $(document).ready(function () {

                var imagesDel = [];
                var images_temp = [];

                //////////SUBMIT FORM BY AJAX///////////////////////
                $(document).on('click', '.ht-btn-primary', function () {
                    if ($('#EditPost__Form').parsley().isValid()) {
                        var formData = new FormData(document.getElementById('EditPost__Form'));
                        var url = $('#EditPost__Form').attr('action');
                        formData.append('imageDel', JSON.stringify(imagesDel));
                        images_temp.forEach(function (img) {
                            formData.append("images_arr[]", img);
                        })
                        $.ajax({
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: url,
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            beforeSend: function () {
                                $('#EditPost__Form').addClass('ht-on-loading');
                            },
                            success: function (data) {

                                $('#EditPost__Form').removeClass('ht-on-loading');
                                if (data.status == 1) {
                                    swal('Thành công', 'Cập nhật tin đăng thành công', 'success');
                                    window.location.href='dang-tin-2';
                                } else {
                                    swal('Thông báo', data.message, 'warning');
                                }
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                console.log('Error ' + xhr.status + ' | ' + thrownError);
                            }
                        });
                    }


                });


                //////////////SHOW IMAGE UPLOAD///////////////////////
                $(document).on('change', "input[name='images[]']", function () {
                    var item = $(this.files);
                    $.each(item, function (i) {
                        images_temp.push(item[i]);
                    });

                    readURLImage(this);
                })
                $(document).on('click', '.image-delete-btn', function (e) {
                    e.preventDefault();
                    var image_id = $(this).parents('.single-uploaded-image').find('.image-main').attr('data-id');
                    var itemtoRemove = $(this).parents('.single-uploaded-image').find('.image-main').attr('image-name');
                    if (typeof image_id !== typeof undefined && image_id !== false) {
                        //delete image old
                        imagesDel.push(image_id)
                    }
                    if (typeof itemtoRemove !== typeof undefined && itemtoRemove !== false) {
                        //ADD, delete image new
                        $.each(images_temp, function (item) {
                            if (images_temp[item].name === itemtoRemove) {
                                images_temp.splice(item, 1);
                            }
                        })
                    }
                    $(this).parent().remove();

                });

                function readURLImage(input) {
                    if (input.files) {
                        $.each(input.files, function (img) {
                            var reader = new FileReader();

                            reader.onload = function (e) {
                                $('<div class="single-uploaded-image">' +
                                    '<div class="image-wrap ht-rectangle ratio-11">' +
                                    '<div class="ht-inner">' +
                                    '<img src="' + e.target.result + '" alt="" image-name="' + input.files[img].name + '" ' +
                                    'class="image-main">' +
                                    '</div>' +
                                    '</div>' +
                                    '<a href="#" class="image-delete-btn"><i class="ion-android-close"></i></a>' +
                                    '</div>').insertBefore('#add-images');
                            }
                            reader.readAsDataURL(input.files[img]);
                        })

                    }
                }

                ////////////////////////////////////////////////


                ///////LẤY DỮ LIỆU POST TYPE/////////////////
                getPostType();

                function getPostType() {
                    var urlDataPostType = $('.dropdown-typepost').attr('data-url');
                    $.ajax({
                        url: urlDataPostType,
                        type: 'get',
                        dataType: 'json',
                        data: {},
                        success: function (response) {
                            response.dataProvince.forEach(function (item) {
                                if (item.id !== 'undefined') {
                                    $('.dropdown-typepost').append($("<option>").attr("value", item.id).text(item.name));
                                }
                            });
                        }
                    });
                }

                /////////////////////////////////////


                ///XU LY PHAN DIA CHI//////

                //change select provice->district
                $(document).on('change', '.dropdown-province', function () {
                    $('.dropdown-district')
                        .empty()
                        .append('<option value=""></option>')
                        .find('option:first')
                        .attr({"selected": "selected", 'disabled': 'disabled'});
                    getDistrict();
                })
                //change select district -> ward
                $(document).on('change', '.dropdown-district', function () {
                    $('.dropdown-ward')
                        .empty()
                        .append('<option value=""></option>')
                        .find('option:first')
                        .attr({"selected": "selected", 'disabled': 'disabled'});
                    getWard();
                })

                //var wardid = $('.ward-province').children("option:selected").val();


                function getDistrict() {
                    var urlDataDistrict = $('.dropdown-district').attr('data-url');
                    var provinceid = $('.dropdown-province').children("option:selected").val();
                    $.ajax({
                        url: urlDataDistrict,
                        type: 'get',
                        dataType: 'json',
                        data: {
                            province: provinceid,
                        },
                        success: function (response) {
                            response.dataDistrict.forEach(function (item) {
                                if (item.districtid !== 'undefined') {
                                    $('.dropdown-district').append($("<option>").attr("value", item.districtid).text(item.name));
                                }
                            });
                        }
                    });
                }

                function getWard() {
                    var urlDataWard = $('.dropdown-ward').attr('data-url');
                    var districtid = $('.dropdown-district').children("option:selected").val();

                    $.ajax({
                        url: urlDataWard,
                        type: 'get',
                        dataType: 'json',
                        data: {
                            district: districtid,
                        },
                        success: function (response) {
                            response.dataWard.forEach(function (item) {
                                    if (item.wardid !== 'undefined') {
                                        $('.dropdown-ward').append($("<option>").attr("value", item.wardid).text(item.name));
                                    }
                                }
                            );
                        }
                    });
                }

                ///////////////////////////////get address end///////////////////////////////

                //////////////////// GOOLGE MAPS//////////////////////////////
                var starting_lat = 21.028511;
                var starting_lng = 105.804817;

                var map;
                var marker = '';
                var myLatlng;
                var geocoder = new google.maps.Geocoder();
                var infowindow = new google.maps.InfoWindow();

                var current_lat = localStorage.getItem('current_lat');
                var current_lng = localStorage.getItem('current_lng');

                if (current_lat === null || current_lng === null) {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function (position) {
                            if (typeof (Storage) !== 'undefined') {
                                localStorage.setItem('current_lat', position.coords.latitude);
                                localStorage.setItem('current_lng', position.coords.longitude);

                                current_lat = parseFloat(position.coords.latitude);
                                current_lng = parseFloat(position.coords.longitude);
                            }
                        });
                    }
                }

                function initialize() {
                    var mapOptions = {
                        zoom: 12,
                        center: myLatlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("map"), mapOptions);

                    current_lat = localStorage.getItem('current_lat');
                    current_lng = localStorage.getItem('current_lng');

                    if (current_lat !== null && current_lng !== null) {

                        current_lat = parseFloat(current_lat);
                        current_lng = parseFloat(current_lng);

                        var myLatlng = new google.maps.LatLng(current_lat, current_lng);
                        var pos = {
                            lat: current_lat,
                            lng: current_lng
                        };

                    } else {
                        var myLatlng = new google.maps.LatLng(starting_lat, starting_lng);
                        var pos = {
                            lat: starting_lat,
                            lng: starting_lng
                        };
                    }
                    map.setCenter(pos);
                    marker = new google.maps.Marker({
                        map: map,
                        position: myLatlng,
                        draggable: true
                    });
                    infowindow.setContent('Vị trí của bạn');
                    infowindow.open(map, marker);

                    var input2 = document.getElementById('query');
                    var searchBox2 = new google.maps.places.SearchBox(input2);
                    //   map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
                    // Bias the SearchBox results towards current map's viewport.
                    google.maps.event.addListener(searchBox2, 'places_changed', function () {
                        searchBox2.set('map', null);
                        var places = searchBox2.getPlaces();

                        var bounds = new google.maps.LatLngBounds();

                        var i, place;
                        for (i = 0; place = places[i]; i++) {
                            (function (place) {

                                marker.setPosition(place.geometry.location);
                                infowindow.setContent(place.formatted_address);
                                infowindow.open(map, marker);

                                $('#query_lat').val(place.geometry.location.lat());
                                $('#query_lng').val(place.geometry.location.lng());

                                google.maps.event.addListener(marker, 'map_changed', function () {
                                    if (!this.getMap()) {
                                        this.unbindAll();
                                    }
                                });
                                bounds.extend(place.geometry.location);


                            }(place));

                        }
                        map.fitBounds(bounds);
                        searchBox2.set('map', map);
                        map.setZoom(Math.min(map.getZoom(), 12));

                    });


                    google.maps.event.addListener(marker, 'dragend', function () {

                        geocoder.geocode({'latLng': marker.getPosition()}, function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                if (results[0]) {

                                    $('#query_lat').val(marker.getPosition().lat());
                                    $('#query_lng').val(marker.getPosition().lng());
                                    infowindow.setContent(results[0].formatted_address);
                                    infowindow.open(map, marker);
                                }
                            }
                        });
                    });


                    if (marker != '') {


                        var input2 = document.getElementById('query');
                        var searchBox2 = new google.maps.places.SearchBox(input2);
                        //   map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
                        // Bias the SearchBox results towards current map's viewport.
                        google.maps.event.addListener(searchBox2, 'places_changed', function () {
                            console.log(searchBox2);
                            searchBox2.set('map', null);
                            var places = searchBox2.getPlaces();

                            var bounds = new google.maps.LatLngBounds();

                            var i, place;
                            for (i = 0; place = places[i]; i++) {
                                (function (place) {

                                    marker.setPosition(place.geometry.location);
                                    infowindow.setContent(place.formatted_address);
                                    infowindow.open(map, marker);

                                    // $('#query_lat').val(place.geometry.location.lat());
                                    // $('#query_lng').val(place.geometry.location.lng());

                                    google.maps.event.addListener(marker, 'map_changed', function () {
                                        if (!this.getMap()) {
                                            this.unbindAll();
                                        }
                                    });
                                    bounds.extend(place.geometry.location);


                                }(place));

                            }
                            map.fitBounds(bounds);
                            searchBox2.set('map', map);
                            map.setZoom(Math.min(map.getZoom(), 12));

                        });


                        geocoder.geocode({'latLng': myLatlng}, function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                if (results[0]) {


                                    $('#query_lat').val(marker.getPosition().lat());
                                    $('#query_lng').val(marker.getPosition().lng());
                                    infowindow.setContent(results[0].formatted_address);
                                    infowindow.open(map, marker);
                                }
                            }
                        });


                        google.maps.event.addListener(marker, 'dragend', function () {

                            geocoder.geocode({'latLng': marker.getPosition()}, function (results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    if (results[0]) {

                                        $('#query_lat').val(marker.getPosition().lat());
                                        $('#query_lng').val(marker.getPosition().lng());
                                        infowindow.setContent(results[0].formatted_address);
                                        infowindow.open(map, marker);
                                    }
                                }
                            });
                        });

                    }
                }

                google.maps.event.addDomListener(window, 'load', initialize);
                ////////////////////////////////////////////////////////////

                /////////////FORMAT PRICE//////////////////
                $('input[name="price"],input[name="deposit"], input[name="electricity_price_text"], input[name="water_price_text"]').keyup(function (event) {

                    // skip for arrow keys
                    if (event.which >= 37 && event.which <= 40)
                        return;

                    // format number
                    $(this).val(function (index, value) {
                        return value
                            .replace(/\D/g, "")
                            .replace(/\B(?=(\d{3})+(?!\d))/g, ".")
                            ;
                    });
                });
                //////////////////////////////

                // optional price

                $(".js-price-input")
                    .change(function () {
                        var $input = $(this);
                        if ($input.hasClass('has-input-price') && $input.prop('checked')) {
                            $input.parents('.form-group__data').find('.js-input-price').css('display', 'block').prop('required', true);
                        } else {
                            $input.parents('.form-group__data').find('.js-input-price').css('display', 'none').prop('required', false);
                        }
                    });


                // // content max length message count on keyup
                // var text_max = 200;
                // $('#AddPost__Input-Content__charNum').html(text_max + ' ký tự còn lại');
                // $('#AddPost__Input-Content').keyup(function () {
                //     var text_length = $('#AddPost__Input-Content').val().length;
                //     var text_remaining = text_max - text_length;
                //     var text_count_wrap = $('#AddPost__Input-Content__charNum')
                //     text_count_wrap.html(text_remaining + ' kí tự còn lại');
                //     if (text_count_wrap.hasClass('color-red-500')) {
                //         text_count_wrap.removeClass('color-red-500');
                //     }
                //     if (text_remaining < 0) {
                //         text_count_wrap.html('Độ dài quá hạn ' + text_remaining * -1 + ' kí tự').addClass('color-red-500');
                //     }
                // });

                // content max length message count on keyup
                var text_min = 0;
                $('#AddPost__Input-Content__charNum').html('Nhập tối thiểu ' + text_min + ' /200 ký tự');
                $('#AddPost__Input-Content').keyup(function () {
                });


            });
        </script>
    @endpush