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

@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.ticket') }}" class="text-default">
        <span class="text-semibold">Daftar Tiket</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-6">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Informasi</h6>
                <div class="heading-elements">
                    <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.ticket.update', $detail->id) }}" data-toggle="modal" data-target="#modal-remote-lg">Rubah</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">ID Tiket:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">{{ $detail->ticket_number }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Waktu Dibuat:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">{{ date_format(date_create($detail->created), 'd M Y H:i:s') }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Kategori:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">{{ $detail->category->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">PIC:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">{{ $detail->pic->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">CC:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">
                                @if (!empty($detail->cc))
                                    @foreach ($detail->cc as $index => $ccUser)
                                        {{ $ccUser->name }}{{ !$loop->last ? ',' : '' }}
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                    <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->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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Deskripsi</h6>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <div class="col-lg-12">
                            <div class="form-control-static">{!! nl2br($detail->description) !!}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin-top no-margin-left no-margin-right">
                        <div class="col-lg-2">
                            @if (!empty($detail->file_1))
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="img-v" id="contain-{{ $detail->id }}-1">
                                    <a href="{{ $detail->file_1 }}" data-popup="lightbox" rel="gallery">
                                        <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $detail->file_1 }}" id="box-{{ $detail->id }}-1" data-loader="examplePlugin" alt="" class="img-responsive lazy"
                                            style="max-height: 100%; max-width: 100%; object-fit: cover;" />
                                    </a>
                                </div>
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="lazy" data-loader="asyncLoader"></div>
                            @endif
                        </div>
                        <div class="col-lg-2">
                            @if (!empty($detail->file_2))
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="img-v" id="contain-{{ $detail->id }}-2">
                                    <a href="{{ $detail->file_2 }}" data-popup="lightbox" rel="gallery">
                                        <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $detail->file_2 }}" id="box-{{ $detail->id }}-2" data-loader="examplePlugin" alt="" class="img-responsive lazy"
                                            style="max-height: 100%; max-width: 100%; object-fit: cover;" />
                                    </a>
                                </div>
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="lazy" data-loader="asyncLoader"></div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-12 panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Follow Up</h6>
            <div class="heading-elements">
                <a href="{{ route('admin.ticket.fu.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 Follow Up</button>
                </a>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover table-xxs text-size-small">
                <thead>
                    <tr>
                        <th style="width: 150px;">Oleh</th>
                        <th>Catatan</th>
                        <th>Waktu</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($follow_ups as $fu)
                        @php $res = $fu->getResponse(); @endphp
                        <tr>
                            <td>{{ $fu->createdBy->name }}</td>
                            <td>
                                <div class="follow-up-container" style="white-space: nowrap;">
                                    <div class="notes-wrapper {{ $fu->getTimingColor() }}" style="display: inline-block; vertical-align: middle; white-space: normal;">
                                        {!! nl2br($fu->notes) !!}
                                    </div>

                                    <div class="images-wrapper" style="display: inline-block; vertical-align: middle; margin-left: 10px;">
                                        @if (!empty($fu->file_1))
                                            <div class="img-v" id="contain-follow-up-{{ $fu->id }}-1" style="display: inline-block;">
                                                <a href="{{ $res->file_1 }}" data-popup="lightbox" rel="gallery">
                                                    <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $res->file_1 }}" id="box-follow-up-{{ $fu->id }}-1" data-loader="examplePlugin" alt=""
                                                        class="img-responsive lazy" style="max-height: 30px; max-width: 50px; object-fit: cover; display: inline-block;" />
                                                </a>
                                            </div>
                                        @endif

                                        @if (!empty($fu->file_2))
                                            <div class="img-v" id="contain-follow-up-{{ $fu->id }}-2" style="display: inline-block; margin-left: 5px;">
                                                <a href="{{ $res->file_2 }}" data-popup="lightbox" rel="gallery">
                                                    <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $res->file_2 }}" id="box-follow-up-{{ $fu->id }}-2" data-loader="examplePlugin" alt=""
                                                        class="img-responsive lazy" style="max-height: 30px; max-width: 50px; object-fit: cover; display: inline-block;" />
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td><span class="{{ $fu->getTimingColor() }}">{{ date_format(date_create($fu->created), 'd M Y H:i:s') }}</span></td>
                            <td>
                                <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.ticket.fu.update', $fu->id) }}" data-toggle="modal" data-target="#modal-remote">Rubah</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted" style="padding: 20px;">Belum ada data Follow Up.</td>
                        </tr>
                    @endforelse
                </tbody>
            </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.ticket.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"
                    });
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }
            },
        });
    </script>
@endsection