@extends('backend.layouts.main')

@section('content')

    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{$subtitle}}</h3>
        </div>
        <div class="col-md-7 align-self-center">
            @if(isset($is_edit))
                {{ Breadcrumbs::render('backend.products.edit') }}
            @else
                {{ Breadcrumbs::render('backend.products.add') }}
            @endif
        </div>

        <div class="col-md-12">
            <div class="card card-outline-info">
                <div class="card-body">

                    <form class="form-horizontal" id="form-add" action="" method="post">

                        @include('backend.partials.msg')
                        {{--@include('backend.partials.errors')--}}

                        {{ csrf_field() }}

                        <div class="row">

                            <div class="col-md-4">
                                <div class="form-group {{$errors->has('province_id')?'has-danger':''}}">
                                    <label class="form-control-label">Tỉnh/TP <span class="text-danger">*</span></label>
                                    <select class="form-control select_province select2" name="province_id">
                                        <option value="">Chọn</option>
                                        @foreach($provinces as $province)
                                            <option value="{{$province->id}}"
                                                    {!! $form_init->province_id==$province->id?'selected="selected"':'' !!}
                                            >{{$province->name}}</option>
                                        @endforeach
                                    </select>
                                    {!! $errors->has('province_id')?'<div class="form-control-feedback">'.$errors->first('province_id').'</div>':'' !!}
                                </div>

                                <div class="form-group {{$errors->has('district_id')?'has-danger':''}}">
                                    <label class="form-control-label">Quận/Huyện
                                        <span class="text-danger">*</span></label>
                                    <select class="form-control select_district select2" name="district_id">
                                        <option value="">Chọn</option>
                                        @foreach($districts as $districts)
                                            <option value="{{$districts->id}}"
                                                    {!! $form_init->district_id==$districts->id?'selected="selected"':'' !!}>{{$districts->name}}</option>
                                        @endforeach
                                    </select>
                                    {!! $errors->has('district_id')?'<div class="form-control-feedback">'.$errors->first('district_id').'</div>':'' !!}
                                </div>

                                <div class="form-group {{$errors->has('ward_id')?'has-danger':''}}">
                                    <label class="form-control-label">Phường/Xã
                                        <span class="text-danger">*</span></label>
                                    <select class="form-control select_ward select2" name="ward_id">
                                        <option value="">Chọn</option>
                                        @foreach($wards as $ward)
                                            <option value="{{$ward->id}}"
                                                    {!! $form_init->ward_id==$ward->id?'selected="selected"':'' !!}>{{$ward->name}}</option>
                                        @endforeach
                                    </select>
                                    {!! $errors->has('ward_id')?'<div class="form-control-feedback">'.$errors->first('ward_id').'</div>':'' !!}
                                </div>

                                <div class="form-group {{$errors->has('street_id')?'has-danger':''}}">
                                    <label class="form-control-label">Tên đường <span class="text-danger">*</span>
                                        <button type="button" data-toggle="modal" data-target="#addStreet-modal"
                                                class="btn waves-effect waves-light btn-xs btn-info">
                                            <i class="fa fa-plus"></i> Thêm mới
                                        </button>
                                    </label>
                                    <select class="form-control select_street select2" name="street_id">
                                        <option value="">Chọn</option>
                                        @foreach($streets as $street)
                                            <option value="{{$street->id}}"
                                                    {!! $form_init->street_id==$street->id?'selected="selected"':'' !!}>{{$street->name}}</option>
                                        @endforeach
                                    </select>
                                    {!! $errors->has('street_id')?'<div class="form-control-feedback">'.$errors->first('street_id').'</div>':'' !!}
                                </div>

                                <div class="form-group {{$errors->has('home_number')?'has-danger':''}}">
                                    <label class="form-control-label">Số nhà <span class="text-danger">*</span></label>
                                    <input type="text" name="home_number" class="form-control"
                                           value="{{$form_init->home_number}}"
                                           placeholder="Nhập số nhà">
                                    {!! $errors->has('home_number')?'<div class="form-control-feedback">'.$errors->first('home_number').'</div>':'' !!}
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Số cũ/thay đổi gì</label>
                                    <input type="text" name="home_number_note" class="form-control"
                                           value="{{$form_init->home_number_note}}"
                                           placeholder="">
                                </div>

                                <p>Vị trí trên bản đồ</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" id="lat" name="location_lat"
                                                   value="{{$form_init->location_lat}}"
                                                   class="form-control" readonly="yes"><br>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" id="lng" name="location_long"
                                                   value="{{$form_init->location_long}}"
                                                   class="form-control" readonly="yes">
                                        </div>
                                    </div>
                                </div>

                                <div id="gmaps-simple" class="gmaps"></div>

                            </div>

                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group {{$errors->has('product_type_id')?'has-danger':''}}">
                                            <label class="form-control-label">Loại
                                                <span class="text-danger">*</span></label>
                                            <select class="form-control" name="product_type_id">
                                                <option value="" {{empty(old('product_type_id'))?'selected="selected"':''}}>
                                                    &nbsp;
                                                </option>
                                                @foreach($product_type as $product_type)
                                                    <option value="{{$product_type->id}}"
                                                            {!! $form_init->product_type_id==$product_type->id?'selected="selected"':'' !!}>{{$product_type->name}}</option>
                                                @endforeach
                                            </select>
                                            {!! $errors->has('product_type_id')?'<div class="form-control-feedback">'.$errors->first('product_type_id').'</div>':'' !!}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group {{$errors->has('horizontal')?'has-danger':''}}">
                                            <label class="form-control-label">Ngang (m)
                                                <span class="text-danger">*</span></label>
                                            <input type="number" name="horizontal" step="0.1" min="0"
                                                   value="{{$form_init->horizontal?floatval($form_init->horizontal):''}}"
                                                   class="form-control">
                                            {!! $errors->has('horizontal')?'<div class="form-control-feedback">'.$errors->first('horizontal').'</div>':'' !!}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group {{$errors->has('vertical')?'has-danger':''}}">
                                            <label class="form-control-label">Dài (m) <span class="text-danger">*</span></label>
                                            <input type="number" name="vertical" step="0.1" min="0"
                                                   value="{{$form_init->vertical?floatval($form_init->vertical):''}}"
                                                   class="form-control">
                                            {!! $errors->has('vertical')?'<div class="form-control-feedback">'.$errors->first('vertical').'</div>':'' !!}
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-control-label">DT(m<sup>2</sup>)</label>
                                            <input type="number" name="area" step="0.1" min="0"
                                                   value="{{$form_init->area?floatval($form_init->area):''}}"
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-control-label">DT đất XD (m<sup>2</sup>)</label>
                                            <input type="number" name="land_area" step="0.1" min="0"
                                                   value="{{$form_init->land_area?floatval($form_init->land_area):''}}"
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-control-label">DT sàn XD (m<sup>2</sup>)</label>
                                            <input type="number" name="floor_area" step="0.1" min="0"
                                                   value="{{$form_init->floor_area?floatval($form_init->floor_area):''}}"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">Loại đường</label>
                                            <select class="form-control" name="home_facade">
                                                @foreach($home_facade as $value)
                                                    <option value="{{$value['id']}}"
                                                            {!! $form_init->home_facade==$value['id']?'selected="selected"':'' !!}>{{$value['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">Chiều rộng đường(m)</label>
                                            <input type="number" name="road_width" step="0.1" min="0"
                                                   value="{{$form_init->road_width?floatval($form_init->road_width):''}}"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">Hướng</label>
                                            <select class="form-control" name="home_direction">
                                                @foreach($home_direction as $direction)
                                                    <option value="{{$direction['id']}}"
                                                            {!! $form_init->home_direction==$direction['id']?'selected="selected"':'' !!}>{{$direction['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">Phù hợp khai thác</label>
                                            <select class="form-control selectpicker" name="purpose_ids[]" multiple
                                                    data-style="form-control btn-secondary">
                                                @foreach($purpose as $purpose)
                                                    <option value="{{$purpose->id}}"
                                                            {!! $form_init->purpose_ids&&in_array($purpose->id,$form_init->purpose_ids)?'selected="selected"':'' !!}>{{$purpose->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Kết cấu</label>
                                    <select class="form-control home_structure" name="home_structure">
                                        @foreach($home_structure as $home_structure)
                                            <option value="{{$home_structure['id']}}"
                                                    {!! $home_structure['id']==$form_init->home_structure?'selected="selected"':'' !!}>{{$home_structure['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="row structure_detail {{empty($form_init->home_structure)||$form_init->home_structure!=3?"hide":''}}">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-control-label">Số Hầm</label>
                                            <input type="number" name="basement_number" step="1" min="0"
                                                   value="{{$form_init->basement_number}}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-control-label">Số Tầng</label>
                                            <input type="number" name="floor_number" step="1" min="0"
                                                   value="{{$form_init->floor_number}}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <p><label class="form-control-label">&nbsp;</label></p>
                                            <input type="checkbox" id="mezzanine_number" name="terrace" value="1"
                                                   {!! $form_init->mezzanine_number>0?'checked="checked"':'' !!}
                                                   class="filled-in chk-col-black"/>
                                            <label for="mezzanine_number">Lửng</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <p><label class="form-control-label">&nbsp;</label></p>
                                            <input type="checkbox" id="terrace" name="terrace" value="1"
                                                   {!! $form_init->terrace==1?'checked="checked"':'' !!}
                                                   class="filled-in chk-col-black"/>
                                            <label for="terrace">s.thượng</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Phòng ngủ</label>
                                            <input type="number" name="bedroom_number" step="1" min="0"
                                                   value="{{$form_init->bedroom_number}}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Phòng khách</label>
                                            <input type="number" name="room_number" step="1" min="0"
                                                   value="{{$form_init->room_number}}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Bếp</label>
                                            <input type="number" name="kitchen_number" step="1" min="0"
                                                   value="{{$form_init->kitchen_number}}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Toilet</label>
                                            <input type="number" name="bathroom_number" step="1" min="0"
                                                   value="{{$form_init->bathroom_number}}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-control-label">Ban công</label>
                                            <input type="number" name="balcony_number" step="1" min="0"
                                                   value="{{$form_init->balcony_number}}"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Tiện nghi trong nhà </label>
                                    <select class="form-control selectpicker" name="convenient_ids[]"
                                            multiple data-style="form-control btn-secondary">
                                        @foreach($convenience as $convenience)
                                            <option value="{{$convenience->id}}"
                                                    {!! $form_init->convenient_ids&&in_array($convenience->id,$form_init->convenient_ids)?'selected="selected"':'' !!}>{{$convenience->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Tiện nghi xung quanh </label>
                                    <select class="form-control selectpicker" name="exterior_ids[]"
                                            multiple data-style="form-control btn-secondary">
                                        @foreach($exterior as $exterior)
                                            <option value="{{$exterior->id}}"
                                                    {!! $form_init->exterior_ids&&in_array($exterior->id,$form_init->exterior_ids)?'selected="selected"':'' !!}>{{$exterior->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Tình trạng pháp lý</label>
                                    <select class="form-control" name="legal_status">
                                        <option value="">&nbsp;</option>
                                        @foreach($legal_status as $legal_status)
                                            <option value="{{$legal_status['id']}}"
                                                    {!! $form_init->legal_status==$legal_status['id']?'selected="selected"':'' !!}>{{$legal_status['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group {{$errors->has('price')?'has-danger':''}}">
                                    <label class="form-control-label">Giá bán<span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="number" name="price" min="0" step="0.01"
                                               value="{{$form_init->price?floatval($form_init->price):''}}"
                                               class="form-control col-md-9 tien-vnd">
                                        <select class="form-control col-md-3" name="price_type">
                                            @foreach($price_type as $price_type)
                                                <option value="{{$price_type['id']}}"
                                                        {!! $form_init->price_type==$price_type['id']||empty($form_init->price_type)?'selected="selected"':'' !!}>{{$price_type['name']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    {!! $errors->has('price')?'<div class="form-control-feedback">'.$errors->first('price').'</div>':'' !!}
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Giá thuê/tháng</label>
                                    <div class="input-group">
                                        <input type="number" name="monthly_price" min="0" step="1"
                                               value="{{$form_init->monthly_price?floatval($form_init->monthly_price):''}}"
                                               class="form-control col-md-9">
                                        <select class="form-control col-md-3" name="monthly_price_unit">
                                            <option value="VNĐ" {!! $form_init->monthly_price_unit=='VNĐ'?'selected="selected"':'' !!}>
                                                VNĐ
                                            </option>
                                            <option value="USD" {!! $form_init->monthly_price_unit=='USD'?'selected="selected"':'' !!}>
                                                USD
                                            </option>
                                        </select>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-4">

                                <div class="form-group">
                                    <label>Ảnh hiện trạng tài sản</label>
                                    <div class="dropzone" id="myDropzone" action="{{route('backend.ajax.uploadImage')}}">
                                        <div class="dz-message">
                                            <div class="col-xs-8">
                                                <div class="message">
                                                    <h6>Kéo thả tập tin vào hoặc Click để tải lên</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="result">
                                            @foreach($file_images as $file)
                                                <div class="thumb-nail-view">
                                                    <img src="{{$file->file_src}}" class="img-thumbnail">
                                                    <input name="image_ids[]" value="{{$file->id}}" type="hidden">
                                                    <a href="javascript:;" onclick="removeFile($(this))" data-id="{{$file->id}}">Xóa</a>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="fallback">
                                            <input type="file" name="file" multiple style="opacity: 0">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Hình ảnh giấy tờ chủ quyền</label>
                                    <div class="dropzone" id="myDropzone2" action="{{route('backend.ajax.uploadImage')}}">
                                        <div class="dz-message">
                                            <div class="col-xs-8">
                                                <div class="message">
                                                    <h6>Kéo thả tập tin vào hoặc Click để tải lên</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="result">
                                            @foreach($file_images_extra as $file)
                                                <div class="thumb-nail-view">
                                                    <img src="{{$file->file_src}}" class="img-thumbnail">
                                                    <input name="image_extra_ids[]" value="{{$file->id}}" type="hidden">
                                                    <a href="javascript:;" onclick="removeFile($(this))" data-id="{{$file->id}}">Xóa</a>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="fallback">
                                            <input type="file" name="file" multiple style="opacity: 0">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Người liên hệ</label>
                                    <input type="text" name="contact_name"
                                           value="{{$form_init->contact_name}}"
                                           class="form-control">
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Điện thoại</label>
                                    <input type="text" name="contact_phone"
                                           value="{{$form_init->contact_phone}}"
                                           class="form-control">
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Điện thoại 01</label>
                                    <input type="text" name="contact_phone1"
                                           value="{{$form_init->contact_phone1}}"
                                           class="form-control">
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Điện thoại 02</label>
                                    <input type="text" name="contact_phone2"
                                           value="{{$form_init->contact_phone2}}"
                                           class="form-control">
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Địa chỉ</label>
                                    <input type="text" name="contact_address"
                                           value="{{$form_init->contact_address}}"
                                           class="form-control">
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Danh tính</label>
                                    <select class="form-control" name="contact_type">
                                        @foreach($contact_type as $contact_type)
                                            <option value="{{$contact_type['id']}}"
                                                    {!! $form_init->contact_type==$contact_type['id']?'selected="selected"':'' !!}>{{$contact_type['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <p><label class="form-control-label">Hiện trạng</label></p>
                                    <input type="radio" id="radio_0" name="status" value=""
                                            {{empty($form_init->status)?'checked':''}}/>
                                    <label for="radio_0">KXĐ</label>

                                    @foreach($status as $k=>$v)
                                        <input type="radio" id="radio_{{$v['id']}}" name="status" value="{{$v['id']}}"
                                                {{$form_init->status==$v['id']?'checked':''}}/>
                                        <label for="radio_{{$v['id']}}">{{$v['name']}}</label>
                                    @endforeach

                                </div>

                                <div class="form-group">
                                    <p><label class="form-control-label">Trạng thái</label></p>
                                    @foreach($censorship as $k=>$v)
                                        @if($v['id']==1)
                                            @continue
                                        @endif
                                        <input type="radio" id="status_censorship_{{$v['id']}}" name="status_censorship" value="{{$v['id']}}"
                                                {{(empty($form_init->status_censorship)&&$v['id']==1)||($form_init->status_censorship==$v['id'])?'checked':''}}/>
                                        <label for="status_censorship_{{$v['id']}}">{{$v['name']}}</label>
                                    @endforeach
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Mô tả</label>
                                    <textarea class="form-control" rows="2" name="description">{!! $form_init->description !!}</textarea>
                                </div>

                            </div>
                        </div>

                        <div class="form-group text-center">
                            <button class="btn btn-primary" type="submit">Thêm dự án</button>
                        </div>

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

        </div>
    </div>

    @include('backend.products.modal.addStreet')

@endsection

@section('script')
    <!-- google maps api -->
    <script src="https://maps.google.com/maps/api/js?key={{config('constants.google_maps_key')}}&sensor=true"></script>
    <script src="{{ asset('/storage/backend/assets/plugins/gmaps/gmaps.min.js')}}"></script>
    <script src="{{ asset('/storage/backend/js/markerwithlabel.js')}}" type="text/javascript"></script>
    <script src="{{ asset('/storage/backend/assets/plugins/gmaps/jquery.gmaps.js')}}?v={{ config('constants.asset_version') }}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script>

        $('.home_structure').change(function () {
            var v = parseInt($(this).val());
            if (v == 3) {
                $('.structure_detail').removeClass('hide');
            } else {
                $('.structure_detail').addClass('hide');
            }
        });

        new SelectLocation('#form-add ');

        function SelectLocation(form_id) {
            $(form_id + '.select_province').change(function () {
                $(form_id + '.select_district').html('<option value="">Chọn</option>');
                $(form_id + '.select_ward').html('<option value="">Chọn</option>');
                $(form_id + '.select_street').html('<option value="">Chọn</option>');
                var province_id = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: '{{route('location.district')}}',
                    data: {province_id: province_id},
                    dataType: 'json',
                    success: function (data) {
                        $.each(data.data, function (index, element) {
                            $(form_id + '.select_district').append('<option value=' + element.id + '>' + element.name + '</option>');
                        });
                    }
                });
            });

            $(form_id + '.select_district').change(function () {
                $(form_id + '.select_ward').html('<option value="">Chọn</option>');
                $(form_id + '.select_street').html('<option value="">Chọn</option>');
                var district_id = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: '{{route('location.ward')}}',
                    data: {district_id: district_id},
                    dataType: 'json',
                    success: function (data) {
                        $.each(data.data, function (index, element) {
                            $(form_id + '.select_ward').append('<option value=' + element.id + '>' + element.name + '</option>');
                        });
                    }
                });

                /*$(form_id + '.select_street').html('<option value="">Chọn</option>');
                $.ajax({
                    type: 'GET',
                    url: '{{route('location.street')}}',
                    data: {district_id: district_id},
                    dataType: 'json',
                    success: function (data) {
                        $.each(data.data, function (index, element) {
                            $(form_id + '.select_street').append('<option value=' + element.id + '>' + element.name + '</option>');
                        });
                    }
                });*/

            });

            $(form_id + '.select_ward').change(function () {
                $(form_id + '.select_street').html('<option value="">Chọn</option>');
                var ward_id = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: '{{route('location.street')}}',
                    data: {ward_id: ward_id},
                    dataType: 'json',
                    success: function (data) {
                        $.each(data.data, function (index, element) {
                            $(form_id + '.select_street').append('<option value=' + element.id + '>' + element.name + '</option>');
                        });
                    }
                });
            });
        };

        Dropzone.options.myDropzone = {
            uploadMultiple: true,
            parallelUploads: 1,
            maxFilesize: 16,
            addRemoveLinks: false,
            dictFileTooBig: 'Dung lượng hình lớn hơn 16MB',
            timeout: 10000,
            params: {
                _token: $('[name="_token"]').val()
            },
            init: function () {
                this.on("complete", function (file, reponse) {
                    $('#myDropzone .dz-preview').remove();
                    $('#myDropzone').removeClass('dz-started');
                });
            },
            success: function (file, reponse) {
                $.each(reponse.r, function (i, item) {
                    appendImage(item.id, item.url, '#myDropzone .result', 'image_ids[]');
                });
                reorder_image();
            }
        }

        Dropzone.options.myDropzone2 = {
            uploadMultiple: true,
            parallelUploads: 1,
            maxFilesize: 16,
            addRemoveLinks: false,
            dictFileTooBig: 'Dung lượng hình lớn hơn 16MB',
            timeout: 10000,
            params: {
                _token: $('[name="_token"]').val()
            },
            init: function () {
                this.on("complete", function (file) {
                    $('#myDropzone2 .dz-preview').remove();
                    $('#myDropzone2').removeClass('dz-started');
                });
            },
            success: function (file, reponse) {
                $.each(reponse.r, function (i, item) {
                    appendImage(item.id, item.url, '#myDropzone2 .result', 'image_extra_ids[]');
                });
                reorder_image();
            }
        };

        function removeFile(d) {
            var file_id = d.data('id');
            $.post({
                url: '{{route('backend.ajax.removeImage')}}',
                data: {id: file_id, _token: $('[name="_token"]').val()},
                dataType: 'json',
                success: function (data) {
                    d.parent().remove();
                }
            });
        }

        function appendImage(id, src, parent_div, input_name) {
            $(parent_div).append('<div class="thumb-nail-view">\n' +
                '        <img src="' + src + '" class="img-thumbnail"/>\n' +
                '        <input name="' + input_name + '" value="' + id + '" type="hidden"/>\n' +
                '        <a href="javascript:;" onclick="removeFile($(this))" data-id="' + id + '">Xóa</a>\n' +
                '    </div>')
        }

        $('input[name=home_number]').change(function () {
            //moveMarker();
            var province = $('#form-add .select_province option:selected').text();
            var district = $('#form-add .select_district option:selected').text();
            var ward = $('#form-add .select_ward option:selected').text();
            var street = $('#form-add .select_street option:selected').text();
            var home_number = this.value;

            if (home_number != '' && street != 'Chọn' && street != 'Chọn' && ward != 'Chọn' && district != 'Chọn' && province != 'Chọn') {
                var address = home_number + ' ' + street + ', ' + ward + ', ' + district + ', ' + province;
                getLatLong(address, "{{config('constants.google_maps_key')}}");
            }
        });

        function getLatLong(address, api_key) {
            $.ajax({
                type: 'GET',
                url: 'https://maps.google.com/maps/api/geocode/json',
                data: {address: address, key: api_key},
                dataType: 'json',
                success: function (data) {
                    if (data['status'] == 'OK') {
                        var lat = data['results'][0]['geometry']['location']['lat'];
                        var lng = data['results'][0]['geometry']['location']['lng'];
                        document.getElementById('lat').value = lat; //latitude
                        document.getElementById('lng').value = lng; //longitude
                        moveMarker(lat, lng);
                    }
                }
            });
        }

        var gmarkers = [];

        var icon = {
            url: "/storage/backend/assets/images/marker-blue.png",
            scaledSize: new google.maps.Size(20, 20),
            anchor: new google.maps.Point(10, 10)
        };

        function load_near_product(location) {

            for (i = 0; i < gmarkers.length; i++) {
                gmarkers[i].setMap(null);
            }

            var url = "{{route('backend.products.ajax.getNearProduct')}}";
            $.ajax({
                type: 'GET',
                url: url,
                data: {location: location, skip_product_ids:{{isset($product_id)?$product_id:'null'}}},
                dataType: 'json',
                success: function (data) {
                    if (data['status'] == true) {
                        $(data['data']).each(function (index, value) {
                            markerx = new MarkerWithLabel({
                                position: new google.maps.LatLng(value.location_lat, value.location_long),
                                draggable: false,
                                raiseOnDrag: true,
                                map: map,
                                labelContent: "<div class='arrow'></div><div class='inner'>" + value.home_number + "</div>",
                                labelAnchor: new google.maps.Point(30, -6),
                                labelClass: "labels", // the CSS class for the label
                                icon: icon,
                                isClicked: false
                            });
                            gmarkers.push(markerx);
                        });
                    }
                }
            });
        }

        function reorder_image() {
            var ele = $(".dropzone .result");
            ele.sortable({tolerance: 'pointer'});
            ele.sortable("enable");
        }
    </script>
@stop