@extends('layouts.master-vnext')

@section('page-title')
<i class="fa fa-bed"></i> Check in
@endsection

@section('content')

@include('common.errors')

<div class="row">

    <div class="col-md-6">
        {{ Form::open(array('url' => action("Guest\CheckInController@doCheckIn"))) }}

        <div class="row">
            <div class="col-md-6 form-group">
                <label for="guests">Guest</label>
                <select name="guests" id="guests" class="form-control ajax-driven-guest-selection">
                </select>
            </div>
            <div class="col-md-6">
                <label>&nbsp;</label>
                <a href="#" class="btn btn-default form-control" id="create-new-guest">
                    <i class="fa fa-user-plus"></i> Reset selection
                </a>
            </div>
        </div>

        <hr />

        <div class="row" id="guest-data">
            <div class="col-md-6">
                {{ Form::customText('firstName') }}
            </div>
            <div class="col-md-6">
                {{ Form::customText('lastName') }}
            </div>
        </div>

        <hr />

        <div class="row">
            <div class="col-md-3">
                {{ Form::customText('arrival', $defaults['arrival'], ['class' => 'form-control datetimepicker-control']) }}
            </div>

            <div class="col-md-3">
                {{ Form::customText('departure', $defaults['departure'], ['class' => 'form-control datetimepicker-control']) }}
            </div>

            <div class="col-md-2">
                {{ Form::customText('numberOfNights', $defaults['numberOfNights']) }}
            </div>

            <div class="col-md-2">
                {{ Form::customText('noLimitDiving', $defaults['noLimitDiving']) }}
            </div>

            <div class="col-md-2">
                {{ Form::customSelect('room', $rooms->pluck('name', 'id')) }}
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="hasBreakfast" name="hasBreakfast" value="true" {{ $defaults['hasBreakfast'] ? 'checked' : '' }}> Breakfast
                    </label>
                </div>
            </div>

            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="isRepeater" name="isRepeater" value="true" {{ $defaults['isRepeater'] ? 'checked' : '' }}> Repeater
                    </label>
                </div>
            </div>

            <div class="col-md-3">
                {{ Form::customSelect('bookingType', $bookingTypes->pluck('name', 'id'), $bookingTypes->first()->id) }}
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                {{ Form::customSubmit('Check in') }}
            </div>
        </div>

        {{ Form::close() }}
    </div>

    <div class="col-md-6">
    </div>
</div>

@endsection

@section('js')
<script type="text/javascript">

function formatResult(item) {
    if(!item.id) return item.text;

    var resultHtml = '<div class="autocomplete-result-item">';
    resultHtml += '<div class="row">';
    resultHtml += '<div class="col-md-12"><div class="title">' + item.lastName + ', ' + item.firstName + '</div></div>';
    resultHtml += '</div>';

    var history = '';
    if( item.lastVisits )
    {
        resultHtml += '<div class="guest-history">';
        $.each(item.lastVisits, function(idx, visit) {
            resultHtml += '<div class="row">';
            resultHtml += '<div class="col-md-10">' + visit.from + ' - ' + visit.to + '</div>';
            resultHtml += '<div class="col-md-2">' + visit.room + '</div>';
            resultHtml += '</div>';
        });
        resultHtml += '</div>';
    }
    else
    {
        history = '-';
    }

    resultHtml += '</div>';

    return resultHtml;
}

function formatSelection(item) {
    if(!item.id) return item.text;

    return "<div>" + item.lastName + ', ' + item.firstName + "</div>";
}

var $guestSelector = $(".ajax-driven-guest-selection").selectize({
    valueField: 'id',
    labelField: 'lastName',
    searchField: ['lastName', 'firstName'],
    create: false,
    render: {
        option: function(item, escape) {
            return formatResult(item);
        },
        item: function (item, escape) {
            return formatSelection(item);
        }
    },
    @if(old('guests'))
    onInitialize: function() {

        $.ajax({
            url: '{{ action("Api\Guest\ContactController@show", ['id' => old('guests')]) }}',
            type: 'GET',
            success: function(res) {
                var item = $.parseJSON(res);

                $guestSelector[0].selectize.addOption(item)
                $guestSelector[0].selectize.setValue({{ old('guests') }}, false);
            }
        });

    },
    @endif
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: '{{ action("Api\Guest\ContactController@autocomplete") }}' + '?q=' + escape(query),
            type: 'GET',
            error: function() {
                callback();
            },
            success: function(res) {
                callback($.parseJSON(res));
            }
        });
    },
    onItemAdd: function (value, $item) {
        var selectedItem = this.options[value];

        $('#lastName').val(selectedItem.lastName);
        $('#firstName').val(selectedItem.firstName);
    }
});

    $('#create-new-guest').on('click', function(event) {
        $guestSelector[0].selectize.clear();
        $('#guest-data input').val('');
        event.preventDefault();
    });
</script>
@endsection