@extends('admin.master_layout')
@section('title')
    <title>{{ __('Create Property') }}</title>
@endsection
@section('admin-content')
    <div class="main-content">
        <section class="section">
            <x-admin.breadcrumb title="{{ __('Create Property') }}" :list="[
                __('Dashboard') => route('admin.dashboard'),
                __('Property List') => route('admin.property.index'),
                __('Create Property') => '#',
            ]" />

            <form action="{{ route('admin.property.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="section-body">
                    <div class="mt-4 row">
                        <div class="col-md-9">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between">
                                    <x-admin.form-title :text="__('Basic Information')" />
                                    <div>
                                        <x-admin.back-button :href="route('admin.property.index')" />
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <x-admin.form-select name="agent" id="agent" class="select2" label="{{ __('Property Agent') }} " required="true">
                                                <x-admin.select-option value="0" text="{{ __('Own Property') }}" />
                                                @foreach ($agents as $agent)
                                                    <x-admin.select-option :selected="$agent->id == old('agent')" value="{{ $agent->id }}" text="{{ $agent->name }}" />
                                                @endforeach
                                            </x-admin.form-select>
                                        </div>

                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="title"  name="title" label="{{ __('Title') }}" placeholder="{{ __('Enter Title') }}" value="{{ old('title') }}" required="true"/>
                                        </div>

                                        <div class="form-group col-md-12 ">
                                            <x-admin.form-input id="slug" name="slug"
                                                    label="{{ __('Slug') }}" placeholder="{{ __('Enter Slug') }}"
                                                    value="{{ old('slug') }}" required="true" />
                                        </div>

                                        <div class="form-group col-md-12">
                                            <x-admin.form-select name="property_type_id" id="property_type" class="select2" label="{{ __('Property Type') }} " required="true">
                                                <x-admin.select-option value="" text="{{ __('Select Property Type') }}" />
                                                @foreach ($propertyTypes as $propertyType)
                                                    <x-admin.select-option :selected="$propertyType->id == old('property_type_id')" value="{{ $propertyType->id }}" text="{{ $propertyType->title }}" />
                                                @endforeach
                                            </x-admin.form-select>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <x-admin.form-select name="city_id" id="city" class="select2" label="{{ __('City') }} " required="true">
                                                <x-admin.select-option value="" text="{{ __('Select City') }}" />
                                                @foreach ($cities as $city)
                                                    <x-admin.select-option :selected="$city->id == old('city_id')" value="{{ $city->id }}" text="{{ $city->title.', '.$city->countryState->title.', '.$city->countryState->country->title }}" />
                                                @endforeach
                                            </x-admin.form-select>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="address"  name="address" label="{{ __('Address') }}" placeholder="{{ __('Enter Address') }}" value="{{ old('title') }}" required="true"/>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="phone"  name="phone" label="{{ __('Phone') }}" placeholder="{{ __('Enter Phone') }}" value="{{ old('phone') }}"/>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="email" type="email" name="email" label="{{ __('Email') }}" placeholder="{{ __('Enter Email') }}" value="{{ old('email') }}" required="true"/>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="website" type="url" name="website" label="{{ __('Website') }}" placeholder="{{ __('Enter Website') }}" value="{{ old('website') }}"/>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <x-admin.form-select name="property_purpose_id" id="purpose" class="select2" label="{{ __('Purpose') }} " required="true">
                                                @foreach ($purposes as $purpose)
                                                    <x-admin.select-option :selected="$purpose->id == old('property_purpose_id')" value="{{ $purpose->id }}" text="{{ $purpose->title }}" />
                                                @endforeach
                                            </x-admin.form-select>

                                        </div>
                                        <div class="form-group col-md-12 d-none" id="period_box">
                                            <x-admin.form-select name="period" id="period" class="period" label="{{ __('Period') }} " required="true">
                                                <x-admin.select-option :selected="old('period')" value="Daily" text="{{ __('Daily') }}" />
                                                <x-admin.select-option :selected="old('period')" value="Monthly" text="{{ __('Monthly') }}" />
                                                <x-admin.select-option :selected="old('period')" value="Yearly" text="{{ __('Yearly') }}" />
                                            </x-admin.form-select>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="price" name="price" label="{{ __('Price') }}" placeholder="{{ __('Enter Price') }}" value="{{ old('price') }}" required="true" />
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="card">
                                <div class="card-header d-flex justify-content-between">
                                    <h4>{{ __('Others Information') }}</h4>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <x-admin.form-input id="area" name="area" label="{{ __('Total Area') }}" placeholder="{{ __('Total Area') }}" value="{{ old('area') }}" required="true" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <x-admin.form-input id="number_of_unit" name="number_of_unit" label="{{ __('Total Unit') }}" placeholder="{{ __('Total Unit') }}" value="{{ old('number_of_unit') }}" required="true" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <x-admin.form-input id="number_of_room" name="number_of_room" label="{{ __('Total Room') }}" placeholder="{{ __('Total Room') }}" value="{{ old('number_of_room') }}" required="true" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <x-admin.form-input id="number_of_bedroom" name="number_of_bedroom" label="{{ __('Total Bedroom') }}" placeholder="{{ __('Total Bedroom') }}" value="{{ old('number_of_bedroom') }}" required="true" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <x-admin.form-input id="number_of_bathroom" type="number" name="number_of_bathroom" label="{{ __('Total Bathroom') }}" placeholder="{{ __('Total Bathroom') }}" value="{{ old('number_of_bathroom') }}" required="true" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <x-admin.form-input id="number_of_floor" type="number" name="number_of_floor" label="{{ __('Total Floor') }}" placeholder="{{ __('Total Floor') }}" value="{{ old('number_of_floor') }}" required="true" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <x-admin.form-input id="number_of_kitchen" type="number" name="number_of_kitchen" label="{{ __('Total Kitchen') }}" placeholder="{{ __('Total Kitchen') }}" value="{{ old('number_of_kitchen') }}" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <x-admin.form-input id="number_of_parking" type="number" name="number_of_parking" label="{{ __('Total Parking Place') }}" placeholder="{{ __('Total Parking Place') }}" value="{{ old('number_of_parking') }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="card">
                                <div class="card-header d-flex justify-content-between">
                                    <h4>{{ __('PDF and Video') }}</h4>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label for="" class="w-100">{{ __('PDF File') }}</label>
                                            <input type="file" name="pdf_file" class="form-control-file">
                                            @error('pdf_file')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="video_link" name="video_link" label="{{ __('Youtube Video Id') }}" placeholder="{{ __('Youtube Video Id') }}" value="{{ old('video_link') }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header d-flex justify-content-between">
                                    <h4>{{ __('Property Details and Google Map') }}</h4>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <x-admin.form-textarea name="google_map_embed_code"
                                                label="{{ __('Google Map Code') }}" value="{!! old('google_map_embed_code') !!}"/>
                                        </div>
        
                                        <div class="form-group col-md-12">
                                            <x-admin.form-editor name="description"
                                                label="{{ __('Description') }}" value="{!! old('description') !!}"
                                                required="true" />
                                        </div>

                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="seo_title" name="seo_title" label="{{ __('SEO Title') }}" placeholder="{{ __('SEO Title') }}" value="{{ old('seo_title') }}" />
                                        </div>

                                        <div class="form-group col-md-12">
                                            <x-admin.form-textarea name="seo_description"
                                                label="{{ __('SEO Description') }}" value="{{ old('seo_description') }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-3">
                            <div class="card sidebar_card">
                                <div class="card-body">
                                    <div class="form-group">
                                        <x-admin.form-image-preview div_id="thumbnail-image-preview" label_id="thumbnail-image-label" input_id="thumbnail-image-upload" name="thumbnail_image" label="{{ __('Thumbnail Image') }}" required="true" />
                                    </div>
                                </div>
                            </div>

                            <div class="card sidebar_card">
                                <div class="card-body">
                                    <div class="form-group">
                                        <x-admin.form-image-preview div_id="banner-image-preview" label_id="banner-image-label" input_id="banner-image-upload" name="banner_image" label="{{ __('Banner Image') }}" required="true" />
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h4>{{ __('Amenities') }}</h4>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        @foreach ($aminities as $aminity)
                                            <div class="form-check">
                                                <input value="{{ $aminity->id }}" name="aminities[]" class="form-check-input" type="checkbox" id="aminity_{{ $aminity->id }}">
                                                <label class="form-check-label" for="aminity_{{ $aminity->id }}">
                                                {{ $aminity->title }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

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

                                    <div class="form-group">
                                        <label>
                                            <input type="hidden" value="0" name="is_featured"
                                                class="custom-switch-input">
                                            <input type="checkbox" value="1" name="is_featured"
                                                class="custom-switch-input">
                                            <span class="custom-switch-indicator"></span>
                                            <span
                                                class="custom-switch-description">{{ __('Mark as Featured') }}</span>
                                        </label>
                                    </div>

                                    <div class="form-group">
                                        <label>
                                            <input type="hidden" value="0" name="top_property"
                                                class="custom-switch-input">
                                            <input type="checkbox" value="1" name="top_property"
                                                class="custom-switch-input">
                                            <span class="custom-switch-indicator"></span>
                                            <span
                                                class="custom-switch-description">{{ __('Mark Top Property') }}</span>
                                        </label>
                                    </div>

                                    <div class="form-group">
                                        <label>
                                            <input type="hidden" value="0" name="urgent_property"
                                                class="custom-switch-input">
                                            <input type="checkbox" value="1" name="urgent_property"
                                                class="custom-switch-input">
                                            <span class="custom-switch-indicator"></span>
                                            <span
                                                class="custom-switch-description">{{ __('Urgent Property') }}</span>
                                        </label>
                                    </div>

                                    <div class="form-group">
                                        <label>
                                            <input type="hidden" value="0" name="status"
                                                class="custom-switch-input">
                                            <input type="checkbox" value="1" name="status"
                                                class="custom-switch-input">
                                            <span class="custom-switch-indicator"></span>
                                            <span class="custom-switch-description">{{ __('Status') }}</span>
                                        </label>
                                    </div>
                                    @adminCan('property.store')
                                    <x-admin.save-button :text="__('Save')">
                                    </x-admin.save-button>
                                    @endadminCan
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </section>
    </div>
@endsection


@push('css')
<style>
    .sidebar_card .image-preview, #callback-preview {
        width: auto !important;
        height: 200px !important;
    }
