@push('header')
    <meta name="lat" content="{!! isset($office)?$office->lat:31.038399 !!}">
    <meta name="lng" content="{!! isset($office)?$office->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\Office')

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

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

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

    @if(isset($office))
    <div class="m-content">
        <div class="row">
            <div class="col-md-2" id ='image-curd'>
                <img src="{!!asset($office->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.offices._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