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

@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.leave') }}" class="text-default">
        <span class="text-semibold">Pengajuan Cuti/Izin</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-8 col-lg-offset-2">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Detail Pengajuan</h6>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Pegawai:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->creator->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Kategori:</label>
                        <div class="col-lg-10">
                            <span class="label" style="background-color: {{ $detail->leave_type->color }};">{{ $detail->leave_type->name }}</span>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Tanggal:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ date_format(date_create($detail->leave_date), 'd F Y') }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Keterangan:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{!! nl2br(e($detail->description)) !!}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">File:</label>
                        <div class="col-lg-10">
                            @if (!empty($detail->file))
                                <a href="{{ $detail->file }}" data-popup="lightbox">
                                    <img src="{{ $detail->file }}" alt="" class="img-responsive" style="max-height: 120px; max-width: 100%; object-fit: cover; border: 1px solid #ddd; border-radius: 3px;" />
                                </a>
                            @else
                                <div class="form-control-static">-</div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Status:</label>
                        <div class="col-lg-10">
                            @if ($canQuickEditStatus)
                                <a class="editable-status" data-type="select" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-value="{{ $detail->status->id }}" 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>
                            @else
                                <span class="label" style="background-color: {{ $detail->status->color }};">{{ $detail->status->name }}</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($canReview)
            <div class="panel panel-white">
                <div class="panel-heading">
                    <h6 class="panel-title">Review Manajemen</h6>
                    <div class="heading-elements">
                        <a href="{{ route('admin.leave.review.new', $leaveId) }}" data-toggle="modal" data-target="#modal-remote">
                            <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-pencil"></i></b> Berikan Review</button>
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    @forelse ($reviews as $review)
                        <div class="media">
                            <div class="media-body">
                                <p class="no-margin">{!! nl2br(e($review->review)) !!}</p>
                                <span class="text-muted text-size-small">Oleh {{ $review->creator->name }} {{ date_format(date_create($review->created), 'd M Y H:i') }}</span>
                            </div>
                        </div>
                        @if (!$loop->last)
                            <hr />
                        @endif
                    @empty
                        <p class="text-muted no-margin">Belum ada review.</p>
                    @endforelse
                </div>
            </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>

    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <script type="text/javascript">
        $('[data-popup="lightbox"]').fancybox({
            padding: 3
        });
    </script>

    @if ($canQuickEditStatus)
        <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>';

            $(".editable-status").editable({
                container: 'body',
                clear: false,
                mode: "popup",
                placement: function() {
                    return $(window).width() < 768 ? "bottom" : "right";
                },
                send: "always",
                highlight: false,
                url: "{{ route('admin.leave.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"
                        });
                    }
                },
            });
        </script>
    @endif
@endsection