@extends('layouts.user.master')
@section('title')
    @lang('translation.create-product')
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/@tarekraafat/autocomplete.js/css/autoComplete.css') }}" rel="stylesheet">
@endsection
@section('content')
    <form action="{{ route('requests.store') }}" autocomplete="off" method="POST"
          class="needs-validation" id="update-property" novalidate>
        @csrf
        <div class="row">
            @if(session('success_request'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="mdi mdi-check me-2"></i>
                    <strong>{{ session('success_request') }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @elseif(session('error_request'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="mdi mdi-block-helper me-2"></i>
                    <strong>{{ session('error_request') }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
{{--                        <div class="mb-3">--}}
{{--                            <div class="mb-3">--}}
{{--                                <label class="form-label" for="product-title-input">@lang('property-request.title')</label>--}}
{{--                                <input type="hidden" class="form-control" id="formAction" name="formAction" value="add">--}}
{{--                                <input type="text" class="form-control d-none" id="product-id-input">--}}
{{--                                <input type="text" class="form-control" id="product-title-input" name="title"--}}
{{--                                       placeholder="Enter product title" required>--}}
{{--                                @if($errors->has('title'))--}}
{{--                                    <span class="text-danger">{{ $errors->first('title') }}</span>--}}
{{--                                @endif--}}
{{--                                <div class="invalid-feedback">@lang('property-request.error-title')</div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="mb-3">--}}
{{--                            <div class="mb-3">--}}
{{--                                <label class="form-label" for="product-title-input">@lang('property-request.area-description')</label>--}}
{{--                                <input type="hidden" class="form-control" id="formAction" name="formAction" value="add">--}}
{{--                                <input type="text" class="form-control d-none" id="product-id-input">--}}
{{--                                <input type="text" class="form-control" id="product-title-input" name="address"--}}
{{--                                       placeholder="@lang('property-request.area-description')" required>--}}
{{--                                <div class="invalid-feedback">@lang('property-request.error-area-description')</div>--}}
{{--                                @if($errors->has('address'))--}}
{{--                                    <span class="text-danger">{{ $errors->first('address') }}</span>--}}
{{--                                @endif--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">@lang('property-request.area')</h5>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="card-body">
                                        <div class="mb-2">
                                            <div class="mb-2">
                                                <label for="property-area-residential" class="form-label">
                                                    @lang('property-request.property-residential-unit')
                                                </label>
                                                <input type="number" id="property-area-residential"
                                                       class="form-control mb-2"
                                                       placeholder="Ex. 129" name="residential-unit">
                                                @if($errors->has('residential-unit'))
                                                    <span
                                                        class="text-danger">{{ $errors->first('residential-unit') }}</span>
                                                @endif
                                            </div>
                                            <div class="mb-2">
                                                <label for="property-area-space" class="form-label">
                                                    @lang('property-request.property-outdoor-space')
                                                </label>
                                                <input type="number" id="property-area-space"
                                                       class="form-control"
                                                       placeholder="Ex. 800" name="residential-space">
                                                @if($errors->has('residential-space'))
                                                    <span
                                                        class="text-danger">{{ $errors->first('residential-space') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="card-body ps-0">
                                        <div class="mb-2">
                                            <div class="mb-2">
                                                <label for="autoCompleteCity" class="form-label">
                                                    @lang('property-request.search-city-names')
                                                </label>
                                                <input id="autoCompleteCity" type="text" dir="ltr" spellcheck=false
                                                       autocomplete="off"
                                                       autocapitalize="off" name="property-city">
                                                @if($errors->has('property-city'))
                                                    <span
                                                        class="text-danger">{{ $errors->first('property-city') }}</span>
                                                @endif
                                            </div>
                                            <div class="mb-2">
                                                <label for="year-build" class="form-label">
                                                    @lang('property-request.property-year-build')
                                                </label>
                                                <input id="year-build" class="form-control" placeholder="Ex. 2009"
                                                       name="property-year-build">
                                                @if($errors->has('property-year-build'))
                                                    <span
                                                        class="text-danger">{{ $errors->first('property-year-build') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card-header">
                                <h5 class="card-title mb-0">@lang('property-request.additional-requests')</h5>
                            </div>
                            <div class="col-lg-12 col-md-12">
                                <div class="mb-3">
                                    <label for="choices-multiple-groups" class="form-label text-muted">Choose tags</label>
                                    <p class="text-muted"><code>Search for features your future home must have</code></p>
                                    <select class="form-control" id="choices-multiple-groups" name="choices-multiple-groups" data-choices data-choices-multiple-groups="true"
                                            multiple>
                                        <option value="">Choose a city</option>
                                        @foreach($tags as $tag)
                                            <option value="{{ $tag->name }}">{{ $tag->name }}</option>

                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @if($errors->has('description'))
                                <span class="text-danger">{{ $errors->first('description') }}</span>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">@lang('property-request.property-status')</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="choices-publish-status-input" class="form-label">
                                @lang('property-request.property-status')
                            </label>
                            <select class="form-select" id="choices-publish-status-input" data-choices
                                    data-choices-search-false name="property-status">
                                @foreach($propertyStatuses as $propertyStatus)
                                    <option value="{{ $propertyStatus }}">{{ strtoupper($propertyStatus) }}</option>
                                @endforeach
                            </select>
                            @if($errors->has('property-status'))
                                <span class="text-danger">{{ $errors->first('property-status') }}</span>
                            @endif
                        </div>
                        <div class="mb-3">
                            <label for="property-category" class="form-label">@lang('property-request.property-category')</label>
                            <select class="form-select" id="property-category" name="property-category"
                                    data-choices data-choices-search-false>
                                @foreach($propertyCategories as $propertyCategory)
                                    <option value="{{ $propertyCategory }}">{{ strtoupper($propertyCategory) }}</option>
                                @endforeach
                            </select>
                            @if($errors->has('property-category'))
                                <span class="text-danger">{{ $errors->first('property-category') }}</span>
                            @endif
                        </div>
                        <div class="mb-3">
                            <label for="choices-publish-status-input" class="form-label">
                                @lang('property-request.property-layout')
                            </label>
                            <select class="form-select" id="choices-publish-status-input" data-choices
                                    data-choices-search-false name="property-layout">
                                @foreach($propertyLayouts as $propertyLayout)
                                    <option value="{{ $propertyLayout }}">{{ strtoupper($propertyLayout) }}</option>
                                @endforeach
                            </select>
                            @if($errors->has('property-layout'))
                                <span class="text-danger">{{ $errors->first('property-layout') }}</span>
                            @endif
                        </div>
                        <div class="mb-3">
                            <label for="choices-category-input" class="form-label">
                                @lang('property-request.property-document-status')
                            </label>
                            <select class="form-select" name="property-document-status">
                                @foreach($propertyDocumentsStatuses as $propertyDocumentStatus)
                                    <option value="{{ $propertyDocumentStatus }}">
                                        {{ $propertyDocumentStatus ? 'TRUE' : 'FALSE' }}
                                    </option>
                                @endforeach
                            </select>
                            @if($errors->has('property-document-status'))
                                <span class="text-danger">{{ $errors->first('property-document-status') }}</span>
                            @endif
                        </div>
                        <div>
                            <label for="choices-publish-visibility-input" class="form-label">
                                @lang('property-request.property-type')
                            </label>
                            <select class="form-select" id="" data-choices data-choices-search-false name="property-type">
                                @foreach($propertyTypes as $propertyType)
                                    <option value="{{ $propertyType }}">
                                        {{ Str::title($propertyType) }}
                                    </option>
                                @endforeach
                            </select>
                            @if($errors->has('property-type'))
                                <span class="text-danger">{{ $errors->first('property-type') }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">@lang('property-request.property-pricing')</h5>
                    </div>
                    <div class="card-body">
                        <div>
                            <div id="property-sale-container" style="display: none;">

                            <label for="property-sale-price" class="form-label">@lang('property-request.property-price-for-sale')</label>
                                <input type="number" id="property-sale-price"
                                       class="form-control mb-2"
                                       placeholder="Ex. 1200000" name="property-price">
                                @if($errors->has('property-price'))
                                    <span class="text-danger">{{ $errors->first('property-price') }}</span>
                                @endif
                            </div>
                            <div id="property-rent-container" styl  e="display: none;">
                                <label for="property-rent-price" class="form-label">@lang('property-request.property-price-per-month')</label>
                                <input type="number" id="property-rent-price"
                                       class="form-control"
                                       placeholder="Ex. 45000" name="property-rent-price">
                                @if($errors->has('property-rent-price'))
                                    <span class="text-danger">{{ $errors->first('property-rent-price') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card -->
            </div>
                <div class="text-end mb-3">
                    <button type="submit" class="btn btn-success w-sm"
                            id="form-property">@lang('property-request.create-property-request')</button>
                </div>
        </div>
        <!-- end row -->
    </form>
@endsection
@section('script')
    <script>
        // Array of categories taken from db, will be sent to filterCities.js
        let categoryArray = @json($propertyCities);
        // Session messages check depending on session return value
    </script>
    <script src="{{ URL::asset('build/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>
{{--    <script>--}}
{{--        document.addEventListener('DOMContentLoaded', function () {--}}
{{--            const element = document.getElementById('choices-multiple-groups');--}}
{{--            const choices = new Choices(element, {--}}
{{--                removeItemButton: true, // Enables the 'x' button to remove selected items--}}
{{--                searchEnabled: true,   // Allows searching within the dropdown--}}
{{--            });--}}
{{--        });--}}

{{--    </script>--}}
    {{-- JS libraries --}}
    <script src="{{ URL::asset('build/libs/@tarekraafat/autocomplete.js/autoComplete.min.js') }}"></script>

    {{-- Custom JS files --}}
    <script src="{{ URL::asset('build/js/custom/filterCities.js') }}"></script>
    <script src="{{ URL::asset('build/js/custom/update-property-status.js') }}"></script>
    <script src="{{ URL::asset('build/libs/prismjs/prism.js') }}"></script> <!-- Option group -->

    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection