@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <!-- Filter Summary Card -->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="text-uppercase text-sm mb-3">
                    <i class="fas fa-filter me-2"></i>Filter Applied
                </h6>
                <div class="row">
                    <div class="col-md-2">
                        <strong>IT Name:</strong><br>
                        <span class="text-sm">{{ $filter['name_name'] ?? 'ALL' }}</span>
                    </div>
                    <div class="col-md-3">
                        <strong>Date Range:</strong><br>
                        <span class="text-sm">
                            @if ($filter['startDate'] && $filter['endDate'])
                                {{ date('d/m/Y', strtotime($filter['startDate'])) }} -
                                {{ date('d/m/Y', strtotime($filter['endDate'])) }}
                            @else
                                ALL
                            @endif
                        </span>
                    </div>
                    <div class="col-md-2">
                        <strong>Jenis:</strong><br>
                        <span class="text-sm">{{ $filter['jenis_name'] }}</span>
                    </div>
                    <div class="col-md-2">
                        <strong>Jenis Hardware:</strong><br>
                        <span class="text-sm">{{ $filter['jenis_hardware_name'] ?? 'ALL' }}</span>
                    </div>
                    <div class="col-md-2">
                        <strong>Jenis Software:</strong><br>
                        <span class="text-sm">{{ $filter['jenis_software_name'] ?? 'ALL' }}</span>
                    </div>
                    <div class="col-md-2">
                        <strong>Ticket Source:</strong><br>
                        <span class="text-sm">{{ $filter['ticket_source_name'] }}</span>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ url($url_menu) }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i> Back to Filter
                    </a>
                    <button onclick="printReport()" class="btn btn-info btn-sm">
                        <i class="fas fa-print me-1"></i> Print
                    </button>
                    <button onclick="exportToExcel()" class="btn btn-success btn-sm">
                        <i class="fas fa-file-excel me-1"></i> Export to Excel
                    </button>
                </div>
            </div>
        </div>

        <!-- Summary Chart -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0">Ticket Status Distribution</h6>
                                <p class="text-sm text-muted mb-0">Visualisasi seperti gunung — semakin tinggi semakin
                                    banyak</p>
                            </div>
                            <h5 class="mb-0 text-primary">
                                Total Tickets: <strong>{{ $tickets->count() }}</strong>
                            </h5>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div id="mountainChart" style="height: 420px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Results Table -->
        <div class="card">
            <div class="card-header pb-0">
                <h6>Report Results ({{ $tickets->count() }} tickets)</h6>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                @if ($tickets->count() > 0)
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0" id="reportTable">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">No</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">Ticket ID</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">Date</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">Jenis</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">Detail</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">Reported By</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">IT Assigned</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">Urgency</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">Source</th>
                                    <th class="text-uppercase text-secondary font-weight-bolder opacity-7">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($tickets as $index => $ticket)
                                    @php
                                        $isSoftware = $ticket->jenis == 'S';
                                        $isHardware = $ticket->jenis == 'H';

                                        // Status badge color
                                        $statusBadge = 'secondary';
                                        switch ($ticket->status) {
                                            case 'C':
                                                $statusBadge = 'success';
                                                break;
                                            case 'D':
                                                $statusBadge = 'warning';
                                                break;
                                            case 'P':
                                                $statusBadge = 'info';
                                                break;
                                            case 'W':
                                                $statusBadge = 'primary';
                                                break;
                                            case 'A':
                                                $statusBadge = 'approve';
                                                break;
                                            case 'E':
                                                $statusBadge = 'secondary';
                                                break;
                                            case 'R':
                                            case 'T':
                                                $statusBadge = 'danger';
                                                break;
                                        }

                                        // Urgency badge color
                                        $urgencyBadge = 'secondary';
                                        $urgencyIcon = 'circle';
                                        switch ($ticket->urgency) {
                                            case '1':
                                                $urgencyBadge = 'success';
                                                $urgencyIcon = 'arrow-down';
                                                break;
                                            case '2':
                                                $urgencyBadge = 'warning';
                                                $urgencyIcon = 'minus';
                                                break;
                                            case '3':
                                                $urgencyBadge = 'danger';
                                                $urgencyIcon = 'arrow-up';
                                                break;
                                        }
                                    @endphp
                                    <tr>
                                        <td class="text-center">{{ $index + 1 }}</td>
                                        <td>
                                            <strong>{{ $ticket->id }}</strong>
                                        </td>
                                        <td
                                            data-order="{{ \Carbon\Carbon::parse($ticket->ticket_date)->format('Y-m-d H:i:s') }}">
                                            {{ date('d/m/Y', strtotime($ticket->ticket_date)) }}
                                        </td>
                                        <td>
                                            <span
                                                class="badge badge-sm bg-gradient-{{ $isSoftware ? 'info' : 'primary' }}">
                                                {{ $ticket->jenis_name }}
                                            </span>
                                        </td>
                                        <td>
                                            @if ($isSoftware)
                                                <div><strong>Software:</strong> {{ $ticket->detkat_detail ?? '-' }}</div>
                                            @elseif($isHardware)
                                                <div><strong>Code:</strong> {{ $ticket->code ?? '-' }}</div>
                                                @if ($ticket->detkat_detail ?? false)
                                                    <div><small class="text-muted">Type:
                                                            {{ $ticket->detkat_detail }}</small></div>
                                                @endif
                                            @endif
                                            @if ($ticket->problem)
                                                <div class="mt-1"><small>{{ Str::limit($ticket->problem, 50) }}</small>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            <div><strong>{{ $ticket->reported_by_name ?? '-' }}</strong></div>
                                            <small class="text-muted">{{ $ticket->reported_by_dept ?? '-' }}</small>
                                        </td>
                                        <td>
                                            @if ($isSoftware && $ticket->software_it_name)
                                                {{ $ticket->software_it_name }}
                                            @elseif($isHardware && $ticket->hardware_it_name)
                                                {{ $ticket->hardware_it_name }}
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class=" text-center">
                                            <span class="badge badge-sm bg-gradient-{{ $urgencyBadge }}">
                                                <i class="fas fa-{{ $urgencyIcon }} me-1"></i>
                                                {{ $ticket->urgency_name ?? '-' }}
                                            </span>
                                        </td>
                                        <td>
                                            {{ $ticket->ticket_source_display ?? '-' }}
                                        </td>
                                        <td class=" text-center">
                                            <span class="badge badge-sm bg-{{ $statusBadge }}">
                                                {{ $ticket->status_name ?? '-' }}
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-inbox fa-3x text-secondary mb-3"></i>
                        <p class="text-secondary mb-0">No tickets found for the selected filters</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <style>
        @media print {

            .btn,
            .nav,
            .sidenav,
            .navbar {
                display: none !important;
            }

            .card {
                box-shadow: none !important;
                border: 1px solid #dee2e6 !important;
            }

            .table {
                font-size: 10px !important;
            }
        }

        .text-wrap {
            white-space: normal !important;
            word-wrap: break-word;
        }

        .bg-approve {
            background-color: #1100ffff !important;
            color: #fff !important;
        }
    </style>
    @push('js')
        <script src="{{ asset('/') }}assets/js/vendor/echarts.min.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const chartDom = document.getElementById('mountainChart');
                if (!chartDom) return;

                const myChart = echarts.init(chartDom);

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>{a}: {c} tiket'
                    },
                    grid: {
                        left: '4%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Entry', 'Draft', 'Pending', 'Approved', 'In Progress', 'Completed', 'Rejected'],
                        axisLabel: {
                            fontSize: 13,
                            rotate: 0
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: 'Jumlah Tiket',
                        axisLabel: {
                            fontSize: 12
                        }
                    },
                    series: [{
                        name: 'Jumlah Tiket',
                        type: 'line', // Line + Area = efek gunung
                        smooth: true, // Membuat garis melengkung seperti gunung
                        symbol: 'circle',
                        symbolSize: 8,
                        data: [
                            {{ $tickets->where('status', 'E')->count() }}, // Entry
                            {{ $tickets->where('status', 'D')->count() }}, // Draft
                            {{ $tickets->where('status', 'W')->count() }}, // Pending
                            {{ $tickets->where('status', 'A')->count() }}, // Approved
                            {{ $tickets->where('status', 'P')->count() }}, // In Progress
                            {{ $tickets->where('status', 'C')->count() }}, // Completed
                            {{ $tickets->whereIn('status', ['R', 'T'])->count() }} // Rejected
                        ],
                        areaStyle: { // Efek Gunung (fill area)
                            opacity: 0.7,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#4ade80'
                                },
                                {
                                    offset: 1,
                                    color: '#22c55e'
                                }
                            ])
                        },
                        lineStyle: {
                            width: 4,
                            color: '#16a34a'
                        },
                        itemStyle: {
                            color: '#22c55e',
                            borderWidth: 3
                        },
                        emphasis: {
                            focus: 'series'
                        }
                    }]
                };

                myChart.setOption(option);

                window.addEventListener('resize', () => myChart.resize());
            });
        </script>
    @endpush

    @include('js.rptick-result')
@endsection