@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">
            {{ Breadcrumbs::render('backend.products.add') }}
        </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" required="required">
                                        <option value="">Chọn</option>
                                        @foreach($relate_data['provinces'] as $province)
                                            <option value="{{$province->id}}"
                                                    {!! old('province_id')==$province->id?'selected="selected"':'' !!}
                                            >{{$province->name}}</option>
                                        @endforeach
                                    </select>
                                    {!! $errors->has('province_id')?'<div class="form-control-feedback">'.$errors->has('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" required="required">
                                        <option value="">Chọn</option>
                                        @foreach($relate_data['districts'] as $districts)
                                            <option value="{{$districts->id}}"
                                                    {!! old('district_id')==$districts->id?'selected="selected"':'' !!}>{{$districts->name}}</option>
                                        @endforeach
                                    </select>
                                    {!! $errors->has('district_id')?'<div class="form-control-feedback">'.$errors->has('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" required="required">
                                        <option value="">Chọn</option>
                                        @foreach($relate_data['wards'] as $ward)
                                            <option value="{{$ward->id}}"
                                                    {!! old('ward_id')==$ward->id?'selected="selected"':'' !!}>{{$ward->name}}</option>
                                        @endforeach
                                    </select>
                                    {!! $errors->has('ward_id')?'<div class="form-control-feedback">'.$errors->has('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" required="required">
                                        <option value="">Chọn</option>
                                        @foreach($relate_data['streets'] as $street)
                                            <option value="{{$street->id}}"
                                                    {!! old('street_id')==$street->id?'selected="selected"':'' !!}>{{$street->name}}</option>
                                        @endforeach
                                    </select>
                                    {!! $errors->has('street_id')?'<div class="form-control-feedback">'.$errors->has('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="{{old('home_number')}}"
                                           placeholder="Nhập số nhà" required="required">
                                    {!! $errors->has('home_number')?'<div class="form-control-feedback">'.$errors->has('home_number').'</div>':'' !!}
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Ghi chú số nhà</label>
                                    <input type="text" name="home_number_note" class="form-control"
                                           value="{{old('home_number_note')}}"
                                           placeholder="Ghi chú số nhà">
                                </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="{{old('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="{{old('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($relate_data['product_type'] as $product_type)
                                                    <option value="{{$product_type->id}}"
                                                            {!! old('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="{{old('horizontal')}}"
                                                   class="form-control" required="required">
                                            {!! $errors->has('horizontal')?'<div class="form-control-feedback">'.$errors->has('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="{{old('vertical')}}"
                                                   class="form-control" required="required">
                                            {!! $errors->has('vertical')?'<div class="form-control-feedback">'.$errors->has('vertical').'</div>':'' !!}
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-control-label">DT công nhận(m<sup>2</sup>)</label>
                                            <input type="number" name="area" step="0.1" min="0"
                                                   value="{{old('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="{{old('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="{{old('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($relate_data['home_facade'] as $value)
                                                    <option value="{{$value['id']}}"
                                                            {!! old('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="{{old('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">Khuôn</label>
                                            <select class="form-control" name="home_mold">
                                                <option value="">&nbsp;</option>
                                                @foreach($relate_data['home_mold'] as $value)
                                                    <option value="{{$value['id']}}"
                                                            {!! old('home_mold')==$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">Top bụng (m)</label>
                                            <input type="number" name="" step="0.1" min="0"
                                                   value=""
                                                   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($relate_data['home_direction'] as $direction)
                                                    <option value="{{$direction['id']}}"
                                                            {!! old('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">Mục đích sử dụng</label>
                                            <select class="form-control selectpicker" name="purpose_ids[]" multiple data-style="form-control btn-secondary">
                                                @foreach($relate_data['purpose'] as $purpose)
                                                    <option value="{{$purpose->id}}"
                                                            {!! old('purpose_ids')&&in_array($purpose->id,old('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" name="home_structure">
                                        @foreach($relate_data['home_structure'] as $home_structure)
                                            <option value="{{$home_structure['id']}}"
                                                    {!! old('home_structure')&&$home_structure['id']==old('home_structure')?'selected="selected"':'' !!}>{{$home_structure['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="row">
                                    <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="{{old('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="{{old('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"
                                                   {!! old('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"
                                                   {!! old('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="{{old('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="{{old('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="{{old('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="{{old('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="{{old('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($relate_data['convenience'] as $convenience)
                                            <option value="{{$convenience->id}}"
                                                    {!! old('convenient_ids')&&in_array($convenience->id,old('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($relate_data['exterior'] as $exterior)
                                            <option value="{{$exterior->id}}"
                                                    {!! old('exterior_ids')&&in_array($exterior->id,old('exterior_ids'))?'selected="selected"':'' !!}>{{$exterior->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Măm xây dựng</label>
                                            <select class="form-control" name="year_built_start">
                                                <option value="">&nbsp;</option>
                                                @for($i=date('Y')-1;$i>1900;$i--)
                                                    <option value="{{$i}}"
                                                            {!! old('year_built_start')==$i?'selected="selected"':'' !!}>{{$i}}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Chất lượng XD(%)</label>
                                            <select class="form-control" name="home_quality">
                                                <option value="">&nbsp;</option>
                                                @for($i=1;$i<=100;$i++)
                                                    <option value="{{$i}}"
                                                            {!! old('home_quality')==$i?'selected="selected"':'' !!}>{{$i}}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                </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($relate_data['legal_status'] as $legal_status)
                                            <option value="{{$legal_status['id']}}"
                                                    {!! old('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="{{old('price')}}"
                                               class="form-control col-md-9 tien-vnd">
                                        <select class="form-control col-md-3" name="price_type">
                                            @foreach($relate_data['price_type'] as $price_type)
                                                <option value="{{$price_type['id']}}"
                                                        {!! old('price_type')==$price_type['id']||empty(old('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="{{old('monthly_price')}}"
                                               class="form-control col-md-9">
                                        <select class="form-control col-md-3" name="monthly_price_unit">
                                            <option value="VNĐ" {!! old('monthly_price_unit')=='VNĐ'?'selected="selected"':'' !!}>
                                                VNĐ
                                            </option>
                                            <option value="USD" {!! old('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($relate_data['file_image_ids'] 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($relate_data['file_image_extra_ids'] 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="{{old('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="{{old('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="{{old('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="{{old('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="{{old('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($relate_data['contact_type'] as $contact_type)
                                            <option value="{{$contact_type['id']}}"
                                                    {!! old('contact_type')==$contact_type['id']?'selected="selected"':'' !!}>{{$contact_type['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Ngày gọi lại(click chọn)</label>
                                    <input type="text" name="callback_at" class="form-control" data-toggle="datepicker"
                                           value=""
                                           readonly="readonly">
                                </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(old('status'))?'checked':''}}/>
                                    <label for="radio_0">KXĐ</label>

                                    @foreach($relate_data['status'] as $k=>$v)
                                        <input type="radio" id="radio_{{$v['id']}}" name="status" value="{{$v['id']}}"
                                                {{old('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($relate_data['censorship'] as $k=>$v)
                                        <input type="radio" id="status_censorship_{{$v['id']}}" name="status_censorship" value="{{$v['id']}}"
                                                {{(empty(old('status_censorship'))&&$v['id']==1)||(old('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">{{old('description')}}</textarea>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Diễn giải</label>
                                    <textarea class="form-control" rows="2" name="note">{{old('note')}}</textarea>
                                </div>

                                {{--<div class="form-group">--}}
                                {{--<label class="form-control-label">Ghi chú</label>--}}
                                {{--<textarea class="form-control" rows="2" name="note">{{old('note')}}</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')
    <style>
        #form-add label {
            font-size: 13px;
        }

        .result {
            display: inline-block;
        }

        .thumb-nail-view {
            width: 32%;
            /*height: 100px;*/
            margin: auto;
            padding: 5px;
            float: left;
        }

        .thumb-nail-view a {
            text-align: center;
            font-size: 10px;
            cursor: pointer !important;
            display: inline-block;
            width: 100%;
            color: red;
            font-weight: bold;
        }

        .dropzone .dz-message {
            padding: 0;
        }

        .dropzone .dz-preview .dz-image {
            border-radius: 5px;
            overflow: hidden;
            width: 70px;
            height: 70px;
        }

        .dropzone .dz-preview .dz-image img {
            width: 100%;
        }

        .dropzone .dz-preview .dz-progress {
            width: 60px;
            margin-left: -30px;
        }

        .dropzone .dz-preview .dz-details .dz-size {
            display: none;
        }

        .dropzone {
            min-height: 100px;
        }

        .labels {
            margin-top: -3px;
            padding: 5px;
            position: absolute;
            visibility: visible;
            z-index: 1030;
        }

        .labels .arrow {
            border-top-color: #000000;
            border-right-color: rgba(0, 0, 0, 0);
            border-bottom-color: rgba(0, 0, 0, 0);
            border-left-color: rgba(0, 0, 0, 0);
            border-width: 5px 5px 0;
            bottom: 0;
            left: 50%;
            margin-left: -5px;
            border-style: solid;
            height: 0;
            position: absolute;
            width: 0;
            display: none;
        }

        .labels .inner {
            background-color: #fff;
            border-radius: 5px;
            color: #000;
            min-width: 50px;
            padding: 3px 8px;
            text-align: center;
            text-decoration: none;
            box-shadow: 2px 2px 2px #7a7a7a;
        }
    </style>
@endsection

@section('style_top')
    <link href="{{ asset('/storage/backend/assets/plugins/select2/dist/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('/storage/backend/assets/plugins/bootstrap-select/bootstrap-select.min.css')}}" rel="stylesheet" type="text/css"/>
@stop

@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="{{ asset('/storage/backend/assets/plugins/select2/dist/js/select2.full.min.js')}}" type="text/javascript"></script>
    <script src="{{ asset('/storage/backend/assets/plugins/dropzone-master/dist/dropzone.js')}}" type="text/javascript"></script>

    <script src="{{ asset('/storage/backend/assets/plugins/bootstrap-select/bootstrap-select.min.js')}}" type="text/javascript"></script>

    <script>
        $.fn.modal.Constructor.prototype._enforceFocus = function () {
        };
        $('.select2').select2();

        $('.selectpicker').selectpicker();

        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[]');
                });
            }
        }

        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[]');
                });
            }
        };

        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),
            //origin: new google.maps.Point(0, 0),
            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},
                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);
                        });
                    }
                }
            });
        }
    </script>
@stop