@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">Property</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">Edit Property</h5>

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

                        <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',$property->category_id), ['class'=>'form-select',
                            'id'=>'category_id','placeholder' => '---Select property type---']) }}

                                @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"  selected>No</option>
                                </select>
                            </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="Please property id" name="property_id" id="property_id" class="form-control" value="{{ old('property_id',$property->property_id) }}">

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

                        <div class="row mb-3">
                            <label for="name" 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('name',$property->name) }}">

                                @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 price" name="price" id="price" class="form-control" value="{{ old('price',$property->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',$property->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',$property->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',$property->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',$property->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="Enter garages" name="garages" id="garages" class="form-control" value="{{ old('garages',$property->garages) }}">

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

                        <div class="row mb-3">
                            <label for="year_build" 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" value="{{ old('year_build',$property->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',$property->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="street_address" class="col-sm-2 col-form-label">Street Address</label>

                            <div class="col-sm-10">
                                <input type="text" placeholder="Please street address" name="street_address" id="street_address" class="form-control" value="{{ old('street_address',$property->street_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="Please city" name="city" id="city" class="form-control" value="{{ old('city',$property->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="Please state" name="state" id="state" class="form-control" value="{{ old('state',$property->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="Please postal code" name="postal_code" id="postal_code" class="form-control" value="{{ old('postal_code',$property->postal_code) }}">

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

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

                            <div class="col-sm-10">
                                 {{ Form::select('country_id', get_countries(), old('country_id',$property->country_id), ['class'=>'form-select',
                                'id'=>'country_id','placeholder' => '---Select country---']) }}

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

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

                            <div class="col-sm-10">
                                <input type="text" placeholder="Please size" name="size" id="size" class="form-control" value="{{ old('size',$property->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', $property->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" style="height: 100px">{{ old('description',$property->description) }}</textarea>

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

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

                            <div class="col-sm-10">
                                @php
                                $mediaItems = $property->getMedia('property-image');
                                @endphp
                                @foreach($mediaItems as $index => $mediaItem)
                                    @php
                                        $image_url = $mediaItems[$index]->getUrl() ;
                                    @endphp  
                                    <img src="{{ $image_url }}" border="0" width="100" class="img-rounded" align="center" />';
                                @endforeach
                            </div>                            
                        </div>

                        <div class="row mb-3">
                            <label for="inputNumber" class="col-sm-2 col-form-label">Upload Image</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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        flatpickr("input[type=date-local]");
    </script>
    @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-edit').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-edit').find("label[for='" + k + "']").append(em);
                        })
                    }
                }
            });

            return false;
        }


        validatePostPropertyForm = function() {
            jQuery('#frm-edit').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 numbers 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