@extends('admin.layouts.app')



@section('content')
<div class="pagetitle">
    <!-- <h1>Add User</h1> -->
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin-dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Properties</li>
        </ol>
    </nav>
</div><!-- End Page Title -->

<section class="section">
    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">New Property</h5>

                    <!-- General Form Elements -->
                    <form role="form" name="frm-create" id="frm-create" action="{{route('admin-property.store')}}" method="post" enctype="multipart/form-data">
                        @csrf                        

                        <div class="row mb-3">
                            <label for="buy" class="col-sm-2 col-form-label">Property Status</label>
                            <div class="col-sm-10">
                                <select class="form-select" aria-label="Default select example" name="property_status" id="property_status">
                                    <option value="">---Select---</option>
                                    <option value="1">Sell</option>
                                    <option value="2">Rent</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="sale" class="col-sm-2 col-form-label">Property Type</label>
                            <div class="col-sm-10">
                                <select class="form-select" aria-label="Default select example" name="property_type" id="property_type">
                                    <option value="">---Select---</option>
                                    <option value="1">Residential</option>
                                    <option value="2">Commercial</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="category_id" class="col-sm-2 col-form-label">Category</label>
                            <div class="col-sm-10">
                                {{ Form::select('category_id', get_categories(), old('category_id'), ['class'=>'form-select',
                                'id'=>'category_id','placeholder' => '---Select--']) }}

                                @if($errors->has('category_id'))
                                <div class="error">{{ $errors->first('category_id') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="buy" class="col-sm-2 col-form-label">Popular Community</label>
                            <div class="col-sm-10">
                                {{--<select class="form-select" aria-label="Default select example" name="popular_community" id="popular_community">
                                    <option value="">---Select---</option>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>--}}
                                <div class="_form-check">
                                    <input class="form-check-input" type="radio" name="popular_community" id="popular_community_no" value="0" checked>
                                    <label class="form-check-label" for="popular_community_no">
                                        No
                                    </label>

                                    <input class="form-check-input" type="radio" name="popular_community" id="popular_community_yes" value="1">
                                    <label class="form-check-label" for="popular_community_yes">
                                        Yes
                                    </label>
                                </div>                                
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Property ID</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter property ID" name="property_id" id="property_id" class="form-control" value="{{ old('price') }}">

                                @if($errors->has('property_id'))
                                <div class="error">{{ $errors->first('property_id') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Name</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter property name" name="name" id="name" class="form-control" value="{{ old('rooms') }}">

                                @if($errors->has('name'))
                                <div class="error">{{ $errors->first('name') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Price</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter property price" name="price" id="price" class="form-control" value="{{ old('price') }}">

                                @if($errors->has('price'))
                                <div class="error">{{ $errors->first('price') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Area</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter area" name="area" id="area" class="form-control" value="{{ old('area') }}">

                                @if($errors->has('area'))
                                <div class="error">{{ $errors->first('area') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Rooms</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter Rooms" name="rooms" id="rooms" class="form-control" value="{{ old('rooms') }}">

                                @if($errors->has('rooms'))
                                <div class="error">{{ $errors->first('rooms') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Bed Rooms</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter bed rooms" name="beds" id="beds" class="form-control" value="{{ old('beds') }}">

                                @if($errors->has('beds'))
                                <div class="error">{{ $errors->first('beds') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Bath Rooms</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter bath rooms" name="baths" id="baths" class="form-control" value="{{ old('baths') }}">

                                @if($errors->has('baths'))
                                <div class="error">{{ $errors->first('baths') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Garages</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Please garages" name="garages" id="garages" class="form-control" value="{{ old('garages') }}">

                                @if($errors->has('garages'))
                                <div class="error">{{ $errors->first('garages') }}</div>
                                @endif
                            </div>
                        </div>

                        {{-- <div class="mb-3 row">
                            <label for="year_build"
                                class="col-sm-2 col-form-label text-md-end">{{ __('Year build') }}
                            </label>

                            <div class="col-md-6">
                                <input type="datetime-local" class="form-control" name="year_build" id="year_build">
                            </div>
                        </div> --}}

                        <div class="row mb-3">
                            <label for="inputDate" class="col-sm-2 col-form-label">Year Of Build</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" name="year_build" id="year_build">
                            </div>
                        </div>

                        {{--<div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Google_address</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Please google_address" name="google_address" id="google_address" class="form-control" value="{{ old('google_address') }}">

                                @if($errors->has('google_address'))
                                <div class="error">{{ $errors->first('google_address') }}</div>
                                @endif
                            </div>
                        </div>--}}

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Street Address</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter street address" name="street_address" id="street_address" class="form-control" value="{{ old('google_address') }}">

                                @if($errors->has('street_address'))
                                <div class="error">{{ $errors->first('street_address') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">City</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter city" name="city" id="city" class="form-control" value="{{ old('city') }}">

                                @if($errors->has('city'))
                                <div class="error">{{ $errors->first('city') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">State</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter state" name="state" id="state" class="form-control" value="{{ old('state') }}">

                                @if($errors->has('state'))
                                <div class="error">{{ $errors->first('state') }}</div>
                                @endif
                            </div>
                        </div>  

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Postal Code</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter postal code" name="postal_code" id="postal_code" class="form-control" value="{{ old('state') }}">

                                @if($errors->has('postal_code'))
                                <div class="error">{{ $errors->first('postal_code') }}</div>
                                @endif
                            </div>
                        </div>                        

                        <div class="row mb-3">
                            <label for="country_id" class="col-sm-2 col-form-label">Country</label>
                            <div class="col-sm-10">
                                {{ Form::select('country_id', get_countries(), old('country_id'), ['class'=>'form-select',
                                'id'=>'country_id','placeholder' => '---Select--']) }}

                                @if($errors->has('country_id'))
                                <div class="error">{{ $errors->first('country_id') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Size(Sqft)</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter property size" name="size" id="size" class="form-control" value="{{ old('size') }}">

                                @if($errors->has('size'))
                                <div class="error">{{ $errors->first('size') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="price" class="col-sm-2 col-form-label">Property Video</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Enter property video link" name="property_video" id="property_video" class="form-control" value="{{ old('property_video') }}">

                                @if($errors->has('property_video'))
                                <div class="error">{{ $errors->first('property_video') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="description" class="col-sm-2 col-form-label">Description</label>

                            <div class="col-sm-10">
                                <textarea name="description" class="form-control" value="{{ old('description') }}" style="height: 100px"></textarea>

                                @if($errors->has('description'))
                                <div class="error">{{ $errors->first('description') }}</div>
                                @endif
                            </div>
                        </div>

                        {{--<div class="row mb-3">
                            <label for="plane_details" class="col-sm-2 col-form-label">Plane Details</label>

                            <div class="col-sm-10">
                                <textarea name="plane_details" class="form-control" value="{{ old('plane_details') }}" style="height: 100px"></textarea>

                                @if($errors->has('plane_details'))
                                <div class="error">{{ $errors->first('plane_details') }}</div>
                                @endif
                            </div>
                        </div>--}}

                        {{--<div class="row mb-3">
                            <label for="inputNumber" class="col-sm-2 col-form-label">Plane Details</label>
                            <div class="col-sm-10">

                                <div class="needsclick dropzone" id="plane-dropzone"></div>

                                @if($errors->has('image'))
                                <div class="error">{{ $errors->first('image') }}</div>
                                @endif
                            </div>
                        </div>--}}

                        <div class="row mb-3">
                            <label for="inputNumber" class="col-sm-2 col-form-label">Upload Images</label>
                            <div class="col-sm-10">

                                <div class="needsclick dropzone" id="document-dropzone"></div>

                                @if($errors->has('image'))
                                <div class="error">{{ $errors->first('image') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label"></label>
                            <div class="col-sm-10">
                                <button type="submit" class="btn btn-primary">Submit</button>
                                <a class="btn btn-default" href="{{ route('admin-property.index') }}">Back</a>
                            </div>
                        </div>
                    </form><!-- End General Form Elements -->
                    <!-- End General Form Elements -->
                </div>
            </div>
        </div>
    </div>
</section>

<style type="text/css">
    .error {
        color: red;
    }

</style>
@endsection

@push('scripts_footer')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
    <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

    {{--@include('admin.misc.scripts.dropzone_property_plane')--}}
    @include('admin.misc.scripts.dropzone_property_image')

    <script>

        /*CKEDITOR.replace('plane_details', {
            toolbar : [
                { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
                { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
                { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
                { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
                { name: 'tools', items: [ 'Maximize' ] },
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
                { name: 'others', items: [ '-' ] },
                '/',
                // { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic'] },
                // { name: 'paragraph', items: [ 'NumberedList', 'BulletedList'] },
                { name: 'styles', items: [ 'Styles', 'Format' ] },
                { name: 'about', items: [ 'About' ] }
            ]
        });*/

        blockPage = function(unblock) {
            var unblock = unblock || false;

            if (unblock) {
                mApp.unblockPage();
            } else {
                mApp.blockPage({
                    overlayColor: '#000000', 
                    type: 'loader', 
                    state: 'success', 
                    message: 'Please wait...'
                });
            }
        }

        ajaxSubmitPostProperty = function(form) {
            jQuery(form).ajaxSubmit({
                dataType: 'json', 
                beforeSubmit: function(xhr) {
                    //
                    blockPage();
                }, 
                success: function(res) {
                    //
                    //unblockPage();  

                    //showMessage(res);

                    if (res.status == 'success') {
                        window.setTimeout(function() {
                            window.location = res.location
                        }, 3000);
                    }
                }, 
                error: function(error) {
                    unblockPage();

                    // validation error    
                    if (error.status == 422) {
                        jQuery('#frm-create').find("label[for]").find('em').remove();
                        jQuery.each(error.responseJSON.errors, function(k, v) {
                            var em = jQuery('<em>', {
                                class: "error"
                            }).append(
                                v[0]
                            );

                            jQuery('#frm-create').find("label[for='" + k + "']").append(em);
                        })
                    }
                }
            });

            return false;
        }


        validatePostPropertyForm = function() {
            jQuery('#frm-create').validate({
                submitHandler: function(form) {

                    // form.submit();
                    ajaxSubmitPostProperty(form);
                },

                errorElement: 'span', 
                focusInvalid: true,

                errorPlacement: function(error, element) {

                    var target = element.prop('name');
                    var label = element.parent();

                    //error.appendTo( label.find("label[for='"+target+"']") ); 
                    error.appendTo(element.parent().after());
                }
                , ignore: '', 
                rules: {
                    property_status: "required", 
                    property_type: "required", 
                    category_id: "required", 
                    popular_community: "required", 
                    rooms: {
                        required: false, 
                        number: true, 
                    }, 
                    price: {
                        required: false, 
                        number: true, 
                    }, 
                    beds: {
                        required: false, 
                        number: true, 
                    }, 
                    baths: {
                        required: false, 
                        number: true, 
                    }, 
                    garages: {
                        required: false, 
                        number: true, 
                    }, 
                },

                messages: {
                    property_status: "Please select any one",
                    property_type: "Please select any one",
                    category_id: "Please select any property type",
                    popular_community: "Please select Yes or No",
                    rooms: {
                        number: "Please enter numbers Only"
                    },
                    price: {
                        number: "Please enter decimal value Only"
                    },
                    beds: {
                        number: "Please enter numbers Only"
                    },
                    baths: {
                        number: "Please enter numbers Only"
                    },
                    garages: {
                        number: "Please enter numbers Only"
                    },
                }
            });
        }

        jQuery(document).ready(function() {

            validatePostPropertyForm();
        });
    </script>
@endpush