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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        {{-- SUMMARY CARDS --}}
        <div class="row">
            {{-- Card 1: Request Inquiry --}}
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <a href="{{ url('/mstinq') }}" class="text-decoration-none d-block">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Req. Matching</p>
                                        <h5 class="font-weight-bolder">{{ number_format($summary['req']['total']) }}</h5>
                                        <p class="mb-0">
                                            {{-- Hapus tanda % dan sesuaikan warna --}}
                                            <span
                                                class="text-{{ $summary['req']['change'] >= 0 ? 'success' : 'danger' }} text-sm font-weight-bolder">
                                                +{{ $summary['req']['today'] }}
                                            </span>
                                            Today
                                        </p>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                        <i class="ni ni-folder-17 text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Card 2: Suppliers --}}
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <a href="{{ url('/mstsup') }}" class="text-decoration-none d-block">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Supplier</p>
                                        <h5 class="font-weight-bolder">{{ number_format($summary['sup']['total']) }}</h5>
                                        <p class="mb-0">
                                            <span
                                                class="text-{{ $summary['sup']['change'] >= 0 ? 'success' : 'danger' }} text-sm font-weight-bolder">
                                                +{{ $summary['sup']['today'] }}
                                            </span>
                                            Today
                                        </p>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="fas fa-user text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Card 3: External Memo --}}
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <a href="{{ url('/extmem') }}" class="text-decoration-none d-block">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Ext. Memo</p>
                                        <h5 class="font-weight-bolder">{{ number_format($summary['memo']['total']) }}</h5>
                                        <p class="mb-0">
                                            <span
                                                class="text-{{ $summary['memo']['change'] >= 0 ? 'success' : 'danger' }} text-sm font-weight-bolder">
                                                +{{ $summary['memo']['today'] }}
                                            </span>
                                            Today
                                        </p>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                        <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Card 4: Match Result --}}
            <div class="col-xl-3 col-sm-6">
                <a href="{{ url('/mstrst') }}" class="text-decoration-none d-block">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Result Matching</p>
                                        <h5 class="font-weight-bolder">{{ number_format($summary['match']['total']) }}</h5>
                                        <p class="mb-0">
                                            <span
                                                class="text-{{ $summary['match']['change'] >= 0 ? 'success' : 'danger' }} text-sm font-weight-bolder">
                                                +{{ $summary['match']['today'] }}
                                            </span>
                                            Today
                                        </p>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                        <i class="fas fa-microscope text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        {{-- GRAFIK & TOP SUPPLIER --}}
        <div class="row mt-4">

            {{-- GRAFIK MATCH RESULT --}}
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Result Matching Color Trend</h6>
                        <p class="text-sm mb-0">
                            <i class="fa fa-calendar text-primary"></i>
                            <span class="font-weight-bold">Last 12 Months</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            {{-- Canvas untuk Chart.js --}}
                            <canvas id="chart-match" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            {{-- TOP SUPPLIER LIST --}}
            <div class="col-lg-5">
                <div class="card h-100">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between">
                            <h6 class="mb-0">Top 5 Suppliers (by Samples)</h6>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <ul class="list-group">
                            @foreach ($top_suppliers as $sup)
                                <li
                                    class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                    <div class="d-flex align-items-center">
                                        <div class="icon icon-shape icon-sm me-3 bg-gradient-dark shadow text-center">
                                            <i class="fas fa-person text-white opacity-10"></i>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <h6 class="mb-1 text-dark text-sm">{{ $sup->attn }}</h6>
                                            <span
                                                class="text-xs">{{ !empty($sup->to) ? $sup->to : 'Unknown Supplier' }}</span>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center text-sm font-weight-bold text-dark">
                                        {{ $sup->total_sample }} Samples
                                    </div>
                                </li>
                            @endforeach

                            @if ($top_suppliers->isEmpty())
                                <li class="list-group-item border-0 text-center text-sm text-muted">Belum ada data sample.
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {{-- SECTION TRACKING (BARU) --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>Live Tracking Process</h6>
                        <p class="text-sm mb-0">
                            <i class="fa fa-clock text-success" aria-hidden="true"></i>
                            Memantau durasi pengerjaan dari <b>Request</b> hingga <b>Test Lab</b>.
                        </p>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center justify-content-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Request No</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Flow Process (Lead Time)</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Lead Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($tracking_data as $track)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-3">
                                                    <div class="my-auto">
                                                        <h6 class="mb-0 text-sm">{{ $track['req_no'] }}</h6>
                                                        <p class="text-xs font-weight-bold mb-0 text-primary">
                                                            {{ $track['customer'] }}</p>
                                                    </div>
                                                </div>
                                            </td>

                                            <td class="align-middle">
                                                <div class="d-flex align-items-center justify-content-start"
                                                    style="min-width: 450px;">

                                                    <div class="text-center position-relative z-index-2">
                                                        <button
                                                            class="btn btn-icon-only btn-rounded btn-outline-success mb-0 btn-sm d-flex align-items-center justify-content-center bg-white"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            title="Request Date">
                                                            <i class="fas fa-file-invoice"></i>
                                                        </button>
                                                        <span class="text-xs font-weight-bold">Req</span>
                                                    </div>

                                                    <div class="flex-grow-1 px-1 text-center position-relative"
                                                        style="margin-top: -15px;">
                                                        @if ($track['has_memo'])
                                                            <span class="text-xxs text-success font-weight-bold d-block"
                                                                style="margin-bottom:2px;">{{ $track['durasi_1'] }}
                                                                Hari</span>
                                                            <div
                                                                style="height: 3px; background: #2dce89; width: 100%; border-radius: 2px;">
                                                            </div>
                                                        @else
                                                            <span class="text-xxs text-secondary d-block"
                                                                style="margin-bottom:2px;">Waiting...</span>
                                                            <div
                                                                style="height: 2px; background: #e9ecef; width: 100%; border-top: 2px dashed #adb5bd;">
                                                            </div>
                                                        @endif
                                                    </div>

                                                    <div class="text-center position-relative z-index-2">
                                                        <button
                                                            class="btn btn-icon-only btn-rounded {{ $track['has_memo'] ? 'btn-outline-success' : 'btn-outline-secondary' }} mb-0 btn-sm d-flex align-items-center justify-content-center bg-white"
                                                            data-bs-toggle="tooltip" data-bs-html="true"
                                                            data-bs-placement="top" title="{!! $track['tooltip_memo'] !!}">
                                                            {{-- Load HTML Tooltip --}}
                                                            <i class="fas fa-paper-plane"></i>
                                                        </button>
                                                        <span class="text-xs font-weight-bold">Memo</span>
                                                    </div>

                                                    <div class="flex-grow-1 px-1 text-center position-relative"
                                                        style="margin-top: -15px;">
                                                        @if ($track['has_match'] && $track['has_memo'])
                                                            <span class="text-xxs text-success font-weight-bold d-block"
                                                                style="margin-bottom:2px;">{{ $track['durasi_2'] }}
                                                                Hari</span>
                                                            <div
                                                                style="height: 3px; background: #2dce89; width: 100%; border-radius: 2px;">
                                                            </div>
                                                        @elseif($track['has_match'] && !$track['has_memo'])
                                                            <span class="text-xxs text-warning font-weight-bold d-block"
                                                                style="margin-bottom:2px;">?</span>
                                                            <div
                                                                style="height: 3px; background: #fb6340; width: 100%; border-radius: 2px;">
                                                            </div>
                                                        @elseif($track['has_memo'])
                                                            <span class="text-xxs text-secondary d-block"
                                                                style="margin-bottom:2px;">Process...</span>
                                                            <div
                                                                style="height: 2px; background: #e9ecef; width: 100%; border-top: 2px dashed #adb5bd;">
                                                            </div>
                                                        @else
                                                            <div
                                                                style="height: 2px; background: #e9ecef; width: 100%; margin-top: 18px;">
                                                            </div>
                                                        @endif
                                                    </div>

                                                    <div class="text-center position-relative z-index-2">
                                                        <button
                                                            class="btn btn-icon-only btn-rounded {{ $track['has_match'] ? 'btn-outline-success' : 'btn-outline-secondary' }} mb-0 btn-sm d-flex align-items-center justify-content-center bg-white"
                                                            data-bs-toggle="tooltip" data-bs-html="true"
                                                            data-bs-placement="top" title="{!! $track['tooltip_match'] !!}">
                                                            <i class="fas fa-search-plus"></i>
                                                        </button>
                                                        <span class="text-xs font-weight-bold">Match</span>
                                                    </div>

                                                    <div class="flex-grow-1 px-1 text-center position-relative"
                                                        style="margin-top: -15px;">
                                                        @if ($track['has_lab'] && $track['has_match'])
                                                            <span class="text-xxs text-success font-weight-bold d-block"
                                                                style="margin-bottom:2px;">{{ $track['durasi_3'] }}
                                                                Hari</span>
                                                            <div
                                                                style="height: 3px; background: #2dce89; width: 100%; border-radius: 2px;">
                                                            </div>
                                                        @elseif($track['has_match'])
                                                            <span class="text-xxs text-secondary d-block"
                                                                style="margin-bottom:2px;">In Lab...</span>
                                                            <div
                                                                style="height: 2px; background: #e9ecef; width: 100%; border-top: 2px dashed #adb5bd;">
                                                            </div>
                                                        @else
                                                            <div
                                                                style="height: 2px; background: #e9ecef; width: 100%; margin-top: 18px;">
                                                            </div>
                                                        @endif
                                                    </div>

                                                    <div class="text-center position-relative z-index-2">
                                                        <button
                                                            class="btn btn-icon-only btn-rounded {{ $track['has_lab'] ? 'btn-outline-success' : 'btn-outline-secondary' }} mb-0 btn-sm d-flex align-items-center justify-content-center bg-white"
                                                            data-bs-toggle="tooltip" data-bs-html="true"
                                                            data-bs-placement="top" title="{!! $track['tooltip_lab'] !!}">
                                                            <i class="fas fa-flask"></i>
                                                        </button>
                                                        <span class="text-xs font-weight-bold">Lab</span>
                                                    </div>

                                                </div>
                                            </td>

                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <span class="font-weight-bold text-dark text-sm me-2">
                                                        {{ $track['total_age'] !== null ? number_format($track['total_age']) . ' Hari' : '-' }}
                                                    </span>
                                                    @if ($track['status'] == 'completed' || $track['status'] == 'finish')
                                                        <span class="badge badge-sm bg-gradient-success">Done</span>
                                                    @elseif($track['status'] == 'underreview' || $track['status'] == 'progress')
                                                        <span class="badge badge-sm bg-gradient-warning">Prog</span>
                                                    @elseif($track['status'] == 'canceled')
                                                        <span class="badge badge-sm bg-gradient-danger">Cancel</span>
                                                    @else
                                                        <span class="badge badge-sm bg-gradient-secondary">Entry</span>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@push('js')
    {{-- Load Chart.js dengan fallback lokal jika CDN gagal --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        if (typeof window.Chart === 'undefined') {
            document.write('<script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"><\/script>');
        }
    </script>

    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        document.addEventListener("DOMContentLoaded", function() {
            // Pastikan data JSON valid (controller mengirim string JSON)
            var chartLabels = JSON.parse(@json($chart['labels']));
            var chartValues = JSON.parse(@json($chart['values']));

            var ctx1 = document.getElementById("chart-match");
            if (!ctx1 || typeof window.Chart === 'undefined') return;

            var ctx = ctx1.getContext("2d");
            var gradientStroke1 = ctx.createLinearGradient(0, 230, 0, 50);
            gradientStroke1.addColorStop(1, 'rgba(94, 114, 228, 0.2)');
            gradientStroke1.addColorStop(0.2, 'rgba(94, 114, 228, 0.0)');
            gradientStroke1.addColorStop(0, 'rgba(94, 114, 228, 0)');

            new Chart(ctx, {
                type: "line",
                data: {
                    labels: chartLabels,
                    datasets: [{
                        label: "Match Results",
                        tension: 0.4,
                        borderWidth: 3,
                        pointRadius: 0,
                        borderColor: "#5e72e4",
                        backgroundColor: gradientStroke1,
                        fill: true,
                        data: chartValues,
                        maxBarThickness: 6
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: 10,
                                color: '#6c757d',
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                color: '#6c757d',
                                padding: 12,
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                    },
                },
            });
        });
    </script>
@endpush