@extends('admin')

@section('styles')

    <link href="/assets/css/fileinput.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/pages/css/search.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css"/>
    <link href="/css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        #myMap {
            height: 350px;
            width: auto;
        }
    </style>
    <style>
        .form-horizontal .form-group {
            margin-left: 0px;
            margin-right: 0px;
        }

        .col-lg-6 {
            padding-left: 0px;
        }

        .bien-the .portlet.light {
            padding-left: 0px;
            padding-right: 0px;
        }

        .xoa-bien-the {
            text-align: center;
            vertical-align: middle !important;
            cursor: pointer;
        }

        .xoa-bien-the i {
            font-size: 21px;
            color: red;
        }

        .img-input .div-img {
            width: 100%;
            margin-bottom: 5px;
            margin-top: 10px;
            height: 140px;
            background-size: cover !important;
        }

        .img-input .col-lg-3 {
            padding-left: 0px;
        }

        .img-input input[type="file"] {
            display: none;
        }

        .custom-file-upload {
            border: 1px solid #ccc;
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
        }

        .img-input span {
            position: absolute;
            right: 22px;
            top: 18px;
        }

        .img-input span i {
            font-size: 23px;
            color: #fff;
            text-shadow: 1px 0px 0px #5d5d5d, -1px 0px 0px #5d5d5d, 0px 1px 0px #5d5d5d, 0px -1px 0px #5d5d5d, 1px 1px #5d5d5d, -1px -1px 0px #5d5d5d, 1px -1px 0px #5d5d5d, -1px 1px 0px #5d5d5d;
        }

        .bootstrap-tagsinput .tag [data-role="remove"]::after {
            content: "*" !important;
        }

        .bootstrap-tagsinput .tag {
            font-size: 13px;
        }

        .span-pro {
            position: absolute;
            right: 110px;
            z-index: 999;
            top: 10px;
        }

        .pop-up .span-pro {
            display: none;
        }

        .span-pro i {
            font-size: 23px;
            color: #fff;
            text-shadow: 1px 0px 0px #000, -1px 0px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, 1px 1px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;
        }

        .slide-bsp .tile-thumbnail {
            position: relative;
            width: 295px;
        }

        .slide-bsp .product-select-name {
            display: block;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 200px;
        }
    </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

    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i>Cập nhật {{ $hostel->name }}
            </div>
        </div>
        <div class="portlet-body">
            <div class="tabbable-custom nav-justified">
                <ul class="nav nav-tabs nav-justified">
                    <li class="active">
                        <a href="#tab_1_1_1" data-toggle="tab"> Thông tin chung </a>
                    </li>
                    <li>
                        <a href="#tab_1_1_2" id="tab-2" data-toggle="tab"> Danh sách phòng </a>
                    </li>
                    <li>
                        <a href="#tab_1_1_3" id="tab-3" data-toggle="tab"> Danh sách khách thuê </a>
                    </li>
                    {{--<li>--}}
                        {{--<a href="#tab_1_1_4" id="tab-4" data-toggle="tab"> Chi phí chung nhà trọ </a>--}}
                    {{--</li>--}}
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1_1_1">

                        <form action="{{url('admin/hostel/update', ['id' => $hostel->id])}}" id="create-form"
                              class="form-horizontal"
                              method="post"
                              enctype="multipart/form-data">

                            {{ csrf_field() }}
                            <div class="portlet light bordered col-lg-12">
                                <div class="portlet-title">
                                    <div class="caption font-red-sunglo">
                                        <i class="fa fa-home font-red-sunglo"></i>
                                        <span class="caption-subject bold uppercase">Thông tin nhà trọ</span>
                                    </div>
                                </div>
                                <div class="col-lg-6">

                                    <div class="form-body">
                                        <div class="form-group">
                                            <label>Tên nhà</label>
                                            <div>
                                                <input type="text" name="name" class="form-control"
                                                       placeholder="Điền tên nhà"
                                                       value="{{$hostel->name }}">
                                            </div>
                                        </div>
                                        <div class="form-group dmc0">
                                            <label>Loại nhà</label>
                                            <div>
                                                <select class="form-control select2" name="type">
                                                    <option value="0">Chọn Loại nhà</option>
                                                    @foreach($hostelTypes as $hostelType)
                                                        <option @if($hostelType->id == $hostel->type) selected @endif
                                                        value="{{ $hostelType->id }}">{{ $hostelType->name }}</option>
                                                    @endforeach


                                                </select>
                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <label>Giá điện</label>
                                            <div>
                                                <input type="text" name="electric_price" id="electric_price"
                                                       class="form-control"
                                                       placeholder="Điền giá điện"
                                                       value="{{ $hostel->electric_price }}">
                                            </div>
                                        </div>


                                    </div>

                                </div>
                                <div class="col-lg-6" style="padding-right: 0px;">
                                    <div class="form-group">
                                        <label>Giá nước</label>
                                        <div>
                                            <input type="text" name="water_price" id="water_price" class="form-control"
                                                   placeholder="Điền giá nước" value="{{ $hostel->water_price }}">
                                        </div>
                                    </div>
                                    @if(auth('backend')->check())
                                        @if(auth('backend')->user()->type != \App\User::OWNER)
                                            <div class="form-group dmc0">
                                                <label>Chọn chủ nhà </label>
                                                <div>
                                                    <select class="form-control select2" name="owner_id" id="owner-id">
                                                        <option value="">Chọn chủ nhà</option>
                                                        @foreach($owners as $owner)
                                                            <option @if($owner->id == $hostel->owner_id) selected @endif value="{{ $owner->id }}">{{ $owner->name }}</option>
                                                        @endforeach

                                                    </select>
                                                    <span class="help-block"> Chủ nhà chưa tồn tại trên hệ thống ? <a
                                                                href="#add-owner"
                                                                data-toggle="modal">Bấm để tạo</a> </span>
                                                </div>
                                            </div>
                                        @else
                                            <input name="owner_id" id="owner-id"
                                                   value="{{ auth('backend')->user()->id }}" type="hidden">

                                        @endif
                                    @endif
                                    <div class="form-group dmc0">
                                        <label>Số tầng </label>
                                        <div>
                                            <div>
                                                <input type="number" name="number_floors" class="form-control"
                                                       placeholder="Điền số tầng" id="number_floors"
                                                       value="{{ $hostel->number_floors }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group dmc0">
                                        <label>Số phòng </label>
                                        <div>
                                            <div>
                                                <input type="number" name="number_rooms" class="form-control"
                                                       placeholder="Điền số phòng" id="number_rooms" disabled
                                                       value="{{ $hostel->number_rooms }}">
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                            @if(auth('backend')->user()->type == \App\User::ADMIN)

                            <div class="portlet light bordered col-lg-12">
                                <div class="portlet-title">
                                    <div class="caption font-red-sunglo">
                                        <i class="fa fa-info font-red-sunglo"></i>
                                        <span class="caption-subject bold uppercase">Trạng thái</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Có được hiển thị ?</label>
                                    <div class="col-md-9">
                                        <div class="mt-checkbox-inline">
                                            <label class="mt-checkbox mt-checkbox-outline">
                                                <input type="checkbox" name="status"
                                                       @if($hostel->status) checked @endif>
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Đã được xác nhận ?</label>
                                    <div class="col-md-9">
                                        <div class="mt-checkbox-inline">
                                            <label class="mt-checkbox mt-checkbox-outline">
                                                <input type="checkbox" name="status_confirm"
                                                       @if($hostel->status_confirm) checked @endif>
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Hiển thị nổi bật ?</label>
                                    <div class="col-md-9">
                                        <div class="mt-checkbox-inline">
                                            <label class="mt-checkbox mt-checkbox-outline">
                                                <input type="checkbox" name="is_featured"
                                                       @if($hostel->is_featured) checked @endif>
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Hạn hiển thị nổi bật</label>
                                    <div class="col-md-2">

                                                <input type="text" name="expire_featured" class="form-control datepicker"  @if(!$hostel->is_featured) disabled @endif
                                                       @if($hostel->expire_featured) value="{{ $hostel->expire_featured->format('d/m/Y') }}" @endif>

                                        </div>
                                    </div>
                                </div>


                            @endif
                            <div class="portlet light bordered col-lg-12">
                                <div class="portlet-title">
                                    <div class="caption font-red-sunglo">
                                        <i class="icon-settings font-red-sunglo"></i>
                                        <span class="caption-subject bold uppercase">Các tiện ích khác</span>
                                    </div>
                                </div>
                                <div class="mt-checkbox-inline">
                                    @php $features = \App\Models\Amenity::publish()->amenity()->get()->chunk(3); @endphp
                                    @php $hostelFeatures = DB::table('hostel_amenities')->where('hostel_id', $hostel->id)->pluck('amenities_id')->toArray();@endphp
                                    @foreach($features as $feature)
                                        <div class="col-md-3">
                                            @foreach($feature as $item)
                                                <label class="mt-checkbox">
                                                    <input type="checkbox" name="features[]"

                                                           @if(in_array($item->id, $hostelFeatures)) checked @endif
                                                           value="{{ $item->id }}"><i
                                                            class="fa {{$item->icon}}"></i> {{ $item->name }}
                                                    <span></span>
                                                </label>
                                            @endforeach
                                        </div>

                                    @endforeach
                                </div>
                            </div>
                            <div class="portlet light bordered col-lg-12">
                                <div class="portlet-title">
                                    <div class="caption font-red-sunglo">
                                        <i class="icon-settings font-red-sunglo"></i>
                                        <span class="caption-subject bold uppercase">Nội quy</span>
                                    </div>
                                </div>
                                <div class="mt-checkbox-inline">
                                    @php $features = \App\Models\Amenity::publish()->policy()->get()->chunk(3); @endphp

                                    @foreach($features as $feature)
                                        <div class="col-md-3">
                                            @foreach($feature as $item)
                                                <label class="mt-checkbox">
                                                    <input type="checkbox" name="policies[]"

                                                           @if(in_array($item->id, $hostelFeatures)) checked @endif
                                                           value="{{ $item->id }}"><i
                                                            class="fa {{$item->icon}}"></i> {{ $item->name }}
                                                    <span></span>
                                                </label>
                                            @endforeach
                                        </div>

                                    @endforeach
                                </div>
                            </div>

                            <div class="form-group col-lg-12">
                                <label>Ảnh đại diện *</label>
                                <div>
                                    <input type="file" class="product-image form-control" name="image" id="image">
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <label>Ảnh phụ (có thể đính kèm nhiều ảnh)</label>
                                <div>
                                    <input type="file" class="product-image form-control" multiple name="images[]"
                                           id="images"
                                           rel="post_status_images">
                                </div>
                            </div>

                            <div class="portlet light bordered col-lg-12">
                                <div class="portlet-title">
                                    <div class="caption font-red-sunglo">
                                        <i class="fa fa-home font-red-sunglo"></i>
                                        <span class="caption-subject bold uppercase">Địa chỉ nhà trọ</span>
                                    </div>
                                </div>
                                <div class="form-group col-lg-12">
                                    <label>Địa chỉ</label>
                                    <div>
                                        <input type="text" name="address" class="form-control"
                                               placeholder="Địa chỉ" id="address" value="{{ $hostel->address }}">
                                    </div>
                                </div>
                                <div class="form-group dmc0 col-lg-12">
                                    <label>Tỉnh / thành phố *</label>
                                    <div>
                                        <select class="form-control select2" name="province_id" data-index="0"
                                                id="province">
                                            <option value="0">Chọn thành phố</option>
                                            @php $cities = \App\Components\Functions::getProvinces();@endphp

                                            @foreach($cities as $city)
                                                <option @if($hostel->province_id == $city->provinceid) selected
                                                        @endif value="{{ $city->provinceid }}">{{ $city->name }}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                                <div class="form-group dmc0 col-lg-12">
                                    <label>Quận / huyện *</label>
                                    <div>
                                        <select class="form-control select2" name="district_id" id="district">
                                            <option value="">Chọn quận huyện</option>

                                            @if($hostel->district_id)
                                                @php $district = \App\Components\Functions::getDistrictName($hostel->district_id); @endphp
                                                @if($district)
                                                    <option selected
                                                            value="{{ $hostel->district_id }}"> {{ $district->name }}</option>
                                                @endif
                                            @endif

                                        </select>
                                    </div>
                                </div>
                                <div class="form-group dmc0 col-lg-12">
                                    <label>Phường / xã *</label>
                                    <div>
                                        <select class="form-control select2" name="ward_id" id="ward">
                                            <option value="">Chọn phường xã</option>
                                            @if($hostel->ward_id)
                                                @php $ward = \App\Components\Functions::getWardName($hostel->ward_id); @endphp
                                                @if($ward)
                                                    <option selected
                                                            value="{{ $hostel->ward_id }}"> {{ $ward->name }}</option>
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-lg-12">
                                    <label>Latitude</label>
                                    <div>
                                        <input type="text" name="lat" id="latitude" class="form-control"
                                               placeholder="Điền Latitude" value="{{ $hostel->lat }}">
                                    </div>
                                </div>
                                <div class="form-group col-lg-12">
                                    <label>Longitude</label>
                                    <div>
                                        <input type="text" name="lng" id="longitude" class="form-control"
                                               placeholder="Điền Longitude" value="{{ $hostel->lng }}">
                                    </div>
                                </div>
                                <div class="col-lg-12 form-group">
                                    <label>Bản đồ (Kéo thả biểu tượng để chọn vị trí)</label>
                                    <div id="myMap">

                                    </div>
                                </div>
                                <div class="col-lg-12 form-group">
                                    <label>Miêu tả chi tiết</label>
                                    <div>
                                <textarea class="form-control ckeditor" placeholder="Điền miêu tả" rows="10"
                                          name="desc">{!! str_replace('\n', '<br>', $hostel->desc) !!}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-offset-3 col-md-9">
                                        <button type="submit" class="btn green">Cập nhật</button>
                                    </div>
                                </div>
                            </div>


                            <div class="col-md-12 col-sm-12">
                                <div class="form-group">
                                    <input style="width: 300px; margin-top: 10px" id="pac-input"
                                           class="controls_map form-control"
                                           type="text" placeholder="Tìm địa chỉ">
                                    <div id="myMap"></div>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="tab-pane" id="tab_1_1_2">

                    </div>
                    <div class="tab-pane" id="tab_1_1_3">
                    </div>
                    <div class="tab-pane" id="tab_1_1_4">
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@push('scripts')

