{{-- resources/views/dashboard/list.blade.php --}}

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

@section('content')

@include('layouts.navbars.auth.topnav', ['title' => $dashboardTitle ?? 'Dashboard NCR'])

<style>

.dashboard-hero {

    background: #0d4f4f;

    border-radius: 26px;

    padding: 30px;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}

.dashboard-hero::before {

    content: '';

    position: absolute;

    width: 300px;

    height: 300px;

    background: rgba(255,255,255,.05);

    border-radius: 50%;

    top: -140px;

    right: -90px;
}

.dashboard-title {

    color: white;

    font-weight: 800;

    font-size: 30px;

    margin-bottom: 6px;
}

.dashboard-subtitle {

    color: rgba(255,255,255,.88);

    font-size: 14px;

    line-height: 1.7;
}

.filter-box {

    background: rgba(255,255,255,.12);

    padding: 10px;

    border-radius: 14px;
}

.filter-select {

    border: none !important;

    border-radius: 12px !important;

    padding: 12px 14px !important;

    font-size: 13px !important;

    font-weight: 600;

    color: #0d4f4f;

    appearance: auto !important;

    background-image: none !important;

    box-shadow: none !important;
}

.dashboard-card {

    border: none;

    border-radius: 22px;

    overflow: hidden;

    position: relative;

    transition: .25s;

    background: white;

    box-shadow:
        0 5px 20px rgba(0,0,0,.06);
}

.dashboard-card:hover {

    transform: translateY(-5px);
}

.dashboard-card .card-body {

    padding: 24px;
}

.card-entry {

    border-left: 5px solid #ee5253;
}

.card-progress {

    border-left: 5px solid #ff9f43;
}

.card-review {

    border-left: 5px solid #2e86de;
}

.card-closed {

    border-left: 5px solid #10ac84;
}

.text-entry {

    color: #ee5253;
}

.text-progress {

    color: #ff9f43;
}

.text-review {

    color: #2e86de;
}

.text-closed {

    color: #10ac84;
}

.icon-entry {

    background: rgba(238,82,83,.12);

    color: #ee5253;
}

.icon-progress {

    background: rgba(255,159,67,.14);

    color: #ff9f43;
}

.icon-review {

    background: rgba(46,134,222,.12);

    color: #2e86de;
}

.icon-closed {

    background: rgba(16,172,132,.12);

    color: #10ac84;
}

.stat-title {

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .8px;
}

.stat-value {

    font-size: 38px;

    font-weight: 800;

    color: #1f2937;

    margin-top: 12px;

    line-height: 1;
}

.stat-icon {

    width: 58px;

    height: 58px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;
}

.chart-card,
.summary-card,
.table-card {

    border: none;

    border-radius: 24px;

    overflow: hidden;

    background: white;

    box-shadow:
        0 5px 20px rgba(0,0,0,.06);
}

.chart-fixed {

    height: 100%;
}

.summary-fixed {

    height: 100%;
}

.chart-header {

    padding: 24px 24px 0;
}

.chart-title {

    font-weight: 700;

    color: #1f2937;

    margin-bottom: 4px;
}

.chart-subtitle {

    color: #6b7280;

    font-size: 12px;
}

.chart-body {

    padding: 20px;
}

.chart-container {

    position: relative;

    height: 370px;
}

.summary-scroll {

    max-height: 420px;

    overflow-y: auto;

    padding-right: 4px;
}

.summary-scroll::-webkit-scrollbar {

    width: 6px;
}

.summary-scroll::-webkit-scrollbar-thumb {

    background: rgba(13,79,79,.25);

    border-radius: 10px;
}

.summary-item {

    padding: 12px 0;

    border-bottom: 1px dashed #e5e7eb;
}

.summary-item:last-child {

    border-bottom: none;
}

.summary-badge {

    padding: 6px 12px;

    border-radius: 10px;

    font-size: 11px;

    font-weight: 700;
}

.bg-soft-primary {

    background:
        rgba(13,79,79,.10);

    color: #0d4f4f;
}

.table-card table {

    border-collapse: separate !important;

    border-spacing: 0;
}

.table-custom thead {

    background: #0d4f4f;
}

.table-custom thead tr th:first-child {

    border-top-left-radius: 14px;
}

.table-custom thead tr th:last-child {

    border-top-right-radius: 14px;
}

.table-custom th {

    color: white !important;

    border: none !important;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    padding: 16px;
}

.table-custom td {

    vertical-align: middle;

    font-size: 12px;

    border-color: #edf2f7 !important;

    padding: 14px 16px !important;
}

.table-custom tbody tr {

    transition: .2s;
}

