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

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

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-start">
                        <h5 class="mb-0">Filter {{ $title_menu }}</h5>

                        {{-- Alert messages --}}
                        <div class="ms-auto">
                            @if (session('success'))
                                <div class="alert alert-success alert-dismissible fade show mb-0 px-3 py-2 d-flex align-items-center text-white fw-bold"
                                    role="alert" style="min-width: 280px; font-size: 0.95rem;">
                                    <i class="fas fa-thumbs-up me-2"></i>
                                    <span class="alert-text flex-grow-1">{{ session('success') }}</span>
                                    <button type="button" class="btn-close btn-close-white ms-2 p-1"
                                        data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            @if (session('error'))
                                <div class="alert alert-danger alert-dismissible fade show mb-0 px-3 py-2 d-flex align-items-center text-white fw-bold"
                                    role="alert" style="min-width: 280px; font-size: 0.95rem;">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <span class="alert-text flex-grow-1">{{ session('error') }}</span>
                                    <button type="button" class="btn-close btn-close-white ms-2 p-1"
                                        data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                        </div>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="card-body pt-3">
                        <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                            @csrf
                            <div class="row g-3">
                                <!-- Baris 1: Tanggal -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="date-from" class="form-label">Tanggal Dari</label>
                                        <input type="date" name="date-from" id="date-from"
                                            class="form-control required-input" value="{{ request('date-from') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="date-to" class="form-label">Tanggal Sampai</label>
                                        <input type="date" name="date-to" id="date-to"
                                            class="form-control required-input" value="{{ request('date-to') }}">
                                    </div>
                                </div>
                            </div>

                            <div class="row g-3">
                                <!-- Baris 2: DO Number, Material, Customer -->
                                <div class="col-md-6">
                                    <label for="filter-do-number" class="form-label">DO Number</label>
                                    <input type="text" name="filter-do-number" id="filter-do-number" class="form-control"
                                        value="{{ request('filter-do-number', '') }}">
                                </div>

                                <div class="col-md-3">
                                    <label for="filter-material" class="form-label">Material</label>
                                    <select name="filter-material" id="filter-material" class="form-control select2">
                                        <option value="%">Semua Material</option>
                                        @foreach ($material as $m)
                                            <option value="{{ $m->material }}"
                                                {{ request('filter-material', '%') == $m->material ? 'selected' : '' }}>
                                                {{ $m->material }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label for="filter-customer" class="form-label">Customer</label>
                                    <select name="filter-customer" id="filter-customer" class="form-control select2">
                                        <option value="%">Semua Customer</option>
                                        @foreach ($customer as $c)
                                            <option value="{{ $c->id }}"
                                                {{ request('filter-customer', '%') == $c->id ? 'selected' : '' }}>
                                                {{ $c->customer }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Tombol -->
                            <div class="d-flex justify-content-end gap-2 mt-3">
                                <button type="reset" class="btn btn-outline-secondary btn-sm">
                                    <i class="fas fa-times"></i> Reset
                                </button>
                                <button type="submit" class="btn btn-primary btn-sm" onclick="showLoadingSpinner()">
                                    <i class="fas fa-filter"></i> Filter
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-12 d-flex justify-content-between align-items-center">
                                <!-- Tombol Kembali di kiri -->
                                <button class="btn btn-secondary mb-0" onclick="history.back()">
                                    <i class="fas fa-circle-left me-1"></i>
                                    <span class="font-weight-bold">Kembali</span>
                                </button>

                                <!-- Tombol Print PDF di kanan -->
                                <button id="btn-print-pdf" class="d-none"></button>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" id="trenTable">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>DO</th>
                                            <th>Tanggal</th>
                                            <th>COA Number</th>
                                            <th>Lot</th>
                                            <th>Customer</th>
                                            <th>Name</th> <!-- Kolom Name ditambahkan di sini -->
                                            <th>Material</th>
                                            @if (isset($mic_names) && count($mic_names) > 0)
                                                @foreach ($mic_names as $mic)
                                                    <th>{{ $mic }}</th>
                                                @endforeach
                                            @else
                                                <th class="text-danger">MIC Names Tidak Ditemukan</th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_result as $row)
                                            <tr>
                                                <td>{{ $row['invoice'] }}</td>
                                                <td>{{ $row['tanggal'] }}</td>
                                                <td>{{ $row['coa_number'] }}</td>
                                                <td>{{ $row['lot'] }}</td>
                                                <td>{{ $row['customer'] }}</td>
                                                <td>{{ $row['customer_name'] ?? '-' }}</td>
                                                <td>{{ $row['material'] }}</td>
                                                @if (isset($mic_names) && count($mic_names) > 0)
                                                    @foreach ($mic_names as $mic)
                                                        @php
                                                            // Cari nilai MIC Name di dalam 'details'
                                                            $micValue =
                                                                collect($row['details'])->firstWhere('mic_name', $mic)[
                                                                    'new_value'
                                                                ] ?? '-';
                                                        @endphp
                                                        <td class="text-end">{{ $micValue }}</td>
                                                    @endforeach
                                                @else
                                                    <td class="text-danger" colspan="{{ count($mic_names) + 6 }}">Data
                                                        MIC
                                                        Tidak Tersedia</td>
                                                @endif
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            @foreach ($mic_names as $mic)
                <div class="col-md-6">
                    <div class="card mt-3">
                        <div class="card-body">
                            <div id="chart_{{ Str::slug($mic, '_') }}" style="width: 100%; height: 400px;"></div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    </div>

@endsection

@push('js')
    <script src="{{ asset('/') }}assets/js/echarts.min.js"></script>
    <script>
        $(document).ready(function() {
            let table = $('#trenTable').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i> <span class="font-weight-bold">Excel</span>',
                    autoFilter: true,
                    sheetName: 'Exported data',
                    exportOptions: {
                        columns: ':visible'
                    },
                }, {
                    text: '<i class="fas fa-file-pdf me-1 text-danger"></i> <span class="font-weight-bold">Print PDF</span>',
                    action: function() {
                        // Trigger event yang kamu sudah punya
                        $('#btn-print-pdf').trigger('click');
                    }
                }]
            });

            // Set warna tombol DataTables
            $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
        });
        document.addEventListener('DOMContentLoaded', function() {
            var tableResult = {!! json_encode($table_result) !!};
            console.log("Data tableResult:", tableResult);

            @foreach ($mic_names as $mic)
                var chartElement = document.getElementById('chart_{{ Str::slug($mic, '_') }}');
                if (!chartElement) {
                    console.error("Element not found: chart_{{ Str::slug($mic, '_') }}");
                    return;
                }

                var chart_{{ Str::slug($mic, '_') }} = echarts.init(chartElement);

                var dates = tableResult.map(row => row.tanggal);
                var xLabels = tableResult.map((row, index) => index + 1);

                var tooltips = tableResult.map(row => row.tanggal_tooltip);

                var micData = [];
                var upperLimit = null;
                var lowerLimit = null;

                tableResult.forEach(row => {
                    let detail = row.details.find(detail => detail.mic_name === '{{ $mic }}');
                    if (detail) {
                        micData.push(parseFloat(detail.new_value));

                        if (upperLimit === null) upperLimit = parseFloat(detail.upper_limit);
                        if (lowerLimit === null) lowerLimit = parseFloat(detail.lower_limit);
                    } else {
                        micData.push(null);
                    }
                });

                var option_{{ Str::slug($mic, '_') }} = {
                    title: {
                        text: '{{ $mic }}',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            const index = params.dataIndex;
                            const tooltipDate = tooltips[index];
                            const value = params.value;
                            return `${tooltipDate}<br/>Nilai: ${value}`;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xLabels,
                        axisLabel: {
                            formatter: function(value) {
                                return value; // tampilkan langsung angka urutan
                            }
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '{{ $mic }}',
                        type: 'scatter',
                        data: micData,
                        symbolSize: 10,
                        itemStyle: {
                            color: '#42a5f5'
                        },
                        markLine: {
                            symbol: 'none',
                            label: {
                                position: 'end'
                            },
                            lineStyle: {
                                type: 'dashed'
                            },
                            data: [{
                                    yAxis: upperLimit,
                                    label: {
                                        formatter: 'Upper Limit'
                                    },
                                    lineStyle: {
                                        color: '#fbc02d'
                                    }
                                },
                                {
                                    yAxis: lowerLimit,
                                    label: {
                                        formatter: 'Lower Limit'
                                    },
                                    lineStyle: {
                                        color: '#f48fb1'
                                    }
                                }
                            ]
                        }
                    }]
                };

                setTimeout(() => {
                    chart_{{ Str::slug($mic, '_') }}.setOption(option_{{ Str::slug($mic, '_') }});
                }, 500);
            @endforeach
        });

        document.getElementById('btn-print-pdf').addEventListener('click', function() {
            const tableResult = {!! json_encode($table_result) !!};
            const micNames = {!! json_encode($mic_names) !!};

            // Header kolom utama
            const header = [{
                    text: 'DO',
                    style: 'tableHeader'
                },
                {
                    text: 'Tanggal',
                    style: 'tableHeader'
                },
                {
                    text: 'COA No.',
                    style: 'tableHeader'
                },
                {
                    text: 'Lot',
                    style: 'tableHeader'
                },
                {
                    text: 'Customer',
                    style: 'tableHeader'
                },
                {
                    text: 'Material',
                    style: 'tableHeader'
                },
                ...micNames.map(mic => ({
                    text: mic,
                    style: 'tableHeader'
                }))
            ];

            const body = [header];

            // Isi tabel
            tableResult.forEach(row => {
                const detailMap = {};
                row.details.forEach(item => {
                    detailMap[item.mic_name] = item.new_value;
                });

                const rowData = [
                    row.invoice,
                    row.tanggal,
                    row.coa_number,
                    row.lot,
                    row.customer,
                    row.material,
                    ...micNames.map(mic => ({
                        text: detailMap[mic] ?? '-',
                        alignment: 'right'
                    }))
                ];

                body.push(rowData);
            });

            // Ambil chart sebagai gambar
            const chartRows = [];
            let currentRow = [];

            micNames.forEach((mic, index) => {
                const chartId = 'chart_' + mic.toLowerCase().replace(/\s+/g, '_');
                const chartCanvas = document.getElementById(chartId)?.querySelector('canvas');

                if (chartCanvas) {
                    const dataUrl = chartCanvas.toDataURL('image/png');
                    currentRow.push({
                        image: dataUrl,
                        width: 360,
                        height: 240,
                        margin: [5, 10, 5, 10]
                    });

                    // group per 2 chart
                    if ((index + 1) % 3 === 0 || index === micNames.length - 1) {
                        chartRows.push({
                            columns: currentRow
                        });
                        currentRow = [];
                    }
                }
            });

            // Dokumen PDF
            const docDefinition = {
                content: [{
                        text: 'Laporan Hasil COA',
                        style: 'header'
                    },
                    {
                        table: {
                            headerRows: 1,
                            widths: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', ...micNames.map(() =>
                                'auto')],
                            body: body
                        },
                        layout: {
                            hLineWidth: () => 0.5,
                            vLineWidth: () => 0.5,
                            paddingLeft: () => 2,
                            paddingRight: () => 2,
                            paddingTop: () => 2,
                            paddingBottom: () => 2,
                        },
                        alignment: 'center',
                        margin: [0, 20, 0, 20]
                    },
                    ...chartRows
                ],
                styles: {
                    header: {
                        fontSize: 16,
                        bold: true,
                        alignment: 'center',
                        margin: [0, 10, 0, 10]
                    },
                    subheader: {
                        fontSize: 10,
                        alignment: 'right'
                    },
                    tableHeader: {
                        bold: true,
                        fontSize: 12,
                        color: 'white',
                        fillColor: '#00b7bd',
                        alignment: 'center'
                    }
                },
                defaultStyle: {
                    fontSize: 10
                },
                pageOrientation: 'landscape',
                pageSize: 'A3',
                pageMargins: [20, 20, 20, 20] // supaya tabel lebih lega kiri-kanan
            };

            pdfMake.createPdf(docDefinition).open();
        });

        $('.select2').select2({
            width: '100%',
        });
        $(document).ready(function() {
            $('.select2').select2();

            $('#filter-do-number').on('change', function() {
                const selectedDo = $(this).val();

                $.get("{{ route('get.material.by.do') }}", {
                    do_number: selectedDo
                }, function(data) {
                    const $material = $('#filter-material');
                    $material.empty();
                    $material.append('<option value="%">Semua Material</option>');

                    data.forEach(function(m) {
                        $material.append(
                            `<option value="${m.material}">${m.material}</option>`);
                    });

                    $material.val('%').trigger('change');
                })
            });

            $('#filter-material').on('change', function() {
                const selectedMaterial = $(this).val();

                $.get("{{ route('ajax.customers.by.material') }}", {
                    material: selectedMaterial
                }, function(data) {
                    const $customer = $('#filter-customer');
                    $customer.empty();
                    $customer.append('<option value="%">Semua Customer</option>');

                    data.forEach(function(c) {
                        $customer.append(`<option value="${c.id}">${c.customer}</option>`);
                    });

                    $customer.val('%').trigger('change');
                });
            });
        });
    </script>
@endpush