@push('header')
    <meta name="lat" content="{!! isset($building)?$building->lat:31.038399 !!}">
    <meta name="lng" content="{!! isset($building)?$building->lng:31.364777 !!}">
    <meta name="draggable" content="true">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
@endpush
<div class="m-portlet__body">

    {{--  'lat', 'lng', ', 'reviewed_by','views', 'image','images'--}}
    @inject('build','\App\Models\Building')
    <div class="form-group m-form__group">
        <label> الاسم </label>

        {!! Form::text('name',null,['class'=>'form-control m-input','placeholder'=>'ادخل الاسم '])!!}
    </div>

    <div class="form-group m-form__group">
        <label> العنوان </label>
        {!! Form::text('address',null,['class'=>'form-control m-input','placeholder'=>'ادخل العنوان '])!!}
    </div>

    <div class="form-group m-form__group">
        <label> واتساب </label>
        {!! Form::text('whatsapp',null,['class'=>'form-control m-input','placeholder'=>'ادخل واتساب '])!!}
    </div>

    <div class="form-group m-form__group">
        <label> الوصف</label>
        {!! Form::textarea('description',null,['class'=>'form-control m-input','placeholder'=>'ادخل الوصف'])!!}
    </div>

    <div class="form-group m-form__group">
        <label> العميل</label>
        {!! Form::select('user_id',\App\Models\User::client()->pluck('name','id'),null,['class'=>'form-control m-input select2',isset($building)?'disabled':null])!!}
    </div>

    <div class="form-group m-form__group">
        <label> نوع العقار</label>
        {!! Form::select('category_id',\App\Models\Category::pluck('name_ar','id'),null,['class'=>'form-control m-input select2'])!!}
    </div>

    <input type="hidden" name="application_url" id="application_url" value="{{URL::to(Request::route()->getPrefix()) }}"/>
    <div class="form-group m-form__group">
        <label>المدينه</label>
        {!! Form::select('city_id',\App\Models\City::pluck('name_ar','id'),null,['class'=>'form-control m-input select2', 'id'=>'city_id_select'])!!}
    </div>

    <div class="form-group m-form__group">
        <label>الحي</label>
        {!! Form::select('nieghbourhood_id',\App\Models\Nieghbourhood::pluck('name_ar','id'),null,['class'=>'form-control m-input select2', 'id'=>'nieghbourhood_id_select'])!!}
    </div>

    <div class="form-group m-form__group">
        <label>مفروشة</label>
        {!! Form::select('furnitured',["1"=>"نعم","0"=>"لا"],null,['class'=>'form-control m-input select2'])!!}
    </div>

    <div class="form-group m-form__group">
        <label>اعلان مميز</label>
        {!! Form::select('special',["1"=>"نعم","0"=>"لا"],null,['class'=>'form-control m-input select2'])!!}
    </div>

    <div class="form-group m-form__group">
        <label>نوع الإيجار</label>
        {!! Form::select('rent_type',["1"=>"تجاري","2"=>"سكني","3"=>"إداري"],null,['class'=>'form-control m-input select2'])!!}
    </div>

    <div class="form-group m-form__group">
        <label>عدد الغرف</label>
        {!! Form::number('rooms',null,['class'=>'form-control m-input '])!!}
    </div>

    <div class="form-group m-form__group">
        <label>المساحة</label>
        {!! Form::number('area',null,['class'=>'form-control m-input '])!!} متر مربع
    </div>


    <div class="form-group m-form__group">
        <label>الطابق</label>
        {!! Form::number('floor',null,['class'=>'form-control m-input '])!!}
    </div>

    <div class="form-group m-form__group">
        <label>عدد الحمامات</label>
        {!! Form::number('bathrooms',null,['class'=>'form-control m-input '])!!}
    </div>


    <div class="form-group m-form__group">
        <label>السعر</label>
        {!! Form::number('price',null,['class'=>'form-control m-input '])!!}
    </div>

    <div class="form-group m-form__group">
        <label>الحاله</label>
        {!! Form::select('status',$build::$status,null,['class'=>'form-control m-input'])!!}
    </div>
        <div class="form-group m-form__group">
        <label>الكماليات</label>
        {!! Form::select('accessories_id[]',\App\Models\Accessorie::pluck('name_ar','id'),$accessories_id,['class'=>'form-control m-input select2','multiple'])!!}
    </div>

    @if(isset($building))
    <div class="m-content">
        <div class="row">
            <div class="col-md-2" id ='image-curd'>
                <img src="{!!asset($building->image)!!}" alt="images" width="150px" height="100px" >
            </div>
        </div>
    </div>
    @endif

    <div class="form-group m-form__group">
        <label> الغلاف </label>
        <input type="file" class="form-control m-input" name="image">
    </div>

    @if(isset($images))
        <div class="m-content">
            <div class="row">
                <p class="imglist" style="max-width: 1000px;">
                @foreach($images as $image)
                    <div data-id = "{{$image->id}}">
                        <a href="{{asset($image->image)}}"  data-fancybox="images" data-caption="Backpackers following a dirt trail">
                            <img src="{{asset($image->image)}}" width="150px" height="100px">
                            <a onclick="delElem({{$image->id}});" class="btn btn-danger" style="color:white; padding: 5px; border-radius: 50%">
                                <i class="fa fa-trash"></i>
                            </a>
                        </a>
                    </div>
                @endforeach
                </p>
            </div>
        </div>
    @endif

    <div class="form-group m-form__group">
        <label> صور اخرى </label>
        <input type="file" class="form-control m-input" name="images[]" multiple>
    </div>
</div>

<input type="text" name="mapSearch" id="mapSearch">
<div id="map" style="height: 500px"></div>

{!! Form::hidden('lat',null,['class'=>'form-control','id'=>'lat']) !!}
{!! Form::hidden('lng',null,['class'=>'form-control','id'=>'lng']) !!}


@push('scripts')
    @include('admin.buildings._map')

    <script type="text/javascript">
        $('#city_id_select').change(function () { //we watch and execute the next lines when any value from the dropdown#1 is selected
            var id = $(this).val(); //we get the selected value on dropdown#1 and store it on id variable
            var url = $('#application_url').val(); //we get the url from our hidden element that we used in first line of our view file, and store it on url variable
                //here comes the ajax function part
                $.ajax({
                url: url + "/cities/neighborhoods/" + id, //we use the same url we used in our route file and we are adding the id variable which have the selected value in dropdown#1
                dataType: "json", //we specify that we are going to use json type of data. That's where we sent our query result (from our controller)
                success: function (data) { //*on my understanding using json datatype means that the variable "data" gets the value and that's why we use it to tell what to do since here.*
                    //and this final part is where we use the dropdown#1 value and we set the values for the dropdown#2 just adding the variables that we got from our query (in controllert) through "data" variable.
                    $('#nieghbourhood_id_select').empty();
                    $('#nieghbourhood_id_select').append('<option value="">اختر الحي</option>');
                    $.each(data, function (key, value) {
                        $('#nieghbourhood_id_select').append('<option value="' + value.id + '">' + value.name_ar + '</option>');
                    });
                }
            });
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <script>
        $('[data-fancybox="images"]').fancybox({
            buttons : [
                'slideShow',
                'share',
                'zoom',
                'fullScreen',
                'close'
            ],
            thumbs : {
                autoStart : true
            }
        });
    </script>
@endpush