@extends('layouts.admin')
@section('title')
Create Accommodation | Accommodations Management
@endsection
@section('css')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    <style>

        /**
 * FilePond Custom Styles
 */
        .filepond--drop-label {
            color: #4c4e53;
        }

        .filepond--label-action {
            text-decoration-color: #babdc0;
            margin-left: 20px;
        }

        .filepond--panel-root {
            border-radius: 2em;
            background-color: #edf0f4;
            height: 1em;
        }

        .filepond--item-panel {
            background-color: #595e68;
        }

        .filepond--drip-blob {
            background-color: #7f8a9a;
        }

        .filepond--item{
            width: 200px;
            display: inline-block;
            height: 200px !important;
        }


        .btn-file {
            position: relative;
            background: #2196F3;
            overflow: hidden;
        }

        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }

        .imageThumb {
            max-height: 75px;
            border: 2px solid;
            padding: 1px;
            cursor: pointer;
        }
        .pip {
            display: inline-block;
            margin: 10px 10px 0 0;
        }
        .remove {
            display: block;
            background: #444;
            border: 1px solid black;
            color: white;
            text-align: center;
            cursor: pointer;
        }
        .remove:hover {
            background: white;
            color: black;
        }
    </style>
@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>Create Accommodation
                </h4>
            </div>
        </div>
    </div>
    <div class="pms-container mt-3">
        <div class="card-panel mb-3">
            <form id="acc-create-form" action="{{route('admin.accommodations.store')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                @csrf
                <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.create-form-steps.step-1')
                    @include('admin.accommodations.create-form-steps.step-2')
                    @include('admin.accommodations.create-form-steps.step-3')
                    @include('admin.accommodations.create-form-steps.step-4')
                </div>
            </form>
        </div>
    </div>
    <div id="imageLimitAlert" class="modal">
        <a href="#" class="modal-close-btn modal-close">
            <i class="material-icons grey-text">close</i>
        </a>
        <div class="modal-content">
            <h5 class="red-text center">Only 10 Images are allowed to upload.</h5>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-light btn-flat blue-text">Close</a>
        </div>
    </div>
    @component('admin.includes.loader')
    @endcomponent
    {{--@TODO: show the map for long/lat--}}
@endsection

@section('js')
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFOaKnzwZPMo6ukg1sfhLXxY50bA83Qdo&callback=initMap&libraries=places">
        </script>
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>

    <script>
        $(document).ready(function(){
            //get the tabs instance so we can change tabs with prev/next buttons.
            var tabs = M.Tabs.getInstance(getEl('.tabs'));

            $('.tab-trigger').click(function(e){
                e.preventDefault();
                var tab = e.target.getAttribute('data-target');
                tabs.select(tab);
                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'),'');
            });

            //set the image preview when file input's state
            //has changed.
            $('#accommodation_logo').change(function(e){
                readURL(this);
            });
        });

        /**
         * Image preview with FileReader.
         *
         * @param {*} input file input element
         */
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#logo_preview').attr('src', e.target.result);
                }

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

        var map;

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

            lat.val('-34.397');
            lng.val('150.644');
            M.updateTextFields();

            var myLatlng = {lat: -34.397, lng: 150.644};

            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('dragend',function(){
                lat.val(marker.getPosition().lat());
                lng.val(marker.getPosition().lng());
                M.updateTextFields();
            });
        }

        FilePond.registerPlugin(
            FilePondPluginImagePreview,
            FilePondPluginFileValidateSize,
            FilePondPluginFileValidateType,
            FilePondPluginFileEncode,
        );

        const inputElement = document.querySelector('#accommodation_images');
        const pond = FilePond.create( inputElement , {
            acceptedFileTypes: ['image/jpeg'],
            labelIdle: 'ACCOMMODATION IMAGES <span class="filepond--label-action">Browse</span>',
            fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
                resolve(type);
            }),
            imageValidateSizeMinWidth: '1300',
            imageValidateSizeMinHeight: '1300',
            imageValidateSizeLabelImageSizeTooSmall: 'Image is too small',
            imageValidateSizeLabelExpectedMinSize: 'Minimum size is 1300 × 1300'
        });
    </script>
@endsection