@extends('backend.layouts_backend.master')

@section('title')
    Add Apartment
@endsection

@section('extra_styles')
    <style>
        /* multiple photo upload - environmental activities css */
        .imagePreview {
            width: 100%;
            height: 300px;
            background-position: center center;
            background: url(http://cliquecities.com/assets/no-image-e3699ae23f866f6cbdf8ba2443ee5c4e.jpg);
            background-color: #fff;
            background-size: cover;
            background-repeat: no-repeat;
            1 display: inline-block;
            box-shadow: 0px -3px 6px 2px rgba(0, 0, 0, 0.2);
        }

        .btn-primary {
            display: block;
            border-radius: 0px;
            box-shadow: 0px 4px 6px 2px rgba(0, 0, 0, 0.2);
            margin-top: -5px;
        }

        .imgUp {
            margin-bottom: 15px;
        }

        .del {
            width: 80px;
            height: 40px;
            padding-top: 3px;
            padding-left: 8px;
            padding-right: 8px;
            background-color: #f60909;
            color: #ffffff;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
            text-align: center;
            line-height: 30px;
            margin-top: 0px;
            cursor: pointer;
            font-size: 15px;
        }

        .imgAdd {
            width: 40px;
            height: 40px;
            padding-top: 3px;
            border-radius: 50%;
            background-color: #4bd7ef;
            color: #fff;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
            text-align: center;
            line-height: 30px;
            margin-top: 0px;
            cursor: pointer;
            font-size: 15px;
        }

        .dell {
            width: 40px;
            height: 40px;
            padding-top: 3px;
            border-radius: 50%;
            background-color: #ca078c;
            color: #fff;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
            text-align: center;
            line-height: 30px;
            margin-top: 0px;
            cursor: pointer;
            font-size: 15px;
        }

        /* end of multiple photo upload - environmental activities css */
    </style>
@endsection

@section('content')
    <!-- Main content dashboard  -->
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Add Apartments</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active">Add ammenities</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <!-- Page content starts here -->



            <!-- Form -->


            <div class="row">
                <div class="col-md-2 col-xl-1">

                </div>

                <div class="col-md-2 col-xl-10">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Add Apartment</h4>
                            <!-- <p class="card-title-desc">Add Category</p> -->
                        </div>


                        <div class="card-body">
                            <form action="{{ route('apartments.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">

                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">Apartment/Property
                                                Name</label>
                                            <input type="text" class="form-control" id="validationCustom01"
                                                name="name" placeholder="Enter apartment name" value="">
                                            <div>
                                                @error('name')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Address</label>
                                                    <input type="text" class="form-control" id="validationCustom01"
                                                        name="address" placeholder="Enter  addresss" value="">
                                                    <div>
                                                        @error('address')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Apartment
                                                        Category</label>

                                                    <select name="apartment_category_id" class="form-select">
                                                        @foreach ($apartment_categories as $apartment_category)
                                                            <option value="{{ $apartment_category->id }}">
                                                                {{ $apartment_category->category_name }}</option>
                                                        @endforeach
                                                    </select>

                                                    <div>
                                                        @error('apartment_category_id')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>



                                        </div>


                                    </div>

                                    {{-- start  multiple column --}}
                                    <div class="col-md-12">
                                        <div class="row">
                                            {{-- col-1 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Number Of
                                                        Beds</label>
                                                    <input type="number" class="form-control" id="validationCustom01"
                                                        name="beds" placeholder="Enter  number of beds" value="">
                                                    <div>
                                                        @error('beds')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- col-2 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Area (sqft)</label>
                                                    <input type="number" class="form-control" id="validationCustom01"
                                                        name="size" placeholder="Enter area in square ft" value="">
                                                    <div>
                                                        @error('size')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- end multiple column --}}

                                    {{-- start  multiple column --}}
                                    <div class="col-md-12">
                                        <div class="row">
                                            {{-- col-1 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Number Of
                                                        Rooms</label>
                                                    <input type="number" class="form-control" id="validationCustom01"
                                                        name="rooms" placeholder="Enter number of rooms" value="">
                                                    <div>
                                                        @error('rooms')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- col-2 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Bathrooms</label>
                                                    <input type="number" class="form-control" id="validationCustom01"
                                                        name="bathrooms" placeholder="Enter number of bathrooms"
                                                        value="">
                                                    <div>
                                                        @error('bathrooms')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- end multiple column --}}

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">City</label>
                                            <input type="text" class="form-control" id="validationCustom01"
                                                name="city" placeholder="Enter  city" value="">
                                            <div>
                                                @error('city')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">Units Available</label>
                                            <input type="number" class="form-control" id="validationCustom01"
                                                name="units_available" placeholder="Enter  units_available"
                                                value="">
                                            <div>
                                                @error('units_available')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    {{-- proximities --}}
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <div class="card-header  bg-primary" style=" color:#ffffff;">
                                                ADD PROXMITY ( ADD SPECIFIC PROXIMITY )

                                            </div>
                                            <hr>

                                            {{-- updated version proximity --}}

                                            <table
                                                class="table color-table inverse-table table-responsive table-borderless"
                                                id="apartment_proximities_details_table">
                                                <tbody id="apartment_proximities_data">
                                                    <tr>
                                                        <td>
                                                            <div class="row mb-2">
                                                                <div class="row">
                                                                    <div class="col-md-4" style="margin-top:10px;">
                                                                        <select name="place_category[]" id="place_category_1"
                                                                            class="form-select">
                                                                            <option value="null"> -- Select Category --
                                                                            </option>
                                                                            <option value="restaurant"> Restaurant
                                                                            </option>
                                                                            <option value="shopping_mall"> Shopping Mall
                                                                            </option>
                                                                            <option value="police_station"> Police Station
                                                                            </option>
                                                                            <option value="school"> School </option>
                                                                            <option value="hospital"> Hospital </option>
                                                                            <option value="sports_ground"> Sports Ground
                                                                            </option>
                                                                            <option value="christian_worship_place">
                                                                                Christian Worship Place </option>
                                                                            <option value="moslem_worship_place"> Moslem
                                                                                Worship Place</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-md-5" style="margin-top:10px;">
                                                                        <input type="text" class="form-control"
                                                                        name="place_name[]" id="place_name_1"
                                                                            placeholder="Place Name" required>
                                                                    </div>

                                                                    <div class="col-md-2" style="margin-top:10px;">
                                                                        <input type="text" class="form-control"
                                                                        name="place_distance[]" id="place_distance_1"
                                                                            placeholder="Distance" required>
                                                                    </div>
                                                                    {{-- <div class="col-md-1" style="margin-top:10px;">
                                                                        <a> <button onclick="removeProximityRow(this)"
                                                                                class="btn btn-danger shadow btn-xs sharp">
                                                                                <span class="fa fa-trash"> </button> </a>
                                                                    </div> --}}

                                                                    <div class="col-md-4" style="margin-top:10px;">
                                                                        <input type="text" class="form-control"
                                                                        name="place_time[]" id="place_time_1"
                                                                            placeholder="Time Proximity" required>
                                                                    </div>

                                                                    <div class="col-md-7" style="margin-top:10px;">
                                                                        <input type="text" class="form-control"
                                                                        name="place_address[]" id="place_address_1"
                                                                            placeholder="Address" required>
                                                                    </div>

                                                                </div>


                                                                {{-- <div class="col-md-1">
                                                              
                                                                <a> <button onclick="removeProximityRow(this)"
                                                                        class="btn btn-danger shadow btn-xs sharp"> <span
                                                                            class="fa fa-trash"> </button> </a>
                                                            </div> --}}
                                                            </div>
                                                        </td>


                                                    </tr>
                                                </tbody>
                                            </table>

                                            <button type="button" 
                                                class="btn btn-success  label label-inverse"
                                                onclick="add_apartment_proximity_row('apartment_proximities_details_table','apartment_proximities_data')">Add
                                                Proximity -></button>

                                            {{-- end of updated version proximity --}}



                                            {{-- <p>Previous code </p>

                                            <div id="rowsProximityContainer">
                                                <div class="row mb-2">
                                                    <div class="row">
                                                        <div class="col-md-4" style="margin-top:10px;">
                                                            <select name="proximity[0][place_category]"
                                                                class="form-select">
                                                                <option value="null"> -- Select Category -- </option>
                                                                <option value="restaurant"> Restaurant </option>
                                                                <option value="shopping_mall"> Shopping Mall </option>
                                                                <option value="police_station"> Police Station </option>
                                                                <option value="school"> School </option>
                                                                <option value="hospital"> Hospital </option>
                                                                <option value="sports_ground"> Sports Ground </option>
                                                                <option value="christian_worship_place"> Christian Worship
                                                                    Place </option>
                                                                <option value="moslem_worship_place"> Moslem Worship Place
                                                                </option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-5" style="margin-top:10px;">
                                                            <input type="text" class="form-control"
                                                                name="proximity[0][name]" placeholder="Place Name"
                                                                required>
                                                        </div>

                                                        <div class="col-md-2" style="margin-top:10px;">
                                                            <input type="text" class="form-control"
                                                                name="proximity[0][distance]" placeholder="Distance"
                                                                required>
                                                        </div>
                                                        <div class="col-md-1" style="margin-top:10px;">
                                                            <a> <button onclick="removeProximityRow(this)"
                                                                    class="btn btn-danger shadow btn-xs sharp"> <span
                                                                        class="fa fa-trash"> </button> </a>
                                                        </div>




                                                        <div class="col-md-4" style="margin-top:10px;">
                                                            <input type="text" class="form-control"
                                                                name="proximity[0][time]" placeholder="Time Proximity"
                                                                required>
                                                        </div>

                                                        <div class="col-md-7" style="margin-top:10px;">
                                                            <input type="text" class="form-control"
                                                                name="proximity[0][address]" placeholder="Address"
                                                                required>
                                                        </div>

                                                    </div>


                                                </div>
                                            </div> --}}


                                            {{-- <button type="button" class="btn btn-success"
                                                onclick="addProximityRow()">Add
                                                Proximity</button> --}}


                                        </div>
                                    </div>



                                    {{-- amenities --}}
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <div class="card-header  bg-primary" style=" color:#ffffff;">
                                                Select Amenities for this apartment

                                            </div>
                                            <hr>
                                            <div class="row">
                                                @foreach ($amenities as $amenity)
                                                    <div class="col-md-4">
                                                        <label>
                                                            <input type="checkbox" name="amenities[]"
                                                                value="{{ $amenity->id }}">
                                                            {{ $amenity->name }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>


                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">3D Video Link
                                                (Youtube)</label>
                                            <input type="text" class="form-control" id="validationCustom01"
                                                name="property_video_url" placeholder="Enter video link from youtube"
                                                value="http://www.youtube.com/embed/replace_with_video_id">
                                            <div>
                                                @error('property_video_url')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">Google Map Iframe Link
                                                (src)</label>
                                            <input type="text" class="form-control" id="validationCustom01"
                                                name="google_map_iframe_url"
                                                placeholder="Enter Google map iframe Link (src)">
                                            <div>
                                                @error('google_map_iframe_url')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    {{-- start  multiple column --}}
                                    <div class="col-md-12">
                                        <div class="row">
                                            {{-- col-1 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Price / Month (USD)
                                                    </label>
                                                    <input type="number" class="form-control" id="validationCustom01"
                                                        name="price" placeholder="Enter apartment price"
                                                        value="">
                                                    <div>
                                                        @error('price')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- col-2 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Price Range ( USD
                                                        )</label>

                                                    <select name="price_range" class="form-select">
                                                        {{-- <option value="null">-- Select -- </option> --}}
                                                        <option value="1000_2000">1000 - 2000 USD </option>
                                                        <option value="2000_3000">2000 - 3000 USD </option>
                                                        <option value="3000_4000">3000 - 4000 USD </option>
                                                        <option value="4000_5000">4000 - 5000 USD </option>
                                                        <option value="5000_6000">5000 - 6000 USD </option>
                                                        <option value="6000_7000">6000 - 7000 USD </option>
                                                        <option value="7000_8000">7000 - 8000 USD </option>
                                                        <option value="8000_9000">8000 - 9000 USD </option>
                                                        <option value="9000_10000">9000 - 10000 USD </option>
                                                    </select>

                                                    <div>
                                                        @error('price_range')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- end multiple column --}}



                                    {{-- start  multiple column --}}
                                    <hr>
                                    <div class="col-md-12">
                                        <div class="row">
                                            {{-- col-1 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Property
                                                        Status</label>
                                                    <div class="form-check form-check-inline">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="property_status"
                                                                type="radio" id="property_status"
                                                                {{ old('active') == '1' ? 'checked' : '' }}
                                                                value="1">
                                                            <label class="form-check-label"
                                                                for="property_status">Active</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="property_status"
                                                                type="radio" id="property_status"
                                                                {{ old('unavailable') == '0' ? 'checked' : '' }}
                                                                value="0">
                                                            <label class="form-check-label" for="property_status">In
                                                                Active</label>
                                                        </div>
                                                        {{-- validation --}}
                                                        @error('property_status')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>
                                            {{-- col-2 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Booking
                                                        Status</label>
                                                    <div class="form-check form-check-inline">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="property_booked_status"
                                                                type="radio" id="property_booked_status"
                                                                {{ old('available') == '1' ? 'checked' : '' }}
                                                                value="1">
                                                            <label class="form-check-label"
                                                                for="property_booked_status">Available</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="property_booked_status"
                                                                type="radio" id="property_booked_status"
                                                                {{ old('booked') == '0' ? 'checked' : '' }}
                                                                value="0">
                                                            <label class="form-check-label"
                                                                for="property_booked_status">Booked</label>
                                                        </div>
                                                        {{-- validation --}}
                                                        @error('property_booked_status')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- end multiple column --}}


                                    </div>
                                    <hr>
                                    {{-- end multiple column --}}


                                    {{-- start  multiple column --}}
                                    <div class="col-md-12">
                                        <div class="row">
                                            {{-- col-1 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Balcony </label>
                                                    <div class="form-check form-check-inline">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="balcony" type="radio"
                                                                id="balcony"
                                                                {{ old('available') == '1' ? 'checked' : '' }}
                                                                value="1">
                                                            <label class="form-check-label"
                                                                for="balcony">Available</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="balcony" type="radio"
                                                                id="balcony"
                                                                {{ old('unavailable') == '0' ? 'checked' : '' }}
                                                                value="0">
                                                            <label class="form-check-label"
                                                                for="balcony">Unavailable</label>
                                                        </div>
                                                        {{-- validation --}}
                                                        @error('balcony')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>
                                            {{-- col-2 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Featured
                                                        Photo</label>
                                                    <input type="file" class="form-control" name="featured_photo"
                                                        id="⁠⁠featured_photo" placeholder="">
                                                    <div>
                                                        @error('⁠⁠featured_photo')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- end multiple column --}}


                                    </div>
                                    <hr>
                                    {{-- end multiple column --}}


                                    {{-- photo library upload --}}

                                    <div class="card" style="margin-top:20px; padding-top:10px;">
                                        <div class="card-header bg-primary" style=" color:#ffffff;">
                                            Add apartment photos gallery

                                        </div>
                                        <div class="card-body">

                                            {{-- validation --}}
                                            @error('photo_library')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror

                                            <div class="row" style="margin-top:40px;">
                                                <div class="col-md-6 imgUp">
                                                    <div class="imagePreview"></div>
                                                    <label class="btn btn-primary">
                                                        Add Photo
                                                        <input type="file" name="photo_library[]"
                                                            class="uploadFile img" value="Upload Photo"
                                                            style="width: 0px;height: 0px;overflow: hidden;">

                                                        {{-- caption --}}

                                                    </label>
                                                    {{-- <input type="text" name="photo_library_photo_caption[]" placeholder="Caption for each photo" multiple class="form-control"> --}}

                                                </div><!-- col-2 -->
                                                <i class="bi bi-plus-lg imgAdd">

                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                                                        <path fill-rule="evenodd"
                                                            d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
                                                    </svg>
                                                </i>

                                            </div>


                                        </div>
                                    </div>

                                    {{-- end of photo library upload --}}

                                    {{-- description --}}

                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">Description</label>

                                            <textarea class="form-control" name="description" id="exampleFormControlTextarea5"
                                                placeholder="Describe the apartment" rows="3"></textarea>
                                            <div>
                                                @error('description')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                    </div>


                                    <!-- Editor -->




                                    <button class="btn btn-primary" type="submit">Add Apartment</button>
                            </form>
                        </div>
                    </div>
                    <!-- end card -->
                </div> <!-- end col -->

            </div>
            <!-- end row -->

            <div class="col-md-2 col-xl-1">

            </div>










        </div>
        <!-- container-fluid -->
    </div>
@endsection

@section('extra_scripts')
    {{-- add row and delete proximity rows --}}
    <script src="{{ asset('assets/backend_assets/assets/js/tours/proximities_add_remove_row.js') }}"></script>


    {{-- multiple photo upload - environmental activities script --}}
    <script type="text/javascript">
        $(".imgAdd").click(function() {
            $(this).closest(".row").find('.imgAdd').before(
                '<div class="col-md-6 imgUp"><div class="imagePreview"></div><label class="btn btn-primary">Upload<input type="file" name="photo_library[]" class="uploadFile img" value="Upload Photo" style="width:0px;height:0px;overflow:hidden;"></label><i class="fa fa-timess del"><span style="color:#ffffff; ">Remove</span></i></div>'
            );
        });
        $(document).on("click", "i.del", function() {
            // 	to remove card
            $(this).parent().remove();
            // to clear image
            // $(this).parent().find('.imagePreview').css("background-image","url('')");
        });
        $(function() {
            $(document).on("change", ".uploadFile", function() {
                var uploadFile = $(this);
                var files = !!this.files ? this.files : [];
                if (!files.length || !window.FileReader)
                    return; // no file selected, or no FileReader support

                if (/^image/.test(files[0].type)) { // only image file
                    var reader = new FileReader(); // instance of the FileReader
                    reader.readAsDataURL(files[0]); // read the local file

                    reader.onloadend = function() { // set image data as background of div
                        //alert(uploadFile.closest(".upimage").find('.imagePreview').length);
                        uploadFile.closest(".imgUp").find('.imagePreview').css("background-image",
                            "url(" + this.result + ")");
                    }
                }

            });
        });
    </script>

    {{-- end of  multiple photo upload - environmental activities script --}}

    {{-- add proximity --}}
    <script>
        function add_apartment_proximity_row(table_id, body_id) {
            var id = document.getElementById(table_id).rows.length + 1;
            if (body_id == 'apartment_proximities_data') {
                $('#apartment_proximities_data').append(`
                <tr>
                    <td>
                            <div class="row mb-2">
                                <div class="row">
                                    <div class="col-md-4" style="margin-top:10px;">
                                        <select name="place_category[]" id="place_category_${id}"
                                            class="form-select">
                                            <option value="null"> -- Select Category --
                                            </option>
                                            <option value="restaurant"> Restaurant
                                            </option>
                                            <option value="shopping_mall"> Shopping Mall
                                            </option>
                                            <option value="police_station"> Police Station
                                            </option>
                                            <option value="school"> School </option>
                                            <option value="hospital"> Hospital </option>
                                            <option value="sports_ground"> Sports Ground
                                            </option>
                                            <option value="christian_worship_place">
                                                Christian Worship Place </option>
                                            <option value="moslem_worship_place"> Moslem
                                                Worship Place</option>
                                        </select>
                                    </div>
                                    <div class="col-md-5" style="margin-top:10px;">
                                        <input type="text" class="form-control"
                                        name="place_name[]" id="place_name_${id}"
                                            placeholder="Place Name" required>
                                    </div>

                                    <div class="col-md-2" style="margin-top:10px;">
                                        <input type="text" class="form-control"
                                        name="place_distance[]" id="place_distance_${id}"
                                            placeholder="Distance" required>
                                    </div>
                                    

                                    <div class="col-md-4" style="margin-top:10px;">
                                        <input type="text" class="form-control"
                                        name="place_time[]" id="place_time_1"
                                            placeholder="Time Proximity" required>
                                    </div>

                                    <div class="col-md-7" style="margin-top:10px;">
                                        <input type="text" class="form-control"
                                        name="place_address[]" id="place_address_${id}"
                                            placeholder="Address" required>
                                    </div>
                                    
                                    
                                    <a> <button onclick="deleteProximityRow(this)" style="margin-top:10px;"
                                        class="btn btn-danger shadow btn-xs sharp"> <span
                                            class="fa fa-trash"> Remove proximity</button> </a>

                                </div>
                                
                            </div>

                            
                        </td>    
                                                                          
                   </tr>
                                                    
                   
                `);
            }

        }

        /* delete apartment proximity row */
        function deleteProximityRow(ele) {
            ele.parentNode.parentNode.remove();
        }
    </script>
@endsection