<script src="/assets/global/plugins/jquery-repeater/jquery.repeater.js" type="text/javascript"></script>
<script src="/assets/js/fileinput.min.js"></script>
<script src="/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
<script src="/assets/pages/scripts/form-repeater.min.js" type="text/javascript"></script>

<script src="//maps.googleapis.com/maps/api/js?sensor=false&region=vi&language=vi&libraries=places&key=AIzaSyBRy4cuNgPMeS5sDUj8rZ8Ql4_BkMMf4TM"></script>

<script>
    $(document).on('click', '#tab-2', function () {
        $.ajax({
            url: '{{ url('admin/hostel/room', ['id' => $hostel->id]) }}',
            type: 'get',
            beforeSend: function () {

            },
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#tab_1_1_2').html(response.html);
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
                $('.select2').select2();
            }
        });
    });

    $(document).on('click', '#tab-3', function () {
        $.ajax({
            url: '{{ url('admin/renter') }}',
            type: 'get',
            data: {
              'hostel_id' : '{{ $hostel->id }}'
            },
            beforeSend: function () {

            },
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#tab_1_1_3').html(response.html);
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
                $('.select2').select2();
            }
        });
    });

    $(document).on('click', '#save-owner', function () {
        var data = $('#form-owner').serialize();
        $.ajax({
            url: '{{ url('admin/hostel/create-owner') }}',
            type: 'post',
            data: data,
            beforeSend: function () {

            },
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#owner-id').html(response.html);
                    $('#add-owner').modal('hide');
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
                $('.select2').select2();
            }
        });
    });

    $(document).ready(function () {
        $('.repeater').repeater({
            initEmpty: true,

            defaultValues: {
                'text-input': 'foo'
            },
            show: function () {
                $(this).slideDown();
            },
//            hide: function (deleteElement) {
//                if(confirm('Are you sure you want to delete this element?')) {
//                    $(this).slideUp(deleteElement);
//                }
//            },
//            ready: function (setIndexes) {
//                $dragAndDrop.on('drop', setIndexes);
//            },
            isFirstItemUndeletable: true
        })
    });
