@extends('site.layouts.master')

@section('title')
    <title>{{__('site.Add_Property_Page')}}</title>
@endsection
@section('metatags')
<link rel="canonical" href="{{str_replace('public/','',url()->current())}}">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
href="@if(app()->getLocale() == 'en' && str_contains(url()->current(),'/en/')){{str_replace('/en/','/ar/',str_replace('public/','',url()->current()))}}@else{{str_replace('/ar/','/en/',str_replace('public/','',url()->current()))}}@endif">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif" href="{{str_replace('public/','',url()->current())}}">
@endsection
@section('content')
    <div class="bg-f9f9f9 p-3">
        @if ($errors->any())
            <div class="alert alert-danger text-center">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li class="SF18_21Regular">{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if (session()->has('msg'))
            <div class="alert alert-info text-center">
                <ul>
                    <li>{{ session()->get('msg') }}</li>
                </ul>
            </div>
        @endif
        <form method="post" enctype="multipart/form-data">
            @csrf
            <div>
                <h1 class="SF22_26Bold text-3b3b3b my-3 fw-bold">@lang('site.Ad Information')</h1>
                <div class="form-group col-lg-6">
                    <input
                        class="form-control text-b0b0b0 border-d1d1d1 rounded-3 py-2 bg-f9f9f9-Important"
                        name="title_{{ LaravelLocalization::getCurrentLocale() }}" placeholder="@lang('site.Title_description_2')">
                </div>
                <div class="form-group col-lg-12">
                    <textarea rows="5"
                        class="form-control text-b0b0b0 border-d1d1d1 rounded-3 py-2 bg-f9f9f9-Important my-3"
                        name="description_{{ LaravelLocalization::getCurrentLocale() }}" placeholder="@lang('site.Detailed_Information')"></textarea>
                </div>
            </div>
            <p class="SF22_26Bold text-3b3b3b my-3 fw-bold">@lang('site.Basic_Information')</p>
            <div class="d-lg-flex flex-lg-wrap align-items-lg-center justify-content-between">
                <div class="form-group w-lg-50">
                    <select
                        class="propertyFor w-100 text-3b3b3b border-d1d1d1 rounded-3 p-3 bg-f9f9f9-Important SF16_19Regular mt-3 mt-lg-2 mb-2 text-capitalize"
                        name="property_for" data-url="{{ route('site.changeAddForm') }}" data-page="home">
                        {{-- <option disabled selected>{{__('site.Property_Status')}}</option> --}}
                        <option value="Sale">{{ __('site.For_Buy') }}</option>
                        <option value="Rent">{{ __('site.For_Rent') }}</option>
                        <option value="rentAndBuy">{{ __('site.For_Rent_and_Buy') }}</option>
                    </select>
                </div>
                <div class="form-group w-lg-50">
                    <select
                        class="propertyType w-100 text-3b3b3b border-d1d1d1 rounded-3 p-3 bg-f9f9f9-Important SF16_19Regular my-2 text-capitalize"
                        name="property_type_id">
                        @foreach ($types as $type)
                            <option value="{{ $type->id }}">{{ $type->label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-12" id="insertFilterForm"></div>
            <p class="SF22_26Bold text-3b3b3b my-3 fw-bold">@lang('site.Location')</p>
            <div class="d-lg-flex flex-lg-wrap justify-content-lg-between align-items-lg-center">
                <div class="form-group w-lg-30">
                    <input type="text" name="property_address"
                        class="form-control text-b0b0b0 border-d1d1d1 rounded-3 p-3 bg-f9f9f9-Important my-3"
                        placeholder="@lang('site.Address')">
                </div>
                <div class="form-group w-lg-30">
                    <select
                        class="changeLocation w-100 text-3b3b3b border-d1d1d1 rounded-3 p-3 bg-f9f9f9-Important SF16_19Regular my-2 text-capitalize"
                        name="governorate_id" required>
                        <option selected disabled>@lang('site.Governorate')</option>
                        @foreach ($governorates as $governorate)
                            <option value="{{ $governorate->id }}">{{ $governorate->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group w-lg-30">
                    <select
                        class="changeCurrency w-100 text-3b3b3b border-d1d1d1 rounded-3 p-3 bg-f9f9f9-Important SF16_19Regular my-2 text-capitalize"
                        name="lifestyle">
                        <option value="" selected hidden>{{ __('site.LifeStyle') }}</option>
                        @foreach ($life_styles as $lifeStyle)
                            <option value="{{ $lifeStyle->id }}">{{ $lifeStyle->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="d-lg-flex jusitfy-content-lg-between col-12">
                    <div class="insertLocation w-48">

                    </div>
                    <div class="insertDistrict w-48">

                    </div>
                </div>
            </div>
            <div>
                <p class="SF22_26Bold text-3b3b3b my-3 fw-bold">@lang('site.Features_optional')</p>
                <div class="row mb-50">
                    @foreach ($features->chunk(3) as $chunk)
                        @foreach ($chunk as $feature)
                            <div class="form-group col-6 col-lg-2">
                                <div class="form-check">
                                    <input class="form-check-input border-3b3b3b" type="checkbox" name="summary_of_content_id[]"
                                        value="{{ $feature->id }}" id="air-condition_{{ $feature->id }}">
                                    <label class="SF16_19Regular text-3b3b3b" for="air-condition_{{ $feature->id }}">
                                        {{ $feature->name }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
            <div>
                <p class="SF22_26Bold text-3b3b3b my-3 fw-bold">@lang('site.Property_Gallery')</p>
                <div class="form-group">
                    <label for="images" role="button"
                        class="border border-d1d1d1 rounded-3 bg-f1f1f1 d-flex justify-content-center align-items-center w-100 h-1500">
                        <div class="text-9b9b9b">
                            <i class="fa-solid fa-plus p-2 border rounded-circle border-9b9b9b"></i> <span
                                class="text-decoration-underline text-capitalize">@lang('site.add images here')</span>
                        </div>
                    </label>
                    <input type="file" name="images[]" multiple hidden id="images"
                        class="form-control text-b0b0b0 border-d1d1d1 rounded-3 py-2 bg-f9f9f9-Important my-3">
                </div>
                <p class="SF18_21Regular my-3">@lang('site.uploaded images')</p>
                <div id="imagePreview" class="d-flex flex-wrap justify-content-between"></div>
            </div>
            <button type="submit" id="formSubmit"
                class="btn bg-red text-white SF18_21Bold py-3 w-1000 w-lg-30">@lang('site.Add_Property')</button>
        </form>
    </div>
@endsection
@section('script')
    <script>
        $(document).on('click', '#is_exchange', function() {
            $('#exchange_type').toggleClass('d-none');
        });
        $(document).on('change', '.changeCurrency', function() {
            var type = $(this).val();
            var ele;
            if (type == 'Rent') {
                ele = `<div class="form-group">
                        <input type="number" name="per_month" class="form-control adj-field text-b0b0b0 border-d1d1d1 rounded-3 py-2 bg-f9f9f9-Important my-3" placeholder="{{ __('site.EGP') }}">
                    </div>`;


            } else if (type == 'Sale') {
                ele = `<div class="form-group">
                            <input type="number" name="sale_price" class="form-control adj-field text-b0b0b0 border-d1d1d1 rounded-3 py-2 bg-f9f9f9-Important my-3" placeholder="{{ __('site.EGP') }}">
                        </div>`;

            } else {
                ele = `<div class="form-group">
                        <input type="number" name="per_month" class="form-control adj-field text-b0b0b0 border-d1d1d1 rounded-3 py-2 bg-f9f9f9-Important my-3" placeholder="{{ __('site.EGP') }}">
                    </div>
                    <div class="form-group">
                        <input type="number" name="sale_price" class="form-control adj-field text-b0b0b0 border-d1d1d1 rounded-3 py-2 bg-f9f9f9-Important my-3" placeholder="{{ __('site.EGP') }}">
                    </div>`;
            }
            $('.insertType').html(ele);
        });
        $(document).on('change', '.changeLocation', function() {
            var id = $(this).val();
            var type = $(this).attr('name');
            $.ajax({
                data: {
                    id: id,
                    type: type
                },
                success: function(result) {
                    if (type == 'governorate_id') {
                        $('.insertLocation').html(result);
                        $('.insertDistrict').empty();
                    } else if (type == 'city_id') {
                        $('.insertDistrict').html(result);
                    }
                },
                error: function(errors) {
                    console.log(errors);
                }
            });
        });
        // jQuery code
        // jQuery code
        $(document).ready(function() {
            let files = []; // Declaring files array
            $('#images').on('change', function(event) {
                files = Array.from(event.target.files); // Convert FileList to array
                if (files) {
                    for (let i = 0; i < files.length; i++) {
                        const file = files[i];
                        if (isValidImageFile(file)) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const imgSrc = e.target.result;
                                const imgElement =
                                    '<div class="image-container w-480 w-lg-24 my-2"><img loading="lazy" class="d-block w-100 h-1500 mb-2 rounded-3" src="' +
                                    imgSrc +
                                    '"><p role="button" class="delete-btn text-center text-red text-decoration-underline"><i class="fa-solid fa-x p-2 rounded-circle borderRed"></i> Delete</button></div>';
                                $('#imagePreview').append(imgElement);
                            };
                            reader.readAsDataURL(file);
                        } else {
                            // Handle invalid file (exceeds size limit, not an image, etc.)
                            swal.fire(`File ${file.name} exceeds the size limit.`);
                        }
                    }
                }
            });

            // Function to start deleting an image
            $(document).on('click', '.delete-btn', function() {
                const index = $(this).parent().index();
                removeCurrentImage(index);
                $(this).parent().remove(); // Remove the image container from DOM
            });

            function isValidImageFile(file) {
                const maxSizeInBytes = 0.4 * 1024 * 1024; // 400KB
                return file.type.startsWith('image/') && file.size <= maxSizeInBytes;
            }

            function removeCurrentImage(index) {
                // Remove the image from the files array based on the index
                files.splice(index, 1);
            }
        });
    </script>
@endsection