@extends('layouts.user')
{{-- Web site Title --}}
@section('title')
@stop

{{-- Content --}}
@section('content')
    @component('components.modal', ['modalId' => 'serviceEditModal', 'title' => 'Edit service status', 'footerSave' => true])
        @slot('body')
        <form action="{{ url('employee-services') }}" method="POST">
            <div class="form-group">
                <label for="serviceCompleted">{{ trans('employee_services.completed') }}</label>
                <input name="service_completed" id="serviceCompleted" type="checkbox">
            </div>

            <div class="form-group">
                <label for="serviceComment">{{ trans('employee_services.actions') }}</label>
                <textarea name="service_comment" id="serviceComment" class="form-control" cols="30" rows="5"></textarea>
            </div>
        </form>
        @endslot
    @endcomponent

    @component('components.panel', ['titleBlock' => false])
        <div class="row">
            <form class="form" method="GET" action="{{ url('employee-services') }}">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="start">{{ trans('employee_services.from') }}</label>
                        <input type="text" name="start" value="{{ request()->start }}" id="start" class="form-control">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="end">{{ trans('employee_services.to') }}</label>
                        <input type="text" name="end" value="{{ request()->end }}" id="end" class="form-control">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mt-instead-label">
                        <button type="submit" class="btn btn-primary">{{ trans('employee_services.filter') }}</button>
                        <a href="{{ url('employee-services') }}" class="btn btn-danger">{{ trans('employee_services.clear_filter') }}</a>
                    </div>
                </div>
            </form>
        </div>
    @endcomponent

    @component('components.panel', ['title' => str_plural(trans('employee_services.service'))])
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>Id</td>
                    <td>{{ trans('employee_services.service') }}</td>
                    <td>{{ trans('employee_services.date') }}</td>
                    <td>{{ trans('employee_services.user') }}</td>
                    <td>{{ trans('employee_services.apartment') }}</td>
                    <td>{{ trans('employee_services.completed') }}</td>
                    <td>{{ trans('employee_services.comment') }}</td>
                    <td>{{ trans('employee_services.actions') }}</td>
                </tr>
            </thead>
            <tbody>
            @foreach($reservationServices as $reservationService)
                <tr data-service-date-id="{{ $reservationService->reservation_service_date_id }}">
                    <td>{{ $reservationService->reservation->id }}</td>
                    <td>{{ $reservationService->service->name }}</td>
                    <td>{{ $reservationService->date }}</td>
                    <td>{{ $reservationService->user->full_name }}</td>
                    <td>{{ $reservationService->reservation->apartment->name }}</td>
                    <td data-status="completed">{{ $reservationService->completed ? 'Yes' : 'No' }}</td>
                    <td data-comment="comment">{{ $reservationService->user_comment }}</td>
                    <td>
                        <button class="btn btn-success btn-xs"
                                data-link="{{ url('employee-services', ['id' => $reservationService->id]) }}"
                                data-action="edit"
                                data-service-date-id="{{ $reservationService->id }}"
                        ><i class="fa fa-gears"></i></button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    @endcomponent
@stop

{{-- Scripts --}}
@section('scripts')
<script>
    var serviceDateId;
    var serviceDateTr;
    $('button[data-action="edit"]').click(function(){
        var button = $(this);
        var icon = button.find('i.fa');
            icon.removeClass('fa-gears').addClass('fa-spinner fa-spin');

        var serviceShowUrl = button.data('link');
            serviceDateId = button.data('service-date-id');
            serviceDateTr = button.closest('tr');

        $.get(serviceShowUrl, function (data) {
            $('#serviceCompleted').prop('checked', data.completed);
            $('#serviceComment').val(data.user_comment);

            icon.removeClass('fa-spinner fa-spin').addClass('fa-gears');

            $('#serviceEditModal').modal('show');
        });
    });

    var serviceStoreUrl = '{{ url('employee-services') }}';
    $('#modalSaveButton').click(function () {
        var serviceData = {
            'id': serviceDateId,
            'completed': $('#serviceCompleted').is(":checked") ? 1 : 0,
            'user_comment': $('#serviceComment').val()
        };

        $.post(serviceStoreUrl, serviceData, function (data) {
            var status = parseInt(data.completed) ? 'Yes' : 'No';
            var comment = data.user_comment !== null ? data.user_comment : '';

            $(serviceDateTr).find('td[data-status="completed"]').text(status);
            $(serviceDateTr).find('td[data-comment="comment"]').text(comment);

            $('#serviceEditModal').modal('hide');
        });
    });

    var dateFormat = '{{ isset($jquery_date)?$jquery_date:"YYYY-MM-DD" }}';
    $('#start,#end').datetimepicker({
        format: dateFormat,
        icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-arrow-up",
            down: "fa fa-arrow-down"
        }
    });
</script>
@stop