@extends('frontend.layouts.app')

@section('styles')

    <!-- Image Crop Css -->
    <link href="{{ asset('backend/plugins/croppie/croppie.css') }}" rel="stylesheet" />

@endsection

@section('content')

    <section class="section">
        <div class="container">
            <div class="row">

                <div class="col s12 m3">
                    <div class="agent-sidebar">
                        @include('agent.sidebar')
                    </div>
                </div>

                <div class="col s12 m9">
                    <div class="agent-content">
                        <h4 class="agent-title">EDIT PROPERTY</h4>

                        <form action="{{route('agent.properties.update',$property->slug)}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="input-field col s12">
                                    <i class="material-icons prefix">title</i>
                                    <input id="title" name="title" type="text" class="validate" value="{{ $property->title }}" data-length="200">
                                    <label for="title">Title</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s6">
                                    <i class="material-icons prefix">attach_money</i>
                                    <input id="price" name="price" type="number" value="{{ $property->price }}" class="validate">
                                    <label for="price">Price</label>
                                </div>
                                <div class="input-field col s6">
                                    <i class="material-icons prefix">business</i>
                                    <input id="area" name="area" type="number" value="{{ $property->area }}" class="validate">
                                    <label for="area">Floor Area</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s6">
                                    <i class="material-icons prefix">airline_seat_flat</i>
                                    <input id="bedroom" name="bedroom" type="number" value="{{ $property->bedroom }}" class="validate">
                                    <label for="bedroom">Bedroom</label>
                                </div>
                                <div class="input-field col s6">
                                    <i class="material-icons prefix">event_seat</i>
                                    <input id="bathroom" name="bathroom" type="number" value="{{ $property->bathroom }}" class="validate">
                                    <label for="bathroom">Bathroom</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s6">
                                    <i class="material-icons prefix">public</i>
                                    <input id="state" name="state" type="text" value="{{ $property->state }}" class="validate">
                                    <label for="state">State</label>
                                </div>
                                <div class="input-field col s6">
                                    <i class="material-icons prefix">location_city</i>
                                    <input id="city" name="city" type="text" value="{{ $property->city }}" class="validate">
                                    <label for="city">City</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s4">
                                    <i class="material-icons prefix">markunread_mailbox</i>
                                    <input id="postcode" name="postcode" type="text" value="{{ $property->postcode }}" class="validate">
                                    <label for="postcode">Postcode</label>
                                </div>
                                <div class="input-field col s8">
                                    <i class="material-icons prefix">account_balance</i>
                                    <textarea id="address" name="address" class="materialize-textarea">{{ $property->address }}</textarea>
                                    <label for="address">Address</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s3">
                                    <p>
                                        <label>
                                            <input type="checkbox" name="featured" class="filled-in" {{ $property->featured == 1 ? 'checked' : '' }} />
                                            <span>Featured</span>
                                        </label>
                                    </p>
                                </div>
                                <div class="input-field col s9">
                                    <i class="material-icons prefix">mode_edit</i>
                                    <textarea id="description" name="description" class="materialize-textarea">{{ $property->description }}</textarea>
                                    <label for="description">Description</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s3">
                                    <label class="label-custom" for="type">Property Purpose</label>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="purpose" value="sale" type="radio" {{ $property->purpose == 'sale' ? 'checked' : '' }} />
                                            <span>Sale</span>
                                        </label>
                                    </p>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="purpose" value="rent" type="radio" {{ $property->purpose == 'rent' ? 'checked' : '' }} />
                                            <span>Rent</span>
                                        </label>
                                    </p>
                                </div>
                                <div class="col s3">
                                    <label class="label-custom" for="purpose">Property Type</label>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="type" value="house" type="radio" {{ $property->type == 'house' ? 'checked' : '' }} />
                                            <span>House</span>
                                        </label>
                                    </p>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="type" value="apartment" type="radio" {{ $property->type == 'condo/co-op' ? 'checked' : '' }} />
                                            <span>Condo/Co-op</span>
                                        </label>
                                    </p>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="type" value="apartment" type="radio" {{ $property->type == 'townhome' ? 'checked' : '' }} />
                                            <span>Townhome</span>
                                        </label>
                                    </p>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="type" value="apartment" type="radio" {{ $property->type == 'apartment' ? 'checked' : '' }} />
                                            <span>Apartment</span>
                                        </label>
                                    </p>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="type" value="apartment" type="radio" {{ $property->type == 'multi-family' ? 'checked' : '' }} />
                                            <span>Multi-Family</span>
                                        </label>
                                    </p>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="type" value="apartment" type="radio" {{ $property->type == 'mobile/manufactured' ? 'checked' : '' }} />
                                            <span>Mobile/Manufactured</span>
                                        </label>
                                    </p>
                                    <p>
                                        <label>
                                            <input class="with-gap" name="type" value="apartment" type="radio" {{ $property->type == 'other' ? 'checked' : '' }} />
                                            <span>Other</span>
                                        </label>
                                    </p>
                                </div>
                                <div class="input-field col s6">
                                    <select multiple name="features[]">
                                        <option value="" disabled>Choose Features</option>
                                        @foreach($features as $feature)
                                            <option value="{{ $feature->id }}"
                                                    @foreach($property->features as $checked)
                                                        {{ ($checked->id == $feature->id) ? 'selected' : '' }}
                                                    @endforeach
                                            >{{ $feature->name }}</option>
                                        @endforeach
                                    </select>
                                    <label class="label-custom">Select Features</label>
                                </div>
                            </div>

                            <div class="row" id="image-crop-modal" style="display: none;">
                                <div class="col s12">
                                    <div id="image_demo"></div>
                                    <button type="button" class="btn {{ $site_theme }}" id="crop_image">Crop Image</button>
                                    <button type="button" class="btn white {{ $site_theme }}-text" id="crop_image_close">Close</button>
                                </div>
                            </div>

                            <div class="row">
                                <div class="file-field input-field col s9">
                                    <div class="btn {{ $site_theme }}">
                                        <span>Featured Image</span>
                                        <input id="upload_image_input" type="file" name="image_upload">
                                        <input id="hidden_image_input" type="hidden" name="image" class="form-control">
                                    </div>
                                    <div class="file-path-wrapper">
                                        <input class="file-path validate" type="text">
                                    </div>
                                </div>
                                <div class="file-field input-field col s3">
                                    @if(Storage::disk('public')->exists('property/'.$property->image) && $property->image )
                                        <img id="image_preview" src="{{Storage::url('property/'.$property->image)}}" alt="{{$property->title}}" class="responsive-img">
                                    @else
                                        <img id="image_preview" src="{{ asset('frontend/images/placeholder/placeholder-property-single-image.jpg') }}" alt="{{$property->title}}" class="responsive-img">
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s6">
                                    <i class="material-icons prefix">map</i>
                                    <input id="location_latitude" name="location_latitude" type="text" value="{{ $property->location_latitude }}" class="validate">
                                    <label for="location_latitude">Latitude</label>
                                </div>
                                <div class="input-field col s6">
                                    <i class="material-icons prefix">map</i>
                                    <input id="location_longitude" name="location_longitude" type="text" value="{{ $property->location_longitude }}" class="validate">
                                    <label for="location_longitude">Longitude</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s12">
                                    <i class="material-icons prefix">voice_chat</i>
                                    <input id="video" name="video" type="text" value="{{ $property->video }}" class="validate">
                                    <label for="video">Youtube Link</label>
                                </div>
                            </div>

                            <div class="row" id="floor-plan-image-crop-modal" style="display: none;">
                                <div class="col s12">
                                    <div id="floor_plan_image_demo"></div>
                                    <button type="button" class="btn {{ $site_theme }}" id="floor_plan_crop_image">Crop Image</button>
                                    <button type="button" class="btn white {{ $site_theme }}-text" id="floor_plan_crop_image_close">Close</button>
                                </div>
                            </div>

                            <div class="row">
                                <div class="file-field input-field col s9">
                                    <div class="btn {{ $site_theme }}">
                                        <span>Floor Plan</span>
                                        <input id="floor_plan_upload_image_input" type="file" name="floor_plan">
                                        <input id="floor_plan_hidden_image_input" type="hidden" name="floor_plan_image" class="form-control">
                                    </div>
                                    <div class="file-path-wrapper">
                                        <input class="file-path validate" type="text">
                                    </div>
                                </div>
                                <div class="file-field input-field col s3">
                                    @if(Storage::disk('public')->exists('property/'.$property->floor_plan) && $property->floor_plan )
                                        <img id="floor_plan_image_preview" src="{{Storage::url('property/'.$property->floor_plan)}}" alt="{{$property->title}}" class="responsive-img">
                                    @else
                                        <img id="floor_plan_image_preview" class="responsive-img">
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s12">
                                    <i class="material-icons prefix">place</i>
                                    <textarea id="nearby" name="nearby" class="materialize-textarea">{{ $property->nearby }}</textarea>
                                    <label for="nearby">Nearby</label>
                                </div>
                            </div>

                            @if($property->gallery)
                            <div class="row m-b-0">
                                @foreach($property->gallery as $gallery)
                                <div class="col m3 s6">
                                    <div class="gallery-image-edit" id="gallery-{{$gallery->id}}">
                                        <button type="button" data-id="{{$gallery->id}}" class="btn btn-small red"><i class="material-icons">delete_forever</i></button>
                                        <img class="responsive-img" src="{{Storage::url('property/gallery/'.$gallery->name)}}" alt="{{$gallery->name}}">
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @endif
                            <div class="row">
                                <div class="file-field input-field col s12">
                                    <div class="btn {{ $site_theme }}">
                                        <span>Upload Gallery Images</span>
                                        <input type="file" name="gallaryimage[]" multiple>
                                        <span class="helper-text" data-error="wrong" data-success="right">Upload one or more images</span>
                                    </div>
                                    <div class="file-path-wrapper">
                                        <input class="file-path validate" type="text" placeholder="Upload one or more images">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12 m-t-30">
                                    <button class="btn waves-effect waves-light btn-large {{ $site_theme }} darken-2" type="submit">
                                        Submit
                                        <i class="material-icons right">send</i>
                                    </button>
                                </div>
                            </div>

                        </form>


                    </div>
                </div> <!-- /.col -->

            </div>
        </div>
    </section>