.table-custom tbody tr:hover {

    background: #f4fbfb;
}

.recent-badge {

    padding: 5px 10px;

    border-radius: 10px;

    font-size: 10px;

    font-weight: 700;
}

.badge-entry {

    background: rgba(238,82,83,.12);

    color: #ee5253;
}

.badge-progress {

    background: rgba(255,159,67,.14);

    color: #ff9f43;
}

.badge-review {

    background: rgba(46,134,222,.12);

    color: #2e86de;
}

.badge-closed {

    background: rgba(16,172,132,.12);

    color: #10ac84;
}

.empty-state {

    padding: 24px 12px;

    color: #6b7280;

    font-size: 12px;

    text-align: center;
}

.schedule-item {

    padding: 14px 0;

    border-bottom: 1px dashed #e5e7eb;
}

.schedule-item:last-child {

    border-bottom: none;
}

.type-badge {

    padding: 4px 8px;

    border-radius: 8px;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;
}

.type-internal {

    background: rgba(46,134,222,.12);

    color: #2e86de;
}

.type-external {

    background: rgba(16,172,132,.12);

    color: #10ac84;
}

@media(max-width:768px){

    .dashboard-title {

        font-size: 24px;
    }

    .chart-container {

        height: 280px;
    }

    .stat-value {

        font-size: 30px;
    }

}

</style>

<div class="container-fluid py-4">

    {{-- HERO --}}
    <div class="dashboard-hero mb-4">

        <div class="row align-items-center">

            <div class="col-lg-8">

                <div class="dashboard-title">

                    {{ $dashboardTitle ?? 'Dashboard Audit NCR' }}

                </div>

                <div class="dashboard-subtitle">

                    Total NCR :
                    <b>{{ $totalNcr }}</b>

                    &nbsp;&nbsp;&bull;&nbsp;&nbsp;

                    {{ $dashboardScopeMessage ?? 'Monitoring status dan tren Non Conformity Report' }}

                    <br>

                    <small>
                        Scope:
                        <b>{{ $dashboardScopeLabel ?? 'Semua departemen' }}</b>
                    </small>

                </div>

            </div>

            @if($showNcrTypeFilter ?? true)
            <div class="col-lg-4 mt-3 mt-lg-0">

                <form method="GET"
                      action="{{ url($url_menu) }}">

                    <div class="filter-box">

                        <select name="ncr_type"
                                class="form-control filter-select"
                                onchange="this.form.submit()">

                            @foreach($ncrTypes as $val => $label)

                            <option value="{{ $val }}"
                                {{ $ncrType == $val ? 'selected' : '' }}>

                                {{ $label }}

                            </option>

                            @endforeach

                        </select>

                    </div>

                </form>

            </div>
            @endif

        </div>

    </div>

    {{-- CARD --}}
    <div class="row">

        <div class="col-xl-3 col-sm-6 mb-4">

            <div class="dashboard-card card-entry">

                <div class="card-body">

                    <div class="d-flex justify-content-between">

                        <div>

                            <div class="stat-title text-entry">

                                Entry

                            </div>

                            <div class="stat-value">

                                {{ $totalEntry }}

                            </div>

                        </div>

                        <div class="stat-icon icon-entry">

                            <i class="fas fa-file-alt"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-xl-3 col-sm-6 mb-4">

            <div class="dashboard-card card-progress">

                <div class="card-body">

                    <div class="d-flex justify-content-between">

                        <div>

                            <div class="stat-title text-progress">

                                On Progress

                            </div>

                            <div class="stat-value">

                                {{ $totalProgress }}

                            </div>

                        </div>

                        <div class="stat-icon icon-progress">

                            <i class="fas fa-spinner"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-xl-3 col-sm-6 mb-4">

            <div class="dashboard-card card-review">

                <div class="card-body">

                    <div class="d-flex justify-content-between">

                        <div>

                            <div class="stat-title text-review">

                                In Review

                            </div>

                            <div class="stat-value">

                                {{ $totalReview }}

                            </div>

                        </div>

                        <div class="stat-icon icon-review">

                            <i class="fas fa-search"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-xl-3 col-sm-6 mb-4">

            <div class="dashboard-card card-closed">

                <div class="card-body">

                    <div class="d-flex justify-content-between">

                        <div>

                            <div class="stat-title text-closed">

                                Closed

                            </div>

                            <div class="stat-value">

                                {{ $totalClosed }}

                            </div>

                        </div>

                        <div class="stat-icon icon-closed">

                            <i class="fas fa-check-circle"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- CHART --}}
    <div class="row">

        <div class="col-lg-8 mb-4">

            <div class="chart-card chart-fixed">

                <div class="chart-header">

                    <div class="chart-title">

                        NCR Time Series Analytics

                    </div>

                    <div class="chart-subtitle">

                        Trend status NCR selama 6 bulan terakhir

                    </div>

                </div>

                <div class="chart-body">

                    <div class="chart-container">

                        <canvas id="chartTrend"></canvas>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-lg-4 mb-4">

            <div class="summary-card summary-fixed">

                <div class="card-body">

                    <div class="summary-scroll">

                        <h6 class="fw-bold mb-3">

                            Distribusi Kategori

                        </h6>

                        @forelse($categoryDistribution as $cat)

                        <div class="summary-item">

                            <div class="d-flex justify-content-between align-items-center">

                                <span class="text-sm">

                                    {{ $cat->name }}

                                </span>

                                <span class="summary-badge bg-soft-primary">

                                    {{ $cat->total }}

                                </span>

                            </div>

                        </div>

                        @empty

                        <div class="empty-state">
                            Belum ada distribusi kategori untuk scope ini.
                        </div>

                        @endforelse

                        <hr>

                        <h6 class="fw-bold mb-3">

                            NCR Terbaru

                        </h6>

                        @forelse($recentNcr as $row)

                        <div class="summary-item">

                            <div class="mb-1">

                                <small class="fw-bold d-block">

                                    {{ $row->clause_number ?? '-' }}
                                    -
                                    {{ $row->clause_name ?? '-' }}

                                </small>

                                <small class="text-muted d-block">

                                    {{ $row->iso_code ?? '-' }}
                                    -
                                    {{ $row->iso_name ?? '-' }}

                                </small>

                            </div>

                            <div class="d-flex justify-content-between align-items-center">

                                <small>

                                    {{ $row->department }}

                                </small>

                                <span class="type-badge {{ $row->ncr_type == 'external' ? 'type-external' : 'type-internal' }}">
                                    {{ $row->ncr_type }}
                                </span>

                            </div>

                            <div class="d-flex justify-content-between align-items-center mt-2">

                                <small class="text-muted">

                                    {{ !empty($row->audit_date) ? date('d-m-Y', strtotime($row->audit_date)) : '-' }}

                                </small>

                                @if($row->status == 'ENTRY')

                                    <span class="recent-badge badge-entry">
                                        ENTRY
                                    </span>

                                @elseif($row->status == 'ON_PROGRESS')

                                    <span class="recent-badge badge-progress">
                                        ON PROGRESS
                                    </span>

                                @elseif($row->status == 'IN_REVIEW')

                                    <span class="recent-badge badge-review">
                                        IN REVIEW
                                    </span>

                                @else

                                    <span class="recent-badge badge-closed">
                                        CLOSED
                                    </span>

                                @endif

                            </div>

                        </div>

                        @empty

                        <div class="empty-state">
                            Belum ada NCR terbaru untuk scope ini.
                        </div>

                        @endforelse

                    </div>

                </div>

            </div>

        </div>

    </div>

    @if(($role ?? '') == 'auditr')
    <div class="row">

        <div class="col-12 mb-4">

            <div class="table-card">

                <div class="card-body">

                    <div class="mb-3">

                        <h6 class="fw-bold mb-1">
                            Jadwal Audit Saya
                        </h6>

                        <small class="text-muted">
                            Sesi audit aktif yang menjadi dasar scope dashboard auditor.
                        </small>

                    </div>

                    @forelse($auditorSchedules as $schedule)

                    <div class="schedule-item">

                        <div class="d-flex flex-wrap justify-content-between align-items-center">

                            <div>

                                <div class="fw-bold text-sm">
                                    {{ $schedule->department_name ?? '-' }}
                                </div>

                                <small class="text-muted">
                                    {{ $schedule->schedule_title ?? '-' }}
                                </small>

                            </div>

                            <div class="text-end mt-2 mt-md-0">

                                <span class="summary-badge bg-soft-primary">
                                    {{ !empty($schedule->session_date) ? date('d-m-Y', strtotime($schedule->session_date)) : '-' }}
                                </span>

                                <small class="text-muted d-block mt-1">
                                    {{ !empty($schedule->start_time) ? date('H:i', strtotime($schedule->start_time)) : '-' }}
                                    -
                                    {{ !empty($schedule->end_time) ? date('H:i', strtotime($schedule->end_time)) : '-' }}
                                </small>

                            </div>

                        </div>

                        @if(!empty($schedule->pic_name) || $schedule->is_lead_auditor == '1')

                        <div class="mt-2">

                            @if($schedule->is_lead_auditor == '1')
                                <span class="recent-badge badge-review me-2">Lead Auditor</span>
                            @endif

                            @if(!empty($schedule->pic_name))
                                <small class="text-muted">PIC: {{ $schedule->pic_name }}</small>
                            @endif

                        </div>

                        @endif

                    </div>

                    @empty

                    <div class="empty-state">
                        Belum ada jadwal audit aktif yang terhubung ke akun auditor ini.
                    </div>

                    @endforelse

                </div>

            </div>

        </div>

    </div>
    @endif

    {{-- TABLE --}}
    <div class="row">

        <div class="col-12">

            <div class="table-card">

                <div class="card-body">

                    <div class="mb-4">

                        <h6 class="fw-bold mb-1">

                            Statistik Departemen

                        </h6>

                       

                    </div>

                    <div class="table-responsive">

                        <table class="table table-custom align-items-center mb-0">

                            <thead>

                                <tr>

                                    <th width="70%">
                                        Departemen
                                    </th>

                                    <th class="text-center">
                                        Jumlah NCR
                                    </th>

                                </tr>

                            </thead>

                            <tbody>

                                @forelse($deptSummary as $d)

                                <tr>

                                    <td>

                                        {{ $d->name }}

                                    </td>

                                    <td class="text-center">

                                        <span class="summary-badge bg-soft-primary">

                                            {{ $d->total }}

                                        </span>

                                    </td>

                                </tr>

                                @empty

                                <tr>

                                    <td colspan="2" class="empty-state">
                                        Belum ada departemen yang masuk scope dashboard ini.
                                    </td>

                                </tr>

                                @endforelse

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection

@push('js')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const ctx = document
.getElementById('chartTrend');

const gradientEntry = ctx
.getContext('2d')
.createLinearGradient(0,0,0,350);

gradientEntry.addColorStop(
    0,
    'rgba(238,82,83,.35)'
);

gradientEntry.addColorStop(
    1,
    'rgba(238,82,83,0)'
);

const gradientProgress = ctx
.getContext('2d')
.createLinearGradient(0,0,0,350);

gradientProgress.addColorStop(
    0,
    'rgba(255,159,67,.30)'
);

gradientProgress.addColorStop(
    1,
    'rgba(255,159,67,0)'
);

const gradientReview = ctx
.getContext('2d')
.createLinearGradient(0,0,0,350);

gradientReview.addColorStop(
    0,
    'rgba(46,134,222,.30)'
);

gradientReview.addColorStop(
    1,
    'rgba(46,134,222,0)'
);

const gradientClosed = ctx
.getContext('2d')
.createLinearGradient(0,0,0,350);

gradientClosed.addColorStop(
    0,
    'rgba(16,172,132,.35)'
);

gradientClosed.addColorStop(
    1,
    'rgba(16,172,132,0)'
);

new Chart(ctx, {

    type: 'line',

    data: {

        labels: @json($chartLabels),

        datasets: [

            {
                label: 'Entry',
                data: @json($chartEntry),
                borderColor: '#ee5253',
                backgroundColor: gradientEntry,
                fill: true,
                tension: .45,
                borderWidth: 3,
                pointRadius: 4
            },

            {
                label: 'On Progress',
                data: @json($chartProgress),
                borderColor: '#ff9f43',
                backgroundColor: gradientProgress,
                fill: true,
                tension: .45,
                borderWidth: 3,
                pointRadius: 4
            },

            {
                label: 'In Review',
                data: @json($chartReview),
                borderColor: '#2e86de',
                backgroundColor: gradientReview,
                fill: true,
                tension: .45,
                borderWidth: 3,
                pointRadius: 4
            },

            {
                label: 'Closed',
                data: @json($chartClosed),
                borderColor: '#10ac84',
                backgroundColor: gradientClosed,
                fill: true,
                tension: .45,
                borderWidth: 3,
                pointRadius: 4
            }

        ]

    },

    options: {

        responsive: true,

        maintainAspectRatio: false,

        interaction: {

            mode: 'index',

            intersect: false
        },

        plugins: {

            legend: {

                position: 'bottom',

                labels: {

                    usePointStyle: true,

                    pointStyle: 'circle',

                    padding: 20,

                    font: {

                        size: 11,

                        weight: '600'
                    }
                }
            }

        },

        scales: {

            y: {

                beginAtZero: true,

                ticks: {

                    precision: 0,

                    color: '#6b7280'
                },

                grid: {

                    color: 'rgba(107,114,128,.08)',

                    drawBorder: false
                }
            },

            x: {

                ticks: {

                    color: '#6b7280'
                },

                grid: {

                    display: false
                }
            }

        }

    }

});

</script>

@endpush