@extends('layouts.admin')
@section('title')
Edit Accommodation | Accommodations Management
@endsection
@section('content')
    <div class="pms-container mt-3">
        <div class="row">
            <div class="col s12">
                <h4 class="black-text">
                    <i class="small material-icons left red-text">brightness_1</i>Edit Accommodation
                </h4>
            </div>
        </div>
    </div>
    <div class="pms-container mt-3">
        <div class="card-panel mb-3">
            <form action="{{route('admin.accommodations.update',$accommodation->AccommodationId)}}" method="post" autocomplete="off" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row">
                    <ul class="tabs">
                        <li class="tab col s3"><a href="#form1">General Information</a></li>
                        <li class="tab col s3"><a href="#form2">Hotel Information</a></li>
                        <li class="tab col s3"><a href="#form3">Location Information</a></li>
                        <li class="tab col s3"><a href="#form4">Hotel Description</a></li>
                    </ul>
                    @include('admin.accommodations.edit-form-steps.step-1')
                    @include('admin.accommodations.edit-form-steps.step-2')
                    @include('admin.accommodations.edit-form-steps.step-3')
                    @include('admin.accommodations.edit-form-steps.step-4')
                </div>
            </form>
        </div>
    </div>
    @component('admin.includes.loader')
    @endcomponent
@endsection

@section('js')
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFOaKnzwZPMo6ukg1sfhLXxY50bA83Qdo&callback=initMap&libraries=places">
        </script>
    <script>
        $(document).ready(function(){

            //get the tabs instance so we can change tabs with prev/next buttons.
            var tabs = M.Tabs.getInstance(document.querySelector('.tabs'));

            //Manually select a tab.
            $('.tab-trigger').click(function(e){
                e.preventDefault();
                var tab = e.target.getAttribute('data-target');
                tabs.select(tab);

                //scroll to top.
                window.scrollTo(0,0);
            });

            //we will get cities for specified country with ajax.
            $('#country').change(function(e){
                var id = $(this).find(":selected").val();
                getCities(id,getEl('#city'),'');
            });

            $('#accommodation_images').change(function(e){
                previewContainer = $('#previewContainer');

                previewContainer.html('');
                fileCount = parseInt($(this).get(0).files.length);

                if (fileCount > 10) {
                    var modal = M.Modal.getInstance($('#imageLimitAlert')[0]);
                    //open the alert modal.
                    modal.open();

                    //clear all the input values
                    $(this).val("");

                    //remove all the preview images
                    previewContainer.html('');
                }
                previewMultipleImages(this,'#previewContainer');
            });

            @if(old('country'))
                getCities({{old('country')}},getEl('#city'),'');
            @else
                getCities({{$accommodation->country->CountryId}},getEl('#city'),{{$accommodation->city->AddressId}});
            @endif

            $('.delete-image').click(function(e){
                e.preventDefault();
                deleteImage(e.currentTarget);
            });
        });

        /**
         * Preview multiple images before upload.
         *
         * @param {*} input file input element
         * @param {*} element where we will inject multiple img elements
         */
        function previewMultipleImages(input,previewContainer)
        {
            if (input.files) {
                var fileCount = input.files.length;
                for (i = 0; i < fileCount; i++) {

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        //append img elements to previewContainer
                        $($.parseHTML('<img>'))
                            .attr('src',event.target.result)
                            .attr('width','200px')
                            .attr('height','200px')
                            .css('margin','5px')
                            .appendTo(previewContainer);
                    }
                    reader.readAsDataURL(input.files[i]);

                }
            }
        }

        /**
         * Delete an accommodation image.
         *
         * @param {*} id primary key of the acommodationImage model
         */
        function deleteImage(image)
        {
            var id = $(image).attr('data-id');

            $('#loader').addClass('active');

            fetch('/admin/accommodations/images/'+id,{
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
                }
            })
            .then(function(res){
                return res.json();
            })
            .then(function(res){
                $('#loader').removeClass('active');
                if (res.status) {
                    $('.image[data-id='+id+']').remove();
                    M.toast({html: res.msg})
                }
            })
            .catch(function(err){
                $('#loader').removeClass('active');
                console.log(err);
            });
        }

        /**
         * Callback used in google maps api.
         */
        function initMap() {
            var lat = $('#latitude');
            var lng = $('#longitude');

            lat.val('{{$accommodation->Latitude}}');
            lng.val('{{$accommodation->Longitude}}');
            M.updateTextFields();

            var myLatlng = {lat: {{$accommodation->Latitude}}, lng: {{$accommodation->Longitude}}};

            map = new google.maps.Map(document.getElementById('map'), {
                center: myLatlng,
                zoom: 8
            });

            var marker = new google.maps.Marker({
                position: myLatlng,
                draggable: true,
                map: map,
                title: 'Click to zoom'
            });

            marker.addListener('click',function(){
                lat.val(marker.getPosition().lat());
                lng.val(marker.getPosition().lng());
                M.updateTextFields();
            });
        }
    </script>
@endsection