@extends('layout.main')
@section('title', 'Daftar 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>
@endsection

@section('content')
    <div class="navbar navbar-default navbar-component navbar-xs marg-bot">
        <ul class="nav navbar-nav visible-xs-block">
            <li class="full-width text-center">
                <a data-toggle="collapse" data-target="#navbar-filter"><i class="icon-menu7"></i></a>
            </li>
        </ul>
        <div class="navbar-collapse collapse" id="navbar-filter">
            <ul class="nav navbar-nav">
                <li @if (!isset($input->status)) {!! 'style="background-color: #BBB !important;"' !!} @endif>
                    <a href="{{ route('admin.ticket') }}">Semua</a>
                </li>
                @foreach ($status_list as $stat)
                    <li @if (isset($input->status) && $input->status == $stat->id) {!! 'style="background-color: #BBB !important;"' !!} @endif>
                        <a href="{{ route('admin.ticket') }}?status={{ $stat->id }}">
                            <span data-popup="tooltip" title="{{ $stat->name }}" data-placement="bottom">
                                {{ $stat->name }}
                                @if ($stat->count > 0)
                                    <span class="label" style="background-color: {{ $stat->count_bg }}">{{ $stat->count }}</span>
                                @endif
                            </span>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

    <div class="panel panel-flat">
        <div class="table-responsive">
            <table class="table table-bordered table-xxs">
                <thead>
                    <tr class="active">
                        <th style="width: 50%;">Tiket Outstanding</th>
                        <th style="width: 50%;">Tiket Selesai Bulan Ini</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $summary->outstanding }}</td>
                        <td>{{ $summary->done_this_month }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    @php
        $panel_collapse = !empty($input->key) ? '' : 'panel-collapsed';
    @endphp
    <div class="panel panel-flat {{ $panel_collapse }}">
        <div class="panel-heading">
            <h6 class="panel-title">Cari Berdasarkan</h6>
            <div class="heading-elements">
                <ul class="icons-list">
                    <li><a data-action="collapse"></a></li>
                </ul>
            </div>
        </div>
        <div class="panel-body">
            <form action="{{ route('admin.ticket') }}" method="GET" class="form-horizontal">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="key">Kata Kunci</label>
                            <div class="col-lg-9">
                                <input type="text" name="key" id="key" value="{{ $input->key ?? '' }}" placeholder="ID Tiket atau Judul" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label class="col-lg-3 control-label">PIC</label>
                        <div class="col-lg-9">
                            <select name="pic" id="pic" class="form-control select-search">
                                <option value="">-- Pilih PIC --</option>
                                @foreach ($pic_list as $pic)
                                    <option value="{{ $pic->id }}" @if (!empty($input->pic) && $input->pic == $pic->id) {{ 'selected' }} @endif>
                                        {{ $pic->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-12 text-right">
                        <input type="hidden" name="status" value="{{ $input->status ?? '' }}" />
                        <button type="submit" class="btn btn-default">Cari</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Daftar Tiket</h6>
            <div class="heading-elements">
                <a href="{{ route('admin.ticket.new') }}" data-toggle="modal" data-target="#modal-remote">
                    <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-plus3"></i></b> Tambah Tiket</button>
                </a>
            </div>
        </div>

        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-hover table-xxs text-size-small">
                    <thead>
                        <tr>
                            <th style="width: 150px;">ID Tiket</th>
                            <th class="text-center">Hari</th>
                            <th>Judul</th>
                            <th>PIC</th>
                            <th>Follow-Up</th>
                            <th>Status</th>
                            <th>Follow up Terakhir</th>
                            <th class="text-center">Lampiran</th>
                            <th class="text-center" style="width: 30px;"><i class="icon-menu-open2"></i></th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $currentUser = session('user');
                        @endphp
                        @forelse($tickets as $ticket)
                            @php $res = $ticket->getResponse(); @endphp
                            <tr>
                                <td>
                                    <a href="{{ route('admin.ticket.detail', $ticket->id) }}" class="text-semibold">
                                        {{ $res->ticket_number }}
                                    </a><br />
                                    <span class="text-muted">{{ date_format(date_create($res->created), 'd M Y H:i') }}</span>
                                </td>
                                <td class="text-center">{{ $ticket->getAgeInDays() }}</td>
                                <td>{{ $res->name }}</td>
                                <td>
                                    {{ $res->pic->name }}
                                    @if (!empty($res->cc))
                                        <div class="text-muted text-size-small" style="margin-top: 2px;">
                                            CC:
                                            @foreach ($res->cc as $ccUser)
                                                {{ $ccUser->name }}{{ !$loop->last ? ',' : '' }}
                                            @endforeach
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    @if ($ticket->created_by == $currentUser->id && !empty($ticket->period))
                                        <span class="text-muted">{{ $ticket->period }} hari</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="label" style="background-color: {{ $res->status->color }}">
                                        {{ $res->status->name }}
                                    </span>
                                </td>
                                <td>
                                    @if ($ticket->isFollowUpOverdue())
                                        <span class="label" style="background-color: orange;">
                                            Tiket ini butuh update progress terbaru
                                        </span>
                                    @elseif ($ticket->latestFollowUp)
                                        <span class="{{ $ticket->getFollowUpColor() }}" data-popup="tooltip" data-placement="left"
                                            title="{{ $ticket->latestFollowUp->created_ago . ' oleh ' . $ticket->latestFollowUp->createdBy->name . ': ' . $ticket->latestFollowUp->notes }}">
                                            {{ $ticket->latestFollowUp->created_ago }} oleh @include('admin.ticket.user_label', ['labelUser' => $ticket->latestFollowUp->createdBy]): {{ mb_strimwidth($ticket->latestFollowUp->notes, 0, 50, '...') }}
                                        </span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if (!empty($ticket->file_1))
                                        <a href="{{ asset($ticket->file_1) }}" data-popup="lightbox"><i class="icon-file-picture"></i></a>
                                    @endif
                                    @if (!empty($ticket->file_2))
                                        <a href="{{ asset($ticket->file_2) }}" data-popup="lightbox" class="ml-5"><i class="icon-file-picture"></i></a>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if ($ticket->isManageableBy($currentUser->id))
                                        <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', $ticket->id) }}" data-toggle="modal" data-target="#modal-remote-lg">Rubah</a></li>
                                                    <li><a href="{{ route('admin.ticket.remove', $ticket->id) }}" onclick="return confirmRemoveTicket(this, '{{ $res->ticket_number }}');">Hapus</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted" style="padding: 20px;">Belum ada data tiket.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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

@section('other-scripts')
    <style>
        .tooltip-inner {
            max-width: 400px;
            text-align: left;
            white-space: pre-wrap;
            word-break: break-word;
        }
    </style>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/media/fancybox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/gallery.js') }}"></script>
    <script>
        $('[data-popup="lightbox"]').fancybox({
            padding: 3
        });

        function confirmRemoveTicket(element, ticketNumber) {
            var ele = $(element);
            swal({
                title: "Apakah anda yakin akan menghapus tiket " + ticketNumber + "?",
                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