</style>

@endpush
@push('js')
    <script src="{{ asset('backend/js/jquery.uploadPreview.min.js') }}"></script>
    <script>
        $.uploadPreview({
            input_field: "#thumbnail-image-upload",
            preview_box: "#thumbnail-image-preview",
            label_field: "#thumbnail-image-label",
            label_default: "{{ __('Choose Icon') }}",
            label_selected: "{{ __('Change Icon') }}",
            no_label: false,
            success_callback: null
        });

        $.uploadPreview({
            input_field: "#banner-image-upload",
            preview_box: "#banner-image-preview",
            label_field: "#banner-image-label",
            label_default: "{{ __('Choose Icon') }}",
            label_selected: "{{ __('Change Icon') }}",
            no_label: false,
            success_callback: null
        });
    </script>
    <script>
        (function($) {
            "use strict";
            $(document).ready(function() {
                $("#purpose").on("change", function() {
                    var purposeId = $(this).val();
                    if (purposeId == 2) {
                        $("#period_box").removeClass('d-none');
                    } else if (purposeId == 1) {
                        $("#period_box").addClass('d-none');
                    }
                });

                $("#title").on("keyup", function(e) {
                    $("#slug").val(convertToSlug($(this).val()));
                })
            });
        })(jQuery);

        function convertToSlug(Text) {
            return Text
                .toLowerCase()
                .replace(/[^\w ]+/g, '')
                .replace(/ +/g, '-');
        }
    </script>
@endpush