@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')
    {{-- Top row: Description (left) + Info (right) --}}
    <div class="col-lg-7">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">{{ $detail->name }}</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="text-size-small" style="margin-bottom: 15px;">
                    {!! nl2br($detail->description) !!}
                </div>

                @if (!empty($detail->file_1) || !empty($detail->file_2))
                    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                        @if (!empty($detail->file_1))
                            <div class="img-v" id="contain-{{ $detail->id }}-1" style="width: 60px; height: 60px;">
                                <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="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;" />
                                </a>
                            </div>
                        @endif
                        @if (!empty($detail->file_2))
                            <div class="img-v" id="contain-{{ $detail->id }}-2" style="width: 60px; height: 60px;">
                                <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="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;" />
                                </a>
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Informasi Tiket</h6>
            </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') }}</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>
                    @if (!empty($detail->cc) && count($detail->cc) > 0)
                        <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">
                                    @foreach ($detail->cc as $ccUser)
                                        {{ $ccUser->name }}{{ !$loop->last ? ', ' : '' }}
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Status:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">
                                <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>

    {{-- Follow Up section --}}
    <div class="col-lg-12">
        <div class="panel panel-white">
            <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 btn-default btn-sm">Tambah</button>
                    </a>
                </div>
            </div>

            <div class="panel-body no-padding">
                @forelse($follow_ups as $fu)
                    @php
                        $res = $fu->getResponse();
                        $creator = $fu->createdBy;
                    @endphp
                    <div class="fu-item" style="display: flex; align-items: flex-start; padding: 14px 20px; border-bottom: 1px solid #f5f5f5;">

                        {{-- Avatar --}}
                        <div style="flex-shrink: 0; margin-right: 14px; margin-top: 2px;">
                            @if (!empty($creator->getImage()))
                                <img src="{{ $creator->getImage() }}" alt="{{ $creator->name }}" style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover;" />
                            @else
                                <div
                                    style="width: 36px; height: 36px; border-radius: 50%; background-color: #e0e0e0;
                                    display: flex; align-items: center; justify-content: center;
                                    font-weight: 600; font-size: 14px; color: #666; text-transform: uppercase;">
                                    {{ mb_substr($creator->name, 0, 1) }}
                                </div>
                            @endif
                        </div>

                        {{-- Content --}}
                        <div style="flex: 1; min-width: 0;">
                            <div style="display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;">
                                <span class="text-semibold text-size-small">{{ $creator->name }}</span>
                                <span class="text-muted text-size-small">{{ date_format(date_create($fu->created), 'd M Y H:i') }}</span>
                            </div>
                            <div class="text-size-small {{ $fu->getTimingColor() }}" style="word-break: break-word;">
                                {!! nl2br($fu->notes) !!}
                            </div>

                            {{-- Attachments --}}
                            @if (!empty($fu->file_1) || !empty($fu->file_2))
                                <div style="display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;">
                                    @if (!empty($fu->file_1))
                                        <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="width: 50px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid #eee;" />
                                        </a>
                                    @endif
                                    @if (!empty($fu->file_2))
                                        <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="width: 50px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid #eee;" />
                                        </a>
                                    @endif
                                </div>
                            @endif
                        </div>

                        {{-- Actions --}}
                        <div style="flex-shrink: 0; margin-left: 10px;">
                            <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>
                        </div>
                    </div>
                @empty
                    <div style="padding: 30px; text-align: center;" class="text-muted text-size-small">
                        Belum ada data Follow Up.
                    </div>
                @endforelse
            </div>
        </div>
    </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