@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <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</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="card">
                    <form role="form" method="GET" action="/srcprm/search" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">{{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="line_id" class="form-label">Line</label>
                                        <select name="line_id" id="line_id" class="form-select" onchange="cekBeam()">
                                            <option value=""></option>
                                            @foreach ($line as $ln)
                                                <option value="{{ $ln->id }}">{{ $ln->nama_line }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2" style="display: none" id="cekBeam">
                                    <div class="mb-3">
                                        <label for="tipe_beam" class="form-label">Jumlah Beam</label>
                                        <select name="tipe_beam" id="tipe_beam" class="form-select">
                                            <option value=""></option>
                                            <option value="Single Beam">Single Beam</option>
                                            <option value="Double Beam">Double Beam</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="raw_material" class="form-label">Raw Material</label>
                                        <select name="raw_material" id="raw_material" class="form-select">
                                            <option value=""></option>
                                            @foreach ($bahan_baku as $mm)
                                                <option value="{{ $mm->id }}">{{ $mm->nama_bahan_baku }}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="item_id" class="form-label">Item / No Roll</label>
                                        <input type="text" class="form-control upper" id="item_id" name="item_id" placeholder="Cari Item / No Roll...">
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="customer" class="form-label">Customer</label>
                                        <input type="text" class="form-control" id="customer" name="customer">
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="throughput" class="form-label">Throughput</label>
                                        <input type="number" class="form-control" id="throughput" name="throughput">
                                    </div>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                            <button type="button" class="btn btn-primary m-0" id="btnSearch"><i
                                    class="fas fa-magnifying-glass me-1"></i>Search</button>
                            <button type="button" class="btn btn-warning m-0" id="btnReset"><i
                                    class="fas fa-eraser me-1"></i>Reset</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        {{-- Placeholder ketika belum melakukan pencarian (tanpa class .alert agar tidak tertutup otomatis) --}}
                        <div id="search-placeholder" class="text-center py-5 my-3 rounded-3" style="background: #f1f3f5;">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
                                style="width: 72px; height: 72px; background: #e9ecef;">
                                <i class="fas fa-search text-secondary" style="font-size: 1.75rem;"></i>
                            </div>
                            <h6 class="text-secondary fw-semibold mb-1">Belum Ada Data yang Ditampilkan</h6>
                            <p class="text-secondary mb-0" style="font-size: 0.875rem;">Silakan pilih filter (Line, Raw
                                Material, Item, dll.) lalu klik <strong>Search</strong> untuk menampilkan data parameter.
                            </p>
                        </div>

                        {{-- Container tabel hasil pencarian (hanya muncul setelah tombol Search ditekan dan data ditemukan) --}}
                        <div class="table-responsive" id="table-container" style="display: none;">
                            <table class="table display w-100" id="tbl-result-search">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        function cekBeam() {
            let line = document.getElementById('line_id');
            if (!line || line.selectedIndex < 0) return;
            let selectedLine = line.options[line.selectedIndex].text;
            let cek_beam = document.getElementById('cekBeam');
            if (!cek_beam) return;

            if (selectedLine === 'Line 15') {
                cek_beam.style.display = 'block';
            } else {
                cek_beam.style.display = 'none';
                $('select[name="tipe_beam"]').val('');
            }
        }

        $(document).ready(function() {

            // Array of input IDs to listen for the Enter key (hanya input teks/angka, bukan select)
            const inputIds = ['item_id', 'throughput', 'customer'];

            // Add keydown event listener to each input
            inputIds.forEach(function(id) {
                $('#' + id).on('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault(); // Menghindari form submit jika dalam form
                        $('#btnSearch').click(); // Menjalankan fungsi tombol
                    }
                });
            });

            $('#btnSearch').on('click', function() {
                let $btn = $(this);
                let originalText = $btn.html();
                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Searching...');

                let line_id = $('#line_id').val();
                let material_id = $('#raw_material').val();
                let item_id = $('#item_id').val();
                let throughput = $('#throughput').val();
                let tipe_beam = $('#tipe_beam').val() || '';
                let customer = $('#customer').val();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '{{ URL::to('/') }}/srcprm/search',
                    method: 'GET',
                    data: {
                        line_id: line_id,
                        raw_material: material_id,
                        item_id: item_id,
                        throughput: throughput,
                        tipe_beam: tipe_beam,
                        customer: customer
                    },
                    success: function(response) {
                        $btn.prop('disabled', false).html(originalText);
                        if (response.status === 'success' && response.data && response.data
                            .length > 0) {
                            $('#search-placeholder').hide();
                            $('#table-container').show();
                            renderTable(response.data, response.columns);
                        } else {
                            clearTable();
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Data Tidak Ditemukan',
                                    text: 'Tidak ada data parameter yang sesuai dengan kriteria filter pencarian.',
                                    confirmButtonColor: '#028284'
                                });
                            }
                        }
                    },
                    error: function(error) {
                        $btn.prop('disabled', false).html(originalText);
                        console.error(error);
                        clearTable();
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Memuat Data',
                                text: 'Terjadi kesalahan saat memproses data parameter.',
                                confirmButtonColor: '#028284'
                            });
                        }
                    }
                });
            });

            function clearTable() {
                if ($.fn.DataTable.isDataTable('#tbl-result-search')) {
                    $('#tbl-result-search').DataTable().clear().destroy();
                }
                $('#table-container').html(
                    '<table class="table display w-100" id="tbl-result-search"><thead class="thead-light" style="background-color: #00b7bd4f;"></thead><tbody></tbody></table>'
                    );
                $('#table-container').hide();
                $('#search-placeholder').show();
            }

            function renderTable(list, columns) {
                if ($.fn.DataTable.isDataTable('#tbl-result-search')) {
                    $('#tbl-result-search').DataTable().clear().destroy();
                }
                // Fresh table element untuk menghindari konflik DOM/cache thead antar pencarian
                $('#table-container').html(
                    '<table class="table display w-100" id="tbl-result-search"><thead class="thead-light" style="background-color: #00b7bd4f;"></thead><tbody></tbody></table>'
                    );

                // Pastikan setiap definisi kolom memiliki defaultContent agar DataTables bebas warning TN/4
                var colsWithDefaults = (columns || []).map(function(col) {
                    return Object.assign({
                        defaultContent: ""
                    }, col);
                });

                // Bangun ulang header thead secara murni dinamis dari response.columns
                var theadHtml = '<tr>';
                colsWithDefaults.forEach(function(col) {
                    var cls = col.className ? ` class="${col.className}"` : '';
                    theadHtml += `<th${cls}>${col.title}</th>`;
                });
                theadHtml += '</tr>';
                $('#tbl-result-search thead').html(theadHtml);

                $('#tbl-result-search').DataTable({
                    "scrollX": true,
                    "autoWidth": false,
                    "destroy": true,
                    "lengthChange": true,
                    "searching": true,
                    "paging": true,
                    "info": true,
                    "ordering": true,
                    "dom": 'frtip',
                    "data": list || [],
                    "columns": colsWithDefaults,
                    "columnDefs": [{
                        "defaultContent": "",
                        "targets": "_all"
                    }],
                    "language": {
                        "emptyTable": "Tidak ada data yang tersedia",
                        "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        "infoEmpty": "Menampilkan 0 data",
                        "infoFiltered": "(difilter dari _MAX_ total data)",
                        "lengthMenu": "Tampilkan _MENU_ data",
                        "search": "Cari Cepat:",
                        "paginate": {
                            "first": "Pertama",
                            "last": "Terakhir",
                            "next": "Selanjutnya",
                            "previous": "Sebelumnya"
                        }
                    }
                });
            }

            $('#btnReset').click(function() {
                $('select[name="line_id"]').val('');
                $('select[name="tipe_beam"]').val('');
                let cek_beam = document.getElementById('cekBeam');
                if (cek_beam) cek_beam.style.display = 'none';
                $('select[name="raw_material"]').val('');
                $('input[name="item_id"]').val('');
                $('input[name="customer"]').val('');
                $('input[name="throughput"]').val('');
                clearTable();
            });

        });
    </script>
@endpush