@extends('layout.main')
@section('title', 'Detail Lembar Kerja')

@section('prev-page')
    <a href="{{ route('dashboard') }}" class="text-default">
        <i class="icon-arrow-left52 position-left"></i>
        <span class="text-semibold">Home</span>
    </a> - <a href="{{ route('admin.report.daily') }}" class="text-default">
        <span class="text-semibold">Daftar Lembar Kerja</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-12">
        <div class="panel panel-white">
            <div class="panel-body">
                <div class="col-lg-6">
                    <div class="form-horizontal">
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">ID Lembar Kerja:</label>
                            <div class="col-lg-8">
                                <div class="form-control-static">{{ $detail->report_number }}</div>
                            </div>
                        </div>
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">Nama:</label>
                            <div class="col-lg-8">
                                <div class="form-control-static">{{ $detail->employee->name }}</div>
                            </div>
                        </div>
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">Hari Kerja:</label>
                            <div class="col-lg-8">
                                <div class="form-control-static">{{ \Carbon\Carbon::parse($detail->created)->locale('id')->translatedFormat('l, d M Y') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-horizontal">
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">Status:</label>
                            <div class="col-lg-8">
                                <a class="editable-status" data-type="select" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-value="{{ $detail->status }}" data-source="/status" data-title="Rubah Status"
                                    style="text-decoration: none;">
                                    <label class="label status-label-display" style="background-color:{{ $detail->status()->color }}; cursor: pointer;">
                                        {{ $detail->status()->name }}
                                    </label>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-12 panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Item Pekerjaan</h6>
            @if ($detail->status == 0)
                <div class="heading-elements">
                    <a href="{{ route('admin.report.daily.work.new', $detail->id) }}" data-toggle="modal" data-target="#modal-remote">
                        <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-plus3"></i></b> Tambah Item Pekerjaan</button>
                    </a>
                </div>
            @endif
        </div>

        <div class="table-responsive">
            <table class="table table-hover table-xxs text-size-small">
                <thead>
                    <tr>
                        <th>Kategori</th>
                        <th>Detail Pekerjaan</th>
                        <th>Durasi</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($detail->works as $work)
                        <tr>
                            <td>{{ $work->category->name }}</td>
                            <td>{!! nl2br($work->description) !!}</td>
                            <td>{{ $work->duration->value }}</td>
                            <td>
                                @if ($detail->status == 0)
                                    <ul class="icons-list text-nowrap">
                                        <li class="dropdown">
                                            <a class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu9"></i></a>
                                            <ul class="dropdown-menu dropdown-menu-right">
                                                <li><a href="{{ route('admin.report.daily.work.update', $work->id) }}" data-toggle="modal" data-target="#modal-remote">Rubah</a></li>
                                                <li>
                                                    <a href="{{ route('admin.report.daily.work.remove', $work->id) }}" onclick="return showMe(this, 'Apakah anda yakin akan menghapus item pekerjaan ini?');">
                                                        Hapus
                                                    </a>
                                                </li>

                                            </ul>
                                        </li>
                                    </ul>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted" style="padding: 20px;">Belum ada data Item Pekerjaan.</td>
                        </tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="2" class="text-right">Total</th>
                        <th>{{ round($detail->total_duration / 60, 2) }} jam</th>
                        <th></th>
                    </tr>
                </tfoot>
            </table>
        </div>

        @if (!empty($metadata->links))
            <div class="panel-footer text-center">
                {!! $metadata->links !!}
            </div>
        @endif
    </div>
@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/editable/editable.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/extensions/mockjax.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/media/fancybox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/gallery.js') }}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.6/jquery.lazy.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.6/jquery.lazy.plugins.min.js"></script>

    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.mockjax({
            url: '/status',
            status: 200,
            responseTime: 400,
            response: function(settings) {
                this.responseText = {!! $status_list !!};
            }
        });

        $.fn.editableform.template = '<form class="editableform">' +
            '<div class="control-group">' +
            '<div class="editable-input"></div> <div class="editable-buttons"></div>' +
            '<div class="editable-error-block"></div>' +
            '</div> ' +
            '</form>';
        $.fn.editableform.buttons =
            '<button type="submit" class="btn btn-primary btn-icon editable-submit"><i class="icon-check"></i></button>' +
            '<button type="button" class="btn btn-default btn-icon editable-cancel"><i class="icon-x"></i></button>';

        $('[data-popup="lightbox"]').fancybox({
            padding: 3
        });

        (function($) {
            $.Lazy('examplePlugin', function(element, response) {
                var img = $('#' + element.context.id).data('src');
                $('#' + element.context.id).attr('src', img);
                response(true);
            });
        })(window.jQuery || window.Zepto);
        $('.lazy').Lazy();

        $(".editable-status").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.report.daily.update.status') }}",
            display: function(value, sourceData) {},
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Status tidak boleh kosong";
            },
            error: function(response, newValue) {
                return "Terjadi kesalahan. Harap coba lagi nanti.";
            },
            success: function(response, newValue) {
                if (response.status === "success") {
                    $(this).find('.status-label-display').text(response.data.name);
                    $(this).find('.status-label-display').css('background-color', response.data.color);

                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-success"
                    });

                    setTimeout(function() {
                        location.reload();
                    }, 500);
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }
            },
        });

        function showMe(element, message) {
            var ele = $(element);
            swal({
                title: message,
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya!',
                cancelButtonText: 'Tidak',
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) location.href = ele.attr('href');
            });
            return false;
        };
    </script>
@endsection