@extends('owner.layouts.main')
@section('title')
<title>Add property</title>
@endsection
@section('content')
<main class="main">
                    <section class="section lyt-section typ-add-property">
                        <h2 class="bs-heading typ-27 typ-blue typ-800 mt-18 mb-24">
                            Add Property
                        </h2>
                        <div class="bs-form typ-add-property">
                            <h3 class="bs-heading typ-20 mb-15">Add property details</h3>
                            <form onsubmit="return validateForm()" id="addProperty" action="{{route('properties.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="property-name"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Property Name</label>
                                            <input type="text" name="property_name" class="input-field" id="property-name"
                                                placeholder="Add property name">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="property-type"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Property Type</label>
                                                <select class="input-select" name="property_type" id="property-type">
                                                <option value="0">Select Property Type</option>
                                                <option value="Commercial">Commercial</option>
                                                <option value="ready_to_move_in">Ready to move in</option>
                                                <option value="under_construction">Under construction</option>
                                                <option value="office">Office</option>
                                            </select>
                                            <div id="property-type-error" class="error"></div>
                                            </div>
                                    </div>
                                   
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="property-area"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Area</label>
                                                <input type="number" id="property-area" name="area" class="input-field col-12 col-md-12" placeholder="Add area sq ft">
                                           
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="property-rooms"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Minimum Beds</label>
                                            <select class="input-select" name="min_beds" id="property-rooms">
                                            <option value="0">Select beds</option>    
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                            </select>
                                        </div>
                                        <div id="bed-error" class="error"></div>

                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="property-beds"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Minimum Baths</label>
                                            <select class="input-select" name="min_bath" id="property-beds">
                                            <option value="0">Select baths</option>    
                                            <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                            </select>
                                        </div>
                                        <div id="bath-error" class="error"></div>

                                    </div>
                                    <div class="col-lg-12 col-12 mb-24">
                                        <div class="row">
                                        <div class="col-lg-4 col-md-6 col-12">
                                        <div class="bs-input-box input-box">
                                            <label for="property-direction"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Get Direction <span
                                                    class="typ-11">(Paste a property location Google Maps link
                                                    here)</span></label>
                                            <input type="text" name="location_link" id="property-direction"
                                                placeholder="Add google map link"
                                                class="input-field">
                                        </div>
                                    </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="description"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Description</label>
                                            <textarea id="description" name="description" class="input-textarea"
                                                rows="10"></textarea>
                                                <span style="color:red;" id="descriptionError"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="property-address"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Address</label>
                                            <input type="text" name="address" class="input-field" id="property-address"
                                                placeholder="Add address">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="zip-code" class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Zip
                                                Code</label>
                                            <input type="number"  name="zip_code" class="input-field col-12 col-md-12" id="zip-code" placeholder="Zip code">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="state"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">State</label>
                                            <input type="text" name="state" class="input-field" placeholder="Add state" id="state">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                        <label for="city"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">City</label>
                                            <select onchange="handleCityChange()" class="input-select" name="city" id="city">
                                                <option value="0">Select city </option>
                                                @foreach($cities as $city)
                                                <option value="{{$city->id}}">{{$city->city_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div id="city-error" class="error"></div>

                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                        <label for="locality"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Locality</label>
                                            <select class="input-select" name="locality" id="locality">
                                               <option value="0"> Select locality</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="landmarks"
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Landmark</label>
                                            <input type="text" name="landmark" class="input-field" id="landmarks" placeholder="Add land mark">
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label
                                                class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Media</label>
                                            <div class="upload-file-wrapper text-center">
                                                <input type="file" name="property_images[]" multiple  accept="image/png, image/jpeg, image/jpg" id="upload-media" class="input-file">
                                                <div class="inner-upload-file uploadFile">
                                                    <div class="img-box mb-6">
                                                        <img src="assets/images/form/file.svg" draggable="false"
                                                            class="img-fluid" alt="">
                                                    </div>
                                                    <p class="bs-para typ-16 typ-grey4 ">Drop Pictures here or
                                                        click to upload.</p>
                                                </div>
                                                <div id="property_images-error" class="error"></div> <!-- Div for displaying error message -->
                                                </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                        <div class="img-box-wrapper uploaded-loop-img" id="image-preview">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-12 mb-24">
                                    <div class="input-box">
                                            <label for="emergency-exit" class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Additional
                                                features</label>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10"
                                                    id="emergency-exit" name="features[]" value="Emergency Exit">
                                                <label for="emergency-exit"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Emergency
                                                    Exit</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10" id="cctv"
                                                    name="features[]" value="CCTV">
                                                <label for="cctv"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">CCTV</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10" id="free-wifi"
                                                    name="features[]" value="Free Wi-Fi">
                                                <label for="free-wifi"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Free
                                                    Wi-Fi</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10" id="parking-area"
                                                    name="features[]" value="Free Parking In The Area">
                                                <label for="parking-area"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Free
                                                    Parking In The Area</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10"
                                                    id="air-conditioning" name="features[]" value="Air Conditioning">
                                                <label for="air-conditioning"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Air
                                                    Conditioning</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10" id="skyline-view"
                                                    name="features[]" value="Skyline view">
                                                <label for="skyline-view"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Skyline
                                                    view</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10" id="sea-view"
                                                    name="features[]" value="Sea view">
                                                <label for="sea-view"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Sea
                                                    view</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10" id="play-area"
                                                    name="features[]" value="Kids play area">
                                                <label for="play-area"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Kids
                                                    play area</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10"
                                                    id="security-guard" name="features[]" value="Security Guard">
                                                <label for="security-guard"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Security
                                                    Guard</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10" id="terrace"
                                                    name="features[]" value="Terrace">
                                                <label for="terrace"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Terrace</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-4">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10"
                                                    id="laundry-service" name="features[]" value="Laundry Service">
                                                <label for="laundry-service"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Laundry
                                                    Service</label>
                                            </div>
                                            <div class="d-md-inline-block mb-10 me-md-10">
                                                <input type="checkbox"
                                                    class="input-checkbox bs-checkbox typ-green me-10"
                                                    id="elevator-lift" name="features[]" value="Elevator Lift">
                                                <label for="elevator-lift"
                                                    class="input-label typ-500 typ-clr-grey9 d-inline-block ls-0">Elevator
                                                    Lift</label>
                                            </div>
                                        </div>
                                        <div id="features-error" class="error"></div>
                                    </div>
                                    <div class="col-lg-12 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <div class="d-inline-block mb-10 me-10">
                                                <input type="radio" id="rent" name="property_for" value="RENT" onchange="handleRadioChange()" class="input-radio bs-radio">
                                                <label for="rent" class="input-label typ-500 typ-clr-grey8 d-inline-block ls-0 cur-pointer">For Rent</label>
                                            </div>
                                            <div class="d-inline-block mb-10 me-10">
                                                <input type="radio" id="buy" name="property_for" value="BUY" onchange="handleRadioChange()"  class="input-radio bs-radio" checked>
                                                <label for="buy" class="input-label typ-500 typ-clr-grey8 d-inline-block ls-0 cur-pointer">To buy</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24" id="buy_amount">
                                        <div class="bs-input-box input-box">
                                            <label for="monthly-rent" class="input-label typ-500 typ-clr-grey2 ls-0 mb-10">Price (In INR)</label>
                                            <div class="rupee-box">
                                            <input type="number" class="input-field" name="amount" id="amount" placeholder="">
                                            </div>
                                        </div>
                                        <div id="amount-error" class="error"></div>

                                    </div>

                                    <div class="row d-none" id="rent_content">
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="monthly-rent"
                                                class="input-label typ-500 typ-clr-grey2 mb-6">Rent per month</label>
                                            <div class="rupee-box">
                                                <input type="number" class="input-field" name="rent_amount" id="monthly-rent" placeholder="">
                                            </div>
                                        </div>
                                        <div id="rent_amount-error" class="error"></div>

                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="start-date" class="input-label typ-500 typ-clr-grey2 mb-6">Rent
                                                Start Date</label>
                                            <div class="bs-date">
                                                <input type="date" name="rent_start_date" class="input-date" id="rent_start_date">
                                            </div>
                                        </div>
                                        <span class="text-danger" id="start-date-error"></span>
                                        @error('date_error')
                                        <span class="text-danger" id="">{{$message}}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label for="end-date" class="input-label typ-500 typ-clr-grey2 mb-6">Rent
                                                End Date</label>
                                            <div class="bs-date">
                                                <input type="date" id="rent_end_date" name="rent_end_date" class="input-date" id="rent_end_date">
                                            </div>
                                        </div>
                                        <span id="end-date-error" class="text-danger"></span>

                                    </div>
                                    <div class="col-lg-12 col-12 mb-24">
                                        <div class="bs-input-box input-box">
                                            <label class="input-label typ-500 typ-clr-grey2 mb-6">Attach
                                                Documents</label>
                                            <div class="upload-file-wrapper text-center">
                                                <input name="document" type="file" id="upload-document" class="input-file" onchange="showFileName()">
                                                <div class="inner-upload-file uploadFile">
                                                    <div class="img-box mb-6">
                                                        <img src="assets/images/form/file.svg" draggable="false"
                                                            class="img-fluid" alt="">
                                                    </div>
                                                    <p class="bs-para typ-16 typ-grey4 ">Drop Pictures here or
                                                        click to upload.</p>
                                                </div>
                                            </div>
                                            <div id="file-name-display" class="file-name-display mt-2 typ-16 typ-clr-grey2"></div>

                                        </div>
                                    </div>
                                    </div>
                                    <div class="col-lg-12 col-12">
                                        <div class="bs-input-box input-box">
                                            <button type="submit" class="bs-button typ-fill-complete">
                                             Submit For Approval
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </section>
                </main>

                <script>
function validateForm() {
    const rentStartDate = document.getElementById('rent_start_date').value;
    const rentEndDate = document.getElementById('rent_end_date').value;

    var validated=true;
    var error=document.getElementById('start-date-error');
    var end_date_error=document.getElementById('end-date-error');

    const currentDate = new Date();
    var date = new Date(rentStartDate);
    var rentDate = new Date(rentEndDate);

    if (rentDate && rentDate < date) {
        end_date_error.textContent = "End date should be greater than start date";
        validated= false;
    }
    return validated;
}
</script>
  <script>
        const token = '{{ csrf_token() }}';
        function handleCityChange(){
    var cityId=document.getElementById("city").value;
    if (cityId) {
                fetch(`/clients/homevana-backend/public/get-localities/${cityId}`, {
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-Token': token
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log("Localities fetched:", data);
                    const localitySelect = document.getElementById('locality');
                    localitySelect.innerHTML = '';
                    data.data.forEach(locality => {
                        const option = document.createElement('option');
                        option.value = locality.id;
                        option.textContent = locality.locality_name;
                        localitySelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error fetching localities:', error));
            } else {
                document.getElementById('locality').innerHTML = '';
            }
}


    document.getElementById('upload-media').addEventListener('change', function(event) {
        const files = event.target.files;
        const previewContainer = document.getElementById('image-preview');
        previewContainer.innerHTML = ''; // Clear previous images

        const fileListArray = Array.from(files);

        fileListArray.forEach((file, index) => {
            const reader = new FileReader();

            reader.onload = function(e) {
                const imgBox = document.createElement('div');
                imgBox.className = 'img-box';
                imgBox.dataset.index = index;

                const img = document.createElement('img');
                img.src = e.target.result;
                img.draggable = false;
                img.className = 'img-fluid';

                const overlayBox = document.createElement('div');
                overlayBox.className = 'overlay-box';

                const deleteBox = document.createElement('div');
                deleteBox.className = 'delete-box';
                deleteBox.innerHTML = '<span class="icon icon-bin"></span>';
                deleteBox.addEventListener('click', function() {
                    imgBox.remove();
                    fileListArray.splice(index, 1);
                    updateFileInput(fileListArray);
                });

                overlayBox.appendChild(deleteBox);
                imgBox.appendChild(img);
                imgBox.appendChild(overlayBox);
                previewContainer.appendChild(imgBox);
            };

            reader.readAsDataURL(file);
        });

        function updateFileInput(files) {
            const dataTransfer = new DataTransfer();
            files.forEach(file => dataTransfer.items.add(file));
            document.getElementById('upload-media').files = dataTransfer.files;
        }
    });
</script>
<script>
    function handleRadioChange(){
        const checkbox = document.getElementById('rent');
        const rendcontainer=document.getElementById('rent_content');
        const buy_amount=document.getElementById('buy_amount');


        if (checkbox.checked) {
            rendcontainer.className="row";
            buy_amount.style.display='none';
            } else {
                rendcontainer.className="row d-none";
                buy_amount.style.display='block';
          }
    }

</script>

<script>
function showFileName() {
    var input = document.getElementById('upload-document');
    var fileNameDisplay = document.getElementById('file-name-display');

    if (input.files && input.files.length > 0) {
        var fileName = input.files[0].name;
        fileNameDisplay.textContent = "Selected file: " + fileName;
    } else {
        fileNameDisplay.textContent = "";
    }
}
</script>

@endsection