@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('input#title, textarea#nearby').characterCounter();
        $('select').formSelect();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // DELETE PROPERTY GALLERY IMAGE
        $('.gallery-image-edit button').on('click',function(e){
            e.preventDefault();
            var id = $(this).data('id');
            var image = $('#gallery-'+id+' img').attr('alt');
            $.post("{{route('agent.gallery-delete')}}",{id:id,image:image},function(data){
                if(data.msg == true){
                    $('#gallery-'+id).parent().remove();
                    M.toast({html: 'Image deleted successfully.', classes:' darken-4'})
                }
            });

        });
    });

</script>

<!-- Image Crop Plugin Js -->
<script src="{{ asset('backend/plugins/croppie/croppie.js') }}"></script>

<script>
    $(function(){

        $('#crop_image_close').on('click', function(){
            $('#image-crop-modal').hide();
        });
        $('#floor_plan_crop_image_close').on('click', function(){
            $('#floor-plan-image-crop-modal').hide();
        });

        /**
         * Start the croppie image plugin
         */
        $image_crop = null;

        $('#upload_image_input').on('change', function(){

            $('#image-crop-modal').show();

            if(!$image_crop)
            {
                $image_crop = $('#image_demo').croppie({
                    enableExif: true,
                    mouseWheelZoom: false,
                    viewport: {
                        width:643,
                        height:429,
                        type:'square'
                    },
                    boundary:{
                        width:700,
                        height:450
                    }
                });
            }

            var reader = new FileReader();

            reader.onload = function (event) {

                $image_crop.croppie('bind', {
                    url: event.target.result
                }).then(function(){
                    console.log('jQuery bind complete');
                });

            }
            reader.readAsDataURL(this.files[0]);
        });

        $('#crop_image').click(function(event){

            $image_crop.croppie('result', {
                type: 'base64',
                size: 'viewport'
            }).then(function(response){
                $('#hidden_image_input').val(response);
                $('#image_preview').attr("src", response);
                $('#image-crop-modal').hide();
            });
        });
        /**
         * End the croppie image plugin
         */

        $floor_plan_image_crop = null;

        $('#floor_plan_upload_image_input').on('change', function(){

            $('#floor-plan-image-crop-modal').show();

            if(!$floor_plan_image_crop)
            {
                $floor_plan_image_crop = $('#floor_plan_image_demo').croppie({
                    enableExif: true,
                    mouseWheelZoom: false,
                    viewport: {
                        width:643,
                        height:429,
                        type:'square'
                    },
                    boundary:{
                        width:700,
                        height:450
                    }
                });
            }

            var reader = new FileReader();

            reader.onload = function (event) {

                $floor_plan_image_crop.croppie('bind', {
                    url: event.target.result
                }).then(function(){
                    console.log('jQuery bind complete');
                });

            }
            reader.readAsDataURL(this.files[0]);
        });

        $('#floor_plan_crop_image').click(function(event){

            $floor_plan_image_crop.croppie('result', {
                type: 'base64',
                size: 'viewport'
            }).then(function(response){
                $('#floor_plan_hidden_image_input').val(response);
                $('#floor_plan_image_preview').attr("src", response);
                $('#floor-plan-image-crop-modal').hide();
            });
        });
    })
</script>

@endsection