</script>
<script>
    $(document).on('change', '#province', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'province'
            },
            dataType: 'html',
            success: function (response) {
                $('#district').html(response);
                $('.select2').select2();
            }
        });
    });

    $(document).on('change', '#district', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'district'
            },
            dataType: 'html',
            success: function (response) {
                $('#ward').html(response);
                $('.select2').select2();
            }
        });
    });
</script>
<script>
    var map;
    var marker;
            @if(!empty($hostel->lat) && !empty($hostel->lng))
    var myLatlng = new google.maps.LatLng({{ $hostel->lat }}, {{ $hostel->lng }});
            @else
    var myLatlng = new google.maps.LatLng(21.028511, 105.804817);
            @endif
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();


    $(function () {

    });


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

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

        marker = new google.maps.Marker({
            map: map,
            position: myLatlng,
            draggable: true
        });

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


            var places = searchBox.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);

                    $('#address').val(place.formatted_address);
                    $('#latitude').val(place.geometry.location.lat());
                    $('#longitude').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);
            searchBox.set('map', map);
            map.setZoom(Math.min(map.getZoom(), 12));

        });


        var input2 = document.getElementById('address');
        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);

                    $('#address').val(place.formatted_address);
                    $('#latitude').val(place.geometry.location.lat());
                    $('#longitude').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]) {
                 //   $('#latitude,#longitude').show();

                    // $('#zip').val(results[0].address_components[7].long_name);

                    //$('#city').val(results[0].address_components[3].long_name);
                    //$('#state').val(results[0].address_components[5].long_name);
//                    $('#address').val(results[0].formatted_address);
//                    $('#latitude').val(marker.getPosition().lat());
//                    $('#longitude').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]) {
                        console.log(results[0].address_components);
                        //if (results[0].address_components[7].long_name != "") {
                        //  $('#zip').val(results[0].address_components[7].long_name);
                        //}
                        //$('#city').val(results[0].address_components[3].long_name);
                        //$('#state').val(results[0].address_components[5].long_name);
                        $('#address').val(results[0].formatted_address);
                        $('#latitude').val(marker.getPosition().lat());
                        $('#longitude').val(marker.getPosition().lng());
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                    }
                }
            });
        });

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


    $(document).on('ready', function () {

        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true
        });

        $('input[name="is_featured"]').change(function() {

            if(this.checked)
            {
                $('input[name="expire_featured"]').prop('disabled', false);
            } else {
                $('input[name="expire_featured"]').prop('disabled', true);
            }
            // do stuff here. It will fire on any checkbox change

        });


        $("#image").fileinput({
            'initialPreview': [
                '<img src="{{ $hostel->image }}" class="kv-preview-data file-preview-image" style="width:auto;height:160px;">'
            ],
            initialPreviewConfig: [
                {
                    url: "{{ url('admin/hostel/delete-image', ['id' => $hostel->id]) }}",
                },
            ],

            'showUpload': false, 'previewFileType': 'any',
            'showCaption': false
        });

        $("#images").fileinput({
            @php $hImages = json_decode($hostel->images, true );@endphp

                    @if(is_array($hImages))
            'initialPreview': [

                @foreach($hImages as $ima)
                    '<img src="' + '/files/{{$ima}}' + '" class="kv-preview-data file-preview-image" style="width:auto;height:160px;">',
                @endforeach
            ],
            @endif
            'showUpload': false, 'previewFileType': 'any',
            'showCaption': false,
            @if(is_array($hImages))
            initialPreviewConfig: [
                    @foreach($hImages as $key => $ima)
                {
                    url: "{{ url('admin/hostel/delete-images', ['id' => $hostel->id]) }}", key: '{{ $key }}'
                },
                @endforeach
            ],
            @endif
        });

    });


</script>
@endpush