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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">MSJ Material</h6>
                        <p class="text-sm">Aplikasi ini digunakan untuk pengadaan material baru oleh Team Upload Material.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            @if($roles != 'qcntrl')
            <div class="col-md-3 col-sm-3 mb-xl-0 mb-3">
                <div class="card shadow-sm border-0">
                    <a href="{{ url('tr_mtr') }}" class="card-link text-decoration-none">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-1 text-uppercase font-weight-bold text-primary">
                                            Total Material
                                        </p>
                                        <h2 class="font-weight-bolder text-dark"
                                            style="font-size: 2rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.2);">
                                            {{ $material }}
                                        </h2>
                                        <p class="mb-0 text-secondary font-weight-medium">
                                            <span class="text-success font-weight-bold"
                                                style="font-size: 1rem;">+{{ $material }}</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="fa fa-server text-white" aria-hidden="true"
                                            style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            @endif
            @if($roles == 'qcntrl')
            <div class="col-md-3 col-sm-3 mb-xl-0 mb-3">
                <div class="card shadow-sm border-0">
                    <a href="{{ url('tr_mtr') }}" class="card-link text-decoration-none">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold text-danger">
                                            Belum di Inspect
                                        </p>
                                        <h2 class="font-weight-bolder text-dark"
                                            style="font-size: 2rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.2);">
                                            {{ $belum_inspect }}
                                        </h2>
                                        <p class="mb-0 text-secondary font-weight-medium">
                                            <span class="text-warning font-weight-bold"
                                                style="font-size: 1rem;">+{{ $belum_inspect }}</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="fa fa-search text-white" aria-hidden="true"
                                            style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            @endif
            <div class="col-md-3 col-sm-3 mb-xl-0 mb-3">
                <div class="card">
                    <a href="{{ url('tr_mtr') }}" class="card-link text-decoration-none">
                        <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 text-danger">
                                            Belum di Upload
                                        </p>
                                        <h3 class="font-weight-bolder text-dark"
                                            style="font-size: 2rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.2);">
                                            {{ $waiting }}
                                        </h3>
                                        <p class="mb-0 text-secondary font-weight-medium">
                                            <span class="text-success font-weight-bold"
                                                style="font-size: 1rem;">+{{ $waiting }}</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="fa fa-upload text-white" aria-hidden="true"
                                            style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-md-3 col-sm-3 mb-xl-0 mb-3">
                <div class="card">
                    <a href="" class="card-link text-decoration-none" data-bs-toggle="modal" data-bs-target="#color">
                        <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">
                                            Warna belum didaftarkan
                                        </p>
                                        <h3 class="font-weight-bolder text-dark"
                                            style="font-size: 2rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.2);">
                                            {{ $unmatched_colors }}
                                        </h3>
                                        <p class="mb-0 text-secondary font-weight-medium">
                                            <span class="text-success font-weight-bold"
                                                style="font-size: 1rem;">+{{ $unmatched_colors }}</span>
                                        </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="fa fa-upload text-white" aria-hidden="true"
                                            style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <style>
                .uom-badge {
                    border-radius: 1rem;
                    padding: 0.5rem;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
                    font-weight: bold;
                }

                .uom-ROL {
                    background: linear-gradient(135deg, #ff4e50, #f9d423);
                }

                .uom-CAS {
                    background: linear-gradient(135deg, #2193b0, #6dd5ed);
                }

                .uom-BAL {
                    background: linear-gradient(135deg, #56ab2f, #a8e063);
                }

                .uom-BOX {
                    background: linear-gradient(135deg, #757f9a, #6196ff);
                }

                .uom-PAL {
                    background: linear-gradient(135deg, #ee7fa4, #ff6a9b);
                }

                .uom-value {
                    font-size: 0.8rem;
                    color: white;
                    opacity: 0.9;
                }

                .uom-row {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    gap: 0.5rem;
                }
            </style>
            <div class="col-md-3 col-sm-3 mb-xl-0 mb-3">
                <div class="card">
                    <a href="" class="card-link text-decoration-none">
                        <div class="card-body p-3">
                            <div class="numbers">
                                <p class="text-sm mb-3 text-uppercase font-weight-bold text-primary">Latest UOM</p>
                                <div class="uom-row">
                                    @foreach ($maxuom as $uom => $value)
                                        <div class="text-center">
                                            <div class="uom-badge uom-{{ $uom }}">
                                                <div class="uom-value">{{ $uom }}</div>
                                                <div style="font-size: 1.2rem; color: rgb(87,87,87);">{{ $value }}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="color" tabindex="-1" aria-labelledby="color" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="color">List Color</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table display table-hover" id="tabel-color">
                                    <thead style="background-color: #daecff;">
                                        <tr>
                                            <th scope="col">No</th>
                                            <th scope="col">Code Warna</th>
                                            <th scope="col">User Created</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($list_colors as $c)
                                            <tr>
                                                <td>{{ $no++ }}</td>
                                                <td>{{ $c->color_code }}</td>
                                                <td>{{ $c->user_create }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="row mt-3">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="mb-0">List Item Belum di Upload</h5>
                            </div>
                            <hr class="horizontal dark mt-0">
                            <div class="row px-4 py-2">
                                <div class="table-responsive">
                                    <table class="table display" id="list_material">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Kode Baru FG</th>
                                                <th>ID Material Grup</th>
                                                <th>Customer</th>
                                                <th>Ket</th>
                                                <th>UoM</th>
                                                <th>Status</th>
                                                <th>Created By</th>
                                                <th>Created At</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($listmaterial as $detail)
                                                @php
                                                    $rowClass = '';
                                                    if ($detail->isactive == '0') {
                                                        $rowClass = 'row-inactive';
                                                    } elseif ($detail->status == '3') {
                                                        $rowClass = 'row-status-3';
                                                    }
                                                @endphp
                                                <tr class="{{ $rowClass }}">
                                                    <td>{{ $vcount++ }}</td>
                                                    <td> {{ $detail->kode_baru_fg }}</td>
                                                    <td> {{ $detail->id_mat_group }}</td>
                                                    <td> {{ $detail->customer }}</td>
                                                    <td> {{ $detail->keterangan }}</td>
                                                    <td> {{ $detail->alt_uom }}</td>
                                                    <td> {{ $detail->status_name }}</td>
                                                    <td> {{ $detail->user_create }}</td>
                                                    <td> {{ $detail->created_at }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="text-uppercase font-weight-bold">Summary</h6>
                        <div id="materialTrendChart" style="height: 375px;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        $(document).ready(function() {
            $('#tabel-color').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": true,
                "responsive": true,
                "autoWidth": false
            });

            $('#list_material').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": true,
                "responsive": true,
                "autoWidth": false
            });

            const labels = @json($tglsum);
            const seriesData = @json($totsum);
            summaryMat(labels, seriesData);

            $('<style>').prop('type', 'text/css').html(`
                table.dataTable tbody tr.row-inactive,
                table.dataTable tbody tr.row-inactive:hover,
                table.dataTable tbody tr.row-inactive td {
                    background-color: #ffe9ed !important;
                }
                table.dataTable tbody tr.row-status-3,
                table.dataTable tbody tr.row-status-3:hover,
                table.dataTable tbody tr.row-status-3 td {
                    background-color: #FFF9C4 !important;
                }
            `).appendTo('head');

            $('#list_{{ $dmenu }}').on('draw.dt', function() {
                $('tr.row-inactive').each(function() {
                    $(this).find('td').css('background-color', '#ffe9ed');
                });
                $('tr.row-status-3').each(function() {
                    $(this).find('td').css('background-color', '#FFF9C4');
                });
            });

            setTimeout(function() {
                $('tr.row-inactive td').css('background-color', '#ffe9ed');
                $('tr.row-status-3 td').css('background-color', '#FFF9C4');
            }, 100);
        });

        function summaryMat(date, value) {
            var chartDom = document.getElementById('materialTrendChart');
            var myChart = echarts.init(chartDom);
            myChart.setOption({
                grid: {
                    left: 48,
                    right: 16,
                    top: 24,
                    bottom: 48
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    name: 'Jumlah'
                },
                series: [{
                    name: 'Material / Hari',
                    type: 'line',
                    smooth: true,
                    data: value,
                    symbol: 'circle',
                    symbolSize: 6,
                    lineStyle: {
                        width: 2
                    },
                    areaStyle: {
                        opacity: 0.08
                    }
                }]
            });
        }
    </script>
@endsection