@extends('site.layouts.master')

@section('title')
    <title>{{__('site.Add_Request_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 class="my-3">
                <p>@lang('site.add_request_header')</p>
            </div>
            <div>
                <h1 class="SF22_26Bold text-3b3b3b my-3 fw-bold">@lang('site.Request 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')">
                </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.Request Details')"></textarea>
                </div>
            </div>
            <p class="SF22_26Bold text-3b3b3b my-3 fw-bold">@lang('site.Basic_Information')</p>
            <div class="col-12">
                <div class="d-lg-flex flex-lg-wrap align-items-lg-center forms">
                    <div class="form-group w-lg-50 @if(app()->getlocale() == 'ar') ms-lg-4 @else me-lg-4 @endif">
                        <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.changeRequestForm') }}" data-page="home">
                            <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 @if(app()->getlocale() == 'ar') ms-lg-4 @else me-lg-4 @endif">
                        <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>
            <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="{{ __('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 justify-content-lg-between col-12">
                    <div class="insertLocation w-48">

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

                    </div>
                </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_request')</button>
        </form>
    </div>
@endsection
@section('script')
    <script>
        $(document).on('change', '.changeCurrency', function() {
            var type = $(this).val();
            var ele;
            if (type == 'Rent') {
                ele = `<div class="col-lg-12 col-md-12">
                    <div class="form-group">
                        <label>Rent Price</label>
                        <br>
                        <input type="number" name="per_month" class="form-control adj-field" placeholder="{{ __('site.EGP') }}">
                    </div>
                 </div>`;


            } else if (type == 'Sale') {
                ele = `<div class="col-lg-12 col-md-12">
                        <div class="form-group">
                            <label>Sale Price</label>
                            <br>
                            <input type="number" name="sale_price" class="form-control adj-field" placeholder="{{ __('site.EGP') }}">
                        </div>
                 </div>`;

            } else {
                ele = `<div class="col-lg-12 col-md-12">
                    <div class="form-group">
                        <label>Rent Price</label>
                        <br>
                        <input type="number" name="per_month" class="form-control adj-field" placeholder="{{ __('site.EGP') }}">
                    </div>
                 </div>
                 <div class="col-lg-12 col-md-12">
                    <div class="form-group">
                        <label>Sale Price</label>
                        <br>
                        <input type="number" name="sale_price" class="form-control adj-field" placeholder="{{ __('site.EGP') }}">
                    </div>
                 </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);
                }
            });
        });
    </script>
@endsection