@extends('layout.main')
@section('title', 'Dashboard Page')

@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')

    {{-- ── Panel Report Harian ────────────────────────────────────────────── --}}
    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Report Harian</h6>
            <div class="heading-elements">
                <a href="{{ route('admin.report.daily') }}" class="btn btn-primary btn-xs heading-btn">
                    Lihat Semua <i class="icon-arrow-right13 position-right"></i>
                </a>
            </div>
        </div>
        <div class="panel-body no-padding">
            <div class="row no-margin">
                <div class="col-xs-6 col-sm-3 dashboard-stat-cell">
                    <div class="dashboard-stat-number">{{ $reportStats->total }}</div>
                    <div class="dashboard-stat-label">Total Bulan Ini</div>
                </div>
                <div class="col-xs-6 col-sm-3 dashboard-stat-cell">
                    <div class="dashboard-stat-number">{{ $reportStats->draft }}</div>
                    <div class="dashboard-stat-label">Draft</div>
                </div>
                <div class="col-xs-6 col-sm-3 dashboard-stat-cell">
                    <div class="dashboard-stat-number">{{ $reportStats->submitted }}</div>
                    <div class="dashboard-stat-label">Submitted</div>
                </div>
                <div class="col-xs-6 col-sm-3 dashboard-stat-cell" style="border-right: none;">
                    <div class="dashboard-stat-number">{{ $reportStats->avg_hours }}</div>
                    <div class="dashboard-stat-label">Rataan Jam / Hari</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Panel Tiket ─────────────────────────────────────────────────────── --}}
    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Tiket</h6>
            <div class="heading-elements">
                <a href="{{ route('admin.ticket') }}" class="btn btn-primary btn-xs heading-btn">
                    Lihat Semua <i class="icon-arrow-right13 position-right"></i>
                </a>
            </div>
        </div>
        <div class="panel-body no-padding">

            {{-- Ticket stat counters --}}
            <div class="row no-margin" style="border-bottom: 1px solid #eee;">
                <div class="col-xs-6 col-sm-2 dashboard-stat-cell">
                    <div class="dashboard-stat-number">{{ $ticketStats->total }}</div>
                    <div class="dashboard-stat-label">Total Tiket</div>
                </div>
                <div class="col-xs-6 col-sm-2 dashboard-stat-cell">
                    <div class="dashboard-stat-number" style="color: #F79D9D;">{{ $ticketStats->terbuka }}</div>
                    <div class="dashboard-stat-label">Terbuka</div>
                </div>
                <div class="col-xs-6 col-sm-3 dashboard-stat-cell">
                    <div class="dashboard-stat-number" style="color: #0390D0;">{{ $ticketStats->diproses }}</div>
                    <div class="dashboard-stat-label">Sedang Diproses</div>
                </div>
                <div class="col-xs-6 col-sm-3 dashboard-stat-cell">
                    <div class="dashboard-stat-number" style="color: #16B121;">{{ $ticketStats->selesai }}</div>
                    <div class="dashboard-stat-label">Selesai</div>
                </div>
                <div class="col-xs-6 col-sm-2 dashboard-stat-cell" style="border-right: none;">
                    <div class="dashboard-stat-number" style="color: #A7A7A7;">{{ $ticketStats->tutup }}</div>
                    <div class="dashboard-stat-label">Tutup</div>
                </div>
            </div>

            {{-- Last 5 tickets table (desktop) --}}
            <div class="table-responsive hidden-xs">
                <table class="table table-hover table-xxs text-size-small" style="margin-bottom: 0;">
                    <thead>
                        <tr>
                            <th style="width: 150px;">ID Tiket</th>
                            <th>Judul</th>
                            <th>PIC</th>
                            <th>Status</th>
                            <th>Follow-up Terakhir</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($latestTickets 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>{{ $res->name }}</td>
                                <td>
                                    {{ $res->pic->name }}
                                    @if (!empty($res->cc))
                                        <div class="text-muted" style="font-size: 11px; margin-top: 2px;">
                                            CC:
                                            @foreach ($res->cc as $ccUser)
                                                {{ $ccUser->name }}{{ !$loop->last ? ',' : '' }}
                                            @endforeach
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <span class="label" style="background-color: {{ $res->status->color }}">
                                        {{ $res->status->name }}
                                    </span>
                                </td>
                                <td>
                                    @if ($ticket->latestFollowUp)
                                        <span class="{{ $ticket->getFollowUpColor() }}">
                                            {{ $ticket->latestFollowUp->created_ago }}
                                            oleh {{ $ticket->latestFollowUp->createdBy->name }}:
                                            {{ mb_strimwidth($ticket->latestFollowUp->notes, 0, 60, '...') }}
                                        </span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted" style="padding: 20px;">
                                    Belum ada tiket.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Last 5 tickets card view (mobile) --}}
            <div class="visible-xs" style="padding: 10px;">
                @forelse ($latestTickets as $ticket)
                    @php $res = $ticket->getResponse(); @endphp
                    <div class="panel panel-body border-left-xlg" style="border-left-color: {{ $res->status->color }}; margin-bottom: 10px;">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                            <a href="{{ route('admin.ticket.detail', $ticket->id) }}" class="text-semibold">
                                {{ $res->ticket_number }}
                            </a>
                            <span class="label" style="background-color: {{ $res->status->color }}; font-size: 11px;">
                                {{ $res->status->name }}
                            </span>
                        </div>
                        <div style="margin-top: 5px; font-size: 13px;">{{ $res->name }}</div>
                        <div class="text-muted" style="font-size: 11px; margin-top: 3px;">
                            {{ date_format(date_create($res->created), 'd M Y H:i') }}
                        </div>
                        @if ($ticket->latestFollowUp)
                            <div style="margin-top: 8px; font-size: 12px; border-top: 1px solid #eee; padding-top: 8px;">
                                <span class="{{ $ticket->getFollowUpColor() }}">
                                    {{ $ticket->latestFollowUp->created_ago }}
                                    oleh {{ $ticket->latestFollowUp->createdBy->name }}:
                                    {{ mb_strimwidth($ticket->latestFollowUp->notes, 0, 80, '...') }}
                                </span>
                            </div>
                        @endif
                    </div>
                @empty
                    <div class="text-center text-muted" style="padding: 30px 20px;">
                        <i class="icon-ticket" style="font-size: 36px; display: block; margin-bottom: 8px; opacity: 0.3;"></i>
                        Belum ada tiket.
                    </div>
                @endforelse
            </div>

        </div>
    </div>

@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/ui/ripple.min.js') }}"></script>

    <style>
        .dashboard-stat-cell {
            padding: 14px 15px;
            text-align: center;
            border-right: 1px solid #eee;
        }

        .dashboard-stat-number {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.3;
        }

        .dashboard-stat-label {
            font-size: 11px;
            color: #999;
            margin-top: 3px;
        }

        @media (max-width: 767px) {
            .dashboard-stat-cell:nth-child(even) {
                border-right: none;
            }

            .dashboard-stat-cell {
                border-bottom: 1px solid #eee;
            }
        }
    </style>
@endsection